import { UploadCloud, FileCheck2 } from "lucide-react";
import type { UseFormReturn } from "react-hook-form";
import type { SellerWizardValues } from "./seller.schema";
import type { SavedDocuments } from "./page";

type DocField =
  | "gst_certificate"
  | "pan_document"
  | "registration_certificate"
  | "address_proof"
  | "cancelled_cheque"
  | "other_documents";

const docCards: Array<{ key: DocField; label: string }> = [
  { key: "gst_certificate", label: "GST Certificate" },
  { key: "pan_document", label: "PAN" },
  { key: "registration_certificate", label: "Registration Certificate" },
  { key: "address_proof", label: "Address Proof" },
  { key: "cancelled_cheque", label: "Cancelled Cheque" },
  { key: "other_documents", label: "Other Documents" },
];

export default function StepDocuments({
  form,
  savedDocuments = {},
}: {
  form: UseFormReturn<SellerWizardValues>;
  /** Already on file from an earlier save — the file inputs themselves are empty. */
  savedDocuments?: SavedDocuments;
}) {
  const { setValue, watch } = form;

  return (
    <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
      <h3 className="mb-4 text-sm font-semibold text-gray-900">Business Documents</h3>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {docCards.map((doc) => {
          const selected = watch(doc.key) as File | null;
          const savedUrl = savedDocuments[doc.key];
          const inputId = `doc-${doc.key}`;

          return (
            <label
              key={doc.key}
              htmlFor={inputId}
              className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:border-[#CC1414]"
            >
              <input
                id={inputId}
                type="file"
                className="hidden"
                onChange={(event) => {
                  const file = event.target.files?.[0] ?? null;
                  setValue(doc.key, file, { shouldTouch: true, shouldDirty: true, shouldValidate: true });
                }}
              />

              <div className="mb-2 flex items-center gap-2 text-gray-700">
                {selected || savedUrl ? (
                  <FileCheck2 className="h-4 w-4 text-[#CC1414]" />
                ) : (
                  <UploadCloud className="h-4 w-4" />
                )}
                <p className="text-sm font-medium">{doc.label}</p>
              </div>

              <p className="text-xs text-gray-500">
                {selected
                  ? selected.name
                  : savedUrl
                    ? "Uploaded — click to replace"
                    : "Click to upload PDF, JPG, or PNG"}
              </p>

              {!selected && savedUrl ? (
                <a
                  href={savedUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={(event) => event.stopPropagation()}
                  className="mt-1 inline-block text-xs font-medium text-[#CC1414] hover:underline"
                >
                  View uploaded file
                </a>
              ) : null}
            </label>
          );
        })}
      </div>
    </div>
  );
}