"use client";

import { useEffect, useState } from "react";
import { Loader2, Search, X } from "lucide-react";
import { listPresupuestos, listPropuestas } from "@/lib/pb/presupuestos";
import { money } from "@/lib/format";
import type { Presupuesto, Propuesta } from "@/lib/types/presupuesto";
import { ESTADO_PRESUPUESTO_LABELS } from "@/lib/types/presupuesto";

// Modal para guardar un render y/o ligarlo a un presupuesto abierto (y a una de
// sus propuestas). Se usa desde la galería del Diseñador y desde la pestaña
// "Renders guardados" (ahí sin campo nombre, sólo para ligar).

export interface GuardarRenderValue {
  nombre: string;
  presupuesto: Presupuesto | null;
  propuestaIndex0: number | null; // 0-based; null = nivel presupuesto
}

interface Props {
  title: string;
  confirmLabel: string;
  initialNombre?: string; // undefined = ocultar campo nombre (solo ligar)
  onClose: () => void;
  onConfirm: (v: GuardarRenderValue) => Promise<void>;
}

export default function GuardarRenderModal({ title, confirmLabel, initialNombre, onClose, onConfirm }: Props) {
  const conNombre = initialNombre !== undefined;
  const [nombre, setNombre] = useState(initialNombre || "");
  const [search, setSearch] = useState("");
  const [rows, setRows] = useState<Presupuesto[]>([]);
  const [loading, setLoading] = useState(true);
  const [selected, setSelected] = useState<Presupuesto | null>(null);
  const [propuestas, setPropuestas] = useState<Propuesta[]>([]);
  const [propuestaSel, setPropuestaSel] = useState<string>(""); // "" = nivel presupuesto; "0","1",… índice
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState("");

  useEffect(() => {
    let cancel = false;
    setLoading(true);
    const t = setTimeout(async () => {
      try {
        const res = await listPresupuestos({ search, perPage: 30 });
        if (!cancel) {
          setRows(res.items.filter((p) => p.estado === "borrador" || p.estado === "enviado" || p.estado === "sin_respuesta"));
        }
      } finally {
        if (!cancel) setLoading(false);
      }
    }, 250);
    return () => { cancel = true; clearTimeout(t); };
  }, [search]);

  async function pickPresupuesto(p: Presupuesto) {
    setSelected(p);
    setPropuestaSel("");
    try {
      setPropuestas(await listPropuestas(p.id));
    } catch {
      setPropuestas([]);
    }
  }

  async function confirm() {
    if (saving) return;
    setSaving(true);
    setErr("");
    try {
      await onConfirm({
        nombre: nombre.trim(),
        presupuesto: selected,
        propuestaIndex0: selected && propuestaSel !== "" ? Number(propuestaSel) : null,
      });
      onClose();
    } catch (e) {
      setErr((e as Error).message || "No se pudo guardar");
      setSaving(false);
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
      <div className="bg-surface border border-line rounded-2xl w-full max-w-lg max-h-[85vh] flex flex-col overflow-hidden" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between px-5 py-3 border-b border-line">
          <h3 className="text-sm font-semibold text-ink">{title}</h3>
          <button onClick={onClose} className="text-faint hover:text-ink"><X size={18} /></button>
        </div>

        <div className="p-4 space-y-3 overflow-y-auto">
          {conNombre && (
            <label className="block">
              <span className="text-xs text-faint">Nombre del render</span>
              <input
                value={nombre}
                onChange={(e) => setNombre(e.target.value)}
                className="mt-1 w-full rounded-lg border border-line bg-canvas p-2 text-sm text-ink outline-none focus:border-brand"
              />
            </label>
          )}

          <div>
            <span className="text-xs text-faint">Ligar a un presupuesto (opcional)</span>
            <div className="mt-1 flex items-center gap-2 bg-canvas border border-line rounded-lg px-3">
              <Search size={14} className="text-faint" />
              <input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Buscar por código, cliente o celular…"
                className="flex-1 bg-transparent py-2 text-sm text-ink outline-none"
              />
            </div>
          </div>

          <div className="max-h-48 overflow-y-auto rounded-lg border border-line">
            {loading ? (
              <div className="flex items-center justify-center py-6 text-faint"><Loader2 size={16} className="animate-spin" /></div>
            ) : rows.length === 0 ? (
              <p className="text-center text-xs text-faint py-6">No hay presupuestos abiertos que coincidan.</p>
            ) : (
              rows.map((p) => (
                <button
                  key={p.id}
                  onClick={() => pickPresupuesto(p)}
                  className={`flex items-center justify-between w-full px-3 py-2 text-left text-sm border-b border-line last:border-b-0 transition-colors ${
                    selected?.id === p.id ? "bg-brand-soft text-brand-dark font-semibold" : "hover:bg-canvas text-ink"
                  }`}
                >
                  <span className="truncate">{p.codigo} · {p.expand?.cliente?.nombre ?? "Sin cliente"}</span>
                  <span className="text-xs text-faint shrink-0 ml-2">
                    {ESTADO_PRESUPUESTO_LABELS[p.estado]} · {money(p.total)}
                  </span>
                </button>
              ))
            )}
          </div>

          {selected && propuestas.length >= 2 && (
            <label className="block">
              <span className="text-xs text-faint">¿A qué propuesta?</span>
              <select
                value={propuestaSel}
                onChange={(e) => setPropuestaSel(e.target.value)}
                className="mt-1 w-full rounded-lg border border-line bg-canvas p-2 text-sm text-ink"
              >
                <option value="">Al presupuesto (general)</option>
                {propuestas.map((pr, i) => (
                  <option key={pr.id} value={String(i)}>
                    Propuesta {i + 1}{pr.nombre && !/^propuesta\s*\d*$/i.test(pr.nombre.trim()) ? ` — ${pr.nombre}` : ""} · {money(pr.total || 0)}
                  </option>
                ))}
              </select>
            </label>
          )}

          {selected && (
            <button onClick={() => { setSelected(null); setPropuestas([]); setPropuestaSel(""); }} className="text-xs text-faint underline">
              Quitar selección (guardar sin ligar)
            </button>
          )}
        </div>

        <div className="flex items-center justify-between gap-3 px-5 py-3 border-t border-line">
          {err ? <span className="text-xs text-bad">{err}</span> : <span />}
          <button
            onClick={confirm}
            disabled={saving || (conNombre && !nombre.trim())}
            className="inline-flex items-center gap-2 rounded-lg bg-brand-dark px-4 py-2 text-sm font-semibold text-white disabled:opacity-60"
          >
            {saving && <span className="inline-block w-4 h-4 rounded-full border-2 border-white/40 border-t-white animate-spin" />}
            {saving ? "Guardando…" : confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}