"use client";

import { useEffect, useMemo, useState } from "react";
import { CheckCircle2, Pencil, Plus, Search, Truck, XCircle } from "lucide-react";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import { createProveedor, listProveedores, updateProveedor } from "@/lib/pb/proveedores";
import type { Proveedor, ProveedorInput } from "@/lib/types/proveedor";

type Draft = ProveedorInput;

const EMPTY_DRAFT: Draft = {
  nombre: "",
  rubro: "",
  telefono: "",
  direccion: "",
  cuit: "",
  email: "",
  notas: "",
  activo: true,
};

export default function ProveedoresPage() {
  const [proveedores, setProveedores] = useState<Proveedor[]>([]);
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState<Proveedor | null>(null);
  const [draft, setDraft] = useState<Draft>(EMPTY_DRAFT);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState("");

  async function load(term = search) {
    setLoading(true);
    setErr("");
    try {
      setProveedores(await listProveedores(term));
    } catch (e) {
      setErr((e as Error).message || "No se pudieron cargar proveedores");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    const timer = setTimeout(() => {
      void load(search);
    }, search ? 250 : 0);
    return () => clearTimeout(timer);
  }, [search]);

  const activos = useMemo(() => proveedores.filter((p) => p.activo).length, [proveedores]);

  function openNew() {
    setSelected(null);
    setDraft(EMPTY_DRAFT);
  }

  function openEdit(proveedor: Proveedor) {
    setSelected(proveedor);
    setDraft({
      nombre: proveedor.nombre || "",
      rubro: proveedor.rubro || "",
      telefono: proveedor.telefono || "",
      direccion: proveedor.direccion || "",
      cuit: proveedor.cuit || "",
      email: proveedor.email || "",
      notas: proveedor.notas || "",
      activo: proveedor.activo,
    });
  }

  async function saveProveedor(e: React.FormEvent) {
    e.preventDefault();
    if (!draft.nombre.trim()) return;
    setSaving(true);
    setErr("");
    try {
      const payload: ProveedorInput = {
        nombre: draft.nombre.trim(),
        rubro: draft.rubro?.trim(),
        telefono: draft.telefono?.trim(),
        direccion: draft.direccion?.trim(),
        cuit: draft.cuit?.trim(),
        email: draft.email?.trim(),
        notas: draft.notas?.trim(),
        activo: draft.activo ?? true,
      };
      const saved = selected
        ? await updateProveedor(selected.id, payload)
        : await createProveedor(payload);
      setProveedores((prev) => [saved, ...prev.filter((item) => item.id !== saved.id)].sort((a, b) => a.nombre.localeCompare(b.nombre)));
      setSelected(saved);
    } catch (e) {
      setErr((e as Error).message || "No se pudo guardar proveedor");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="max-w-6xl space-y-5">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="flex items-center gap-2 text-2xl font-extrabold text-ink">
            <Truck className="h-6 w-6 text-brand-dark" /> Proveedores
          </h1>
          <p className="text-sm text-ink-soft">Base simple para justificar salidas de dinero en Caja.</p>
        </div>
        <Button type="button" onClick={openNew}><Plus size={16} /> Nuevo proveedor</Button>
      </div>

      {err && <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-bad">{err}</div>}

      <div className="grid gap-3 md:grid-cols-3">
        <Metric label="Proveedores" value={proveedores.length} />
        <Metric label="Activos" value={activos} />
        <Metric label="Inactivos" value={proveedores.length - activos} />
      </div>

      <form onSubmit={saveProveedor} className="rounded-xl border border-line bg-surface p-4">
        <div className="mb-4 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
          <h2 className="text-lg font-extrabold text-ink">{selected ? "Editar proveedor" : "Nuevo proveedor"}</h2>
          {selected && (
            <Button type="button" variant="secondary" size="sm" onClick={openNew}>
              <Plus size={14} /> Nuevo proveedor
            </Button>
          )}
        </div>
        <div className="grid gap-3 md:grid-cols-4">
          <Field label="Nombre"><Input value={draft.nombre} onChange={(e) => setDraft({ ...draft, nombre: e.target.value })} required /></Field>
          <Field label="Rubro"><Input value={draft.rubro || ""} onChange={(e) => setDraft({ ...draft, rubro: e.target.value })} /></Field>
          <Field label="Teléfono"><Input value={draft.telefono || ""} onChange={(e) => setDraft({ ...draft, telefono: e.target.value })} /></Field>
          <Field label="Dirección"><Input value={draft.direccion || ""} onChange={(e) => setDraft({ ...draft, direccion: e.target.value })} /></Field>
          <Field label="CUIT"><Input value={draft.cuit || ""} onChange={(e) => setDraft({ ...draft, cuit: e.target.value })} /></Field>
          <Field label="Email"><Input type="email" value={draft.email || ""} onChange={(e) => setDraft({ ...draft, email: e.target.value })} /></Field>
          <label className="flex items-center gap-2 self-end pb-3 text-sm font-semibold text-ink-soft">
            <input type="checkbox" checked={draft.activo ?? true} onChange={(e) => setDraft({ ...draft, activo: e.target.checked })} className="h-4 w-4 rounded border-line text-brand" />
            Activo
          </label>
          <div className="flex items-end justify-end gap-2">
            <Button type="button" variant="secondary" onClick={openNew}>Limpiar</Button>
            <Button type="submit" loading={saving}>Guardar</Button>
          </div>
          <div className="md:col-span-4">
            <Field label="Notas">
              <textarea
                value={draft.notas || ""}
                onChange={(e) => setDraft({ ...draft, notas: e.target.value })}
                className="min-h-20 w-full rounded-xl border border-line bg-white px-3 py-2 text-sm outline-none focus:border-brand"
              />
            </Field>
          </div>
        </div>
      </form>

      <section className="space-y-3">
          <div className="relative">
            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-faint" />
            <Input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Buscar por nombre, rubro o CUIT" className="pl-9" />
          </div>

          <div className="overflow-hidden rounded-xl border border-line bg-surface">
            {loading ? (
              <div className="py-14 text-center text-sm text-faint">Cargando...</div>
            ) : proveedores.length ? (
              <div className="divide-y divide-line">
                {proveedores.map((proveedor) => (
                  <article key={proveedor.id} className="grid gap-3 px-4 py-3 md:grid-cols-[1fr_130px_120px_80px] md:items-center">
                    <div className="min-w-0">
                      <div className="truncate text-sm font-extrabold text-ink">{proveedor.nombre}</div>
                      <div className="truncate text-xs text-faint">{[proveedor.rubro, proveedor.telefono, proveedor.email].filter(Boolean).join(" · ") || "Sin datos extra"}</div>
                    </div>
                    <span className="text-xs font-semibold text-ink-soft">{proveedor.cuit || "-"}</span>
                    <span className={`inline-flex w-fit items-center gap-1 rounded-full px-2 py-1 text-xs font-bold ${proveedor.activo ? "bg-green-100 text-green-800" : "bg-zinc-100 text-zinc-700"}`}>
                      {proveedor.activo ? <CheckCircle2 size={13} /> : <XCircle size={13} />} {proveedor.activo ? "Activo" : "Inactivo"}
                    </span>
                    <button type="button" onClick={() => openEdit(proveedor)} className="inline-flex items-center justify-center gap-1 rounded-lg border border-line px-2 py-1 text-xs font-semibold text-ink-soft hover:text-ink">
                      <Pencil size={13} /> Editar
                    </button>
                  </article>
                ))}
              </div>
            ) : (
              <div className="py-14 text-center text-sm text-faint">Sin proveedores.</div>
            )}
          </div>
        </section>
    </div>
  );
}

function Metric({ label, value }: { label: string; value: number }) {
  return (
    <div className="rounded-xl border border-line bg-surface p-4">
      <div className="text-xs font-bold uppercase text-faint">{label}</div>
      <div className="mt-1 text-xl font-extrabold tabular-nums text-ink">{value}</div>
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return <label className="grid gap-1.5 text-sm font-semibold text-ink-soft">{label}{children}</label>;
}