"use client";

import React, { useCallback, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { notify } from "@/lib/notify";
import Select from "react-select";
import {
  AlertCircle,
  CheckCircle2,
  Clock,
  FileImage,
  ShieldCheck,
  Trash2,
  UploadCloud,
  XCircle,
} from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { Button } from "@/components/common/Button";
import { AgentKycSkeleton } from "@/components/skeletons/AgentKycSkeleton";
import { useAgentKycFields, useAgentSubmitKyc } from "@/hooks/queries/useAgentProfile";
import { qk } from "@/lib/queryKeys";
import { cn } from "@/lib/utils";
import { useTranslation } from "@/hooks/useTranslation";

// ─── Constants ────────────────────────────────────────────────────────────────

const KYC_STATUS_MAP = {
  0: "unverified",
  1: "verified",
  2: "pending",
  3: "rejected",
} as const;

type KycStatusValue = (typeof KYC_STATUS_MAP)[keyof typeof KYC_STATUS_MAP];

const STATUS_CONFIG: Record<
  KycStatusValue,
  {
    icon: React.ElementType;
    color: string;
    bg: string;
    border: string;
    label: string;
  }
> = {
  unverified: {
    icon: AlertCircle,
    color: "text-amber-700 dark:text-amber-300",
    bg: "bg-amber-50 dark:bg-amber-500/10",
    border: "border-amber-200 dark:border-amber-500/20",
    label: "Not Submitted",
  },
  pending: {
    icon: Clock,
    color: "text-amber-600 dark:text-amber-400",
    bg: "bg-amber-50 dark:bg-amber-500/10",
    border: "border-amber-200 dark:border-amber-500/20",
    label: "Under Review",
  },
  verified: {
    icon: CheckCircle2,
    color: "text-emerald-600 dark:text-emerald-400",
    bg: "bg-emerald-50 dark:bg-emerald-500/10",
    border: "border-emerald-200 dark:border-emerald-500/20",
    label: "Verified",
  },
  rejected: {
    icon: XCircle,
    color: "text-rose-600 dark:text-rose-400",
    bg: "bg-rose-50 dark:bg-rose-500/10",
    border: "border-rose-200 dark:border-rose-500/20",
    label: "Declined",
  },
};

// ─── Upload zone ─────────────────────────────────────────────────────────────

interface UploadZoneProps {
  label: string;
  hint: string;
  file: File | null;
  preview: string | null;
  inputRef: React.RefObject<HTMLInputElement | null>;
  onFile: (f: File) => void;
  onClear: () => void;
}

function UploadZone({ label, hint, file, preview, inputRef, onFile, onClear }: UploadZoneProps) {
  const { t } = useTranslation();
  const [dragging, setDragging] = useState(false);

  const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault();
      setDragging(false);
      const dropped = e.dataTransfer.files[0];
      if (dropped && dropped.type.startsWith("image/")) onFile(dropped);
    },
    [onFile],
  );

  return (
    <div className="flex flex-col gap-1.5">
      <div className="flex items-center justify-between">
        <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">{label}</span>
        {file && (
          <button
            type="button"
            onClick={onClear}
            className="inline-flex items-center gap-1 text-xs text-rose-500 transition-colors hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300"
          >
            <Trash2 className="icon-xs" />
            {t("agent.kyc.remove")}
          </button>
        )}
      </div>

      <button
        type="button"
        onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
        onDragLeave={() => setDragging(false)}
        onDrop={handleDrop}
        onClick={() => inputRef.current?.click()}
        className={cn(
          "relative flex min-h-40 w-full cursor-pointer flex-col items-center justify-center gap-3 overflow-hidden rounded-2xl border-2 border-dashed transition-all duration-200",
          dragging
            ? "border-brand-400 bg-brand-50/80 dark:border-brand-500 dark:bg-brand-500/10"
            : "border-slate-200 bg-slate-50/60 hover:border-brand-300 hover:bg-brand-50/40 dark:border-slate-700 dark:bg-slate-800/30 dark:hover:border-brand-600 dark:hover:bg-brand-500/5",
        )}
      >
        {preview ? (
          <img
            src={preview}
            alt={label}
            className="max-h-36 w-full object-contain"
          />
        ) : (
          <>
            <span className="grid h-11 w-11 place-items-center rounded-2xl bg-slate-100 dark:bg-slate-800">
              <UploadCloud className="h-5 w-5 text-slate-400" />
            </span>
            <div className="text-center">
              <p className="text-sm font-semibold text-slate-700 dark:text-slate-200">
                {t("agent.kyc.clickOrDrop")}
              </p>
              <p className="mt-0.5 text-xs text-slate-400 dark:text-slate-500">{hint}</p>
            </div>
          </>
        )}

        <input
          ref={inputRef}
          type="file"
          accept="image/*,application/pdf"
          className="sr-only"
          onChange={(e) => {
            const f = e.target.files?.[0];
            if (f) onFile(f);
            e.target.value = "";
          }}
        />
      </button>

      {file && (
        <div className="flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 dark:border-emerald-500/20 dark:bg-emerald-500/10">
          <FileImage className="h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
          <div className="min-w-0 flex-1">
            <p className="truncate text-xs font-medium text-slate-800 dark:text-slate-200">
              {file.name}
            </p>
            <p className="text-2xs text-slate-400">
              {(file.size / 1024).toFixed(0)} KB
            </p>
          </div>
          <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-500" />
        </div>
      )}
    </div>
  );
}

// ─── Main view ────────────────────────────────────────────────────────────────

export function AgentKycView() {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const router = useRouter();
  const { data, isLoading, isError } = useAgentKycFields();
  const { mutate: submitKyc, isPending } = useAgentSubmitKyc();

  const [docType, setDocType] = useState<string>("");
  const [frontFile, setFrontFile] = useState<File | null>(null);
  const [backFile, setBackFile] = useState<File | null>(null);
  const [frontPreview, setFrontPreview] = useState<string | null>(null);
  const [backPreview, setBackPreview] = useState<string | null>(null);

  const frontRef = useRef<HTMLInputElement | null>(null);
  const backRef = useRef<HTMLInputElement | null>(null);

  function attachFile(
    file: File,
    setFile: (f: File | null) => void,
    setPreview: (p: string | null) => void,
  ) {
    setFile(file);
    const reader = new FileReader();
    reader.onloadend = () => setPreview(reader.result as string);
    reader.readAsDataURL(file);
  }

  function clearFile(
    setFile: (f: File | null) => void,
    setPreview: (p: string | null) => void,
  ) {
    setFile(null);
    setPreview(null);
  }

  function handleSubmit(e: { preventDefault(): void }) {
    e.preventDefault();
    if (!docType || !frontFile || !backFile) return;

    submitKyc(
      { document_type: docType, id_front_part: frontFile, id_back_part: backFile },
      {
        onSuccess: () => {
          qc.invalidateQueries({ queryKey: qk.agent.kycFields });
          notify(t("agent.kyc.submitting"), "success");
        },
        onError: (err: Error) => {
          notify(err.message || "Submission failed. Please try again.", "error");
        },
      },
    );
  }

  if (isLoading) return <AgentKycSkeleton />;

  if (isError) {
    return (
      <Container className="max-w-full pb-10">
        <div className="flex flex-col items-center justify-center gap-4 rounded-3xl border border-rose-200 bg-rose-50 p-16 text-center dark:border-rose-500/20 dark:bg-rose-500/10">
          <span className="grid h-14 w-14 place-items-center rounded-full bg-rose-100 dark:bg-rose-500/20">
            <XCircle className="h-7 w-7 text-rose-600 dark:text-rose-400" />
          </span>
          <div>
            <p className="font-semibold text-slate-900 dark:text-white">{t("agent.kyc.failedToLoad")}</p>
            <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
              {t("agent.kyc.failedSubtitle")}
            </p>
          </div>
        </div>
      </Container>
    );
  }

  const rawStatus = data?.kyc_status ?? 0;
  const kycStatus: KycStatusValue =
    KYC_STATUS_MAP[rawStatus as keyof typeof KYC_STATUS_MAP] ?? "unverified";
  const cfg = STATUS_CONFIG[kycStatus];
  const StatusIcon = cfg.icon;
  const canSubmit = kycStatus === "unverified" || kycStatus === "rejected";
  const isFormValid = Boolean(docType && frontFile && backFile);

  const statusLabel =
    kycStatus === "unverified" ? t("agent.kyc.statusNotSubmitted") :
    kycStatus === "pending" ? t("agent.kyc.statusUnderReview") :
    kycStatus === "verified" ? t("agent.kyc.statusVerified") :
    kycStatus === "rejected" ? t("agent.kyc.statusDeclined") : cfg.label;

  const docOptions = [
    { value: "NID", label: t("agent.kyc.docNid") },
    { value: "Passport", label: t("agent.kyc.docPassport") },
    { value: "Driving License", label: t("agent.kyc.docDrivingLicense") },
  ];

  return (
    <Container className="max-w-full space-y-6 pb-10">
      {/* Page header */}
      <header className="flex items-center gap-4">
        <div className="icon-box-md grid place-items-center rounded-2xl bg-gradient-to-br from-brand-500 to-accent-500 text-white shadow-lg">
          <ShieldCheck className="icon-xl" />
        </div>
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">{t("agent.kyc.title")}</h1>
          <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t("agent.kyc.subtitle")}</p>
        </div>
      </header>

      {/* Status banner — only for unverified; verified/pending have dedicated cards */}
      {canSubmit && <div
        className={cn(
          "flex items-start gap-4 rounded-2xl border p-5",
          cfg.bg,
          cfg.border,
        )}
      >
        <StatusIcon className={cn("mt-0.5 h-5 w-5 shrink-0", cfg.color)} />
        <div className="min-w-0 flex-1">
          <p className={cn("text-sm font-bold", cfg.color)}>{statusLabel}</p>
        </div>
      </div>}

      {/* Verified — success state */}
      {kycStatus === "verified" && (
        <Card>
          <CardContent className="flex flex-col items-center gap-5 py-14 text-center">
            <span className="grid h-16 w-16 place-items-center rounded-full bg-emerald-100 ring-8 ring-emerald-50 dark:bg-emerald-500/15 dark:ring-emerald-500/5">
              <CheckCircle2 className="h-8 w-8 text-emerald-600 dark:text-emerald-400" />
            </span>
            <div>
              <p className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
                {t("agent.kyc.verifiedTitle")}
              </p>
              <p className="mt-1.5 text-sm text-slate-500 dark:text-slate-400">
                {t("agent.kyc.verifiedSubtitle")}
              </p>
            </div>
            <Button size="md" onClick={() => router.push("/agent/dashboard")}>
              {t("agent.kyc.goToDashboard")}
            </Button>
          </CardContent>
        </Card>
      )}

      {/* Pending — waiting state */}
      {kycStatus === "pending" && (
        <Card>
          <CardContent className="flex flex-col items-center gap-5 py-14 text-center">
            <span className="grid h-16 w-16 place-items-center rounded-full bg-amber-100 ring-8 ring-amber-50 dark:bg-amber-500/15 dark:ring-amber-500/5">
              <Clock className="h-8 w-8 text-amber-600 dark:text-amber-400" />
            </span>
            <div>
              <p className="text-xl font-bold text-slate-900 dark:text-white">
                {t("agent.kyc.pendingTitle")}
              </p>
              <p className="mt-1.5 text-sm text-slate-500 dark:text-slate-400">
                {t("agent.kyc.pendingSubtitle")}
              </p>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Submit form — unverified / rejected */}
      {canSubmit && (
        <Card>
          <CardContent>
            <div>
              <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
                {t("agent.kyc.formTitle")}
              </h2>
              <p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">
                {t("agent.kyc.formSubtitle")}
              </p>
            </div>

            <form onSubmit={handleSubmit} className="mt-6 space-y-6" noValidate>
              {/* Document type */}
              <div className="flex flex-col gap-1.5">
                <label className="text-sm font-semibold text-slate-700 dark:text-slate-300">
                  {t("agent.kyc.documentTypeLabel")}
                  <span className="ms-0.5 text-rose-500" aria-hidden>*</span>
                </label>
                <Select
                  options={docOptions}
                  value={docOptions.find((o) => o.value === docType) ?? null}
                  onChange={(opt) => setDocType(opt?.value ?? "")}
                  placeholder={t("agent.kyc.documentTypePlaceholder")}
                  unstyled
                  classNames={{
                    control: ({ isFocused }) =>
                      cn(
                        "flex min-h-[42px] cursor-pointer items-center rounded-xl border px-3 py-1.5 transition-colors",
                        isFocused
                          ? "border-brand-400 ring-[3px] ring-brand-500/15"
                          : "border-slate-200 dark:border-slate-700",
                      ),
                    menu: () =>
                      "z-10 mt-1.5 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-elevated dark:border-slate-700 dark:bg-slate-900",
                    menuList: () => "p-1",
                    option: ({ isSelected, isFocused }) =>
                      cn(
                        "cursor-pointer rounded-lg px-3 py-2 text-sm transition-colors",
                        isSelected
                          ? "bg-brand-600 text-white"
                          : isFocused
                            ? "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-white"
                            : "text-slate-700 dark:text-slate-200",
                      ),
                    placeholder: () => "text-sm text-slate-400 dark:text-slate-500",
                    singleValue: () => "text-sm text-slate-900 dark:text-white",
                    dropdownIndicator: () => "p-0.5 text-slate-400",
                    indicatorSeparator: () => "mx-2 self-stretch bg-slate-200 dark:bg-slate-700",
                    noOptionsMessage: () => "px-3 py-2 text-sm text-slate-400",
                  }}
                />
              </div>

              {/* Upload zones */}
              <div className="grid gap-5 sm:grid-cols-2">
                <UploadZone
                  label={t("agent.kyc.idFrontSide")}
                  hint={t("agent.kyc.idFrontDesc")}
                  file={frontFile}
                  preview={frontPreview}
                  inputRef={frontRef}
                  onFile={(f) => attachFile(f, setFrontFile, setFrontPreview)}
                  onClear={() => clearFile(setFrontFile, setFrontPreview)}
                />
                <UploadZone
                  label={t("agent.kyc.idBackSide")}
                  hint={t("agent.kyc.idBackDesc")}
                  file={backFile}
                  preview={backPreview}
                  inputRef={backRef}
                  onFile={(f) => attachFile(f, setBackFile, setBackPreview)}
                  onClear={() => clearFile(setBackFile, setBackPreview)}
                />
              </div>

              {/* CTA row */}
              <div className="flex flex-wrap items-center gap-4 border-t border-slate-100 pt-5 dark:border-slate-800">
                <Button
                  type="submit"
                  size="md"
                  disabled={!isFormValid || isPending}
                >
                  {isPending ? t("agent.kyc.submitting") : t("agent.kyc.submit")}
                </Button>
                {!isFormValid && !isPending && (
                  <p className="text-xs text-slate-400 dark:text-slate-500">
                    {t("agent.kyc.completeFields")}
                  </p>
                )}
              </div>
            </form>
          </CardContent>
        </Card>
      )}
    </Container>
  );
}