import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { useState, type FormEvent } from "react";
import { FileText, ShieldCheck, Upload, XCircle } from "lucide-react";
import { toast } from "sonner";

import { AuthLayout } from "@/components/auth-layout";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { requireAuth } from "@/lib/auth/guards";
import { listMyKycDocumentsFn, submitKycFn } from "@/lib/auth/auth.functions";
import { ACCOUNT_STATUS_LABELS } from "@/lib/auth/roles";
import { useAuth } from "@/lib/auth/use-auth";

type KycDocumentType = "INEC_CERTIFICATE" | "ADMIN_IDENTITY" | "AUTHORIZATION_LETTER";

export const Route = createFileRoute("/onboarding/kyc")({
  beforeLoad: ({ context, location }) => requireAuth(context, location),
  head: () => ({ meta: [{ title: "KYC verification — VotersAlert" }] }),
  component: KycOnboardingPage,
});

const REQUIRED_DOCS: Array<{ type: KycDocumentType; title: string; hint: string }> = [
  {
    type: "INEC_CERTIFICATE",
    title: "INEC Registration Certificate",
    hint: "PDF, PNG, or JPG showing current registration.",
  },
  {
    type: "ADMIN_IDENTITY",
    title: "Primary administrator identity",
    hint: "NIN slip or PVC for the account administrator.",
  },
  {
    type: "AUTHORIZATION_LETTER",
    title: "Official Letter of Authorization",
    hint: "Signed letter authorizing platform access.",
  },
];

function KycOnboardingPage() {
  const { user, setUser, refresh } = useAuth();
  const [files, setFiles] = useState<Partial<Record<KycDocumentType, File>>>({});
  const [loading, setLoading] = useState(false);
  const docsQuery = useQuery({ queryKey: ["kyc", "mine"], queryFn: () => listMyKycDocumentsFn() });
  const uploaded = docsQuery.data ?? [];
  const completeCount = REQUIRED_DOCS.filter(
    (doc) => files[doc.type] || uploaded.some((u) => u.type === doc.type),
  ).length;
  const status = user?.accountStatus ?? "PENDING_SUBMISSION";

  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const missing = REQUIRED_DOCS.filter(
      (doc) => !files[doc.type] && !uploaded.some((u) => u.type === doc.type),
    );
    if (missing.length) {
      toast.error("Upload all required KYC documents before submitting.");
      return;
    }
    setLoading(true);
    try {
      const result = await submitKycFn({
        data: {
          documents: REQUIRED_DOCS.map((doc) => {
            const file = files[doc.type];
            const existing = uploaded.find((u) => u.type === doc.type);
            return {
              type: doc.type,
              fileName: file?.name ?? existing?.fileName ?? doc.title,
              mimeType: file?.type ?? existing?.mimeType,
              fileSize: file?.size ?? existing?.fileSize ?? 1,
            };
          }),
        },
      });
      if (result.user) setUser(result.user as never);
      await refresh();
      toast.success("Application submitted", {
        description: "Your documents are under manual compliance review.",
      });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not submit KYC documents.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <AuthLayout
      title="Political organization verification"
      subtitle="Submit KYC documents before campaigns, audiences, and wallet access are enabled."
      footer={
        <Link to="/" className="text-primary font-medium hover:underline">
          Back to dashboard
        </Link>
      }
    >
      <div className="space-y-4">
        <div className="rounded-xl border bg-muted/30 p-4 space-y-3">
          <div className="flex items-center justify-between gap-2">
            <div className="flex items-center gap-2 text-sm font-medium">
              <ShieldCheck className="h-4 w-4 text-primary" /> Verification status
            </div>
            <Badge variant="outline">{ACCOUNT_STATUS_LABELS[status]}</Badge>
          </div>
          <Progress value={(completeCount / REQUIRED_DOCS.length) * 100} className="h-1.5" />
          <p className="text-xs text-muted-foreground">
            {status === "UNDER_REVIEW"
              ? "Pending verification: compliance is reviewing your submission. We'll notify you when approved."
              : status === "VERIFIED"
                ? "Your organization is verified. Platform access is enabled."
                : status === "REJECTED"
                  ? `Rejected: ${user?.accountRejectionReason ?? "Please resubmit corrected documents."}`
                  : "Upload all three required files to start manual review."}
          </p>
        </div>

        {status !== "VERIFIED" && status !== "UNDER_REVIEW" ? (
          <form onSubmit={onSubmit} className="space-y-3">
            {REQUIRED_DOCS.map((doc) => (
              <label key={doc.type} className="block rounded-lg border p-3 hover:border-primary/50">
                <div className="flex items-start gap-3">
                  <div className="rounded-md bg-primary/10 p-2 text-primary">
                    <FileText className="h-4 w-4" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="text-sm font-medium">{doc.title}</div>
                    <div className="text-[11px] text-muted-foreground">{doc.hint}</div>
                    <input
                      type="file"
                      accept=".pdf,.png,.jpg,.jpeg"
                      className="mt-2 text-xs"
                      onChange={(e) => {
                        const file = e.currentTarget.files?.[0];
                        if (file) setFiles((prev) => ({ ...prev, [doc.type]: file }));
                      }}
                    />
                    {(files[doc.type] || uploaded.some((u) => u.type === doc.type)) && (
                      <div className="mt-1 text-[11px] text-success">Document attached</div>
                    )}
                  </div>
                </div>
              </label>
            ))}
            <Button type="submit" className="w-full gap-1.5" disabled={loading}>
              <Upload className="h-4 w-4" /> {loading ? "Submitting…" : "Submit for manual review"}
            </Button>
          </form>
        ) : status === "VERIFIED" ? (
          <Button className="w-full" asChild>
            <Link to="/campaigns">Create your first campaign</Link>
          </Button>
        ) : (
          <div className="rounded-lg border border-primary/30 bg-primary/5 p-3 text-xs text-muted-foreground">
            <ShieldCheck className="mb-2 h-4 w-4 text-primary" /> Pending verification. Campaigns,
            audiences, and wallet access remain locked until approval.
          </div>
        )}

        {status === "REJECTED" && (
          <div className="flex items-center gap-2 text-xs text-destructive">
            <XCircle className="h-3.5 w-3.5" /> Please correct the issue above and resubmit.
          </div>
        )}
      </div>
    </AuthLayout>
  );
}