"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { Link2, Loader2, RefreshCw, Search, Trash2, Unlink } from "lucide-react";
import { listAllRenders, linkRender, unlinkRender, deleteRender, renderImageURL } from "@/lib/pb/renders";
import { renderVinculoLabel } from "@/lib/renders/domain";
import type { RenderRecord } from "@/lib/types/render";
import GuardarRenderModal from "@/components/disenador/GuardarRenderModal";

// Pestaña "Renders guardados": galería persistente. Cada render se puede ligar
// (o re-ligar) a un presupuesto/propuesta, descargar o borrar.

export default function RendersTab({ active }: { active: boolean }) {
  const [renders, setRenders] = useState<RenderRecord[]>([]);
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState("");
  const [ligando, setLigando] = useState<RenderRecord | null>(null);

  const reload = useCallback(async (q = search) => {
    setLoading(true);
    setErr("");
    try {
      setRenders(await listAllRenders(q));
    } catch (e) {
      setErr((e as Error).message || "No se pudieron cargar los renders");
    } finally {
      setLoading(false);
    }
  }, [search]);

  // Recarga al entrar a la pestaña (así aparecen los recién guardados).
  useEffect(() => {
    if (active) void reload();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [active]);

  // Búsqueda con debounce.
  useEffect(() => {
    if (!active) return;
    const t = setTimeout(() => void reload(search), 300);
    return () => clearTimeout(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [search]);

  async function quitarVinculo(r: RenderRecord) {
    await unlinkRender(r.id);
    void reload();
  }

  async function borrar(r: RenderRecord) {
    if (!confirm(`¿Borrar el render "${r.nombre}"? (No borra la copia de Drive si existe.)`)) return;
    await deleteRender(r.id);
    void reload();
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3 flex-wrap">
        <div className="flex items-center gap-2 bg-surface border border-line rounded-lg px-3 flex-1 min-w-[220px] max-w-sm">
          <Search size={14} className="text-faint" />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Buscar por nombre…"
            className="flex-1 bg-transparent py-2 text-sm text-ink outline-none"
          />
        </div>
        <button onClick={() => void reload()} className="inline-flex items-center gap-1.5 text-xs text-faint hover:text-ink px-2 py-1.5 rounded-lg border border-line">
          <RefreshCw size={13} /> Actualizar
        </button>
        {err && <span className="text-sm text-red-600">{err}</span>}
      </div>

      {loading && renders.length === 0 ? (
        <div className="flex items-center justify-center py-16 text-faint"><Loader2 size={20} className="animate-spin" /></div>
      ) : renders.length === 0 ? (
        <div className="text-center py-16 text-sm text-faint">
          Todavía no hay renders guardados. Generá uno en la pestaña &quot;Croquis → Render&quot; y tocá <b>Guardar</b>.
        </div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {renders.map((r) => (
            <div key={r.id} className="rounded-xl border border-line bg-surface overflow-hidden">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={renderImageURL(r)} alt={r.nombre} className="w-full aspect-square object-cover bg-canvas" loading="lazy" />
              <div className="p-3 space-y-1.5">
                <p className="text-sm font-medium text-ink truncate" title={r.nombre}>{r.nombre}</p>
                <p className="text-xs text-faint">
                  {[r.tipo, r.modelo === "gemini" ? "Gemini" : r.modelo === "openai" ? "gpt-image-1" : r.modelo].filter(Boolean).join(" · ")}
                  {r.drive_id ? " · Drive ✓" : ""}
                </p>
                <p className="text-xs">
                  {r.presupuesto ? (
                    <Link href={`/presupuestos/${r.presupuesto}`} className="text-brand-dark underline">
                      {renderVinculoLabel(r, r.expand?.presupuesto?.codigo)}
                    </Link>
                  ) : (
                    <span className="text-faint">Sin ligar</span>
                  )}
                </p>
                <div className="flex items-center gap-3 pt-1 text-xs">
                  <button onClick={() => setLigando(r)} className="inline-flex items-center gap-1 text-brand-dark underline">
                    <Link2 size={12} /> {r.presupuesto ? "Re-ligar" : "Ligar"}
                  </button>
                  {r.presupuesto && (
                    <button onClick={() => void quitarVinculo(r)} className="inline-flex items-center gap-1 text-faint hover:text-ink">
                      <Unlink size={12} /> Quitar
                    </button>
                  )}
                  <a href={renderImageURL(r)} target="_blank" rel="noopener noreferrer" className="text-faint hover:text-ink underline">
                    Ver
                  </a>
                  <button onClick={() => void borrar(r)} className="ml-auto text-faint hover:text-bad">
                    <Trash2 size={13} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {ligando && (
        <GuardarRenderModal
          title={`Ligar "${ligando.nombre}" a un presupuesto`}
          confirmLabel="Ligar"
          onClose={() => setLigando(null)}
          onConfirm={async (v) => {
            if (!v.presupuesto) throw new Error("Elegí un presupuesto de la lista.");
            await linkRender(ligando.id, v.presupuesto.id, v.propuestaIndex0);
            void reload();
          }}
        />
      )}
    </div>
  );
}