import { Button } from "@/shared/common/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/shared/common/ui/dialog";
import { t } from "i18next";
import { Maximize2, X } from "lucide-react";
import { useRef, useState } from "react";
import SignaturePad from "react-signature-canvas";
import { toast } from "sonner";

export default function SignatureForm({
  onSubmit,
  onCancel,
}: {
  onSubmit: (dataUrl: string) => void;
  onCancel: () => void;
}) {
  const sigPadRef = useRef<SignaturePad>(null);
  const [maximized, setMaximized] = useState(false);

  const handleSave = () => {
    if (!sigPadRef.current?.isEmpty()) {
      onSubmit(sigPadRef?.current?.toDataURL("image/png") || "");
    } else {
      toast.error("please add a signature");
    }
  };

  return (
    <>
      {/* Inline Signature Pad (Default View) */}
      {!maximized && (
        <div className="flex flex-col w-full max-w-xxl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-4 sm:p-6 space-y-3 transition-all">
          {/* Header with Maximize button */}
          <div className="flex justify-between items-center w-full">
            <h3 className="text-base sm:text-lg font-semibold dark:text-gray-200">
              {t("ApprovalPage.signature")}
            </h3>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setMaximized(true)}
              title="Maximize"
              className="hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <Maximize2 className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
            </Button>
          </div>

          {/* Signature Canvas */}
          <div className="w-full h-48 sm:h-56 md:h-64 border dark:border-gray-600 rounded-md overflow-hidden">
            <SignaturePad
              ref={sigPadRef}
              penColor="blue"
              canvasProps={{
                className:
                  "w-full h-full bg-white cursor-crosshair touch-none rounded-md",
              }}
            />
          </div>

          {/* Action Buttons */}
          <div className="flex flex-wrap justify-center sm:justify-end gap-2 pt-2">
            <Button
              onClick={() => sigPadRef.current?.clear()}
              variant="outline"
              className="text-sm sm:text-base dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
            >
              {t("userIncoming.Clear")}
            </Button>
            <Button
              onClick={handleSave}
              className="bg-primary-600 hover:bg-primary-700 text-white text-sm sm:text-base"
            >
              {t("delegation.save")}
            </Button>
            <Button
              onClick={onCancel}
              className="bg-gray-500 hover:bg-gray-600 text-white text-sm sm:text-base"
            >
              {t("addRecord.Cancel")}
            </Button>
          </div>
        </div>
      )}

      {/* Maximized Modal (Full Screen View) */}
      <Dialog open={maximized} onOpenChange={setMaximized}>
        <DialogContent className="w-[95vw] h-[85vh] sm:w-[90vw] sm:h-[80vh] flex flex-col p-4 sm:p-6 rounded-lg bg-white dark:bg-gray-800">
          <DialogHeader className="flex justify-between items-center border-b dark:border-gray-700 pb-2">
            <DialogTitle className="text-lg sm:text-xl font-semibold dark:text-gray-200">
              {t("convert.drawSig")}
            </DialogTitle>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setMaximized(false)}
              className="hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <X className="w-5 h-5 dark:text-gray-200" />
            </Button>
          </DialogHeader>

          {/* Responsive Canvas */}
          <div className="flex-1 flex items-center justify-center py-4">
            <div className="w-full h-full max-h-[60vh] sm:max-h-[65vh] border dark:border-gray-600 rounded-md overflow-hidden">
              <SignaturePad
                ref={sigPadRef}
                penColor="blue"
                canvasProps={{
                  className:
                    "w-full h-full bg-white cursor-crosshair rounded-md touch-none",
                }}
              />
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex flex-wrap justify-center sm:justify-end gap-2 pt-2 border-t dark:border-gray-700 mt-auto">
            <Button
              onClick={() => sigPadRef.current?.clear()}
              variant="outline"
              className="text-sm sm:text-base dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
            >
              {t("userIncoming.Clear")}
            </Button>
            <Button
              onClick={handleSave}
              className="bg-primary-600 hover:bg-primary-700 text-white text-sm sm:text-base"
            >
              {t("delegation.save")}
            </Button>
            <Button
              onClick={() => {
                setMaximized(false);
                onCancel();
              }}
              className="bg-gray-500 hover:bg-gray-600 text-white text-sm sm:text-base"
            >
              {t("addRecord.Cancel")}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}
