"use client";

import { useEffect, useMemo, useState } from "react";
import { Plus, Trash2 } from "lucide-react";
import Button from "@/components/ui/Button";
import { money } from "@/lib/format";
import { summarizeCommercialItems, type CommercialItemInput } from "@/lib/presupuestos/domain";
import { listProductos } from "@/lib/pb/productos";
import type { Producto } from "@/lib/types/producto";

interface Props<T extends CommercialItemInput> {
  items: T[];
  onChange: (items: T[]) => void;
  title?: string;
}

export default function CommercialItemsEditor<T extends CommercialItemInput>({
  items,
  onChange,
  title = "Productos / lineas",
}: Props<T>) {
  const summary = summarizeCommercialItems(items);
  const [productos, setProductos] = useState<Producto[]>([]);
  const datalistId = useMemo(() => `productos-${Math.random().toString(36).slice(2)}`, []);
  const datalistCodigoId = useMemo(() => `codigos-${Math.random().toString(36).slice(2)}`, []);

  useEffect(() => {
    listProductos().then(setProductos).catch(() => setProductos([]));
  }, []);

  function addItem() {
    onChange([
      ...items,
      { codigo: "", descripcion: "", cantidad: 1, precio_unitario: 0, sort_order: items.length } as T,
    ]);
  }

  function update(index: number, patch: Partial<T>) {
    onChange(items.map((item, i) => (i === index ? { ...item, ...patch } : item)));
  }

  function remove(index: number) {
    onChange(items.filter((_, i) => i !== index).map((item, i) => ({ ...item, sort_order: i })));
  }

  function applyCodigo(index: number, codigo: string) {
    if (!codigo.trim()) return;
    const producto = productos.find((item) => item.referencia_interna?.toLowerCase() === codigo.trim().toLowerCase());
    if (!producto) return;
    update(index, {
      codigo: producto.referencia_interna || "",
      descripcion: producto.nombre,
      precio_unitario: Number(producto.precio_venta || 0),
    } as Partial<T>);
  }

  function applyProducto(index: number, nombre: string) {
    if (!nombre.trim()) return;
    const producto = productos.find((item) => item.nombre.toLowerCase() === nombre.trim().toLowerCase());
    if (!producto) return;
    update(index, {
      codigo: producto.referencia_interna || "",
      descripcion: producto.nombre,
      precio_unitario: Number(producto.precio_venta || 0),
    } as Partial<T>);
  }

  return (
    <section className="space-y-3">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h3 className="font-bold text-ink">{title}</h3>
          <p className="text-xs text-faint">Podés elegir del catálogo o escribir una línea libre.</p>
        </div>
        <Button type="button" variant="secondary" size="sm" onClick={addItem}>
          <Plus size={14} /> Linea
        </Button>
      </div>

      {items.length === 0 ? (
        <button
          type="button"
          onClick={addItem}
          className="w-full rounded-xl border border-dashed border-line bg-canvas px-4 py-6 text-sm text-faint hover:border-line-strong hover:text-ink"
        >
          Agregar producto o linea libre
        </button>
      ) : (
        <div className="overflow-x-auto rounded-xl border border-line">
          <div className="min-w-[760px]">
            <div className="grid grid-cols-[120px_minmax(200px,1fr)_90px_140px_140px_42px] gap-2 border-b border-line bg-canvas px-3 py-2 text-[11px] font-bold uppercase text-faint">
              <span>Código</span>
              <span>Descripcion</span>
              <span>Cant.</span>
              <span>Precio unit.</span>
              <span>Subtotal</span>
              <span />
            </div>
            {summary.items.map((item, index) => (
              <div key={index} className="grid grid-cols-[120px_minmax(200px,1fr)_90px_140px_140px_42px] gap-2 border-b border-line px-3 py-2 last:border-b-0">
                <input
                  value={items[index]?.codigo || ""}
                  onChange={(e) => update(index, { codigo: e.target.value } as Partial<T>)}
                  onBlur={(e) => applyCodigo(index, e.target.value)}
                  list={datalistCodigoId}
                  placeholder="Ej: MOD-120"
                  className="h-9 rounded-lg border border-line bg-surface px-2 text-sm outline-none focus:border-brand font-mono text-xs"
                />
                <input
                  value={items[index]?.descripcion || ""}
                  onChange={(e) => update(index, { descripcion: e.target.value } as Partial<T>)}
                  onBlur={(e) => applyProducto(index, e.target.value)}
                  list={datalistId}
                  placeholder="Ej: Bajo mesada melamina blanca"
                  className="h-9 rounded-lg border border-line bg-surface px-2 text-sm outline-none focus:border-brand"
                />
                <input
                  type="number"
                  min="1"
                  step="1"
                  value={items[index]?.cantidad || ""}
                  onChange={(e) => update(index, { cantidad: Number(e.target.value) || 1 } as Partial<T>)}
                  className="h-9 rounded-lg border border-line bg-surface px-2 text-sm outline-none focus:border-brand"
                />
                <input
                  type="number"
                  min="0"
                  step="1"
                  value={items[index]?.precio_unitario || ""}
                  onChange={(e) => update(index, { precio_unitario: Number(e.target.value) || 0 } as Partial<T>)}
                  className="h-9 rounded-lg border border-line bg-surface px-2 text-sm outline-none focus:border-brand"
                />
                <div className="flex h-9 items-center rounded-lg bg-canvas px-2 text-sm font-semibold text-ink">
                  {money(item.subtotal)}
                </div>
                <button
                  type="button"
                  onClick={() => remove(index)}
                  className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-faint hover:bg-red-50 hover:text-bad"
                  title="Quitar linea"
                >
                  <Trash2 size={15} />
                </button>
              </div>
            ))}
            <datalist id={datalistCodigoId}>
              {productos.map((producto) => producto.referencia_interna && (
                <option key={producto.id} value={producto.referencia_interna}>
                  {producto.nombre} · {money(producto.precio_venta || 0)}
                </option>
              ))}
            </datalist>
            <datalist id={datalistId}>
              {productos.map((producto) => (
                <option key={producto.id} value={producto.nombre}>
                  {producto.referencia_interna ? `${producto.referencia_interna} · ` : ""}{money(producto.precio_venta || 0)}
                </option>
              ))}
            </datalist>
          </div>
        </div>
      )}

      <div className="flex justify-end text-sm">
        <span className="rounded-xl bg-brand-soft px-4 py-2 font-bold text-brand-dark">
          Total: {money(summary.total)}
        </span>
      </div>
    </section>
  );
}