"use client";
import { useCallback, useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { useDropzone } from "react-dropzone";
import { useRouter } from "next/navigation";
import { UploadCloud, Loader2, CheckCircle2, AlertCircle, Copy, X, Check, Download } from "lucide-react";
import { cn } from "@/lib/utils";
import { parseDroppedFilename } from "@/lib/jav/dropParser";
import { lookupActressesByNames, type ActressLookupResult } from "@/app/actions/actressLookup";
import { IngestPreviewDialog, type ActressDecisions, type IngestPreviewFile } from "./IngestPreviewDialog";
import { CollisionReviewDialog, type CollisionReviewItem, type CollisionDecision } from "./CollisionReviewDialog";

interface FailedFile {
  filename: string;
  reason: string;
}

interface DuplicateFile {
  filename: string;
  code: string | null;
  /** Metadata the client sent up alongside this re-upload — these are
   *  the merges that the dedup branch in ingestFile applies to the
   *  existing row (actress links via INSERT OR IGNORE, autoAssign tag,
   *  autoAssign collection). Surfaced in the summary so the user can
   *  tell whether anything actually changed for a "duplicate". */
  mergedActresses: string[];
  mergedTag: string | null;
  mergedCollectionId: number | null;
}

interface UploadState {
  total: number;
  done: number;
  duplicates: DuplicateFile[];
  failed: FailedFile[];
  finished: boolean;
}

interface PendingJob {
  image: File;
  nfo?: File;
  parsed: ReturnType<typeof parseDroppedFilename>;
  /** Stable id used to correlate jobs with collision-review decisions on
   *  re-submit. Composed from filename + size to survive React re-renders. */
  jobId: string;
}

export function DropZone({
  compact = false,
  autoAssign,
}: {
  compact?: boolean;
  autoAssign?: { tagName?: string; collectionId?: number };
}) {
  const router = useRouter();
  const [state, setState] = useState<UploadState | null>(null);
  const [copied, setCopied] = useState(false);
  const [preview, setPreview] = useState<{
    jobs: PendingJob[];
    files: IngestPreviewFile[];
    lookup: ActressLookupResult[];
  } | null>(null);
  const [collisionReview, setCollisionReview] = useState<{
    items: CollisionReviewItem[];
    jobsById: Record<string, PendingJob>;
    actressDecisions?: ActressDecisions;
    linkedActressNames?: Record<string, string>;
  } | null>(null);

  const runJobs = useCallback(async (
    jobs: PendingJob[],
    actressDecisions?: ActressDecisions,
    linkedActressNames?: Record<string, string>,
    collisionDecisions?: Record<string, CollisionDecision>,
  ) => {
    let done = 0;
    const duplicates: DuplicateFile[] = [];
    const failed: FailedFile[] = [];
    const collisions: CollisionReviewItem[] = [];
    setState({ total: jobs.length, done: 0, duplicates: [], failed: [], finished: false });

    const CONCURRENCY = 6;

    const acceptedActressesFor = (job: PendingJob): string[] => {
      if (!actressDecisions || job.parsed.actresses.length === 0) return [];
      const perFile = actressDecisions[job.parsed.original] ?? {};
      return job.parsed.actresses.flatMap((n) => {
        const d = perFile[n.toLowerCase()];
        if (d === "link") return [linkedActressNames?.[n.toLowerCase()] ?? n];
        if (d === "create") return [n];
        return [];
      });
    };

    const buildBody = (job: PendingJob, accepted: string[]): FormData => {
      const fd = new FormData();
      fd.append("file", job.image);
      if (job.nfo) fd.append("nfo", job.nfo);
      if (autoAssign?.tagName) fd.append("autoTag", autoAssign.tagName);
      if (autoAssign?.collectionId != null) fd.append("autoCollection", String(autoAssign.collectionId));
      if (job.parsed.targetFilename !== job.image.name) {
        fd.append("targetFilename", job.parsed.targetFilename);
      }
      if (accepted.length > 0) fd.append("actressNames", JSON.stringify(accepted));
      const collisionDecision = collisionDecisions?.[job.jobId];
      if (collisionDecision) fd.append("onCollision", collisionDecision);
      return fd;
    };

    const runOne = async (job: PendingJob): Promise<void> => {
      const accepted = acceptedActressesFor(job);
      try {
        const res = await fetch("/api/upload", { method: "POST", body: buildBody(job, accepted) });
        if (!res.ok) {
          let reason = `HTTP ${res.status}`;
          try { const j = await res.json(); if (j?.error) reason = String(j.error); } catch {}
          failed.push({ filename: job.image.name, reason });
        } else {
          const data = await res.json();
          if (data.collision) {
            collisions.push({
              jobId: job.jobId,
              filename: job.image.name,
              code: data.code ?? null,
              ...data.collision,
            });
          } else if (data.duplicate) {
            duplicates.push({
              filename: job.image.name,
              code: data.code ?? null,
              mergedActresses: accepted,
              mergedTag: autoAssign?.tagName ?? null,
              mergedCollectionId: autoAssign?.collectionId ?? null,
            });
          }
        }
      } catch (e) {
        failed.push({ filename: job.image.name, reason: (e as Error).message || "network error" });
      }
      done++;
      setState({ total: jobs.length, done, duplicates: duplicates.slice(), failed: failed.slice(), finished: false });
    };

    let cursor = 0;
    const workers = Array.from({ length: Math.min(CONCURRENCY, jobs.length) }, async () => {
      while (true) {
        const idx = cursor++;
        if (idx >= jobs.length) return;
        await runOne(jobs[idx]);
      }
    });
    await Promise.all(workers);

    if (collisions.length > 0 && !collisionDecisions) {
      // First pass surfaced code collisions — pause and let the user
      // decide. Decisions are funnelled back through runJobs with the
      // colliding subset.
      const jobsById: Record<string, PendingJob> = {};
      for (const j of jobs) jobsById[j.jobId] = j;
      setCollisionReview({ items: collisions, jobsById, actressDecisions, linkedActressNames });
      // Mark the run finished for the non-colliding jobs; the resolution
      // pass will produce a fresh state when it begins.
      setState({ total: jobs.length, done, duplicates, failed, finished: true });
      return;
    }

    setState({ total: jobs.length, done, duplicates, failed, finished: true });
    router.refresh();
  }, [autoAssign, router]);

  const onDrop = useCallback(async (accepted: File[]) => {
    if (accepted.length === 0) return;

    const byBase = new Map<string, { image?: File; nfo?: File }>();
    for (const f of accepted) {
      const base = f.name.replace(/\.[^.]+$/, "").toLowerCase();
      const slot = byBase.get(base) ?? {};
      const ext = f.name.toLowerCase().match(/\.([^.]+)$/)?.[1];
      if (ext === "nfo" || ext === "xml") slot.nfo = f;
      else slot.image = f;
      byBase.set(base, slot);
    }

    const jobs: PendingJob[] = Array.from(byBase.values())
      .filter((j) => j.image)
      .map((j) => ({
        image: j.image!,
        nfo: j.nfo,
        parsed: parseDroppedFilename(j.image!.name),
        jobId: `${j.image!.name}::${j.image!.size}`,
      }));

    if (jobs.length === 0) return;

    const filesWithActresses = jobs.filter((j) => j.parsed.actresses.length > 0);
    if (filesWithActresses.length === 0) {
      await runJobs(jobs);
      return;
    }

    const uniqueNames = Array.from(
      new Set(filesWithActresses.flatMap((j) => j.parsed.actresses.map((s) => s.toLowerCase()))),
    );
    const displayNames = uniqueNames.map((lc) => {
      const found = filesWithActresses.flatMap((j) => j.parsed.actresses).find((n) => n.toLowerCase() === lc);
      return found ?? lc;
    });
    const lookup = await lookupActressesByNames(displayNames);

    setPreview({
      jobs,
      files: jobs.map((j) => ({
        original: j.parsed.original,
        targetFilename: j.parsed.targetFilename,
        code: j.parsed.code,
        actresses: j.parsed.actresses,
      })),
      lookup,
    });
  }, [runJobs]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      "image/png": [".png"],
      "image/jpeg": [".jpg", ".jpeg"],
      "image/webp": [".webp"],
      "application/xml": [".nfo", ".xml"],
      "text/xml": [".nfo", ".xml"],
    },
  });

  function exportFailures() {
    if (!state || state.failed.length === 0) return;
    const lines = ["filename\treason", ...state.failed.map((f) => `${f.filename}\t${f.reason.replace(/\t/g, " ")}`)];
    const blob = new Blob([lines.join("\n") + "\n"], { type: "text/tab-separated-values;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    const stamp = new Date().toISOString().replace(/[:.]/g, "-");
    a.download = `pinkudex-failed-imports-${stamp}.tsv`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  }

  async function copyFailures() {
    if (!state || state.failed.length === 0) return;
    const text = state.failed.map((f) => `${f.filename}\t${f.reason}`).join("\n");
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      // Fallback: select-all in a textarea
      const ta = document.createElement("textarea");
      ta.value = text;
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.select();
      document.execCommand("copy");
      ta.remove();
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    }
  }

  const inProgress = state && !state.finished;
  // "added" = brand new rows in the DB. Duplicates are excluded because
  // they hit an existing row by SHA — no insert happened.
  const dupCount = state?.duplicates.length ?? 0;
  const addedCount = state ? state.done - state.failed.length - dupCount : 0;
  const progressPct = state && state.total > 0 ? Math.round((state.done / state.total) * 100) : 0;
  const [showDuplicates, setShowDuplicates] = useState(true);

  return (
    <>
      <div
        {...getRootProps()}
        className={cn(
          "relative cursor-pointer rounded-2xl border-2 border-dashed transition-all overflow-hidden group",
          compact ? "px-4 py-3 flex items-center gap-3" : "px-12 py-7 flex flex-col items-center gap-3 text-center",
          isDragActive
            ? "border-[var(--color-cyan)] bg-[color-mix(in_oklch,var(--color-cyan)_8%,transparent)] shadow-[var(--shadow-glow-cyan)]"
            : "border-[var(--color-glass-border-strong)] hover:border-[var(--color-cyan)] hover:bg-[var(--color-glass)]",
        )}
      >
        <input {...getInputProps()} />
        {state ? (
          <>
            {inProgress ? (
              <Loader2 className={cn("text-[var(--color-cyan)] animate-spin", compact ? "w-5 h-5" : "w-8 h-8")} />
            ) : state.failed.length > 0 ? (
              <AlertCircle className={cn("text-[var(--color-coral)]", compact ? "w-5 h-5" : "w-8 h-8")} />
            ) : (
              <CheckCircle2 className={cn("text-[var(--color-mint)]", compact ? "w-5 h-5" : "w-8 h-8")} />
            )}
            <div className={compact ? "text-sm" : ""}>
              <div className="font-medium">{state.done} / {state.total} processed</div>
              <div className="text-xs text-[var(--color-fg-muted)] mt-0.5 flex items-center gap-2 justify-center flex-wrap">
                <span className="text-[var(--color-mint)]">{addedCount} added</span>
                {dupCount > 0 && <span>· {dupCount} already in library</span>}
                {state.failed.length > 0 && <span className="text-[var(--color-coral)]">· {state.failed.length} failed</span>}
              </div>
            </div>
          </>
        ) : (
          <>
            <UploadCloud className={cn("text-[var(--color-fg-dim)] group-hover:text-[var(--color-cyan)] transition-colors", compact ? "w-5 h-5" : "w-10 h-10")} />
            <div>
              <div className={cn("font-medium", compact ? "text-sm" : "text-base")}>
                {isDragActive ? "Drop To Import" : "Drop Covers Here"}
              </div>
              {!compact && (
                <div className="text-sm text-[var(--color-fg-muted)] mt-1">
                  JPG, PNG, WEBP — drop a matching <span className="font-mono">.nfo</span> alongside to auto-fill metadata.
                </div>
              )}
            </div>
          </>
        )}

        {state && (
          <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-glass-border)]">
            <div
              className="h-full bg-[var(--color-cyan)] transition-all"
              style={{ width: `${progressPct}%` }}
            />
          </div>
        )}
      </div>

      {state && state.finished && (
        <ImportSummaryModal
          addedCount={addedCount}
          duplicates={state.duplicates}
          failed={state.failed}
          showDuplicates={showDuplicates}
          onToggleDuplicates={() => setShowDuplicates((s) => !s)}
          copied={copied}
          onCopyFailures={copyFailures}
          onExportFailures={exportFailures}
          onClose={() => setState(null)}
        />
      )}

      {preview && (
        <IngestPreviewDialog
          files={preview.files}
          lookup={preview.lookup}
          onCancel={() => setPreview(null)}
          onSkipActresses={() => {
            const jobs = preview.jobs;
            setPreview(null);
            void runJobs(jobs);
          }}
          onConfirm={(decisions) => {
            const jobs = preview.jobs;
            const linkedNames = Object.fromEntries(
              preview.lookup
                .filter((r) => r.match)
                .map((r) => [r.name.toLowerCase(), r.match!.name]),
            );
            setPreview(null);
            void runJobs(jobs, decisions, linkedNames);
          }}
        />
      )}

      {collisionReview && (
        <CollisionReviewDialog
          items={collisionReview.items}
          onCancel={() => setCollisionReview(null)}
          onConfirm={(decisions) => {
            const cr = collisionReview;
            setCollisionReview(null);
            const replays = cr.items.map((it) => cr.jobsById[it.jobId]).filter((j): j is PendingJob => !!j);
            void runJobs(replays, cr.actressDecisions, cr.linkedActressNames, decisions);
          }}
        />
      )}
    </>
  );
}

function ImportSummaryModal({
  addedCount,
  duplicates,
  failed,
  showDuplicates,
  onToggleDuplicates,
  copied,
  onCopyFailures,
  onExportFailures,
  onClose,
}: {
  addedCount: number;
  duplicates: DuplicateFile[];
  failed: FailedFile[];
  showDuplicates: boolean;
  onToggleDuplicates: () => void;
  copied: boolean;
  onCopyFailures: () => void;
  onExportFailures: () => void;
  onClose: () => void;
}) {
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  if (typeof document === "undefined") return null;
  const dupCount = duplicates.length;
  const dupsWithMerges = duplicates.filter((d) =>
    d.mergedActresses.length > 0 || d.mergedTag != null || d.mergedCollectionId != null,
  );
  const dupsUntouched = dupCount - dupsWithMerges.length;
  const tone = failed.length > 0 ? "error" : "ok";
  const total = addedCount + dupCount + failed.length;

  // One-line plain-English narrative explaining what just happened. Helps
  // when the count summary alone is ambiguous (e.g. "1 imported · 1 dup"
  // could either mean a fresh insert plus a separate duplicate, or a
  // single file that was deduped).
  const narrative = (() => {
    const parts: string[] = [];
    if (addedCount > 0) parts.push(`Added ${addedCount} new cover${addedCount === 1 ? "" : "s"} to the library.`);
    if (dupCount > 0) {
      if (dupsWithMerges.length > 0 && dupsUntouched > 0) {
        parts.push(`${dupCount} file${dupCount === 1 ? "" : "s"} matched existing covers — no new rows were inserted; ${dupsWithMerges.length} had fresh metadata merged into the existing entry.`);
      } else if (dupsWithMerges.length > 0) {
        parts.push(`${dupCount} file${dupCount === 1 ? " was" : "s were"} already in the library — no new rows were inserted, but the new metadata you picked was merged into the existing entr${dupCount === 1 ? "y" : "ies"}.`);
      } else {
        parts.push(`${dupCount} file${dupCount === 1 ? " was" : "s were"} already in the library — no new rows were inserted and there was no extra metadata to merge.`);
      }
    }
    if (failed.length > 0) parts.push(`${failed.length} file${failed.length === 1 ? "" : "s"} failed.`);
    if (parts.length === 0) parts.push(`Nothing was processed.`);
    return parts.join(" ");
  })();

  return createPortal(
    <div
      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm"
      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="relative w-[min(95vw,720px)] max-h-[85vh] flex flex-col rounded-2xl border border-[var(--color-glass-border-strong)] bg-[var(--color-bg-0)] shadow-2xl">
        <div className="px-5 py-4 border-b border-[var(--color-glass-border)] flex items-start justify-between gap-3">
          <div className="flex items-start gap-3 min-w-0">
            {tone === "ok" ? (
              <CheckCircle2 className="w-6 h-6 text-[var(--color-mint)] shrink-0 mt-0.5" />
            ) : (
              <AlertCircle className="w-6 h-6 text-[var(--color-coral)] shrink-0 mt-0.5" />
            )}
            <div className="min-w-0">
              <div className="text-base font-medium">Import complete · {total} file{total === 1 ? "" : "s"}</div>
              <div className="text-xs text-[var(--color-fg-muted)] mt-0.5 flex items-center gap-2 flex-wrap">
                <span className="text-[var(--color-mint)] font-medium">{addedCount} added</span>
                {dupCount > 0 && (
                  <button
                    type="button"
                    onClick={onToggleDuplicates}
                    className="hover:text-[var(--color-fg)] underline-offset-2 hover:underline"
                    title="Toggle duplicate list"
                  >
                    · {dupCount} already in library
                  </button>
                )}
                {failed.length > 0 && (
                  <span className="text-[var(--color-coral)] font-medium">· {failed.length} failed</span>
                )}
              </div>
              <p className="text-xs text-[var(--color-fg-dim)] mt-2 leading-relaxed">{narrative}</p>
            </div>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] shrink-0"
            title="Dismiss"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {(failed.length > 0 || (showDuplicates && dupCount > 0)) && (
          <div className="overflow-y-auto px-5 py-3 space-y-3">
            {failed.length > 0 && (
              <section>
                <div className="flex items-center justify-between mb-2">
                  <div className="text-[11px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)]">
                    Failed ({failed.length})
                  </div>
                  <div className="flex items-center gap-2">
                    <button
                      type="button"
                      onClick={onCopyFailures}
                      className="flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-md border border-[var(--color-glass-border)] hover:bg-[var(--color-glass)] text-[var(--color-fg-dim)] hover:text-[var(--color-fg)]"
                      title="Copy failed filenames + reasons to clipboard"
                    >
                      {copied ? <Check className="w-3.5 h-3.5 text-[var(--color-mint)]" /> : <Copy className="w-3.5 h-3.5" />}
                      {copied ? "Copied" : "Copy"}
                    </button>
                    <button
                      type="button"
                      onClick={onExportFailures}
                      className="flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-md border border-[var(--color-glass-border)] hover:bg-[var(--color-glass)] text-[var(--color-fg-dim)] hover:text-[var(--color-fg)]"
                      title="Download failed list as a .tsv file"
                    >
                      <Download className="w-3.5 h-3.5" />
                      Export
                    </button>
                  </div>
                </div>
                <div className="max-h-60 overflow-y-auto text-xs font-mono space-y-0.5 rounded-md border border-[var(--color-glass-border)] p-2">
                  {failed.map((f) => (
                    <div key={f.filename} className="flex items-baseline gap-2 text-[var(--color-fg-dim)]">
                      <AlertCircle className="w-3 h-3 text-[var(--color-coral)] shrink-0 translate-y-0.5" />
                      <span className="truncate text-[var(--color-fg)]">{f.filename}</span>
                      <span className="text-[var(--color-fg-muted)] truncate">— {f.reason}</span>
                    </div>
                  ))}
                </div>
              </section>
            )}

            {showDuplicates && dupCount > 0 && (
              <section>
                <div className="text-[11px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] mb-2">
                  Already in library ({dupCount})
                </div>
                <div className="max-h-72 overflow-y-auto text-xs space-y-1 rounded-md border border-[var(--color-glass-border)] p-2">
                  {duplicates.map((d) => {
                    const merges: string[] = [];
                    if (d.mergedActresses.length > 0) {
                      merges.push(`linked actress${d.mergedActresses.length === 1 ? "" : "es"}: ${d.mergedActresses.join(", ")}`);
                    }
                    if (d.mergedTag) merges.push(`tag: ${d.mergedTag}`);
                    if (d.mergedCollectionId != null) merges.push(`collection #${d.mergedCollectionId}`);
                    return (
                      <div key={d.filename} className="flex items-start gap-2 font-mono text-[var(--color-fg-dim)]">
                        <span className="text-[10px] uppercase tracking-wider text-[var(--color-cyan)] shrink-0 w-20 truncate translate-y-0.5" title={d.code ?? "no code"}>
                          {d.code ?? "—"}
                        </span>
                        <div className="min-w-0 flex-1">
                          <div className="truncate text-[var(--color-fg)]">{d.filename}</div>
                          {merges.length > 0 ? (
                            <div className="text-[var(--color-mint)]/80 text-[11px] mt-0.5">
                              + {merges.join(" · ")}
                            </div>
                          ) : (
                            <div className="text-[var(--color-fg-muted)] text-[11px] mt-0.5 italic">
                              no new metadata to merge
                            </div>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
                <p className="text-[11px] text-[var(--color-fg-muted)] mt-2 leading-relaxed">
                  These files were already imported earlier (matched by SHA-256 of the bytes). The cover row was kept as-is; any new actress / tag / collection picks shown above were merged into the existing entry via <span className="font-mono">INSERT OR IGNORE</span>, so previous links are untouched.
                </p>
              </section>
            )}
          </div>
        )}

        <div className="px-5 py-3 border-t border-[var(--color-glass-border)] flex items-center justify-end">
          <button
            type="button"
            onClick={onClose}
            className="text-sm px-4 py-1.5 rounded-lg bg-[var(--color-cyan)]/20 text-[var(--color-cyan)] ring-1 ring-[var(--color-cyan)]/50 hover:bg-[var(--color-cyan)]/30"
          >
            Close
          </button>
        </div>
      </div>
    </div>,
    document.body,
  );
}