"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { LuCopyX, LuExternalLink, LuFileWarning, LuRefreshCw, LuSearch } from "react-icons/lu";

type JsonRecord = Record<string, unknown>;
type Rejection = {
  id: string; fileName: string; extractedData: JsonRecord | null; invoiceFingerprint: string | null;
  source: "UPLOAD" | "SHAREPOINT"; createdAt: string;
  owner: { id: string; name: string | null; username: string };
  duplicateDocument: { id: string; fileName: string; createdAt: string; extractedData: JsonRecord | null } | null;
};

const displayValue = (value: unknown) => {
  if (value === null || value === undefined || value === "") return "—";
  return typeof value === "object" ? JSON.stringify(value) : String(value);
};

export default function DuplicatesPage() {
  const { status, data: session } = useSession();
  const router = useRouter();
  const [rejections, setRejections] = useState<Rejection[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [query, setQuery] = useState("");

  const load = async () => {
    setLoading(true); setError(null);
    try {
      const response = await fetch("/api/duplicates", { cache: "no-store" });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || "No se pudo cargar el historial.");
      setRejections(data.rejections);
    } catch (loadError) { setError(loadError instanceof Error ? loadError.message : "No se pudo cargar el historial."); }
    finally { setLoading(false); }
  };

  useEffect(() => { if (status === "authenticated") void load(); }, [status]);
  if (status === "unauthenticated") { router.replace("/login"); return null; }

  const needle = query.trim().toLowerCase();
  const visible = rejections.filter((item) => JSON.stringify(item).toLowerCase().includes(needle));

  return <div className="max-w-7xl mx-auto space-y-6 animate-fade-in">
    <header className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
      <div><h1 className="text-2xl md:text-3xl font-bold text-text flex items-center gap-3"><LuCopyX className="text-primary" /> Facturas duplicadas</h1><p className="text-sm text-text-muted mt-2">Intentos rechazados por coincidir con una factura ya guardada.</p></div>
      <button type="button" onClick={load} disabled={loading} className="px-4 py-2.5 rounded-lg border border-border-subtle text-sm font-semibold flex items-center gap-2 hover:bg-background-alt disabled:opacity-50"><LuRefreshCw className={loading ? "animate-spin" : ""} />Actualizar</button>
    </header>
    {error && <div className="p-4 rounded-xl bg-destructive-background border border-destructive-border text-destructive-foreground">{error}</div>}
    <div className="relative"><LuSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-text-subtle" /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar por archivo, RNC, NCF, usuario…" className="w-full pl-10 pr-4 py-3 rounded-xl border border-border-subtle bg-background focus:ring-2 focus:ring-primary" /></div>
    {loading ? <p className="text-text-muted">Cargando historial…</p> : visible.length === 0 ? <div className="p-12 text-center border border-dashed border-border-subtle rounded-2xl text-text-muted"><LuFileWarning className="mx-auto h-8 w-8 mb-3" />{rejections.length ? "No hay coincidencias para la búsqueda." : "Aún no se han rechazado facturas duplicadas."}</div> : <div className="space-y-4">{visible.map((item) => <article key={item.id} className="bg-background border border-border-subtle rounded-2xl overflow-hidden">
      <div className="p-5 flex flex-col lg:flex-row lg:items-start justify-between gap-4"><div className="min-w-0"><div className="flex flex-wrap items-center gap-2"><span className="px-2.5 py-1 text-xs font-bold rounded-full bg-destructive-background text-destructive-foreground">Rechazada</span><span className="px-2.5 py-1 text-xs font-semibold rounded-full bg-background-alt text-text-muted">{item.source === "SHAREPOINT" ? "SharePoint" : "Carga manual"}</span></div><h2 className="font-semibold text-text mt-3 break-words">{item.fileName}</h2><p className="text-xs text-text-muted mt-1">{new Date(item.createdAt).toLocaleString()} · {session?.user.role === "ADMIN" ? item.owner.name || item.owner.username : "Tu intento"}</p>{item.invoiceFingerprint && <p className="text-xs text-text-muted mt-2">Identidad: <span className="font-mono text-text">{item.invoiceFingerprint}</span></p>}</div>
        <div className="lg:text-right"><p className="text-xs text-text-muted">Coincide con</p>{item.duplicateDocument ? <Link href={`/documents/${item.duplicateDocument.id}`} className="mt-1 inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:underline"><LuExternalLink />{item.duplicateDocument.fileName}</Link> : <p className="text-sm text-text-muted mt-1">Documento original eliminado</p>}</div></div>
      {item.extractedData && <details className="border-t border-border-subtle"><summary className="cursor-pointer px-5 py-3 text-sm font-semibold text-text hover:bg-background-alt">Ver datos extraídos del intento</summary><div className="px-5 pb-5 overflow-auto"><table className="w-full text-sm min-w-[420px]"><tbody className="divide-y divide-border-light">{Object.entries(item.extractedData).map(([key, value]) => <tr key={key}><th className="text-left py-2.5 pr-5 text-xs uppercase tracking-wide text-text-muted">{key.replace(/_/g, " ")}</th><td className="py-2.5 text-text break-all">{displayValue(value)}</td></tr>)}</tbody></table></div></details>}
    </article>)}</div>}
  </div>;
}