"use client";
import React, { useState, useEffect } from "react";
import { Modal } from "@/src/components/admin/ui/modal";
import { useModal } from "@/src/hooks/admin/useModal";
import { CopyIcon, LinkIcon } from "lucide-react";
import Input from "@/src/components/admin/form/input/InputField";
import Button from "../../../../../../../components/admin/ui/button/Button";
import { generateQuotationLink } from "@/src/services/admin/services";
import { toast } from "react-hot-toast";

interface Props {
  applicationId: number;
}

export default function DocumentLinkModal({ applicationId }: Props) {
  const { isOpen, openModal, closeModal } = useModal();
  const [documentLink, setDocumentLink] = useState("");
  const [loading, setLoading] = useState(false);

  const handleGenerateLink = async () => {
    setLoading(true);
    try {
      const response = await generateQuotationLink(applicationId);
      const link = response.data?.data?.link;
      setDocumentLink(link);
      toast.success("Link generated successfully!");
    } catch (error: any) {
      toast.error(error.response?.data?.message || "Failed to generate link");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (isOpen && !documentLink) {
      handleGenerateLink();
    }
  }, [isOpen]);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(documentLink);
      toast.success("Link copied to clipboard!");
    } catch (err) {
      toast.error("Failed to copy link");
    }
  };

  return (
    <div className="py-4">
      <Button
        variant="custom"
        onClick={openModal}
        className="flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white font-semibold px-6 py-2 rounded-lg transition"
      >
        Document Link
        <LinkIcon size={16} />
      </Button>

      <Modal
        isOpen={isOpen}
        onClose={closeModal}
        className="max-w-md w-full overflow-hidden rounded-2xl shadow-2xl transition-all"
      >
        <div className="bg-white px-6 py-7 sm:p-8">
          <div className="mb-6">
            <h4 className="text-2xl font-extrabold text-gray-900 tracking-tight">
              Share Document Link
            </h4>
            <p className="mt-1 text-gray-500">
              Share this link to allow quotation uploads without logging in.
            </p>
          </div>

          {loading ? (
            <div className="flex justify-center py-4">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-teal-600"></div>
            </div>
          ) : (
            <div className="relative">
              <Input
                value={documentLink}
                readOnly
                className="pr-14 text-gray-700 cursor-pointer"
              />
              <button
                type="button"
                onClick={handleCopy}
                className="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center gap-1 bg-teal-600 hover:bg-teal-700 text-white text-sm px-3 py-1.5 rounded-lg transition"
              >
                <CopyIcon className="w-4 h-4" />
                Copy
              </button>
            </div>
          )}
        </div>
      </Modal>
    </div>
  );
}