dmenu-admin/src/pages/settings/components/QrCodeSettings.tsx

import Button from "@/components/Button";
import { MENU_SITE_ORIGIN } from "@/config/menuPreview";
import { DocumentDownload } from "iconsax-react";
import { QRCodeCanvas } from "qrcode.react";
import { useMemo, useRef, type FC } from "react";
import { toast } from "react-toastify";
import { useGetRestaurant } from "../hooks/useSettingData";

const normalizeMenuUrl = (domain?: string | null, slug?: string | null): string => {
  const trimmedDomain = domain?.trim();

  if (trimmedDomain) {
    if (/^https?:\/\//i.test(trimmedDomain)) {
      return trimmedDomain.replace(/\/+$/, "");
    }
    return `https://${trimmedDomain.replace(/\/+$/, "")}`;
  }

  if (slug) {
    return `${MENU_SITE_ORIGIN}/${slug}`;
  }

  return "";
};

const QrCodeSettings: FC = () => {
  const { data: restaurant, isLoading } = useGetRestaurant();
  const canvasWrapperRef = useRef<HTMLDivElement>(null);

  const menuUrl = useMemo(
    () => normalizeMenuUrl(restaurant?.data?.domain, restaurant?.data?.slug),
    [restaurant?.data?.domain, restaurant?.data?.slug],
  );

  const handleDownload = () => {
    const canvas = canvasWrapperRef.current?.querySelector("canvas");
    if (!canvas) {
      toast.error("QR کد آماده نیست");
      return;
    }

    const link = document.createElement("a");
    const fileName = restaurant?.data?.slug || restaurant?.data?.name || "menu";
    link.download = `qr-${fileName}.png`;
    link.href = canvas.toDataURL("image/png");
    link.click();
    toast.success("QR کد با موفقیت دانلود شد");
  };

  if (isLoading) {
    return (
      <div className="bg-white rounded-4xl p-8">
        <div className="text-sm text-gray-500">در حال بارگذاری...</div>
      </div>
    );
  }

  if (!menuUrl) {
    return (
      <div className="bg-white rounded-4xl p-8">
        <div className="text-lg font-light">QR کد منو</div>
        <p className="mt-4 text-sm text-gray-500">
          برای ساخت QR کد، ابتدا دامنه وب‌سایت را در تنظیمات عمومی وارد کنید یا از اسلاگ رستوران استفاده شود.
        </p>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-4xl p-8">
      <div className="text-lg font-light">QR کد منو</div>
      <p className="mt-2 text-sm text-gray-500">
        این QR کد به آدرس منوی دیجیتال رستوران شما لینک می‌شود. می‌توانید آن را دانلود و چاپ کنید.
      </p>

      <div className="mt-8 flex flex-col items-center gap-6">
        <div
          ref={canvasWrapperRef}
          className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm"
        >
          <QRCodeCanvas
            value={menuUrl}
            size={256}
            level="H"
            includeMargin
            bgColor="#FFFFFF"
            fgColor="#000000"
          />
        </div>

        <div className="w-full max-w-md text-center">
          <div className="text-xs text-gray-400 mb-1">آدرس منو</div>
          <a
            href={menuUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm text-primary break-all hover:underline"
            dir="ltr"
          >
            {menuUrl}
          </a>
        </div>

        <Button type="button" className="w-fit px-6" onClick={handleDownload}>
          <div className="flex gap-2 items-center">
            <DocumentDownload size={20} color="#fff" />
            <span>دانلود QR کد</span>
          </div>
        </Button>
      </div>
    </div>
  );
};

export default QrCodeSettings;