import React, { useState, useEffect, useMemo, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  LayoutDashboard, Package, PackagePlus, ClipboardList, Users, Wrench,
  Building2, BarChart3, Settings, ArrowLeft, Plus, Search, X, Upload,
  Download, FileText, Trash2, Edit2, Check, AlertTriangle, Image as ImageIcon,
  ChevronLeft, Save, RotateCcw, Loader2, Printer, Ban, FileSpreadsheet,
  ChevronDown, ChevronUp, AlertCircle, CheckCircle2, Inbox,
} from 'lucide-react';

const DB = window.InvDB;

/* ============================================================================
   Utilidades y componentes chicos reutilizados en todas las pantallas
   ============================================================================ */
function clsx(...xs) { return xs.filter(Boolean).join(' '); }

function useToasts() {
  const [toasts, setToasts] = useState([]);
  function toast(mensaje, tipo = 'ok') {
    const id = DB.uid();
    setToasts((t) => [...t, { id, mensaje, tipo }]);
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3200);
  }
  const ToastHost = () => (
    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 items-end">
      {toasts.map((t) => (
        <div
          key={t.id}
          className={clsx(
            'px-4 py-2.5 rounded-lg shadow-lg text-sm font-medium text-white animate-[fadeIn_.15s]',
            t.tipo === 'error' ? 'bg-red-600' : t.tipo === 'warn' ? 'bg-amber-500' : 'bg-green-700'
          )}
        >
          {t.mensaje}
        </div>
      ))}
    </div>
  );
  return { toast, ToastHost };
}

function ConfirmModal({ abierto, titulo, mensaje, textoConfirmar = 'Confirmar', peligro, onConfirmar, onCancelar }) {
  if (!abierto) return null;
  return (
    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[90] flex items-center justify-center p-4">
      <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-sm w-full p-5 space-y-3">
        <div className="flex items-center gap-2">
          <AlertTriangle className={clsx('h-5 w-5', peligro ? 'text-red-600' : 'text-amber-500')} />
          <h3 className="font-bold text-slate-800">{titulo}</h3>
        </div>
        <div className="text-sm text-slate-600">{mensaje}</div>
        <div className="flex justify-end gap-2 pt-1">
          <button onClick={onCancelar} className="px-3 py-1.5 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">
            Cancelar
          </button>
          <button
            onClick={onConfirmar}
            className={clsx(
              'px-3 py-1.5 text-sm rounded-lg font-semibold text-white',
              peligro ? 'bg-red-600 hover:bg-red-700' : 'bg-green-700 hover:bg-green-800'
            )}
          >
            {textoConfirmar}
          </button>
        </div>
      </div>
    </div>
  );
}

function EmptyState({ icono: Icono, titulo, descripcion, accion }) {
  return (
    <div className="flex flex-col items-center justify-center text-center py-16 px-6 text-slate-500">
      <div className="h-14 w-14 rounded-full bg-green-50 flex items-center justify-center mb-3">
        <Icono className="h-7 w-7 text-green-700" />
      </div>
      <h3 className="font-semibold text-slate-700">{titulo}</h3>
      {descripcion && <p className="text-sm mt-1 max-w-sm">{descripcion}</p>}
      {accion}
    </div>
  );
}

function Badge({ color, children }) {
  return (
    <span
      className="px-2 py-0.5 rounded-full text-xs font-semibold"
      style={{ backgroundColor: `${color}1A`, color }}
    >
      {children}
    </span>
  );
}

function EstadoStock({ stock, minimo }) {
  let color = 'bg-green-100 text-green-700', texto = 'OK';
  if (stock <= 0) { color = 'bg-red-100 text-red-700'; texto = 'Agotado'; }
  else if (stock <= minimo) { color = 'bg-red-100 text-red-700'; texto = 'Bajo mínimo'; }
  else if (stock <= minimo * 1.3) { color = 'bg-amber-100 text-amber-700'; texto = 'Por agotarse'; }
  return <span className={clsx('px-2 py-0.5 rounded-full text-xs font-semibold whitespace-nowrap', color)}>{texto}</span>;
}

/* ============================================================================
   Encabezado + barra lateral
   ============================================================================ */
const MODULOS = [
  { id: 'panel', label: 'Panel', icono: LayoutDashboard },
  { id: 'productos', label: 'Productos', icono: Package },
  { id: 'entradas', label: 'Entradas', icono: PackagePlus },
  { id: 'entregas', label: 'Entregas', icono: ClipboardList },
  { id: 'requisiciones', label: 'Requisiciones', icono: Inbox },
  { id: 'colaboradores', label: 'Colaboradores', icono: Users },
  { id: 'ajustes', label: 'Ajustes', icono: Wrench },
  { id: 'proveedores', label: 'Proveedores', icono: Building2 },
  { id: 'reportes', label: 'Reportes', icono: BarChart3 },
  { id: 'configuracion', label: 'Configuración', icono: Settings },
];

function Sidebar({ vista, irA, config }) {
  return (
    <aside className="w-60 shrink-0 bg-green-900 text-green-50 flex flex-col h-screen sticky top-0">
      <div className="p-4 border-b border-green-800 flex items-center gap-2.5">
        <img src={config?.logo || '../assets/logo-blanco.png'} alt="Ecocosecha" className="h-8 w-8 object-contain rounded bg-white/10 p-1" />
        <div className="leading-tight">
          <div className="font-bold text-sm">Ecocosecha</div>
          <div className="text-[11px] text-green-300">Inventario de Insumos</div>
        </div>
      </div>
      <nav className="flex-1 overflow-y-auto py-2">
        {MODULOS.map((m) => {
          const Icono = m.icono;
          const activo = vista === m.id;
          return (
            <button
              key={m.id}
              onClick={() => irA(m.id)}
              className={clsx(
                'w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium transition',
                activo ? 'bg-green-800 text-white border-r-4 border-amber-400' : 'text-green-200 hover:bg-green-800/60 hover:text-white'
              )}
            >
              <Icono className="h-4 w-4 shrink-0" />
              {m.label}
            </button>
          );
        })}
      </nav>
      <div className="p-3 border-t border-green-800">
        <a
          href="../"
          className="flex items-center gap-2 text-sm text-green-200 hover:text-white hover:bg-green-800/60 rounded-lg px-3 py-2 transition"
        >
          <ArrowLeft className="h-4 w-4" /> Volver al panel de inicio
        </a>
      </div>
    </aside>
  );
}

/* ============================================================================
   Pantalla de bienvenida (primera vez: semilla o vacío)
   ============================================================================ */
function PantallaBienvenida({ onListo, toast }) {
  const [cargando, setCargando] = useState(false);
  async function conSemilla() {
    setCargando(true);
    try {
      const { entrada } = await DB.cargarSemilla();
      toast(`Catálogo de ejemplo cargado · Entrada ${entrada.consecutivo} por ${DB.money(entrada.total)}`);
      onListo();
    } catch (e) {
      toast('No se pudo cargar la semilla: ' + e.message, 'error');
      setCargando(false);
    }
  }
  async function sinSemilla() {
    setCargando(true);
    await DB.iniciarVacio();
    toast('Listo, empezaste en limpio.');
    onListo();
  }
  return (
    <div className="min-h-screen flex items-center justify-center bg-green-50 p-6">
      <div className="bg-white rounded-2xl shadow-xl border border-green-100 max-w-lg w-full p-8 text-center space-y-5">
        <img src="../assets/logo-negro.png" alt="Ecocosecha" className="h-14 mx-auto object-contain" />
        <div>
          <h1 className="text-xl font-bold text-slate-800">Inventario de Insumos</h1>
          <p className="text-sm text-slate-500 mt-1">
            Primera vez que abres esta herramienta en este navegador. ¿Cómo quieres empezar?
          </p>
        </div>
        <div className="grid gap-3">
          <button
            disabled={cargando}
            onClick={conSemilla}
            className="bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white rounded-xl px-5 py-3.5 text-sm font-bold flex items-center justify-center gap-2"
          >
            {cargando ? <Loader2 className="h-4 w-4 animate-spin" /> : <PackagePlus className="h-4 w-4" />}
            Cargar catálogo de ejemplo (20 productos + 1 entrada)
          </button>
          <button
            disabled={cargando}
            onClick={sinSemilla}
            className="bg-white border border-slate-300 hover:bg-slate-50 disabled:opacity-60 text-slate-700 rounded-xl px-5 py-3.5 text-sm font-bold"
          >
            Empezar en limpio
          </button>
        </div>
        <p className="text-xs text-slate-400">
          Todo se guarda en este navegador (IndexedDB). Puedes exportar un respaldo desde Configuración.
        </p>
      </div>
    </div>
  );
}

/* ============================================================================
   Panel principal (versión Fase 1 — tarjetas y alertas; gráficas en Fase 4)
   ============================================================================ */
function Panel({ productos, categorias, irA }) {
  const valorInventario = productos.reduce((s, p) => s + (p.stockActual || 0) * (p.costoPromedio || 0), 0);
  const activos = productos.filter((p) => p.activo);
  const bajoMinimo = activos.filter((p) => (p.stockActual || 0) <= (p.stockMinimo || 0));

  const tarjetas = [
    { label: 'Valor del inventario', valor: DB.money(valorInventario), color: 'text-green-700' },
    { label: 'Productos activos', valor: activos.length, color: 'text-slate-800' },
    { label: 'Bajo stock mínimo', valor: bajoMinimo.length, color: bajoMinimo.length ? 'text-red-600' : 'text-slate-800' },
    { label: 'Entregas del mes', valor: '—', color: 'text-slate-400', nota: 'Disponible en la Fase 3' },
    { label: 'Actas sin firmar', valor: '—', color: 'text-slate-400', nota: 'Disponible en la Fase 3' },
  ];

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Panel</h1>
          <p className="text-slate-500 text-sm">Resumen del inventario de insumos de Ecocosecha SAS</p>
        </div>
        <div className="flex gap-2">
          <button onClick={() => irA('entradas')} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold">
            + Nueva entrada
          </button>
          <button onClick={() => irA('entregas')} className="bg-amber-500 hover:bg-amber-600 text-white px-4 py-2.5 rounded-lg text-sm font-bold">
            + Nueva entrega
          </button>
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        {tarjetas.map((t) => (
          <div key={t.label} className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-xs text-slate-500">{t.label}</div>
            <div className={clsx('text-xl font-bold mt-1', t.color)}>{t.valor}</div>
            {t.nota && <div className="text-[10px] text-slate-400 mt-0.5">{t.nota}</div>}
          </div>
        ))}
      </div>

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-4 py-3 border-b border-slate-200 flex items-center gap-2">
          <AlertTriangle className="h-4 w-4 text-red-500" />
          <h2 className="font-bold text-slate-800 text-sm">Alertas de stock</h2>
        </div>
        {bajoMinimo.length === 0 ? (
          <p className="text-sm text-slate-400 p-4">No hay productos por debajo del stock mínimo.</p>
        ) : (
          <ul className="divide-y divide-slate-100">
            {bajoMinimo.map((p) => (
              <li key={p.id} className="px-4 py-2.5 flex items-center justify-between text-sm">
                <span className="text-slate-700">{p.descripcion}</span>
                <span className="text-red-600 font-semibold">
                  {p.stockActual} / mín. {p.stockMinimo} {p.unidadEntrega}
                </span>
              </li>
            ))}
          </ul>
        )}
      </div>

      <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 text-sm text-amber-800">
        Las gráficas de consumo mensual, top de productos entregados y consumo por área llegan en la Fase 4,
        cuando ya existan entregas registradas.
      </div>
    </div>
  );
}

/* ============================================================================
   Productos — catálogo, formulario y fichas técnicas
   ============================================================================ */
const UNIDADES_SUGERIDAS = ['UNIDAD', 'PAQUETE', 'CAJA', 'PACA', 'GALÓN', 'RESMA', 'LIBRA', 'FRASCO', 'ROLLO', 'BOLSA'];
const TIPOS_FICHA = ['Ficha técnica', 'Hoja de seguridad SDS/FDS', 'Certificado', 'Otro'];
const MIME_PERMITIDOS = ['application/pdf', 'image/jpeg', 'image/png', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];

function ProductoForm({ producto, categorias, onGuardar, onCancelar, modoCrear }) {
  const esNuevo = modoCrear || !producto;
  const [f, setF] = useState(
    producto || {
      codigoProveedor: '', descripcion: '', descripcionCorta: '', categoriaId: categorias[0]?.id || '',
      marca: '', referencia: '', unidadCompra: 'UNIDAD', unidadEntrega: 'UNIDAD', factorConversion: 1,
      ivaPct: 19, stockMinimo: 0, ubicacion: '', requiereFirma: true, esEPP: false, vidaUtilDias: '', activo: true,
    }
  );
  const campo = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const campoBool = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.checked }));

  function submit(e) {
    e.preventDefault();
    if (!f.descripcion.trim()) return;
    onGuardar({
      ...f,
      factorConversion: Number(f.factorConversion) || 1,
      ivaPct: Number(f.ivaPct) || 0,
      stockMinimo: Number(f.stockMinimo) || 0,
      vidaUtilDias: f.esEPP && f.vidaUtilDias !== '' ? Number(f.vidaUtilDias) : null,
    });
  }

  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-green-600';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';

  return (
    <form onSubmit={submit} className="space-y-4">
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className={labelCls}>Código del proveedor</label>
          <input className={inputCls} value={f.codigoProveedor} onChange={campo('codigoProveedor')} />
        </div>
        <div>
          <label className={labelCls}>Categoría</label>
          <select className={inputCls} value={f.categoriaId} onChange={campo('categoriaId')}>
            {categorias.map((c) => <option key={c.id} value={c.id}>{c.nombre}</option>)}
          </select>
        </div>
      </div>
      <div>
        <label className={labelCls}>Descripción completa *</label>
        <input required className={inputCls} value={f.descripcion} onChange={campo('descripcion')} />
      </div>
      <div>
        <label className={labelCls}>Descripción corta (para el acta)</label>
        <input className={inputCls} value={f.descripcionCorta} onChange={campo('descripcionCorta')} />
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className={labelCls}>Marca</label>
          <input className={inputCls} value={f.marca} onChange={campo('marca')} />
        </div>
        <div>
          <label className={labelCls}>Referencia</label>
          <input className={inputCls} value={f.referencia} onChange={campo('referencia')} />
        </div>
      </div>
      <div className="grid grid-cols-3 gap-3">
        <div>
          <label className={labelCls}>Unidad de compra</label>
          <input list="unidades" className={inputCls} value={f.unidadCompra} onChange={campo('unidadCompra')} />
        </div>
        <div>
          <label className={labelCls}>Unidad de entrega</label>
          <input list="unidades" className={inputCls} value={f.unidadEntrega} onChange={campo('unidadEntrega')} />
        </div>
        <div>
          <label className={labelCls}>Factor de conversión</label>
          <input type="number" min="1" step="any" className={inputCls} value={f.factorConversion} onChange={campo('factorConversion')} />
        </div>
      </div>
      <datalist id="unidades">{UNIDADES_SUGERIDAS.map((u) => <option key={u} value={u} />)}</datalist>
      <p className="text-xs text-slate-400 -mt-2">
        Ej: 1 PACA = {f.factorConversion || 1} {f.unidadEntrega || 'unidades de entrega'}.
      </p>
      <div className="grid grid-cols-3 gap-3">
        <div>
          <label className={labelCls}>IVA</label>
          <select className={inputCls} value={f.ivaPct} onChange={campo('ivaPct')}>
            <option value={0}>0% (exento)</option>
            <option value={5}>5%</option>
            <option value={19}>19%</option>
          </select>
        </div>
        <div>
          <label className={labelCls}>Stock mínimo ({f.unidadEntrega || 'unidad'})</label>
          <input type="number" min="0" step="any" className={inputCls} value={f.stockMinimo} onChange={campo('stockMinimo')} />
        </div>
        <div>
          <label className={labelCls}>Ubicación</label>
          <input className={inputCls} value={f.ubicacion} onChange={campo('ubicacion')} placeholder="Estante / bodega" />
        </div>
      </div>
      <div className="flex flex-wrap gap-5 pt-1">
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input type="checkbox" checked={!!f.requiereFirma} onChange={campoBool('requiereFirma')} className="accent-green-700" />
          Requiere firma al entregar
        </label>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input type="checkbox" checked={!!f.esEPP} onChange={campoBool('esEPP')} className="accent-green-700" />
          Es EPP / dotación
        </label>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input type="checkbox" checked={!!f.activo} onChange={campoBool('activo')} className="accent-green-700" />
          Activo
        </label>
      </div>
      {f.esEPP && (
        <div className="max-w-xs">
          <label className={labelCls}>Vida útil (días) — para alertar reposición</label>
          <input type="number" min="0" className={inputCls} value={f.vidaUtilDias ?? ''} onChange={campo('vidaUtilDias')} placeholder="Ej: 180" />
        </div>
      )}
      <div className="flex justify-end gap-2 pt-3 border-t border-slate-200">
        <button type="button" onClick={onCancelar} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">
          Cancelar
        </button>
        <button type="submit" className="px-4 py-2 text-sm rounded-lg bg-green-700 hover:bg-green-800 text-white font-bold flex items-center gap-2">
          <Save className="h-4 w-4" /> {esNuevo ? 'Crear producto' : 'Guardar cambios'}
        </button>
      </div>
    </form>
  );
}

function FichasTecnicas({ producto, toast }) {
  const [fichas, setFichas] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [subiendo, setSubiendo] = useState(false);
  const [tipo, setTipo] = useState('Ficha técnica');
  const [vencimiento, setVencimiento] = useState('');
  const [config, setConfig] = useState(null);
  const [confirmarBorrar, setConfirmarBorrar] = useState(null);
  const inputRef = useRef(null);

  async function cargar() {
    setCargando(true);
    const [fs, cfg] = await Promise.all([DB.listarFichas(producto.id), DB.getConfiguracion()]);
    setFichas(fs); setConfig(cfg); setCargando(false);
  }
  useEffect(() => { cargar(); /* eslint-disable-next-line */ }, [producto.id]);

  async function subirArchivo(file) {
    if (!file) return;
    const maxMB = config?.tamanoMaxArchivoMB || 10;
    if (!MIME_PERMITIDOS.includes(file.type)) {
      toast('Formato no permitido. Usa PDF, JPG, PNG o DOCX.', 'error');
      return;
    }
    if (file.size > maxMB * 1024 * 1024) {
      toast(`El archivo pesa más de ${maxMB} MB.`, 'error');
      return;
    }
    setSubiendo(true);
    try {
      const mismasFichas = fichas.filter((f) => f.tipo === tipo);
      const version = mismasFichas.length ? Math.max(...mismasFichas.map((f) => f.version || 1)) + 1 : 1;
      await DB.guardarFicha(producto.id, file, { tipo, version, fechaVencimiento: vencimiento || null });
      toast('Documento cargado.');
      setVencimiento('');
      await cargar();
    } catch (e) {
      toast('No se pudo cargar el archivo: ' + e.message, 'error');
    }
    setSubiendo(false);
  }

  function verArchivo(ficha) {
    const url = URL.createObjectURL(ficha.archivo);
    window.open(url, '_blank');
    setTimeout(() => URL.revokeObjectURL(url), 30000);
  }
  function descargarArchivo(ficha) {
    const url = URL.createObjectURL(ficha.archivo);
    const a = document.createElement('a');
    a.href = url; a.download = ficha.nombreArchivo; a.click();
    setTimeout(() => URL.revokeObjectURL(url), 4000);
  }
  async function borrarFicha(id) {
    await DB.eliminarFicha(id);
    setConfirmarBorrar(null);
    toast('Documento eliminado.');
    cargar();
  }

  return (
    <div className="space-y-4">
      <div
        className="border-2 border-dashed border-slate-300 rounded-xl p-5 text-center bg-slate-50"
        onDragOver={(e) => e.preventDefault()}
        onDrop={(e) => { e.preventDefault(); subirArchivo(e.dataTransfer.files?.[0]); }}
      >
        <Upload className="h-6 w-6 mx-auto text-slate-400 mb-1" />
        <p className="text-sm text-slate-500 mb-3">Arrastra el archivo aquí, o elígelo del equipo (PDF, JPG, PNG o DOCX)</p>
        <div className="flex flex-wrap gap-2 justify-center items-center">
          <select value={tipo} onChange={(e) => setTipo(e.target.value)} className="p-2 border border-slate-300 rounded-lg text-sm bg-white">
            {TIPOS_FICHA.map((t) => <option key={t}>{t}</option>)}
          </select>
          <input type="date" value={vencimiento} onChange={(e) => setVencimiento(e.target.value)} title="Fecha de vencimiento (opcional)" className="p-2 border border-slate-300 rounded-lg text-sm bg-white" />
          <button
            type="button"
            disabled={subiendo}
            onClick={() => inputRef.current?.click()}
            className="bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white px-4 py-2 rounded-lg text-sm font-bold"
          >
            {subiendo ? 'Cargando…' : 'Elegir archivo'}
          </button>
          <input ref={inputRef} type="file" accept=".pdf,.jpg,.jpeg,.png,.docx" hidden onChange={(e) => { subirArchivo(e.target.files?.[0]); e.target.value = ''; }} />
        </div>
      </div>

      {cargando ? (
        <p className="text-sm text-slate-400">Cargando documentos…</p>
      ) : fichas.length === 0 ? (
        <EmptyState icono={FileText} titulo="Sin documentos" descripcion="Este producto todavía no tiene ficha técnica ni hoja de seguridad cargada." />
      ) : (
        <ul className="divide-y divide-slate-100 border border-slate-200 rounded-xl overflow-hidden">
          {fichas.map((f) => (
            <li key={f.id} className="flex items-center gap-3 px-4 py-3 text-sm">
              <FileText className="h-5 w-5 text-slate-400 shrink-0" />
              <div className="flex-1 min-w-0">
                <div className="font-medium text-slate-700 truncate">{f.nombreArchivo}</div>
                <div className="text-xs text-slate-400">
                  {f.tipo} · v{f.version} · {DB.fechaCO(f.fechaCarga)} · {(f.tamano / 1024).toFixed(0)} KB
                  {f.fechaVencimiento && (
                    <span className={new Date(f.fechaVencimiento) < new Date() ? 'text-red-600 font-semibold' : ''}>
                      {' '}· vence {DB.fechaCO(f.fechaVencimiento)}
                    </span>
                  )}
                </div>
              </div>
              <button onClick={() => verArchivo(f)} className="text-green-700 hover:underline text-xs font-semibold">Ver</button>
              <button onClick={() => descargarArchivo(f)} className="text-slate-500 hover:text-slate-700" title="Descargar"><Download className="h-4 w-4" /></button>
              <button onClick={() => setConfirmarBorrar(f.id)} className="text-red-400 hover:text-red-600" title="Eliminar"><Trash2 className="h-4 w-4" /></button>
            </li>
          ))}
        </ul>
      )}

      <ConfirmModal
        abierto={!!confirmarBorrar}
        titulo="¿Eliminar documento?"
        mensaje="Esta acción no se puede deshacer."
        peligro
        textoConfirmar="Eliminar"
        onCancelar={() => setConfirmarBorrar(null)}
        onConfirmar={() => borrarFicha(confirmarBorrar)}
      />
    </div>
  );
}

const ETIQUETA_TIPO_MOV = {
  ENTRADA: ['Entrada', '#16a34a'],
  SALIDA: ['Salida', '#dc2626'],
  AJUSTE_POSITIVO: ['Ajuste (+)', '#2563eb'],
  AJUSTE_NEGATIVO: ['Ajuste (−)', '#b45309'],
  ANULACION: ['Anulación', '#64748b'],
};

function Kardex({ producto }) {
  const [movimientos, setMovimientos] = useState([]);
  const [desde, setDesde] = useState('');
  const [hasta, setHasta] = useState('');

  useEffect(() => {
    DB.queryIndex('movimientos', 'productoId', producto.id).then((ms) =>
      setMovimientos(ms.sort((a, b) => new Date(a.fecha) - new Date(b.fecha)))
    );
  }, [producto.id]);

  const filtrados = movimientos.filter((m) => {
    const dia = (m.fecha || '').slice(0, 10);
    if (desde && dia < desde) return false;
    if (hasta && dia > hasta) return false;
    return true;
  });

  function exportar() {
    const filas = [
      ['Fecha', 'Tipo', 'Documento', 'Cantidad', 'Costo unitario', 'Saldo cantidad', 'Costo promedio', 'Saldo valor', 'Observación'],
      ...filtrados.map((m) => [
        DB.fechaCO(m.fecha), ETIQUETA_TIPO_MOV[m.tipo]?.[0] || m.tipo, `${m.documentoTipo || ''} ${m.consecutivo || ''}`.trim(),
        m.cantidad, m.costoUnitario, m.saldoCantidad, m.saldoCostoPromedio, m.saldoValor, m.observacion || '',
      ]),
    ];
    const ws = window.XLSX.utils.aoa_to_sheet(filas);
    const wb = window.XLSX.utils.book_new();
    window.XLSX.utils.book_append_sheet(wb, ws, 'Kardex');
    window.XLSX.writeFile(wb, `Kardex_${producto.codigoInterno}_${DB.hoyBogota()}.xlsx`);
  }

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap gap-2 items-end">
        <div><label className="block text-xs font-semibold text-slate-600 mb-1">Desde</label><input type="date" value={desde} onChange={(e) => setDesde(e.target.value)} className="p-2 border border-slate-300 rounded-lg text-sm" /></div>
        <div><label className="block text-xs font-semibold text-slate-600 mb-1">Hasta</label><input type="date" value={hasta} onChange={(e) => setHasta(e.target.value)} className="p-2 border border-slate-300 rounded-lg text-sm" /></div>
        <button onClick={exportar} disabled={!filtrados.length} className="ml-auto bg-white border border-slate-300 hover:bg-slate-50 disabled:opacity-50 text-slate-700 px-3 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
          <Download className="h-4 w-4" /> Exportar a Excel
        </button>
      </div>
      {filtrados.length === 0 ? (
        <EmptyState icono={PackagePlus} titulo="Sin movimientos" descripcion="Este producto todavía no tiene entradas, salidas ni ajustes en ese rango de fechas." />
      ) : (
        <div className="overflow-x-auto border border-slate-200 rounded-xl">
          <table className="w-full text-sm">
            <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr>
              <th className="px-3 py-2 text-left">Fecha</th><th className="px-3 py-2 text-left">Tipo</th><th className="px-3 py-2 text-left">Documento</th>
              <th className="px-3 py-2 text-right">Cantidad</th><th className="px-3 py-2 text-right">Costo unit.</th>
              <th className="px-3 py-2 text-right">Saldo cant.</th><th className="px-3 py-2 text-right">Costo prom.</th><th className="px-3 py-2 text-right">Saldo valor</th>
            </tr></thead>
            <tbody className="divide-y divide-slate-100">
              {filtrados.map((m) => {
                const [etiqueta, color] = ETIQUETA_TIPO_MOV[m.tipo] || [m.tipo, '#64748b'];
                return (
                  <tr key={m.id}>
                    <td className="px-3 py-2 whitespace-nowrap">{DB.fechaCO(m.fecha)}</td>
                    <td className="px-3 py-2"><Badge color={color}>{etiqueta}</Badge></td>
                    <td className="px-3 py-2 text-xs text-slate-500">{m.documentoTipo} {m.consecutivo}</td>
                    <td className={clsx('px-3 py-2 text-right font-semibold', m.cantidad >= 0 ? 'text-green-700' : 'text-red-600')}>{m.cantidad >= 0 ? '+' : ''}{m.cantidad}</td>
                    <td className="px-3 py-2 text-right">{DB.money(m.costoUnitario)}</td>
                    <td className="px-3 py-2 text-right font-semibold">{m.saldoCantidad}</td>
                    <td className="px-3 py-2 text-right">{DB.money(m.saldoCostoPromedio)}</td>
                    <td className="px-3 py-2 text-right">{DB.money(m.saldoValor)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function ProductoDetalle({ producto, categoria, onVolver, onActualizado, toast }) {
  const [tab, setTab] = useState('info');
  const [editando, setEditando] = useState(false);
  const [conteoFichas, setConteoFichas] = useState(null);

  useEffect(() => { DB.listarFichas(producto.id).then((f) => setConteoFichas(f.length)); }, [producto.id, tab]);

  async function guardar(datos) {
    const actualizado = await DB.actualizarProducto(producto.id, datos);
    toast('Producto actualizado.');
    setEditando(false);
    onActualizado(actualizado);
  }

  const TABS = [
    { id: 'info', label: 'Información' },
    { id: 'fichas', label: `Fichas técnicas${conteoFichas ? ` (${conteoFichas})` : ''}` },
    { id: 'kardex', label: 'Kardex' },
    { id: 'entregas', label: 'Entregas' },
  ];

  return (
    <div className="p-6 space-y-4">
      <button onClick={onVolver} className="flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700">
        <ChevronLeft className="h-4 w-4" /> Volver al catálogo
      </button>

      <div className="flex items-start justify-between flex-wrap gap-3">
        <div>
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-mono text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded">{producto.codigoInterno}</span>
            {categoria && <Badge color={categoria.color}>{categoria.nombre}</Badge>}
            {!producto.activo && <Badge color="#64748b">Inactivo</Badge>}
            {producto.esEPP && <Badge color="#ea580c">EPP</Badge>}
          </div>
          <h1 className="text-xl font-bold text-slate-800 mt-1">{producto.descripcion}</h1>
        </div>
        {!editando && (
          <button onClick={() => setEditando(true)} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
            <Edit2 className="h-4 w-4" /> Editar
          </button>
        )}
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        <div className="bg-white rounded-xl border border-slate-200 p-3">
          <div className="text-xs text-slate-500">Stock actual</div>
          <div className="text-lg font-bold text-slate-800">{producto.stockActual} <span className="text-xs font-normal text-slate-400">{producto.unidadEntrega}</span></div>
          <EstadoStock stock={producto.stockActual} minimo={producto.stockMinimo} />
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-3">
          <div className="text-xs text-slate-500">Costo promedio</div>
          <div className="text-lg font-bold text-slate-800">{DB.money(producto.costoPromedio)}</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-3">
          <div className="text-xs text-slate-500">Valor en inventario</div>
          <div className="text-lg font-bold text-slate-800">{DB.money(producto.stockActual * producto.costoPromedio)}</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-3">
          <div className="text-xs text-slate-500">Stock mínimo</div>
          <div className="text-lg font-bold text-slate-800">{producto.stockMinimo} <span className="text-xs font-normal text-slate-400">{producto.unidadEntrega}</span></div>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="flex border-b border-slate-200 overflow-x-auto">
          {TABS.map((t) => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={clsx(
                'px-4 py-2.5 text-sm font-semibold whitespace-nowrap border-b-2 -mb-px',
                tab === t.id ? 'border-green-700 text-green-800' : 'border-transparent text-slate-500 hover:text-slate-700'
              )}
            >
              {t.label}
            </button>
          ))}
        </div>
        <div className="p-5">
          {tab === 'info' && (editando ? (
            <ProductoForm producto={producto} categorias={categoria ? [categoria] : []} onGuardar={guardar} onCancelar={() => setEditando(false)} />
          ) : (
            <dl className="grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm">
              {[
                ['Código proveedor', producto.codigoProveedor || '—'],
                ['Marca', producto.marca || '—'],
                ['Referencia', producto.referencia || '—'],
                ['Unidad de compra', producto.unidadCompra],
                ['Unidad de entrega', producto.unidadEntrega],
                ['Factor de conversión', `1 ${producto.unidadCompra} = ${producto.factorConversion} ${producto.unidadEntrega}`],
                ['IVA', `${producto.ivaPct}%`],
                ['Ubicación', producto.ubicacion || '—'],
                ['Requiere firma', producto.requiereFirma ? 'Sí' : 'No'],
                ['Vida útil EPP', producto.esEPP ? (producto.vidaUtilDias ? `${producto.vidaUtilDias} días` : 'No definida') : '—'],
              ].map(([k, v]) => (
                <div key={k}>
                  <dt className="text-xs text-slate-400">{k}</dt>
                  <dd className="text-slate-700 font-medium">{v}</dd>
                </div>
              ))}
            </dl>
          ))}
          {tab === 'fichas' && <FichasTecnicas producto={producto} toast={toast} />}
          {tab === 'kardex' && <Kardex producto={producto} />}
          {tab === 'entregas' && (
            <EmptyState icono={ClipboardList} titulo="Historial de entregas disponible en la Fase 3" descripcion="Aquí vas a ver a quién se le ha entregado este producto y cuándo." />
          )}
        </div>
      </div>
    </div>
  );
}

function Productos({ productos, categorias, recargar, toast }) {
  const [busqueda, setBusqueda] = useState('');
  const [filtroCategoria, setFiltroCategoria] = useState('');
  const [filtroStock, setFiltroStock] = useState('');
  const [seleccionado, setSeleccionado] = useState(null);
  const [modalNuevo, setModalNuevo] = useState(false);
  const [importando, setImportando] = useState(false);
  const [confirmarInactivar, setConfirmarInactivar] = useState(null);

  const catPorId = useMemo(() => Object.fromEntries(categorias.map((c) => [c.id, c])), [categorias]);

  const filtrados = useMemo(() => {
    const q = busqueda.trim().toLowerCase();
    return productos.filter((p) => {
      if (filtroCategoria && p.categoriaId !== filtroCategoria) return false;
      if (filtroStock === 'bajo' && !((p.stockActual || 0) <= (p.stockMinimo || 0))) return false;
      if (filtroStock === 'ok' && (p.stockActual || 0) <= (p.stockMinimo || 0)) return false;
      if (!q) return true;
      return (p.descripcion + ' ' + p.codigoProveedor + ' ' + p.codigoInterno + ' ' + (p.marca || '')).toLowerCase().includes(q);
    }).sort((a, b) => a.descripcion.localeCompare(b.descripcion, 'es'));
  }, [productos, busqueda, filtroCategoria, filtroStock]);

  async function crear(datos) {
    const p = await DB.crearProducto(datos);
    toast(`Producto creado: ${p.codigoInterno}`);
    setModalNuevo(false);
    await recargar();
  }
  async function inactivar(id) {
    await DB.actualizarProducto(id, { activo: false });
    setConfirmarInactivar(null);
    toast('Producto inactivado.');
    await recargar();
  }

  if (seleccionado) {
    const actual = productos.find((p) => p.id === seleccionado.id) || seleccionado;
    return (
      <ProductoDetalle
        producto={actual}
        categoria={catPorId[actual.categoriaId]}
        onVolver={() => setSeleccionado(null)}
        onActualizado={async () => { await recargar(); }}
        toast={toast}
      />
    );
  }

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Productos</h1>
          <p className="text-slate-500 text-sm">{productos.length} en el catálogo · {productos.filter(p=>p.activo).length} activos</p>
        </div>
        <div className="flex gap-2">
          <button onClick={() => setImportando(true)} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
            <FileSpreadsheet className="h-4 w-4" /> Importar Excel
          </button>
          <button onClick={() => setModalNuevo(true)} className="bg-green-700 hover:bg-green-800 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
            <Plus className="h-4 w-4" /> Nuevo producto
          </button>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-3 flex flex-wrap gap-2">
        <div className="relative flex-1 min-w-[220px]">
          <Search className="h-4 w-4 absolute left-3 top-3 text-slate-400" />
          <input value={busqueda} onChange={(e) => setBusqueda(e.target.value)} placeholder="Buscar por código, descripción o marca…" className="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm" />
        </div>
        <select value={filtroCategoria} onChange={(e) => setFiltroCategoria(e.target.value)} className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
          <option value="">Todas las categorías</option>
          {categorias.map((c) => <option key={c.id} value={c.id}>{c.nombre}</option>)}
        </select>
        <select value={filtroStock} onChange={(e) => setFiltroStock(e.target.value)} className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
          <option value="">Cualquier stock</option>
          <option value="bajo">Bajo mínimo</option>
          <option value="ok">Normal</option>
        </select>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        {filtrados.length === 0 ? (
          <EmptyState icono={Package} titulo="Sin resultados" descripcion="Ajusta la búsqueda o los filtros, o crea el primer producto." />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-slate-50 text-slate-500 text-xs uppercase font-semibold">
                <tr>
                  <th className="px-4 py-3 text-left">Código</th>
                  <th className="px-4 py-3 text-left">Descripción</th>
                  <th className="px-4 py-3 text-left">Categoría</th>
                  <th className="px-4 py-3 text-left">Unidad</th>
                  <th className="px-4 py-3 text-right">Stock</th>
                  <th className="px-4 py-3 text-right">Mínimo</th>
                  <th className="px-4 py-3 text-right">Costo prom.</th>
                  <th className="px-4 py-3 text-right">Valor</th>
                  <th className="px-4 py-3 text-center">Ficha</th>
                  <th className="px-4 py-3"></th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filtrados.map((p) => {
                  const cat = catPorId[p.categoriaId];
                  return (
                    <tr key={p.id} className={clsx('hover:bg-slate-50 cursor-pointer', !p.activo && 'opacity-50')} onClick={() => setSeleccionado(p)}>
                      <td className="px-4 py-2.5 font-mono text-xs text-slate-500">{p.codigoInterno}<br/><span className="text-slate-400">{p.codigoProveedor}</span></td>
                      <td className="px-4 py-2.5 text-slate-700 max-w-xs">{p.descripcion}</td>
                      <td className="px-4 py-2.5">{cat && <Badge color={cat.color}>{cat.nombre}</Badge>}</td>
                      <td className="px-4 py-2.5 text-slate-500">{p.unidadEntrega}</td>
                      <td className="px-4 py-2.5 text-right font-semibold">{p.stockActual}</td>
                      <td className="px-4 py-2.5 text-right text-slate-400">{p.stockMinimo}</td>
                      <td className="px-4 py-2.5 text-right">{DB.money(p.costoPromedio)}</td>
                      <td className="px-4 py-2.5 text-right">{DB.money(p.stockActual * p.costoPromedio)}</td>
                      <td className="px-4 py-2.5 text-center"><FichaIndicador productoId={p.id} /></td>
                      <td className="px-4 py-2.5 text-right" onClick={(e) => e.stopPropagation()}>
                        {p.activo && (
                          <button onClick={() => setConfirmarInactivar(p.id)} className="text-xs text-slate-400 hover:text-red-600">Inactivar</button>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {modalNuevo && (
        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
          <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-2xl w-full my-8">
            <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl">
              <h3 className="font-bold">Nuevo producto</h3>
              <button onClick={() => setModalNuevo(false)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
            </div>
            <div className="p-6">
              <ProductoForm categorias={categorias} onGuardar={crear} onCancelar={() => setModalNuevo(false)} />
            </div>
          </div>
        </div>
      )}

      <ConfirmModal
        abierto={!!confirmarInactivar}
        titulo="¿Inactivar producto?"
        mensaje="Deja de aparecer para nuevas entradas o entregas, pero conserva su historial. Lo puedes reactivar después."
        textoConfirmar="Inactivar"
        onCancelar={() => setConfirmarInactivar(null)}
        onConfirmar={() => inactivar(confirmarInactivar)}
      />

      {importando && (
        <ImportarProductos
          productos={productos} categorias={categorias} recargar={recargar} toast={toast}
          onCancelar={() => setImportando(false)}
        />
      )}
    </div>
  );
}

function FichaIndicador({ productoId }) {
  const [tiene, setTiene] = useState(null);
  useEffect(() => { DB.listarFichas(productoId).then((f) => setTiene(f.length > 0)); }, [productoId]);
  if (tiene === null) return null;
  return tiene ? <FileText className="h-4 w-4 text-green-600 inline" /> : <span className="text-slate-300">—</span>;
}

/* ============================================================================
   Buscador de producto (por código de proveedor, código interno o descripción)
   ============================================================================ */
function BuscadorProducto({ productos, onElegir, placeholder }) {
  const [q, setQ] = useState('');
  const [abierto, setAbierto] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    function fuera(e) { if (ref.current && !ref.current.contains(e.target)) setAbierto(false); }
    document.addEventListener('mousedown', fuera);
    return () => document.removeEventListener('mousedown', fuera);
  }, []);
  const norm = (s) => String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
  const term = norm(q.trim());
  const resultados = term
    ? productos.filter((p) => norm(`${p.codigoProveedor} ${p.codigoInterno} ${p.descripcion} ${p.marca || ''}`).includes(term)).slice(0, 30)
    : [];
  return (
    <div className="relative" ref={ref}>
      <div className="relative">
        <Search className="h-4 w-4 absolute left-3 top-2.5 text-slate-400" />
        <input
          value={q}
          onChange={(e) => { setQ(e.target.value); setAbierto(true); }}
          onFocus={() => setAbierto(true)}
          placeholder={placeholder || 'Buscar producto por código o descripción…'}
          className="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm"
        />
      </div>
      {abierto && resultados.length > 0 && (
        <ul className="absolute z-20 mt-1 w-full max-h-64 overflow-y-auto bg-white border border-slate-200 rounded-lg shadow-lg text-sm">
          {resultados.map((p) => (
            <li key={p.id}>
              <button
                type="button"
                onMouseDown={(e) => e.preventDefault()}
                onClick={() => { onElegir(p); setQ(''); setAbierto(false); }}
                className="w-full text-left px-3 py-2 hover:bg-green-50 flex justify-between gap-2"
              >
                <span>{p.descripcion}</span>
                <span className="text-xs text-slate-400 shrink-0">{p.codigoProveedor}</span>
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

/* ============================================================================
   Entradas — recepción de mercancía del proveedor
   ============================================================================ */
function LineaEntradaEditor({ linea, producto, onCambiar, onQuitar }) {
  const factor = producto?.factorConversion || 1;
  const cantidadEntrega = DB.round0((linea.cantidadCompra || 0) * factor * 1000) / 1000;
  const valorLinea = DB.round0((linea.cantidadCompra || 0) * (linea.valorUnitarioCompra || 0));
  const inputCls = 'w-full p-1.5 border border-slate-300 rounded text-sm text-right';
  return (
    <tr className="border-t border-slate-100">
      <td className="px-3 py-2">
        <div className="font-medium text-slate-700">{producto?.descripcion}</div>
        <div className="text-xs text-slate-400">{producto?.codigoProveedor} · {producto?.unidadCompra} → {producto?.unidadEntrega} (×{factor})</div>
      </td>
      <td className="px-3 py-2 w-24"><input type="number" min="0" step="any" className={inputCls} value={linea.cantidadCompra} onChange={(e) => onCambiar({ ...linea, cantidadCompra: Number(e.target.value) })} /></td>
      <td className="px-3 py-2 w-28 text-right text-slate-500">{DB.round0(cantidadEntrega * 1000) / 1000} {producto?.unidadEntrega}</td>
      <td className="px-3 py-2 w-32"><input type="number" min="0" step="any" className={inputCls} value={linea.valorUnitarioCompra} onChange={(e) => onCambiar({ ...linea, valorUnitarioCompra: Number(e.target.value) })} /></td>
      <td className="px-3 py-2 w-24">
        <select className="w-full p-1.5 border border-slate-300 rounded text-sm" value={linea.ivaPct} onChange={(e) => onCambiar({ ...linea, ivaPct: Number(e.target.value) })}>
          <option value={0}>0%</option><option value={5}>5%</option><option value={19}>19%</option>
        </select>
      </td>
      <td className="px-3 py-2 w-28 text-right font-semibold text-slate-700">{DB.money(valorLinea)}</td>
      <td className="px-3 py-2 w-10 text-center">
        <button type="button" onClick={onQuitar} className="text-slate-400 hover:text-red-600"><X className="h-4 w-4" /></button>
      </td>
    </tr>
  );
}

function EntradaForm({ productos, categorias, proveedores, valoresIniciales, recargarProductos, recargarProveedores, toast, onGuardada, onCancelar }) {
  const [proveedorId, setProveedorId] = useState(valoresIniciales?.proveedorId || proveedores[0]?.id || '');
  const [fechaRecepcion, setFechaRecepcion] = useState(valoresIniciales?.fechaRecepcion || DB.hoyBogota());
  const [tipoSoporte, setTipoSoporte] = useState(valoresIniciales?.tipoSoporte || 'Remisión');
  const [numeroRemision, setNumeroRemision] = useState(valoresIniciales?.numeroRemision || '');
  const [numeroFactura, setNumeroFactura] = useState(valoresIniciales?.numeroFactura || '');
  const [numeroPedido, setNumeroPedido] = useState(valoresIniciales?.numeroPedido || '');
  const [totalFactura, setTotalFactura] = useState('');
  const [observaciones, setObservaciones] = useState(valoresIniciales?.observaciones || '');
  const [recibidoPor, setRecibidoPor] = useState('Director de Operaciones');
  const [lineas, setLineas] = useState(
    (valoresIniciales?.lineas || []).map((l) => ({ ...l, key: DB.uid() }))
  );
  const [adjuntos, setAdjuntos] = useState([]);
  const [guardando, setGuardando] = useState(false);
  const [nuevoProveedor, setNuevoProveedor] = useState(false);
  const [productoRapido, setProductoRapido] = useState(null); // {descripcion, codigoProveedor} pendiente de crear

  const productosPorId = useMemo(() => Object.fromEntries(productos.map((p) => [p.id, p])), [productos]);

  function agregarProducto(p) {
    if (lineas.some((l) => l.productoId === p.id)) { toast('Ese producto ya está en la lista.', 'warn'); return; }
    setLineas((ls) => [...ls, { key: DB.uid(), productoId: p.id, cantidadCompra: 1, valorUnitarioCompra: 0, ivaPct: p.ivaPct || 0 }]);
  }
  function cambiarLinea(key, nueva) { setLineas((ls) => ls.map((l) => (l.key === key ? nueva : l))); }
  function quitarLinea(key) { setLineas((ls) => ls.filter((l) => l.key !== key)); }

  const totales = useMemo(() => DB.calcularTotales(lineas.map((l) => ({ ...l, ivaPct: l.ivaPct }))), [lineas]);
  const diferenciaFactura = totalFactura !== '' ? Math.round(totales.total - Number(totalFactura)) : 0;

  async function crearProveedorRapido(datos) {
    const p = { id: DB.uid(), ...datos };
    await DB.put('proveedores', p);
    setProveedorId(p.id);
    setNuevoProveedor(false);
    await recargarProveedores();
    toast('Proveedor creado.');
  }

  async function crearProductoRapido(datos) {
    const p = await DB.crearProducto({ ...datos, codigoProveedor: productoRapido.codigoProveedor || datos.codigoProveedor, descripcion: datos.descripcion || productoRapido.descripcion });
    await recargarProductos();
    setProductoRapido(null);
    agregarProducto(p);
    toast(`Producto creado: ${p.codigoInterno}`);
  }

  function manejarAdjuntos(files) {
    const arr = Array.from(files || []);
    Promise.resolve().then(() => setAdjuntos((a) => [...a, ...arr.map((f) => ({ nombreArchivo: f.name, mime: f.type, archivo: f }))]));
  }

  async function guardar(e) {
    e.preventDefault();
    if (!proveedorId) { toast('Elige el proveedor.', 'error'); return; }
    if (!lineas.length) { toast('Agrega al menos un producto.', 'error'); return; }
    if (lineas.some((l) => !l.cantidadCompra || l.cantidadCompra <= 0)) { toast('Hay líneas con cantidad en cero.', 'error'); return; }

    // Advertencia de posible duplicado (misma factura/remisión del mismo proveedor)
    const entradasProv = await DB.queryIndex('entradas', 'proveedorId', proveedorId);
    const posibleDup = entradasProv.find(
      (e) => e.estado !== 'Anulada' && (
        (numeroFactura && e.numeroFactura === numeroFactura) ||
        (numeroRemision && e.numeroRemision === numeroRemision)
      )
    );
    if (posibleDup) {
      const continuar = window.confirm(
        `Ya existe la entrada ${posibleDup.consecutivo} con ese mismo número de factura o remisión para este proveedor. ¿Registrar de todas formas?`
      );
      if (!continuar) return;
    }

    setGuardando(true);
    try {
      const { entrada } = await DB.registrarEntrada(
        {
          proveedorId, fechaRecepcion, tipoSoporte, numeroRemision, numeroFactura, numeroPedido,
          observaciones, recibidoPor, adjuntos,
        },
        lineas.map((l) => ({ productoId: l.productoId, cantidadCompra: l.cantidadCompra, valorUnitarioCompra: l.valorUnitarioCompra, ivaPct: l.ivaPct, codigoProveedor: productosPorId[l.productoId]?.codigoProveedor }))
      );
      toast(`Entrada ${entrada.consecutivo} guardada por ${DB.money(entrada.total)}.`);
      await recargarProductos();
      onGuardada(entrada);
    } catch (err) {
      toast('No se pudo guardar: ' + err.message, 'error');
    }
    setGuardando(false);
  }

  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';

  return (
    <>
    <form onSubmit={guardar} className="space-y-5">
      <div className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Datos de la entrada</h2>
        <div className="grid sm:grid-cols-2 gap-3">
          <div>
            <label className={labelCls}>Proveedor *</label>
            <div className="flex gap-2">
              <select className={inputCls} value={proveedorId} onChange={(e) => setProveedorId(e.target.value)}>
                <option value="">— elige —</option>
                {proveedores.map((p) => <option key={p.id} value={p.id}>{p.razonSocial}</option>)}
              </select>
              <button type="button" onClick={() => setNuevoProveedor(true)} className="shrink-0 px-3 border border-slate-300 rounded-lg text-sm hover:bg-slate-50">+ Nuevo</button>
            </div>
          </div>
          <div>
            <label className={labelCls}>Fecha de recepción *</label>
            <input type="date" required className={inputCls} value={fechaRecepcion} onChange={(e) => setFechaRecepcion(e.target.value)} />
          </div>
        </div>
        <div className="grid sm:grid-cols-4 gap-3">
          <div>
            <label className={labelCls}>Tipo de soporte</label>
            <select className={inputCls} value={tipoSoporte} onChange={(e) => setTipoSoporte(e.target.value)}>
              {['Remisión', 'Factura', 'Pedido', 'Cotización', 'Otro'].map((t) => <option key={t}>{t}</option>)}
            </select>
          </div>
          <div><label className={labelCls}>N.° remisión</label><input className={inputCls} value={numeroRemision} onChange={(e) => setNumeroRemision(e.target.value)} /></div>
          <div><label className={labelCls}>N.° factura</label><input className={inputCls} value={numeroFactura} onChange={(e) => setNumeroFactura(e.target.value)} /></div>
          <div><label className={labelCls}>N.° pedido</label><input className={inputCls} value={numeroPedido} onChange={(e) => setNumeroPedido(e.target.value)} /></div>
        </div>
        <div className="grid sm:grid-cols-2 gap-3">
          <div><label className={labelCls}>Recibido por</label><input className={inputCls} value={recibidoPor} onChange={(e) => setRecibidoPor(e.target.value)} /></div>
          <div><label className={labelCls}>Adjuntos (PDF, foto)</label><input type="file" multiple accept=".pdf,.jpg,.jpeg,.png" onChange={(e) => manejarAdjuntos(e.target.files)} className="text-sm" /></div>
        </div>
        {adjuntos.length > 0 && <p className="text-xs text-slate-500">{adjuntos.length} archivo(s): {adjuntos.map((a) => a.nombreArchivo).join(', ')}</p>}
        <div><label className={labelCls}>Observaciones</label><textarea rows={2} className={inputCls} value={observaciones} onChange={(e) => setObservaciones(e.target.value)} /></div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Productos</h2>
        <BuscadorProducto
          productos={productos.filter((p) => p.activo)}
          onElegir={agregarProducto}
          placeholder="Busca por código del proveedor o descripción y elige…"
        />
        <p className="text-xs text-slate-400">¿No existe el producto? <button type="button" onClick={() => setProductoRapido({ descripcion: '', codigoProveedor: '' })} className="text-green-700 underline">Créalo aquí mismo</button>.</p>
        {lineas.length > 0 && (
          <div className="overflow-x-auto border border-slate-200 rounded-lg">
            <table className="w-full text-sm">
              <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr>
                <th className="px-3 py-2 text-left">Producto</th>
                <th className="px-3 py-2 text-right">Cant. compra</th>
                <th className="px-3 py-2 text-right">Cant. entrega</th>
                <th className="px-3 py-2 text-right">Vr. unitario</th>
                <th className="px-3 py-2 text-right">IVA</th>
                <th className="px-3 py-2 text-right">Total línea</th>
                <th></th>
              </tr></thead>
              <tbody>
                {lineas.map((l) => (
                  <LineaEntradaEditor key={l.key} linea={l} producto={productosPorId[l.productoId]} onCambiar={(n) => cambiarLinea(l.key, n)} onQuitar={() => quitarLinea(l.key)} />
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-5 space-y-2 max-w-sm ml-auto">
        <div className="flex justify-between text-sm"><span className="text-slate-500">Subtotal</span><span className="font-medium">{DB.money(totales.subtotal)}</span></div>
        <div className="flex justify-between text-sm"><span className="text-slate-500">IVA</span><span className="font-medium">{DB.money(totales.iva)}</span></div>
        <div className="flex justify-between text-base font-bold border-t border-slate-200 pt-2"><span>Total</span><span>{DB.money(totales.total)}</span></div>
        <div className="pt-2">
          <label className={labelCls}>Total según el soporte (opcional, para comparar)</label>
          <input type="number" className={inputCls} value={totalFactura} onChange={(e) => setTotalFactura(e.target.value)} placeholder="Ej: 1214094" />
        </div>
        {totalFactura !== '' && diferenciaFactura !== 0 && (
          <div className="flex items-center gap-1.5 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2">
            <AlertCircle className="h-3.5 w-3.5 shrink-0" /> Hay una diferencia de {DB.money(Math.abs(diferenciaFactura))} contra el total del soporte.
          </div>
        )}
      </div>

      <div className="flex justify-end gap-2">
        <button type="button" onClick={onCancelar} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Cancelar</button>
        <button disabled={guardando} type="submit" className="px-5 py-2.5 text-sm rounded-lg bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white font-bold flex items-center gap-2">
          <Save className="h-4 w-4" /> {guardando ? 'Guardando…' : 'Guardar entrada'}
        </button>
      </div>
    </form>

    {nuevoProveedor && (
      <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-xl shadow-xl max-w-lg w-full">
          <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl"><h3 className="font-bold">Nuevo proveedor</h3><button type="button" onClick={() => setNuevoProveedor(false)}><X className="h-5 w-5" /></button></div>
          <div className="p-6"><ProveedorForm onGuardar={crearProveedorRapido} onCancelar={() => setNuevoProveedor(false)} /></div>
        </div>
      </div>
    )}
    {productoRapido && (
      <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
        <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full my-8">
          <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl"><h3 className="font-bold">Nuevo producto</h3><button type="button" onClick={() => setProductoRapido(null)}><X className="h-5 w-5" /></button></div>
          <div className="p-6">
            <ProductoForm
              categorias={categorias}
              modoCrear
              producto={{ codigoProveedor: productoRapido.codigoProveedor, descripcion: productoRapido.descripcion, descripcionCorta: '', categoriaId: categorias[0]?.id || '', marca: '', referencia: '', unidadCompra: 'UNIDAD', unidadEntrega: 'UNIDAD', factorConversion: 1, ivaPct: 19, stockMinimo: 0, ubicacion: '', requiereFirma: true, esEPP: false, vidaUtilDias: '', activo: true }}
              onGuardar={crearProductoRapido}
              onCancelar={() => setProductoRapido(null)}
            />
          </div>
        </div>
      </div>
    )}
    </>
  );
}

/* ============================================================================
   Importación del Excel del proveedor (o la plantilla genérica)
   ============================================================================ */
const MESES_ES = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];
function normTxt(s) { return String(s ?? '').normalize('NFD').replace(/[̀-ͯ]/g, '').trim().toUpperCase(); }
function parsearFechaLarga(txt) {
  const m = String(txt || '').match(/(\d{1,2})\s+de\s+([a-záéíóúñ]+)\s+del?\s+(\d{4})/i);
  if (!m) return '';
  const mesIdx = MESES_ES.findIndex((mm) => normTxt(mm) === normTxt(m[2]));
  if (mesIdx === -1) return '';
  return `${m[3]}-${String(mesIdx + 1).padStart(2, '0')}-${m[1].padStart(2, '0')}`;
}
function extraerTotalesArchivo(rows, startIdx) {
  const out = {};
  for (let i = startIdx; i < Math.min(startIdx + 6, rows.length); i++) {
    const row = rows[i] || [];
    const idx = row.findIndex((c) => /SUBTOTAL|FLETE|^IVA$|TOTAL/.test(normTxt(c)));
    if (idx === -1) continue;
    const etiqueta = normTxt(row[idx]);
    const numeros = row.filter((c) => typeof c === 'number' || (c !== '' && c != null && !isNaN(parseFloat(c))));
    const valor = Number(numeros[numeros.length - 1]) || 0;
    if (etiqueta.includes('SUBTOTAL')) out.subtotal = valor;
    else if (etiqueta.includes('FLETE')) out.flete = valor;
    else if (etiqueta === 'IVA') out.iva = valor;
    else if (etiqueta.includes('TOTAL')) out.total = valor;
  }
  return out;
}
function parsearExcelEntrada(rows) {
  let headerIdx = -1, cols = {}, esPlantillaGenerica = false;
  for (let i = 0; i < Math.min(rows.length, 25); i++) {
    const row = Array.from(rows[i] || [], normTxt);
    const iCodigo = row.indexOf('CODIGO');
    const iDesc = row.findIndex((c) => c.startsWith('DESCRIPCION'));
    if (iCodigo !== -1 && iDesc !== -1) {
      headerIdx = i;
      const iValorUnitario = row.findIndex((c) => (c.startsWith('VR') || c.startsWith('VALOR')) && c.includes('UNITARIO'));
      cols = { codigo: iCodigo, descripcion: iDesc, cantidad: row.findIndex((c) => c.startsWith('CANT')), iva: row.indexOf('IVA'), valorUnitario: iValorUnitario };
      // La plantilla genérica también trae columnas CÓDIGO y DESCRIPCIÓN, así que llega
      // hasta aquí; se distingue del pedido real del proveedor porque su columna de
      // valor dice "Valor unitario" (no "Vr. unitario") y no trae filas de encabezado
      // adicionales (número de pedido, fecha) antes de la fila de títulos.
      esPlantillaGenerica = headerIdx === 0 && iValorUnitario !== -1 && row[iValorUnitario].startsWith('VALOR');
      break;
    }
  }
  if (headerIdx === -1) {
    // Plantilla genérica: encabezados en la fila 1.
    const row0 = Array.from(rows[0] || [], normTxt);
    const iCodigo = row0.findIndex((c) => c.includes('CODIGO'));
    const iDesc = row0.findIndex((c) => c.includes('DESCRIPCION'));
    if (iCodigo === -1 || iDesc === -1) throw new Error('No se encontró una fila de encabezados con "CODIGO" y "DESCRIPCIÓN".');
    const iCant = row0.findIndex((c) => c.includes('CANTIDAD'));
    const iValor = row0.findIndex((c) => c.includes('VALOR') && c.includes('UNITARIO'));
    const iIva = row0.findIndex((c) => c.includes('IVA'));
    const lineas = [];
    for (let i = 1; i < rows.length; i++) {
      const row = rows[i] || [];
      const descripcion = row[iDesc];
      if (!descripcion || String(descripcion).trim() === '') continue;
      lineas.push({
        codigoProveedor: String(row[iCodigo] ?? '').trim(),
        descripcion: String(descripcion).trim(),
        cantidadCompra: Number(row[iCant]) || 0,
        ivaPct: Number(String(row[iIva] ?? '').replace('%', '')) || 0,
        valorUnitarioCompra: Number(row[iValor]) || 0,
      });
    }
    return { lineas, numeroPedido: '', fechaISO: '', totalesArchivo: null, formato: 'generico' };
  }

  let numeroPedido = '', fechaTexto = '';
  for (let i = 0; i < headerIdx; i++) {
    for (const celda of rows[i] || []) {
      const txt = String(celda ?? '');
      const mPedido = txt.match(/no\.?\s*(\d{3,})/i);
      if (mPedido && !numeroPedido) numeroPedido = mPedido[1];
      if (!fechaTexto && /\d{1,2}\s+de\s+[a-záéíóúñ]+\s+del?\s+\d{4}/i.test(txt)) fechaTexto = txt;
    }
  }

  const lineas = [];
  let totalesArchivo = null;
  for (let i = headerIdx + 1; i < rows.length; i++) {
    const row = rows[i] || [];
    if (row.some((c) => normTxt(c).startsWith('SUBTOTAL'))) { totalesArchivo = extraerTotalesArchivo(rows, i); break; }
    const codigo = row[cols.codigo];
    if (codigo === undefined || codigo === null || String(codigo).trim() === '') continue;
    const descripcion = String(row[cols.descripcion] ?? '').trim();
    const cantidad = Number(row[cols.cantidad]) || 0;
    if (!descripcion || !(cantidad > 0)) continue;
    const ivaPct = Number(String(row[cols.iva] ?? '').replace('%', '').replace(',', '.')) || 0;
    lineas.push({ codigoProveedor: String(codigo).trim(), descripcion, cantidadCompra: cantidad, ivaPct, valorUnitarioCompra: Number(row[cols.valorUnitario]) || 0 });
  }
  return { lineas, numeroPedido, fechaISO: parsearFechaLarga(fechaTexto), totalesArchivo, formato: esPlantillaGenerica ? 'generico' : 'proveedor' };
}

function descargarPlantillaGenerica() {
  const wb = window.XLSX.utils.book_new();
  const ws = window.XLSX.utils.aoa_to_sheet([
    ['Código', 'Descripción', 'Cantidad', 'Unidad', 'Valor unitario', 'IVA'],
    ['1544521', 'Bolsa de basura negra Jumbo 90x110 x6 und', 1, 'PAQUETE', 3313, '19%'],
  ]);
  ws['!cols'] = [{ wch: 14 }, { wch: 36 }, { wch: 10 }, { wch: 12 }, { wch: 14 }, { wch: 8 }];
  window.XLSX.utils.book_append_sheet(wb, ws, 'Entrada');
  window.XLSX.writeFile(wb, 'Plantilla_Entrada_Inventario_Ecocosecha.xlsx');
}

/* ============================================================================
   Importar productos por Excel (alta masiva, p. ej. dotación por tallas)
   ============================================================================ */
const ENCABEZADOS_PRODUCTOS = [
  'Código proveedor', 'Descripción completa', 'Descripción corta', 'Categoría', 'Marca', 'Referencia', 'Talla',
  'Unidad de compra', 'Unidad de entrega', 'Factor de conversión', 'IVA %', 'Stock mínimo', 'Es EPP (SI/NO)', 'Vida útil (días)', 'Ubicación',
];

function parsearExcelProductos(rows) {
  const row0 = Array.from(rows[0] || [], normTxt);
  const idx = (textos) => row0.findIndex((c) => textos.some((t) => c.includes(t)));
  const iCodigo = idx(['CODIGO']);
  const iDesc = idx(['DESCRIPCION COMPLETA', 'DESCRIPCION']);
  const iDescCorta = idx(['DESCRIPCION CORTA']);
  const iCategoria = idx(['CATEGORIA']);
  const iMarca = idx(['MARCA']);
  const iReferencia = idx(['REFERENCIA']);
  const iTalla = idx(['TALLA']);
  const iUnidadCompra = idx(['UNIDAD DE COMPRA', 'UNIDAD COMPRA']);
  const iUnidadEntrega = idx(['UNIDAD DE ENTREGA', 'UNIDAD ENTREGA']);
  const iFactor = idx(['FACTOR']);
  const iIva = idx(['IVA']);
  const iStockMin = idx(['STOCK MINIMO', 'MINIMO']);
  const iEsEPP = idx(['EPP']);
  const iVidaUtil = idx(['VIDA UTIL']);
  const iUbicacion = idx(['UBICACION']);

  if (iDesc === -1) throw new Error('No se encontró la columna "Descripción completa" en la fila de encabezados.');

  const filas = [];
  for (let i = 1; i < rows.length; i++) {
    const row = rows[i] || [];
    const descripcion = row[iDesc];
    if (!descripcion || String(descripcion).trim() === '') continue;
    filas.push({
      codigoProveedor: iCodigo !== -1 ? String(row[iCodigo] ?? '').trim() : '',
      descripcion: String(descripcion).trim(),
      descripcionCorta: iDescCorta !== -1 ? String(row[iDescCorta] ?? '').trim() : '',
      categoriaNombre: iCategoria !== -1 ? String(row[iCategoria] ?? '').trim() : '',
      marca: iMarca !== -1 ? String(row[iMarca] ?? '').trim() : '',
      referencia: iReferencia !== -1 ? String(row[iReferencia] ?? '').trim() : '',
      talla: iTalla !== -1 ? String(row[iTalla] ?? '').trim() : '',
      unidadCompra: (iUnidadCompra !== -1 ? String(row[iUnidadCompra] ?? '').trim().toUpperCase() : '') || 'UNIDAD',
      unidadEntrega: (iUnidadEntrega !== -1 ? String(row[iUnidadEntrega] ?? '').trim().toUpperCase() : '') || 'UNIDAD',
      factorConversion: iFactor !== -1 ? Number(row[iFactor]) || 1 : 1,
      ivaPct: iIva !== -1 ? Number(String(row[iIva] ?? '').replace('%', '')) || 0 : 19,
      stockMinimo: iStockMin !== -1 ? Number(row[iStockMin]) || 0 : 0,
      esEPP: iEsEPP !== -1 ? /^S/i.test(String(row[iEsEPP] ?? '')) : false,
      vidaUtilDias: iVidaUtil !== -1 && row[iVidaUtil] !== undefined && row[iVidaUtil] !== '' ? Number(row[iVidaUtil]) : null,
      ubicacion: iUbicacion !== -1 ? String(row[iUbicacion] ?? '').trim() : '',
    });
  }
  return filas;
}

function descargarPlantillaProductos() {
  const wb = window.XLSX.utils.book_new();
  const ws = window.XLSX.utils.aoa_to_sheet([
    ENCABEZADOS_PRODUCTOS,
    ['CAM-001', 'Camisa dotación manga larga', 'Camisa dotación', 'Dotación y EPP', 'Ecocosecha', 'CAM-2026', 'S', 'UNIDAD', 'UNIDAD', 1, 19, 2, 'SI', 180, 'Bodega dotación'],
    ['CAM-001', 'Camisa dotación manga larga', 'Camisa dotación', 'Dotación y EPP', 'Ecocosecha', 'CAM-2026', 'M', 'UNIDAD', 'UNIDAD', 1, 19, 2, 'SI', 180, 'Bodega dotación'],
    ['CAM-001', 'Camisa dotación manga larga', 'Camisa dotación', 'Dotación y EPP', 'Ecocosecha', 'CAM-2026', 'L', 'UNIDAD', 'UNIDAD', 1, 19, 2, 'SI', 180, 'Bodega dotación'],
  ]);
  ws['!cols'] = [{ wch: 14 }, { wch: 32 }, { wch: 20 }, { wch: 18 }, { wch: 14 }, { wch: 12 }, { wch: 8 }, { wch: 14 }, { wch: 14 }, { wch: 10 }, { wch: 7 }, { wch: 11 }, { wch: 12 }, { wch: 12 }, { wch: 16 }];
  window.XLSX.utils.book_append_sheet(wb, ws, 'Productos');
  window.XLSX.writeFile(wb, 'Plantilla_Productos_Inventario_Ecocosecha.xlsx');
}

function ImportarProductos({ productos, categorias, recargar, toast, onCancelar }) {
  const [cargando, setCargando] = useState(false);
  const [filas, setFilas] = useState(null); // null = aún no se eligió archivo
  const [guardando, setGuardando] = useState(false);
  const fileRef = useRef(null);

  function resolverCategoria(nombre) {
    if (!nombre) return null;
    const norm = normTxt(nombre);
    return categorias.find((c) => normTxt(c.nombre) === norm) || null;
  }
  function buscarExistente(fila) {
    if (!fila.codigoProveedor) return null;
    return productos.find((p) => p.codigoProveedor === fila.codigoProveedor && (p.talla || '') === (fila.talla || '')) || null;
  }

  async function elegirArchivo(file) {
    if (!file) return;
    setCargando(true);
    try {
      const buf = await file.arrayBuffer();
      const wb = window.XLSX.read(buf, { type: 'array' });
      const rows = window.XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
      const parseadas = parsearExcelProductos(rows);
      if (!parseadas.length) throw new Error('No se encontró ninguna fila con descripción.');
      const resueltas = parseadas.map((f) => {
        const categoria = resolverCategoria(f.categoriaNombre);
        const existente = buscarExistente(f);
        return { ...f, key: DB.uid(), categoriaId: categoria?.id || categorias[0]?.id || '', existenteId: existente?.id || null };
      });
      setFilas(resueltas);
      toast(`${resueltas.length} fila(s) leídas del archivo.`);
    } catch (e) {
      toast('No se pudo leer el archivo: ' + e.message, 'error');
    }
    setCargando(false);
  }

  function cambiarCategoria(key, categoriaId) { setFilas((fs) => fs.map((f) => (f.key === key ? { ...f, categoriaId } : f))); }

  const creaciones = filas ? filas.filter((f) => !f.existenteId).length : 0;
  const actualizaciones = filas ? filas.filter((f) => f.existenteId).length : 0;

  async function confirmar() {
    setGuardando(true);
    try {
      for (const f of filas) {
        const descripcionFinal = f.talla ? `${f.descripcion} - Talla ${f.talla}` : f.descripcion;
        const descripcionCortaFinal = f.talla && f.descripcionCorta ? `${f.descripcionCorta} - ${f.talla}` : f.descripcionCorta;
        const datos = {
          codigoProveedor: f.codigoProveedor, descripcion: descripcionFinal, descripcionCorta: descripcionCortaFinal,
          categoriaId: f.categoriaId, marca: f.marca, referencia: f.referencia, talla: f.talla,
          unidadCompra: f.unidadCompra, unidadEntrega: f.unidadEntrega, factorConversion: f.factorConversion,
          ivaPct: f.ivaPct, stockMinimo: f.stockMinimo, esEPP: f.esEPP, vidaUtilDias: f.esEPP ? f.vidaUtilDias : null,
          ubicacion: f.ubicacion,
        };
        if (f.existenteId) await DB.actualizarProducto(f.existenteId, datos);
        else await DB.crearProducto(datos);
      }
      toast(`Importación lista: ${creaciones} producto(s) creado(s), ${actualizaciones} actualizado(s).`);
      await recargar();
      onCancelar();
    } catch (e) {
      toast('No se pudo completar la importación: ' + e.message, 'error');
    }
    setGuardando(false);
  }

  return (
    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
      <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-4xl w-full my-8">
        <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl">
          <h3 className="font-bold">Importar productos desde Excel</h3>
          <button onClick={onCancelar}><X className="h-5 w-5" /></button>
        </div>
        <div className="p-6 space-y-4">
          {!filas ? (
            <div className="bg-slate-50 border-2 border-dashed border-slate-300 rounded-xl p-8 text-center space-y-4">
              <FileSpreadsheet className="h-10 w-10 mx-auto text-green-700" />
              <p className="text-sm text-slate-500">
                Sube un Excel con una fila por producto (una fila por talla si aplica) usando la plantilla, o descárgala primero.
              </p>
              <div className="flex justify-center gap-2">
                <button disabled={cargando} onClick={() => fileRef.current?.click()} className="bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold">
                  {cargando ? 'Leyendo…' : 'Elegir archivo .xlsx'}
                </button>
                <button onClick={descargarPlantillaProductos} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold">
                  Descargar plantilla
                </button>
              </div>
              <input ref={fileRef} type="file" accept=".xlsx,.xls" hidden onChange={(e) => elegirArchivo(e.target.files?.[0])} />
            </div>
          ) : (
            <>
              <div className="bg-white border border-slate-200 rounded-lg p-3 text-sm flex flex-wrap gap-x-6 gap-y-1 text-slate-600">
                <span>{filas.length} fila(s) leídas</span>
                <span className="text-green-700 font-semibold">{creaciones} se crearán</span>
                {actualizaciones > 0 && <span className="text-amber-700 font-semibold">{actualizaciones} actualizarán uno existente</span>}
              </div>
              <div className="border border-slate-200 rounded-lg overflow-hidden max-h-96 overflow-y-auto">
                <table className="w-full text-sm">
                  <thead className="bg-slate-50 text-slate-500 text-xs uppercase sticky top-0"><tr>
                    <th className="px-3 py-2 text-left">Código</th><th className="px-3 py-2 text-left">Descripción</th>
                    <th className="px-3 py-2 text-left">Talla</th><th className="px-3 py-2 text-left">Categoría</th><th className="px-3 py-2 text-left">Acción</th>
                  </tr></thead>
                  <tbody className="divide-y divide-slate-100">
                    {filas.map((f) => (
                      <tr key={f.key}>
                        <td className="px-3 py-2 font-mono text-xs">{f.codigoProveedor || '—'}</td>
                        <td className="px-3 py-2">{f.descripcion}{f.talla && <span className="text-slate-400"> · talla {f.talla}</span>}</td>
                        <td className="px-3 py-2">{f.talla || '—'}</td>
                        <td className="px-3 py-2">
                          <select value={f.categoriaId} onChange={(e) => cambiarCategoria(f.key, e.target.value)} className="border border-slate-300 rounded px-2 py-1 text-xs bg-white">
                            {categorias.map((c) => <option key={c.id} value={c.id}>{c.nombre}</option>)}
                          </select>
                        </td>
                        <td className="px-3 py-2">
                          {f.existenteId ? (
                            <span className="text-amber-700 text-xs font-semibold">Actualizará existente</span>
                          ) : (
                            <span className="text-green-700 text-xs font-semibold">Crear nuevo</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="flex justify-end gap-2">
                <button onClick={() => setFilas(null)} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Elegir otro archivo</button>
                <button disabled={guardando} onClick={confirmar} className="px-5 py-2.5 text-sm rounded-lg bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white font-bold">
                  {guardando ? 'Importando…' : `Importar ${filas.length} producto(s)`}
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function ImportarExcelEntrada({ productos, categorias, recargarProductos, toast, onResuelto, onCancelar }) {
  const [cargando, setCargando] = useState(false);
  const [resultado, setResultado] = useState(null); // { lineas, numeroPedido, fechaISO, totalesArchivo }
  const [filas, setFilas] = useState([]); // lineas + producto resuelto
  const [productoRapido, setProductoRapido] = useState(null);
  const fileRef = useRef(null);

  function emparejar(lineasExcel) {
    return lineasExcel.map((l) => {
      const producto = productos.find((p) => p.codigoProveedor && p.codigoProveedor === l.codigoProveedor);
      return { ...l, key: DB.uid(), producto: producto || null };
    });
  }

  async function elegirArchivo(file) {
    if (!file) return;
    setCargando(true);
    try {
      const buf = await file.arrayBuffer();
      const wb = window.XLSX.read(buf, { type: 'array' });
      const nombreHoja = wb.SheetNames.includes('Pedido') ? 'Pedido' : wb.SheetNames[0];
      const rows = window.XLSX.utils.sheet_to_json(wb.Sheets[nombreHoja], { header: 1, raw: true });
      const r = parsearExcelEntrada(rows);
      setResultado(r);
      setFilas(emparejar(r.lineas));
      toast(`${r.lineas.length} línea(s) leídas del archivo.`);
    } catch (e) {
      toast('No se pudo leer el archivo: ' + e.message, 'error');
    }
    setCargando(false);
  }

  function asociar(key, producto) { setFilas((fs) => fs.map((f) => (f.key === key ? { ...f, producto } : f))); }
  async function crearDesdeExcel(datos) {
    const p = await DB.crearProducto({ ...datos, codigoProveedor: productoRapido.codigoProveedor, descripcion: datos.descripcion || productoRapido.descripcion });
    await recargarProductos();
    asociar(productoRapido.key, p);
    setProductoRapido(null);
    toast(`Producto creado: ${p.codigoInterno}`);
  }

  const pendientes = filas.filter((f) => !f.producto).length;
  const totales = useMemo(() => DB.calcularTotales(filas.map((f) => ({ cantidadCompra: f.cantidadCompra, valorUnitarioCompra: f.valorUnitarioCompra, ivaPct: f.ivaPct }))), [filas]);
  const totalArchivo = resultado?.totalesArchivo?.total;
  const difArchivo = totalArchivo != null ? Math.round(totales.total - totalArchivo) : 0;

  function continuar() {
    if (pendientes > 0) { toast('Resuelve todas las líneas sin producto antes de continuar.', 'error'); return; }
    onResuelto({
      cabecera: { numeroPedido: resultado.numeroPedido, fechaRecepcion: resultado.fechaISO || DB.hoyBogota(), tipoSoporte: 'Pedido' },
      lineas: filas.map((f) => ({ productoId: f.producto.id, cantidadCompra: f.cantidadCompra, valorUnitarioCompra: f.valorUnitarioCompra, ivaPct: f.ivaPct })),
    });
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold text-slate-800">Importar Excel del proveedor</h1>
        <button onClick={onCancelar} className="text-sm text-slate-500 hover:text-slate-700">Cancelar</button>
      </div>

      {!resultado ? (
        <div className="bg-white rounded-xl border border-slate-200 p-8 text-center space-y-4">
          <FileSpreadsheet className="h-10 w-10 mx-auto text-green-700" />
          <p className="text-sm text-slate-500">Sube el pedido en Excel tal como lo manda el proveedor, o la plantilla genérica.</p>
          <div className="flex justify-center gap-2">
            <button disabled={cargando} onClick={() => fileRef.current?.click()} className="bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold">
              {cargando ? 'Leyendo…' : 'Elegir archivo .xlsx'}
            </button>
            <button onClick={descargarPlantillaGenerica} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold">
              Descargar plantilla genérica
            </button>
          </div>
          <input ref={fileRef} type="file" accept=".xlsx,.xls" hidden onChange={(e) => elegirArchivo(e.target.files?.[0])} />
        </div>
      ) : (
        <>
          <div className="bg-white rounded-xl border border-slate-200 p-4 text-sm flex flex-wrap gap-x-6 gap-y-1 text-slate-600">
            <span>Formato: <b>{resultado.formato === 'proveedor' ? 'Pedido del proveedor' : 'Plantilla genérica'}</b></span>
            {resultado.numeroPedido && <span>Pedido N.° <b>{resultado.numeroPedido}</b></span>}
            {resultado.fechaISO && <span>Fecha <b>{DB.fechaCO(resultado.fechaISO)}</b></span>}
            <span>{filas.length} línea(s)</span>
          </div>

          <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr>
                <th className="px-3 py-2 text-left">Código</th><th className="px-3 py-2 text-left">Descripción del Excel</th>
                <th className="px-3 py-2 text-right">Cant.</th><th className="px-3 py-2 text-right">Vr. unit.</th><th className="px-3 py-2 text-right">IVA</th>
                <th className="px-3 py-2 text-left">Producto en el sistema</th>
              </tr></thead>
              <tbody className="divide-y divide-slate-100">
                {filas.map((f) => (
                  <tr key={f.key} className={!f.producto ? 'bg-amber-50' : ''}>
                    <td className="px-3 py-2 font-mono text-xs">{f.codigoProveedor}</td>
                    <td className="px-3 py-2">{f.descripcion}</td>
                    <td className="px-3 py-2 text-right">{f.cantidadCompra}</td>
                    <td className="px-3 py-2 text-right">{DB.money(f.valorUnitarioCompra)}</td>
                    <td className="px-3 py-2 text-right">{f.ivaPct}%</td>
                    <td className="px-3 py-2">
                      {f.producto ? (
                        <span className="text-green-700 flex items-center gap-1 text-xs font-semibold"><CheckCircle2 className="h-3.5 w-3.5" /> {f.producto.descripcion}</span>
                      ) : (
                        <div className="flex items-center gap-2">
                          <div className="w-56"><BuscadorProducto productos={productos} onElegir={(p) => asociar(f.key, p)} placeholder="Asociar a producto existente…" /></div>
                          <button type="button" onClick={() => setProductoRapido(f)} className="text-xs text-green-700 underline shrink-0">Crear nuevo</button>
                        </div>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="bg-white rounded-xl border border-slate-200 p-4 max-w-sm ml-auto space-y-1 text-sm">
            <div className="flex justify-between"><span className="text-slate-500">Subtotal calculado</span><span>{DB.money(totales.subtotal)}</span></div>
            <div className="flex justify-between"><span className="text-slate-500">IVA calculado</span><span>{DB.money(totales.iva)}</span></div>
            <div className="flex justify-between font-bold border-t border-slate-200 pt-1"><span>Total calculado</span><span>{DB.money(totales.total)}</span></div>
            {totalArchivo != null && (
              <div className={clsx('flex justify-between pt-1', difArchivo !== 0 ? 'text-amber-700' : 'text-green-700')}>
                <span>Total del archivo</span><span>{DB.money(totalArchivo)}{difArchivo !== 0 && ` (dif. ${DB.money(Math.abs(difArchivo))})`}</span>
              </div>
            )}
          </div>

          <div className="flex justify-end gap-2">
            <button onClick={() => setResultado(null)} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Elegir otro archivo</button>
            <button onClick={continuar} disabled={pendientes > 0} className="px-5 py-2.5 text-sm rounded-lg bg-green-700 hover:bg-green-800 disabled:opacity-50 text-white font-bold">
              {pendientes > 0 ? `Resuelve ${pendientes} línea(s) pendientes` : 'Continuar al formulario de entrada'}
            </button>
          </div>
        </>
      )}

      {productoRapido && (
        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
          <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full my-8">
            <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl"><h3 className="font-bold">Nuevo producto</h3><button onClick={() => setProductoRapido(null)}><X className="h-5 w-5" /></button></div>
            <div className="p-6">
              <ProductoForm
                categorias={categorias}
                modoCrear
                producto={{ codigoProveedor: productoRapido.codigoProveedor, descripcion: productoRapido.descripcion, descripcionCorta: '', categoriaId: categorias[0]?.id || '', marca: '', referencia: '', unidadCompra: 'UNIDAD', unidadEntrega: 'UNIDAD', factorConversion: 1, ivaPct: productoRapido.ivaPct || 19, stockMinimo: 0, ubicacion: '', requiereFirma: true, esEPP: false, vidaUtilDias: '', activo: true }}
                onGuardar={crearDesdeExcel}
                onCancelar={() => setProductoRapido(null)}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ============================================================================
   Detalle de entrada (ver, anular, imprimir comprobante)
   ============================================================================ */
function ComprobanteEntradaImprimible({ entrada, detalles, proveedor, config }) {
  return (
    // Ancho fijo (816px = una hoja carta a 96dpi) para que la "foto" que toma
    // html2canvas al generar el PDF siempre salga al mismo tamaño relativo,
    // sin importar qué tan ancha esté la ventana del navegador: si se deja en
    // 100% del contenedor, en pantallas anchas el texto queda chiquito porque
    // la imagen capturada es más ancha de lo normal y luego se encoge para
    // caber en el ancho de la página.
    <div id="imprimible" className="bg-white p-10 text-base text-slate-800 mx-auto" style={{ width: '816px', maxWidth: '816px' }}>
      <div className="flex items-start justify-between border-b-2 border-slate-800 pb-4 mb-4">
        <div className="flex items-center gap-4">
          <img src={config.logo} alt="Ecocosecha" className="h-20 object-contain" />
          <div>
            <div className="font-bold text-xl">{config.empresa.razonSocial}</div>
            <div className="text-sm">NIT {config.empresa.nit}</div>
            <div className="text-sm">{config.empresa.direccion}</div>
          </div>
        </div>
        <div className="text-right text-sm">
          <div className="font-bold text-xl">COMPROBANTE DE ENTRADA</div>
          <div>Consecutivo: <b>{entrada.consecutivo}</b></div>
          <div>Fecha: {DB.fechaCO(entrada.fechaRecepcion)}</div>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3 mb-4 text-sm">
        <div><b>Proveedor:</b> {proveedor?.razonSocial || '—'} {proveedor?.nit ? `· NIT ${proveedor.nit}` : ''}</div>
        <div><b>Soporte:</b> {entrada.tipoSoporte} {entrada.numeroFactura || entrada.numeroRemision || entrada.numeroPedido}</div>
        <div><b>Recibido por:</b> {entrada.recibidoPor || '—'}</div>
        <div><b>Estado:</b> {entrada.estado}</div>
      </div>
      <table className="w-full text-sm border-collapse">
        <thead><tr className="bg-slate-100">
          <th className="border border-slate-300 px-3 py-2.5 text-left">Código</th>
          <th className="border border-slate-300 px-3 py-2.5 text-left">Descripción</th>
          <th className="border border-slate-300 px-3 py-2.5 text-right">Cant. compra</th>
          <th className="border border-slate-300 px-3 py-2.5 text-right">Cant. entrega</th>
          <th className="border border-slate-300 px-3 py-2.5 text-right">Vr. unitario</th>
          <th className="border border-slate-300 px-3 py-2.5 text-right">IVA</th>
          <th className="border border-slate-300 px-3 py-2.5 text-right">Total</th>
        </tr></thead>
        <tbody>
          {detalles.map((d) => (
            <tr key={d.id}>
              <td className="border border-slate-300 px-3 py-2.5">{d.codigoProveedor}</td>
              <td className="border border-slate-300 px-3 py-2.5">{d.descripcion}</td>
              <td className="border border-slate-300 px-3 py-2.5 text-right">{d.cantidadCompra} {d.unidadCompra}</td>
              <td className="border border-slate-300 px-3 py-2.5 text-right">{d.cantidadEntrega}</td>
              <td className="border border-slate-300 px-3 py-2.5 text-right">{DB.money(d.valorUnitarioCompra)}</td>
              <td className="border border-slate-300 px-3 py-2.5 text-right">{d.ivaPct}%</td>
              <td className="border border-slate-300 px-3 py-2.5 text-right">{DB.money(d.valorTotal)}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="flex justify-end mt-3">
        <table className="text-sm">
          <tbody>
            <tr><td className="px-3 py-1 text-right">Subtotal</td><td className="px-3 py-1 text-right font-semibold">{DB.money(entrada.subtotal)}</td></tr>
            <tr><td className="px-3 py-1 text-right">IVA</td><td className="px-3 py-1 text-right font-semibold">{DB.money(entrada.iva)}</td></tr>
            <tr><td className="px-3 py-1 text-right font-bold border-t border-slate-400">Total</td><td className="px-3 py-1 text-right font-bold border-t border-slate-400">{DB.money(entrada.total)}</td></tr>
          </tbody>
        </table>
      </div>
      {entrada.observaciones && <p className="text-sm mt-3"><b>Observaciones:</b> {entrada.observaciones}</p>}
      {entrada.estado === 'Anulada' && <p className="text-sm mt-3 text-red-600"><b>ANULADA:</b> {entrada.motivoAnulacion}</p>}
    </div>
  );
}

function EditarEntradaForm({ entrada, proveedores, onGuardar, onCancelar }) {
  const [f, setF] = useState({
    proveedorId: entrada.proveedorId || '', tipoSoporte: entrada.tipoSoporte || 'Remisión',
    numeroRemision: entrada.numeroRemision || '', numeroFactura: entrada.numeroFactura || '',
    fechaRecepcion: entrada.fechaRecepcion || '', recibidoPor: entrada.recibidoPor || '',
    observaciones: entrada.observaciones || '',
  });
  const campo = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';
  function submit(e) { e.preventDefault(); onGuardar(f); }
  return (
    <form onSubmit={submit} className="space-y-3">
      <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2">
        Solo se pueden editar estos datos. Para corregir cantidades o costos de las líneas, anula esta entrada y regístrala de nuevo.
      </p>
      <div>
        <label className={labelCls}>Proveedor</label>
        <select className={inputCls} value={f.proveedorId} onChange={campo('proveedorId')}>
          <option value="">— sin proveedor —</option>
          {proveedores.map((p) => <option key={p.id} value={p.id}>{p.razonSocial}</option>)}
        </select>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Fecha de recepción</label><input type="date" className={inputCls} value={f.fechaRecepcion} onChange={campo('fechaRecepcion')} /></div>
        <div>
          <label className={labelCls}>Tipo de soporte</label>
          <select className={inputCls} value={f.tipoSoporte} onChange={campo('tipoSoporte')}>
            {['Remisión', 'Factura', 'Pedido', 'Cotización', 'Otro'].map((t) => <option key={t}>{t}</option>)}
          </select>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>N.° remisión</label><input className={inputCls} value={f.numeroRemision} onChange={campo('numeroRemision')} /></div>
        <div><label className={labelCls}>N.° factura</label><input className={inputCls} value={f.numeroFactura} onChange={campo('numeroFactura')} /></div>
      </div>
      <div><label className={labelCls}>Recibido por</label><input className={inputCls} value={f.recibidoPor} onChange={campo('recibidoPor')} /></div>
      <div><label className={labelCls}>Observaciones</label><textarea rows={2} className={inputCls} value={f.observaciones} onChange={campo('observaciones')} /></div>
      <div className="flex justify-end gap-2 pt-2 border-t border-slate-200">
        <button type="button" onClick={onCancelar} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Cancelar</button>
        <button type="submit" className="px-4 py-2 text-sm rounded-lg bg-green-700 hover:bg-green-800 text-white font-bold flex items-center gap-2">
          <Save className="h-4 w-4" /> Guardar cambios
        </button>
      </div>
    </form>
  );
}

function EntradaDetalleView({ entrada, proveedores, config, recargarProductos, toast, onVolver, onAnulada, onActualizada }) {
  const [detalles, setDetalles] = useState([]);
  const [confirmarAnular, setConfirmarAnular] = useState(false);
  const [editando, setEditando] = useState(false);
  const [motivo, setMotivo] = useState('');
  const proveedor = proveedores.find((p) => p.id === entrada.proveedorId);

  useEffect(() => { DB.queryIndex('entradaDetalle', 'entradaId', entrada.id).then(setDetalles); }, [entrada.id]);

  async function anular() {
    if (!motivo.trim()) { toast('Escribe el motivo de anulación.', 'error'); return; }
    try {
      await DB.anularEntrada(entrada.id, motivo.trim());
      toast(`Entrada ${entrada.consecutivo} anulada.`);
      setConfirmarAnular(false);
      await recargarProductos();
      onAnulada();
    } catch (e) {
      toast('No se pudo anular: ' + e.message, 'error');
    }
  }

  async function guardarEdicion(patch) {
    try {
      const nueva = await DB.actualizarEntrada(entrada.id, patch);
      toast('Entrada actualizada.');
      setEditando(false);
      onActualizada(nueva);
    } catch (e) {
      toast('No se pudo guardar: ' + e.message, 'error');
    }
  }

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between print:hidden">
        <button onClick={onVolver} className="flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700">
          <ChevronLeft className="h-4 w-4" /> Volver a entradas
        </button>
        <div className="flex gap-2">
          <button onClick={() => window.print()} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
            <Printer className="h-4 w-4" /> Imprimir comprobante
          </button>
          {entrada.estado === 'Activa' && (
            <>
              <button onClick={() => setEditando(true)} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
                <Edit2 className="h-4 w-4" /> Editar
              </button>
              <button onClick={() => setConfirmarAnular(true)} className="bg-white border border-red-300 hover:bg-red-50 text-red-600 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
                <Ban className="h-4 w-4" /> Anular
              </button>
            </>
          )}
        </div>
      </div>
      <div className="print:hidden flex items-center gap-2">
        <h1 className="text-xl font-bold text-slate-800">{entrada.consecutivo}</h1>
        {entrada.estado === 'Anulada' ? <Badge color="#dc2626">Anulada</Badge> : <Badge color="#16a34a">Activa</Badge>}
      </div>
      <div className="border border-slate-200 rounded-xl overflow-hidden">
        <ComprobanteEntradaImprimible entrada={entrada} detalles={detalles} proveedor={proveedor} config={config} />
      </div>

      {editando && (
        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto print:hidden">
          <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full my-8">
            <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl">
              <h3 className="font-bold">Editar entrada {entrada.consecutivo}</h3>
              <button onClick={() => setEditando(false)}><X className="h-5 w-5" /></button>
            </div>
            <div className="p-6">
              <EditarEntradaForm entrada={entrada} proveedores={proveedores} onGuardar={guardarEdicion} onCancelar={() => setEditando(false)} />
            </div>
          </div>
        </div>
      )}

      <ConfirmModal
        abierto={confirmarAnular}
        titulo="Anular entrada"
        mensaje={
          <div className="space-y-2 text-left">
            <p>Esto revierte en el kardex toda la mercancía que entró con {entrada.consecutivo}. No se puede deshacer.</p>
            <input autoFocus value={motivo} onChange={(e) => setMotivo(e.target.value)} placeholder="Motivo de la anulación…" className="w-full p-2 border border-slate-300 rounded text-sm" />
          </div>
        }
        peligro
        textoConfirmar="Anular entrada"
        onCancelar={() => setConfirmarAnular(false)}
        onConfirmar={anular}
      />
    </div>
  );
}

/* ============================================================================
   Entradas — lista + navegación entre formulario / importar / detalle
   ============================================================================ */
function Entradas({ productos, categorias, proveedores, recargarProductos, recargarProveedores, config, toast, abrirNuevo, onAbrirNuevoConsumido }) {
  const [sub, setSub] = useState('lista'); // lista | nuevo | importar | detalle
  const [entradas, setEntradas] = useState([]);
  const [seleccionada, setSeleccionada] = useState(null);
  const [borrador, setBorrador] = useState(null);
  const [filtroProveedor, setFiltroProveedor] = useState('');
  const [filtroEstado, setFiltroEstado] = useState('');

  async function cargar() { setEntradas((await DB.getAll('entradas')).sort((a, b) => b.fechaCreacion.localeCompare(a.fechaCreacion))); }
  useEffect(() => { cargar(); }, []);
  useEffect(() => { if (abrirNuevo) { setSub('nuevo'); setBorrador(null); onAbrirNuevoConsumido(); } }, [abrirNuevo]);

  const filtradas = entradas.filter((e) => (!filtroProveedor || e.proveedorId === filtroProveedor) && (!filtroEstado || e.estado === filtroEstado));
  const proveedoresPorId = Object.fromEntries(proveedores.map((p) => [p.id, p]));

  if (sub === 'nuevo') {
    return (
      <div className="p-6">
        <h1 className="text-xl font-bold text-slate-800 mb-4">{borrador ? 'Confirmar entrada importada' : 'Nueva entrada'}</h1>
        <EntradaForm
          productos={productos} categorias={categorias} proveedores={proveedores}
          valoresIniciales={borrador ? { ...borrador.cabecera, lineas: borrador.lineas } : null}
          recargarProductos={recargarProductos} recargarProveedores={recargarProveedores} toast={toast}
          onGuardada={async (entrada) => { await cargar(); setSeleccionada(entrada); setBorrador(null); setSub('detalle'); }}
          onCancelar={() => { setBorrador(null); setSub('lista'); }}
        />
      </div>
    );
  }
  if (sub === 'importar') {
    return (
      <div className="p-6">
        <ImportarExcelEntrada
          productos={productos} categorias={categorias} recargarProductos={recargarProductos} toast={toast}
          onResuelto={(draft) => { setBorrador(draft); setSub('nuevo'); }}
          onCancelar={() => setSub('lista')}
        />
      </div>
    );
  }
  if (sub === 'detalle' && seleccionada) {
    return (
      <EntradaDetalleView
        entrada={seleccionada} proveedores={proveedores} config={config} recargarProductos={recargarProductos} toast={toast}
        onVolver={() => setSub('lista')}
        onAnulada={async () => { await cargar(); setSub('lista'); }}
        onActualizada={async (nueva) => { setSeleccionada(nueva); await cargar(); }}
      />
    );
  }

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Entradas</h1>
          <p className="text-slate-500 text-sm">{entradas.length} registradas</p>
        </div>
        <div className="flex gap-2">
          <button onClick={() => setSub('importar')} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
            <FileSpreadsheet className="h-4 w-4" /> Importar Excel
          </button>
          <button onClick={() => { setBorrador(null); setSub('nuevo'); }} className="bg-green-700 hover:bg-green-800 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
            <Plus className="h-4 w-4" /> Nueva entrada
          </button>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-3 flex flex-wrap gap-2">
        <select value={filtroProveedor} onChange={(e) => setFiltroProveedor(e.target.value)} className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
          <option value="">Todos los proveedores</option>
          {proveedores.map((p) => <option key={p.id} value={p.id}>{p.razonSocial}</option>)}
        </select>
        <select value={filtroEstado} onChange={(e) => setFiltroEstado(e.target.value)} className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
          <option value="">Cualquier estado</option>
          <option value="Activa">Activa</option>
          <option value="Anulada">Anulada</option>
        </select>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        {filtradas.length === 0 ? (
          <EmptyState icono={PackagePlus} titulo="Sin entradas" descripcion="Registra la primera entrada manual o impórtala desde el Excel del proveedor." />
        ) : (
          <table className="w-full text-sm">
            <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr>
              <th className="px-4 py-2 text-left">Consecutivo</th><th className="px-4 py-2 text-left">Fecha</th>
              <th className="px-4 py-2 text-left">Proveedor</th><th className="px-4 py-2 text-left">Soporte</th>
              <th className="px-4 py-2 text-right">Total</th><th className="px-4 py-2 text-left">Estado</th>
            </tr></thead>
            <tbody className="divide-y divide-slate-100">
              {filtradas.map((e) => (
                <tr key={e.id} className="hover:bg-slate-50 cursor-pointer" onClick={() => { setSeleccionada(e); setSub('detalle'); }}>
                  <td className="px-4 py-2.5 font-mono text-xs">{e.consecutivo}</td>
                  <td className="px-4 py-2.5">{DB.fechaCO(e.fechaRecepcion)}</td>
                  <td className="px-4 py-2.5">{proveedoresPorId[e.proveedorId]?.razonSocial || '—'}</td>
                  <td className="px-4 py-2.5 text-slate-500">{e.tipoSoporte} {e.numeroFactura || e.numeroRemision || e.numeroPedido}</td>
                  <td className="px-4 py-2.5 text-right font-semibold">{DB.money(e.total)}</td>
                  <td className="px-4 py-2.5">{e.estado === 'Anulada' ? <Badge color="#dc2626">Anulada</Badge> : <Badge color="#16a34a">Activa</Badge>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

/* ============================================================================
   Proveedores — CRUD simple + historial de compras
   ============================================================================ */
function ProveedorForm({ proveedor, onGuardar, onCancelar }) {
  const [f, setF] = useState(proveedor || { razonSocial: '', nit: '', direccion: '', ciudad: '', telefono: '', email: '', contacto: '', celularContacto: '', activo: true });
  const campo = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-green-600';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';
  function submit(e) {
    e.preventDefault();
    if (!f.razonSocial.trim()) return;
    onGuardar(f);
  }
  return (
    <form onSubmit={submit} className="space-y-3">
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Razón social *</label><input required className={inputCls} value={f.razonSocial} onChange={campo('razonSocial')} /></div>
        <div><label className={labelCls}>NIT</label><input className={inputCls} value={f.nit} onChange={campo('nit')} /></div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Dirección</label><input className={inputCls} value={f.direccion} onChange={campo('direccion')} /></div>
        <div><label className={labelCls}>Ciudad</label><input className={inputCls} value={f.ciudad} onChange={campo('ciudad')} /></div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Teléfono</label><input className={inputCls} value={f.telefono} onChange={campo('telefono')} /></div>
        <div><label className={labelCls}>Correo</label><input type="email" className={inputCls} value={f.email} onChange={campo('email')} /></div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Contacto</label><input className={inputCls} value={f.contacto} onChange={campo('contacto')} /></div>
        <div><label className={labelCls}>Celular del contacto</label><input className={inputCls} value={f.celularContacto} onChange={campo('celularContacto')} /></div>
      </div>
      <div className="flex justify-end gap-2 pt-2 border-t border-slate-200">
        <button type="button" onClick={onCancelar} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Cancelar</button>
        <button type="submit" className="px-4 py-2 text-sm rounded-lg bg-green-700 hover:bg-green-800 text-white font-bold flex items-center gap-2">
          <Save className="h-4 w-4" /> Guardar
        </button>
      </div>
    </form>
  );
}

/* ============================================================================
   Buscador de colaborador (por nombre o cédula)
   ============================================================================ */
function BuscadorColaborador({ colaboradores, onElegir, placeholder }) {
  const [q, setQ] = useState('');
  const [abierto, setAbierto] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    function fuera(e) { if (ref.current && !ref.current.contains(e.target)) setAbierto(false); }
    document.addEventListener('mousedown', fuera);
    return () => document.removeEventListener('mousedown', fuera);
  }, []);
  const norm = (s) => String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
  const term = norm(q.trim());
  const resultados = term ? colaboradores.filter((c) => norm(`${c.nombreCompleto} ${c.cedula}`).includes(term)).slice(0, 30) : [];
  return (
    <div className="relative" ref={ref}>
      <div className="relative">
        <Search className="h-4 w-4 absolute left-3 top-2.5 text-slate-400" />
        <input value={q} onChange={(e) => { setQ(e.target.value); setAbierto(true); }} onFocus={() => setAbierto(true)} placeholder={placeholder || 'Buscar colaborador por nombre o cédula…'} className="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm" />
      </div>
      {abierto && resultados.length > 0 && (
        <ul className="absolute z-20 mt-1 w-full max-h-64 overflow-y-auto bg-white border border-slate-200 rounded-lg shadow-lg text-sm">
          {resultados.map((c) => (
            <li key={c.id}>
              <button type="button" onMouseDown={(e) => e.preventDefault()} onClick={() => { onElegir(c); setQ(''); setAbierto(false); }} className="w-full text-left px-3 py-2 hover:bg-green-50 flex justify-between gap-2">
                <span>{c.nombreCompleto}</span><span className="text-xs text-slate-400 shrink-0">{c.cedula}</span>
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

/* ============================================================================
   Firma digital en pantalla (canvas táctil)
   ============================================================================ */
function FirmaDigitalCanvas({ onGuardar, onCancelar }) {
  const canvasRef = useRef(null);
  const dibujando = useRef(false);
  const vacio = useRef(true);

  useEffect(() => {
    const ctx = canvasRef.current.getContext('2d');
    ctx.lineWidth = 2.5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#1e293b';
  }, []);

  function posicion(e) {
    const canvas = canvasRef.current;
    const rect = canvas.getBoundingClientRect();
    const punto = e.touches ? e.touches[0] : e;
    return { x: (punto.clientX - rect.left) * (canvas.width / rect.width), y: (punto.clientY - rect.top) * (canvas.height / rect.height) };
  }
  function iniciar(e) {
    e.preventDefault();
    dibujando.current = true;
    const { x, y } = posicion(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(x, y);
  }
  function mover(e) {
    if (!dibujando.current) return;
    e.preventDefault();
    const { x, y } = posicion(e);
    const ctx = canvasRef.current.getContext('2d');
    ctx.lineTo(x, y);
    ctx.stroke();
    vacio.current = false;
  }
  function terminar() { dibujando.current = false; }
  function limpiar() {
    const canvas = canvasRef.current;
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    vacio.current = true;
  }
  function guardar() {
    if (vacio.current) return;
    onGuardar(canvasRef.current.toDataURL('image/png'));
  }

  return (
    <div className="space-y-3">
      <canvas
        ref={canvasRef}
        width={600}
        height={200}
        className="w-full border-2 border-dashed border-slate-300 rounded-lg bg-white touch-none"
        style={{ touchAction: 'none' }}
        onMouseDown={iniciar} onMouseMove={mover} onMouseUp={terminar} onMouseLeave={terminar}
        onTouchStart={iniciar} onTouchMove={mover} onTouchEnd={terminar}
      />
      <p className="text-xs text-slate-400">El colaborador firma aquí con el dedo, el mouse o el lápiz táctil (funciona bien en celular o tablet).</p>
      <div className="flex justify-end gap-2">
        <button type="button" onClick={limpiar} className="px-3 py-1.5 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Limpiar</button>
        <button type="button" onClick={onCancelar} className="px-3 py-1.5 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Cancelar</button>
        <button type="button" onClick={guardar} className="px-4 py-1.5 text-sm rounded-lg bg-green-700 hover:bg-green-800 text-white font-bold">Guardar firma</button>
      </div>
    </div>
  );
}

/* ============================================================================
   Entregas — salida de insumos a un colaborador + acta de entrega
   ============================================================================ */
function AvisoEPP({ producto, colaboradorId }) {
  const [info, setInfo] = useState(null);
  useEffect(() => {
    let cancelado = false;
    if (!producto?.esEPP || !colaboradorId || !producto.vidaUtilDias) { setInfo(null); return; }
    DB.ultimaEntregaProductoColaborador(producto.id, colaboradorId).then((e) => {
      if (cancelado) return;
      if (!e) { setInfo(null); return; }
      const dias = Math.floor((new Date() - new Date(e.fecha)) / 86400000);
      if (dias < producto.vidaUtilDias) setInfo({ fecha: e.fecha, dias, faltan: producto.vidaUtilDias - dias });
      else setInfo(null);
    });
    return () => { cancelado = true; };
  }, [producto?.id, colaboradorId]);
  if (!info) return null;
  return (
    <div className="flex items-start gap-1.5 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-1 mt-1">
      <AlertCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
      <span>Ya se le entregó el {DB.fechaCO(info.fecha)} (hace {info.dias} días); la vida útil son {producto.vidaUtilDias} días — faltan {info.faltan}.</span>
    </div>
  );
}

function LineaEntregaEditor({ linea, producto, colaboradorId, onCambiar, onQuitar }) {
  const excede = producto && linea.cantidad > (producto.stockActual || 0);
  return (
    <tr className="border-t border-slate-100 align-top">
      <td className="px-3 py-2">
        <div className="font-medium text-slate-700">{producto?.descripcion}</div>
        <div className="text-xs text-slate-400">Disponible: {producto?.stockActual} {producto?.unidadEntrega}</div>
        <AvisoEPP producto={producto} colaboradorId={colaboradorId} />
      </td>
      <td className="px-3 py-2 w-28">
        <input type="number" min="0" step="any" className={clsx('w-full p-1.5 border rounded text-sm text-right', excede ? 'border-red-400 bg-red-50' : 'border-slate-300')} value={linea.cantidad} onChange={(e) => onCambiar({ ...linea, cantidad: Number(e.target.value) })} />
        {excede && <div className="text-[11px] text-red-600 mt-0.5">Supera el disponible</div>}
      </td>
      <td className="px-3 py-2 w-32">
        {producto?.esEPP ? <input className="w-full p-1.5 border border-slate-300 rounded text-sm" placeholder="Talla" value={linea.talla} onChange={(e) => onCambiar({ ...linea, talla: e.target.value })} /> : <span className="text-slate-300 text-xs">—</span>}
      </td>
      <td className="px-3 py-2"><input className="w-full p-1.5 border border-slate-300 rounded text-sm" placeholder="Observación (opcional)" value={linea.observacion} onChange={(e) => onCambiar({ ...linea, observacion: e.target.value })} /></td>
      <td className="px-3 py-2 w-10 text-center"><button type="button" onClick={onQuitar} className="text-slate-400 hover:text-red-600"><X className="h-4 w-4" /></button></td>
    </tr>
  );
}

const TIPOS_ENTREGA = ['Dotación', 'EPP', 'Insumos de aseo', 'Cafetería', 'Papelería', 'Mixta'];
const MOTIVOS_ENTREGA = ['Primera entrega', 'Reposición por desgaste', 'Reposición por pérdida', 'Consumo del área', 'Otro'];

function EntregaForm({ productos, colaboradores, config, recargarProductos, recargarColaboradores, toast, onGuardada, onCancelar }) {
  const [colaboradorId, setColaboradorId] = useState('');
  const [fecha, setFecha] = useState(DB.hoyBogota());
  const [tipoEntrega, setTipoEntrega] = useState('Dotación');
  const [motivo, setMotivo] = useState('Primera entrega');
  const [entregadoPor, setEntregadoPor] = useState(config?.responsableEntregas?.nombre || 'Director de Operaciones');
  const [observaciones, setObservaciones] = useState('');
  const [lineas, setLineas] = useState([]);
  const [guardando, setGuardando] = useState(false);
  const [nuevoColaborador, setNuevoColaborador] = useState(false);

  const colaborador = colaboradores.find((c) => c.id === colaboradorId);
  const productosPorId = useMemo(() => Object.fromEntries(productos.map((p) => [p.id, p])), [productos]);

  function agregarProducto(p) {
    if (lineas.some((l) => l.productoId === p.id)) { toast('Ese producto ya está en la lista.', 'warn'); return; }
    setLineas((ls) => [...ls, { key: DB.uid(), productoId: p.id, cantidad: 1, talla: '', observacion: '' }]);
  }
  function cambiarLinea(key, nueva) { setLineas((ls) => ls.map((l) => (l.key === key ? nueva : l))); }
  function quitarLinea(key) { setLineas((ls) => ls.filter((l) => l.key !== key)); }

  async function crearColaboradorRapido(datos) {
    const c = { id: DB.uid(), ...datos };
    await DB.put('colaboradores', c);
    setColaboradorId(c.id);
    setNuevoColaborador(false);
    await recargarColaboradores();
    toast('Colaborador creado.');
  }

  const hayExcedentes = lineas.some((l) => { const p = productosPorId[l.productoId]; return p && l.cantidad > (p.stockActual || 0); });

  async function guardar(e) {
    e.preventDefault();
    if (!colaboradorId) { toast('Elige el colaborador.', 'error'); return; }
    if (!lineas.length) { toast('Agrega al menos un producto.', 'error'); return; }
    if (lineas.some((l) => !l.cantidad || l.cantidad <= 0)) { toast('Hay líneas con cantidad en cero.', 'error'); return; }
    if (hayExcedentes) { toast('Hay líneas que superan el stock disponible.', 'error'); return; }

    setGuardando(true);
    try {
      const { entrega } = await DB.registrarEntrega(
        { colaboradorId, fecha, tipoEntrega, motivo, entregadoPor, observaciones, area: colaborador?.area || '' },
        lineas.map((l) => ({ productoId: l.productoId, cantidad: l.cantidad, talla: l.talla, observacion: l.observacion }))
      );
      toast(`Entrega ${entrega.consecutivo} guardada.`);
      await recargarProductos();
      onGuardada(entrega);
    } catch (err) {
      toast('No se pudo guardar: ' + err.message, 'error');
    }
    setGuardando(false);
  }

  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';

  return (
    <>
    <form onSubmit={guardar} className="space-y-5">
      <div className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Colaborador</h2>
        <div className="flex gap-2">
          <div className="flex-1"><BuscadorColaborador colaboradores={colaboradores.filter((c) => c.activo)} onElegir={(c) => setColaboradorId(c.id)} /></div>
          <button type="button" onClick={() => setNuevoColaborador(true)} className="shrink-0 px-3 border border-slate-300 rounded-lg text-sm hover:bg-slate-50">+ Nuevo</button>
        </div>
        {colaborador && (
          <div className="grid sm:grid-cols-4 gap-3 bg-slate-50 rounded-lg p-3 text-sm">
            <div><div className="text-xs text-slate-400">Nombre</div><div className="font-medium">{colaborador.nombreCompleto}</div></div>
            <div><div className="text-xs text-slate-400">Cédula</div><div className="font-medium">{colaborador.cedula || '—'}</div></div>
            <div><div className="text-xs text-slate-400">Cargo</div><div className="font-medium">{colaborador.cargo || '—'}</div></div>
            <div><div className="text-xs text-slate-400">Área</div><div className="font-medium">{colaborador.area || '—'}</div></div>
          </div>
        )}
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Datos de la entrega</h2>
        <div className="grid sm:grid-cols-4 gap-3">
          <div><label className={labelCls}>Fecha</label><input type="date" className={inputCls} value={fecha} onChange={(e) => setFecha(e.target.value)} /></div>
          <div><label className={labelCls}>Tipo de entrega</label><select className={inputCls} value={tipoEntrega} onChange={(e) => setTipoEntrega(e.target.value)}>{TIPOS_ENTREGA.map((t) => <option key={t}>{t}</option>)}</select></div>
          <div><label className={labelCls}>Motivo</label><select className={inputCls} value={motivo} onChange={(e) => setMotivo(e.target.value)}>{MOTIVOS_ENTREGA.map((m) => <option key={m}>{m}</option>)}</select></div>
          <div><label className={labelCls}>Entregado por</label><input className={inputCls} value={entregadoPor} onChange={(e) => setEntregadoPor(e.target.value)} /></div>
        </div>
        <div><label className={labelCls}>Observaciones</label><textarea rows={2} className={inputCls} value={observaciones} onChange={(e) => setObservaciones(e.target.value)} /></div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Productos a entregar</h2>
        <BuscadorProducto productos={productos.filter((p) => p.activo && p.stockActual > 0)} onElegir={agregarProducto} placeholder="Busca el producto a entregar (solo se ven los que tienen stock)…" />
        {lineas.length > 0 && (
          <div className="overflow-x-auto border border-slate-200 rounded-lg">
            <table className="w-full text-sm">
              <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr>
                <th className="px-3 py-2 text-left">Producto</th><th className="px-3 py-2 text-right">Cantidad</th><th className="px-3 py-2 text-left">Talla</th><th className="px-3 py-2 text-left">Observación</th><th></th>
              </tr></thead>
              <tbody>
                {lineas.map((l) => (
                  <LineaEntregaEditor key={l.key} linea={l} producto={productosPorId[l.productoId]} colaboradorId={colaboradorId} onCambiar={(n) => cambiarLinea(l.key, n)} onQuitar={() => quitarLinea(l.key)} />
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <div className="flex justify-end gap-2">
        <button type="button" onClick={onCancelar} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Cancelar</button>
        <button disabled={guardando} type="submit" className="px-5 py-2.5 text-sm rounded-lg bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white font-bold flex items-center gap-2">
          <Save className="h-4 w-4" /> {guardando ? 'Guardando…' : 'Guardar y generar acta'}
        </button>
      </div>
    </form>

    {nuevoColaborador && (
      <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-xl shadow-xl max-w-lg w-full">
          <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl"><h3 className="font-bold">Nuevo colaborador</h3><button type="button" onClick={() => setNuevoColaborador(false)}><X className="h-5 w-5" /></button></div>
          <div className="p-6"><ColaboradorForm areas={config?.areas} onGuardar={crearColaboradorRapido} onCancelar={() => setNuevoColaborador(false)} /></div>
        </div>
      </div>
    )}
    </>
  );
}

/* ---------- Acta de entrega imprimible ---------- */
function ActaEntregaImprimible({ entrega, detalles, colaborador, config }) {
  const FILAS_MINIMAS = 10;
  const filasVacias = Math.max(0, FILAS_MINIMAS - detalles.length);
  return (
    // Ancho fijo (816px = una hoja carta a 96dpi), ver comentario en
    // ComprobanteEntradaImprimible — mismo motivo.
    <div id="imprimible" className="bg-white p-8 text-base text-slate-800 mx-auto" style={{ width: '816px', maxWidth: '816px' }}>
      <div className="flex items-start justify-between border-b-2 border-slate-800 pb-3 mb-3">
        <div className="flex items-center gap-4">
          <img src={config.logo} alt="Ecocosecha" className="h-20 object-contain" />
          <div>
            <div className="font-bold text-xl">{config.empresa.razonSocial}</div>
            <div className="text-sm">NIT {config.empresa.nit}</div>
          </div>
        </div>
        <div className="text-right text-sm">
          <div className="font-bold text-xl">ACTA DE ENTREGA DE DOTACIÓN / INSUMOS</div>
          <div>Consecutivo: <b>{entrega.consecutivo}</b></div>
          <div>Fecha: {DB.fechaCO(entrega.fecha)} · Hora: {DB.horaCO(entrega.hora)}</div>
          <div className="text-slate-500 italic">{config.actaFormato.codigo} · Versión {config.actaFormato.version}</div>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-3 mb-3 text-sm">
        <div><b>Colaborador:</b> {colaborador?.nombreCompleto || '—'}</div>
        <div><b>Cédula:</b> {colaborador?.cedula || '—'}</div>
        <div><b>Cargo:</b> {colaborador?.cargo || '—'}</div>
        <div><b>Área:</b> {entrega.area || colaborador?.area || '—'}</div>
        <div><b>Tipo de entrega:</b> {entrega.tipoEntrega}</div>
        <div><b>Motivo:</b> {entrega.motivo}</div>
      </div>

      <table className="w-full text-sm border-collapse">
        <thead><tr className="bg-slate-100">
          <th className="border border-slate-300 px-3 py-2 w-10">N.°</th>
          <th className="border border-slate-300 px-3 py-2 text-left">Descripción</th>
          <th className="border border-slate-300 px-3 py-2">Unidad</th>
          <th className="border border-slate-300 px-3 py-2">Cant.</th>
          <th className="border border-slate-300 px-3 py-2">Talla</th>
          <th className="border border-slate-300 px-3 py-2 text-left">Observación</th>
        </tr></thead>
        <tbody>
          {detalles.map((d, i) => (
            <tr key={d.id}>
              <td className="border border-slate-300 px-3 py-2 text-center">{i + 1}</td>
              <td className="border border-slate-300 px-3 py-2">{d.descripcion}</td>
              <td className="border border-slate-300 px-3 py-2 text-center">{d.unidadEntrega}</td>
              <td className="border border-slate-300 px-3 py-2 text-center">{d.cantidad}</td>
              <td className="border border-slate-300 px-3 py-2 text-center">{d.talla || '—'}</td>
              <td className="border border-slate-300 px-3 py-2">{d.observacion}</td>
            </tr>
          ))}
          {Array.from({ length: filasVacias }).map((_, i) => (
            <tr key={'vacia' + i}>
              <td className="border border-slate-300 px-3 py-2.5">&nbsp;</td>
              <td className="border border-slate-300 px-3 py-2.5"></td>
              <td className="border border-slate-300 px-3 py-2.5"></td>
              <td className="border border-slate-300 px-3 py-2.5"></td>
              <td className="border border-slate-300 px-3 py-2.5"></td>
              <td className="border border-slate-300 px-3 py-2.5"></td>
            </tr>
          ))}
        </tbody>
      </table>

      {entrega.observaciones && <p className="text-sm mt-2"><b>Observaciones:</b> {entrega.observaciones}</p>}

      <p className="text-xs text-justify mt-3 leading-snug text-slate-600">{config.actaDeclaracion}</p>

      <div className="grid grid-cols-2 gap-12 mt-8 text-sm">
        <div className="text-center">
          <div className="h-14"></div>
          <div className="border-t border-slate-800 pt-2">Firma</div>
          <div className="mt-2"><b>Entregado por:</b> {entrega.entregadoPor || config.responsableEntregas.nombre}</div>
          <div>{config.responsableEntregas.cargo}</div>
          <div className="mt-1">C.C. {config.responsableEntregas.cedula || '___________________'}</div>
        </div>
        <div className="text-center">
          <div className="h-14 flex items-end justify-center">
            {entrega.firmaDigitalColaborador && <img src={entrega.firmaDigitalColaborador} alt="Firma" className="h-14 object-contain" />}
          </div>
          <div className="border-t border-slate-800 pt-2">Firma</div>
          <div className="mt-2"><b>Recibido por:</b> {colaborador?.nombreCompleto}</div>
          <div>C.C. {colaborador?.cedula || '___________________'}</div>
        </div>
      </div>

      <div className="flex justify-between text-xs text-slate-500 mt-6 pt-2 border-t border-slate-300">
        <span>Original: Archivo Ecocosecha — Copia: Colaborador</span>
        {entrega.estado === 'Anulada' && <span className="text-red-600 font-bold">ANULADA: {entrega.motivoAnulacion}</span>}
      </div>
    </div>
  );
}

// El acta y el comprobante son documentos de una sola hoja por diseño
// (FILAS_MINIMAS en ActaEntregaImprimible). En vez de partir el contenido en
// varias páginas si por algún motivo queda más alto de lo normal (lo que
// antes producía una segunda hoja con el bloque de firmas cortado o
// repetido), se encoge la imagen completa lo necesario para que SIEMPRE
// quepa entera en una sola página carta.
async function descargarPdfUnaPagina(nodo, nombreArchivo) {
  if (!nodo || !window.html2canvas || !window.jspdf) throw new Error('No se pudo generar el PDF (no cargaron las librerías).');
  const canvas = await window.html2canvas(nodo, { scale: 2, backgroundColor: '#ffffff' });
  const img = canvas.toDataURL('image/png');
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF({ unit: 'mm', format: 'letter', orientation: 'portrait' });
  const pageWidth = pdf.internal.pageSize.getWidth();
  const pageHeight = pdf.internal.pageSize.getHeight();
  const margin = 10;
  const maxWidth = pageWidth - margin * 2;
  const maxHeight = pageHeight - margin * 2;
  const escala = Math.min(maxWidth / canvas.width, maxHeight / canvas.height);
  const imgWidth = canvas.width * escala;
  const imgHeight = canvas.height * escala;
  const x = (pageWidth - imgWidth) / 2;
  pdf.addImage(img, 'PNG', x, margin, imgWidth, imgHeight);
  pdf.save(nombreArchivo);
}

async function descargarActaPDF(entrega) {
  await descargarPdfUnaPagina(document.getElementById('imprimible'), `${entrega.consecutivo}_acta_entrega.pdf`);
}

function EditarEntregaForm({ entrega, onGuardar, onCancelar }) {
  const [f, setF] = useState({
    entregadoPor: entrega.entregadoPor || '', fecha: entrega.fecha || '', tipoEntrega: entrega.tipoEntrega || 'Dotación',
    motivo: entrega.motivo || '', observaciones: entrega.observaciones || '',
  });
  const campo = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';
  function submit(e) { e.preventDefault(); onGuardar(f); }
  return (
    <form onSubmit={submit} className="space-y-3">
      <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2">
        Solo se pueden editar estos datos. Para corregir los productos o cantidades entregadas, anula esta entrega y regístrala de nuevo.
      </p>
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Fecha</label><input type="date" className={inputCls} value={f.fecha} onChange={campo('fecha')} /></div>
        <div>
          <label className={labelCls}>Tipo de entrega</label>
          <select className={inputCls} value={f.tipoEntrega} onChange={campo('tipoEntrega')}>
            {TIPOS_ENTREGA.map((t) => <option key={t}>{t}</option>)}
          </select>
        </div>
      </div>
      <div>
        <label className={labelCls}>Motivo</label>
        <select className={inputCls} value={f.motivo} onChange={campo('motivo')}>
          {MOTIVOS_ENTREGA.map((m) => <option key={m}>{m}</option>)}
        </select>
      </div>
      <div><label className={labelCls}>Entregado por</label><input className={inputCls} value={f.entregadoPor} onChange={campo('entregadoPor')} /></div>
      <div><label className={labelCls}>Observaciones</label><textarea rows={2} className={inputCls} value={f.observaciones} onChange={campo('observaciones')} /></div>
      <div className="flex justify-end gap-2 pt-2 border-t border-slate-200">
        <button type="button" onClick={onCancelar} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Cancelar</button>
        <button type="submit" className="px-4 py-2 text-sm rounded-lg bg-green-700 hover:bg-green-800 text-white font-bold flex items-center gap-2">
          <Save className="h-4 w-4" /> Guardar cambios
        </button>
      </div>
    </form>
  );
}

function EntregaDetalleView({ entrega, colaboradores, config, recargarProductos, toast, onVolver, onAnulada, onActualizada }) {
  const [detalles, setDetalles] = useState([]);
  const [confirmarAnular, setConfirmarAnular] = useState(false);
  const [editando, setEditando] = useState(false);
  const [motivo, setMotivo] = useState('');
  const [firmando, setFirmando] = useState(false);
  const [descargando, setDescargando] = useState(false);
  const colaborador = colaboradores.find((c) => c.id === entrega.colaboradorId);
  const escaneadoRef = useRef(null);

  useEffect(() => { DB.queryIndex('entregaDetalle', 'entregaId', entrega.id).then(setDetalles); }, [entrega.id]);

  async function anular() {
    if (!motivo.trim()) { toast('Escribe el motivo de anulación.', 'error'); return; }
    try {
      await DB.anularEntrega(entrega.id, motivo.trim());
      toast(`Entrega ${entrega.consecutivo} anulada.`);
      setConfirmarAnular(false);
      await recargarProductos();
      onAnulada();
    } catch (e) { toast('No se pudo anular: ' + e.message, 'error'); }
  }
  async function marcarFirmada() {
    const actualizada = await DB.actualizarEntrega(entrega.id, { estado: 'Firmada' });
    toast('Marcada como firmada.');
    onActualizada(actualizada);
  }
  async function guardarFirmaDigital(dataUrl) {
    const actualizada = await DB.actualizarEntrega(entrega.id, { firmaDigitalColaborador: dataUrl, estado: 'Firmada' });
    setFirmando(false);
    toast('Firma guardada.');
    onActualizada(actualizada);
  }
  async function adjuntarEscaneada(file) {
    if (!file) return;
    const actualizada = await DB.actualizarEntrega(entrega.id, { actaFirmadaEscaneada: file, estado: 'Firmada' });
    toast('Acta escaneada adjuntada.');
    onActualizada(actualizada);
  }
  function verEscaneada() {
    if (!entrega.actaFirmadaEscaneada) return;
    const url = URL.createObjectURL(entrega.actaFirmadaEscaneada);
    window.open(url, '_blank');
    setTimeout(() => URL.revokeObjectURL(url), 30000);
  }
  async function descargarPDF() {
    setDescargando(true);
    try { await descargarActaPDF(entrega); } catch (e) { toast(e.message, 'error'); }
    setDescargando(false);
  }
  async function guardarEdicion(patch) {
    try {
      const actualizada = await DB.actualizarEntrega(entrega.id, patch);
      toast('Entrega actualizada.');
      setEditando(false);
      onActualizada(actualizada);
    } catch (e) {
      toast('No se pudo guardar: ' + e.message, 'error');
    }
  }

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between flex-wrap gap-2 print:hidden">
        <button onClick={onVolver} className="flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700">
          <ChevronLeft className="h-4 w-4" /> Volver a entregas
        </button>
        <div className="flex flex-wrap gap-2">
          <button onClick={() => window.print()} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
            <Printer className="h-4 w-4" /> Imprimir
          </button>
          <button onClick={descargarPDF} disabled={descargando} className="bg-white border border-slate-300 hover:bg-slate-50 disabled:opacity-60 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
            <Download className="h-4 w-4" /> {descargando ? 'Generando…' : 'Descargar PDF'}
          </button>
          {entrega.estado !== 'Anulada' && (
            <>
              <button onClick={() => setEditando(true)} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
                <Edit2 className="h-4 w-4" /> Editar
              </button>
              <button onClick={() => setFirmando(true)} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold">Firma digital</button>
              {entrega.estado === 'Pendiente de firma' && (
                <button onClick={marcarFirmada} className="bg-green-700 hover:bg-green-800 text-white px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2"><Check className="h-4 w-4" /> Marcar como firmada</button>
              )}
              <button onClick={() => escaneadoRef.current?.click()} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2"><Upload className="h-4 w-4" /> Adjuntar escaneada</button>
              <input ref={escaneadoRef} type="file" accept=".pdf,.jpg,.jpeg,.png" hidden onChange={(e) => { adjuntarEscaneada(e.target.files?.[0]); e.target.value = ''; }} />
              <button onClick={() => setConfirmarAnular(true)} className="bg-white border border-red-300 hover:bg-red-50 text-red-600 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2"><Ban className="h-4 w-4" /> Anular</button>
            </>
          )}
        </div>
      </div>

      <div className="print:hidden flex items-center gap-2 flex-wrap">
        <h1 className="text-xl font-bold text-slate-800">{entrega.consecutivo}</h1>
        <Badge color={entrega.estado === 'Anulada' ? '#dc2626' : entrega.estado === 'Firmada' ? '#16a34a' : '#b45309'}>{entrega.estado}</Badge>
        {entrega.actaFirmadaEscaneada && <button onClick={verEscaneada} className="text-xs text-green-700 underline">Ver acta escaneada</button>}
      </div>

      {firmando && (
        <div className="print:hidden bg-white rounded-xl border border-slate-200 p-4 max-w-xl">
          <h3 className="font-bold text-sm text-slate-800 mb-2">Firma digital del colaborador</h3>
          <FirmaDigitalCanvas onGuardar={guardarFirmaDigital} onCancelar={() => setFirmando(false)} />
        </div>
      )}

      {editando && (
        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto print:hidden">
          <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full my-8">
            <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl">
              <h3 className="font-bold">Editar entrega {entrega.consecutivo}</h3>
              <button onClick={() => setEditando(false)}><X className="h-5 w-5" /></button>
            </div>
            <div className="p-6">
              <EditarEntregaForm entrega={entrega} onGuardar={guardarEdicion} onCancelar={() => setEditando(false)} />
            </div>
          </div>
        </div>
      )}

      <div className="border border-slate-200 rounded-xl overflow-hidden">
        <ActaEntregaImprimible entrega={entrega} detalles={detalles} colaborador={colaborador} config={config} />
      </div>

      <ConfirmModal
        abierto={confirmarAnular}
        titulo="Anular entrega"
        mensaje={
          <div className="space-y-2 text-left">
            <p>Esto repone en el kardex todo lo entregado con {entrega.consecutivo}. No se puede deshacer.</p>
            <input autoFocus value={motivo} onChange={(e) => setMotivo(e.target.value)} placeholder="Motivo de la anulación…" className="w-full p-2 border border-slate-300 rounded text-sm" />
          </div>
        }
        peligro
        textoConfirmar="Anular entrega"
        onCancelar={() => setConfirmarAnular(false)}
        onConfirmar={anular}
      />
    </div>
  );
}

function Entregas({ productos, colaboradores, config, recargarProductos, recargarColaboradores, toast, abrirNuevo, onAbrirNuevoConsumido }) {
  const [sub, setSub] = useState('lista'); // lista | nuevo | detalle
  const [entregas, setEntregas] = useState([]);
  const [seleccionada, setSeleccionada] = useState(null);
  const [filtroColaborador, setFiltroColaborador] = useState('');
  const [filtroEstado, setFiltroEstado] = useState('');

  async function cargar() { setEntregas((await DB.getAll('entregas')).sort((a, b) => b.fechaCreacion.localeCompare(a.fechaCreacion))); }
  useEffect(() => { cargar(); }, []);
  useEffect(() => { if (abrirNuevo) { setSub('nuevo'); onAbrirNuevoConsumido(); } }, [abrirNuevo]);

  const colaboradoresPorId = Object.fromEntries(colaboradores.map((c) => [c.id, c]));
  const filtradas = entregas.filter((e) => (!filtroColaborador || e.colaboradorId === filtroColaborador) && (!filtroEstado || e.estado === filtroEstado));

  if (sub === 'nuevo') {
    return (
      <div className="p-6">
        <h1 className="text-xl font-bold text-slate-800 mb-4">Nueva entrega</h1>
        <EntregaForm
          productos={productos} colaboradores={colaboradores} config={config}
          recargarProductos={recargarProductos} recargarColaboradores={recargarColaboradores} toast={toast}
          onGuardada={async (entrega) => { await cargar(); setSeleccionada(entrega); setSub('detalle'); }}
          onCancelar={() => setSub('lista')}
        />
      </div>
    );
  }
  if (sub === 'detalle' && seleccionada) {
    return (
      <EntregaDetalleView
        entrega={seleccionada} colaboradores={colaboradores} config={config} recargarProductos={recargarProductos} toast={toast}
        onVolver={() => setSub('lista')}
        onAnulada={async () => { await cargar(); setSub('lista'); }}
        onActualizada={async (actualizada) => { setSeleccionada(actualizada); await cargar(); }}
      />
    );
  }

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Entregas</h1>
          <p className="text-slate-500 text-sm">{entregas.length} registradas</p>
        </div>
        <button onClick={() => setSub('nuevo')} className="bg-amber-500 hover:bg-amber-600 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
          <Plus className="h-4 w-4" /> Nueva entrega
        </button>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-3 flex flex-wrap gap-2">
        <select value={filtroColaborador} onChange={(e) => setFiltroColaborador(e.target.value)} className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
          <option value="">Todos los colaboradores</option>
          {colaboradores.map((c) => <option key={c.id} value={c.id}>{c.nombreCompleto}</option>)}
        </select>
        <select value={filtroEstado} onChange={(e) => setFiltroEstado(e.target.value)} className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
          <option value="">Cualquier estado</option>
          <option value="Pendiente de firma">Pendiente de firma</option>
          <option value="Firmada">Firmada</option>
          <option value="Anulada">Anulada</option>
        </select>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        {filtradas.length === 0 ? (
          <EmptyState icono={ClipboardList} titulo="Sin entregas" descripcion="Registra la primera entrega de dotación o insumos." />
        ) : (
          <table className="w-full text-sm">
            <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr>
              <th className="px-4 py-2 text-left">Consecutivo</th><th className="px-4 py-2 text-left">Fecha</th>
              <th className="px-4 py-2 text-left">Colaborador</th><th className="px-4 py-2 text-left">Tipo</th>
              <th className="px-4 py-2 text-right">Valor</th><th className="px-4 py-2 text-left">Estado</th>
            </tr></thead>
            <tbody className="divide-y divide-slate-100">
              {filtradas.map((e) => (
                <tr key={e.id} className="hover:bg-slate-50 cursor-pointer" onClick={() => { setSeleccionada(e); setSub('detalle'); }}>
                  <td className="px-4 py-2.5 font-mono text-xs">{e.consecutivo}</td>
                  <td className="px-4 py-2.5">{DB.fechaCO(e.fecha)}</td>
                  <td className="px-4 py-2.5">{colaboradoresPorId[e.colaboradorId]?.nombreCompleto || '—'}</td>
                  <td className="px-4 py-2.5 text-slate-500">{e.tipoEntrega}</td>
                  <td className="px-4 py-2.5 text-right">{DB.money(e.valorTotal)}</td>
                  <td className="px-4 py-2.5"><Badge color={e.estado === 'Anulada' ? '#dc2626' : e.estado === 'Firmada' ? '#16a34a' : '#b45309'}>{e.estado}</Badge></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

function Proveedores({ proveedores, recargar, toast, onVerEntrada }) {
  const [modal, setModal] = useState(null); // null | 'nuevo' | proveedor-a-editar
  const [seleccionado, setSeleccionado] = useState(null);
  const [entradasProveedor, setEntradasProveedor] = useState([]);

  async function crear(datos) {
    await DB.put('proveedores', { id: DB.uid(), ...datos });
    toast('Proveedor creado.');
    setModal(null);
    recargar();
  }
  async function actualizar(datos) {
    await DB.put('proveedores', { ...modal, ...datos });
    toast('Proveedor actualizado.');
    setModal(null);
    recargar();
  }
  async function alternarActivo(p) {
    await DB.put('proveedores', { ...p, activo: !p.activo });
    recargar();
  }

  useEffect(() => {
    if (!seleccionado) return;
    DB.queryIndex('entradas', 'proveedorId', seleccionado.id).then((es) => setEntradasProveedor(es.sort((a, b) => b.fechaRecepcion.localeCompare(a.fechaRecepcion))));
  }, [seleccionado]);

  if (seleccionado) {
    const total = entradasProveedor.filter((e) => e.estado !== 'Anulada').reduce((s, e) => s + e.total, 0);
    return (
      <div className="p-6 space-y-4">
        <button onClick={() => setSeleccionado(null)} className="flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700">
          <ChevronLeft className="h-4 w-4" /> Volver a proveedores
        </button>
        <h1 className="text-xl font-bold text-slate-800">{seleccionado.razonSocial}</h1>
        <p className="text-sm text-slate-500">NIT {seleccionado.nit} · {seleccionado.direccion}{seleccionado.ciudad ? `, ${seleccionado.ciudad}` : ''}</p>
        <div className="grid grid-cols-2 gap-3 max-w-md">
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-xs text-slate-500">Entradas registradas</div>
            <div className="text-xl font-bold text-slate-800">{entradasProveedor.length}</div>
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-xs text-slate-500">Total comprado</div>
            <div className="text-xl font-bold text-green-700">{DB.money(total)}</div>
          </div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
          <div className="px-4 py-3 border-b border-slate-200 font-bold text-sm text-slate-800">Historial de entradas</div>
          {entradasProveedor.length === 0 ? (
            <p className="text-sm text-slate-400 p-4">Sin entradas registradas todavía.</p>
          ) : (
            <table className="w-full text-sm">
              <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr><th className="px-4 py-2 text-left">Consecutivo</th><th className="px-4 py-2 text-left">Fecha</th><th className="px-4 py-2 text-left">Soporte</th><th className="px-4 py-2 text-right">Total</th><th className="px-4 py-2 text-left">Estado</th></tr></thead>
              <tbody className="divide-y divide-slate-100">
                {entradasProveedor.map((e) => (
                  <tr key={e.id} className="hover:bg-slate-50 cursor-pointer" onClick={() => onVerEntrada && onVerEntrada(e)}>
                    <td className="px-4 py-2 font-mono text-xs">{e.consecutivo}</td>
                    <td className="px-4 py-2">{DB.fechaCO(e.fechaRecepcion)}</td>
                    <td className="px-4 py-2">{e.tipoSoporte} {e.numeroFactura || e.numeroRemision || e.numeroPedido}</td>
                    <td className="px-4 py-2 text-right">{DB.money(e.total)}</td>
                    <td className="px-4 py-2">{e.estado === 'Anulada' ? <Badge color="#dc2626">Anulada</Badge> : <Badge color="#16a34a">Activa</Badge>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Proveedores</h1>
          <p className="text-slate-500 text-sm">{proveedores.length} registrados</p>
        </div>
        <button onClick={() => setModal('nuevo')} className="bg-green-700 hover:bg-green-800 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
          <Plus className="h-4 w-4" /> Nuevo proveedor
        </button>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        {proveedores.length === 0 ? (
          <EmptyState icono={Building2} titulo="Sin proveedores" descripcion="Crea el primero para poder registrar entradas." />
        ) : (
          <table className="w-full text-sm">
            <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr><th className="px-4 py-2 text-left">Razón social</th><th className="px-4 py-2 text-left">NIT</th><th className="px-4 py-2 text-left">Teléfono</th><th className="px-4 py-2 text-left">Contacto</th><th></th></tr></thead>
            <tbody className="divide-y divide-slate-100">
              {proveedores.map((p) => (
                <tr key={p.id} className={clsx('hover:bg-slate-50', !p.activo && 'opacity-50')}>
                  <td className="px-4 py-2.5 font-medium text-slate-700 cursor-pointer" onClick={() => setSeleccionado(p)}>{p.razonSocial}</td>
                  <td className="px-4 py-2.5 text-slate-500">{p.nit}</td>
                  <td className="px-4 py-2.5 text-slate-500">{p.telefono}</td>
                  <td className="px-4 py-2.5 text-slate-500">{p.contacto}</td>
                  <td className="px-4 py-2.5 text-right whitespace-nowrap">
                    <button onClick={() => setModal(p)} className="text-xs text-slate-400 hover:text-green-700 mr-3">Editar</button>
                    <button onClick={() => alternarActivo(p)} className="text-xs text-slate-400 hover:text-red-600">{p.activo ? 'Inactivar' : 'Reactivar'}</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
      {modal && (
        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full">
            <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl">
              <h3 className="font-bold">{modal === 'nuevo' ? 'Nuevo proveedor' : 'Editar proveedor'}</h3>
              <button onClick={() => setModal(null)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
            </div>
            <div className="p-6">
              <ProveedorForm proveedor={modal === 'nuevo' ? null : modal} onGuardar={modal === 'nuevo' ? crear : actualizar} onCancelar={() => setModal(null)} />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ============================================================================
   Colaboradores — CRUD simple (hoja de vida completa llega en la Fase 4)
   ============================================================================ */
function ColaboradorForm({ colaborador, areas, onGuardar, onCancelar }) {
  const [f, setF] = useState(
    colaborador || { nombreCompleto: '', cedula: '', cargo: '', area: areas?.[0] || '', celular: '', correo: '', tallaCamisa: '', tallaPantalon: '', tallaCalzado: '', fechaIngreso: '', activo: true }
  );
  const campo = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-green-600';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';
  function submit(e) {
    e.preventDefault();
    if (!f.nombreCompleto.trim()) return;
    onGuardar(f);
  }
  return (
    <form onSubmit={submit} className="space-y-3">
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Nombre completo *</label><input required className={inputCls} value={f.nombreCompleto} onChange={campo('nombreCompleto')} /></div>
        <div><label className={labelCls}>Cédula</label><input className={inputCls} value={f.cedula} onChange={campo('cedula')} /></div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Cargo</label><input className={inputCls} value={f.cargo} onChange={campo('cargo')} /></div>
        <div>
          <label className={labelCls}>Área</label>
          <select className={inputCls} value={f.area} onChange={campo('area')}>
            <option value="">— elige —</option>
            {(areas || []).map((a) => <option key={a}>{a}</option>)}
          </select>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div><label className={labelCls}>Celular</label><input className={inputCls} value={f.celular} onChange={campo('celular')} /></div>
        <div><label className={labelCls}>Correo</label><input type="email" className={inputCls} value={f.correo} onChange={campo('correo')} /></div>
      </div>
      <div className="grid grid-cols-3 gap-3">
        <div><label className={labelCls}>Talla camisa</label><input className={inputCls} value={f.tallaCamisa} onChange={campo('tallaCamisa')} /></div>
        <div><label className={labelCls}>Talla pantalón</label><input className={inputCls} value={f.tallaPantalon} onChange={campo('tallaPantalon')} /></div>
        <div><label className={labelCls}>Talla calzado</label><input className={inputCls} value={f.tallaCalzado} onChange={campo('tallaCalzado')} /></div>
      </div>
      <div className="max-w-xs"><label className={labelCls}>Fecha de ingreso</label><input type="date" className={inputCls} value={f.fechaIngreso} onChange={campo('fechaIngreso')} /></div>
      <div className="flex justify-end gap-2 pt-2 border-t border-slate-200">
        <button type="button" onClick={onCancelar} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Cancelar</button>
        <button type="submit" className="px-4 py-2 text-sm rounded-lg bg-green-700 hover:bg-green-800 text-white font-bold flex items-center gap-2">
          <Save className="h-4 w-4" /> Guardar
        </button>
      </div>
    </form>
  );
}

/* ---------- Importar colaboradores por Excel ---------- */
const ENCABEZADOS_COLABORADORES = ['Nombre completo', 'Cédula', 'Cargo', 'Área', 'Celular', 'Correo', 'Talla camisa', 'Talla pantalón', 'Talla calzado', 'Fecha de ingreso (AAAA-MM-DD)'];

function parsearExcelColaboradores(rows) {
  const row0 = Array.from(rows[0] || [], normTxt);
  const idx = (textos) => row0.findIndex((c) => textos.some((t) => c.includes(t)));
  const iNombre = idx(['NOMBRE']);
  const iCedula = idx(['CEDULA']);
  const iCargo = idx(['CARGO']);
  const iArea = idx(['AREA']);
  const iCelular = idx(['CELULAR', 'TELEFONO']);
  const iCorreo = idx(['CORREO', 'EMAIL']);
  const iTallaCamisa = idx(['TALLA CAMISA']);
  const iTallaPantalon = idx(['TALLA PANTALON']);
  const iTallaCalzado = idx(['TALLA CALZADO']);
  const iFecha = idx(['FECHA']);

  if (iNombre === -1) throw new Error('No se encontró la columna "Nombre completo" en la fila de encabezados.');

  const filas = [];
  for (let i = 1; i < rows.length; i++) {
    const row = rows[i] || [];
    const nombreCompleto = row[iNombre];
    if (!nombreCompleto || String(nombreCompleto).trim() === '') continue;
    let fechaIngreso = '';
    if (iFecha !== -1 && row[iFecha] !== undefined && row[iFecha] !== '') {
      const v = row[iFecha];
      if (typeof v === 'number') {
        const ms = Math.round((v - 25569) * 86400 * 1000);
        fechaIngreso = new Date(ms).toISOString().slice(0, 10);
      } else {
        fechaIngreso = String(v).trim();
      }
    }
    filas.push({
      nombreCompleto: String(nombreCompleto).trim(),
      cedula: iCedula !== -1 ? String(row[iCedula] ?? '').trim() : '',
      cargo: iCargo !== -1 ? String(row[iCargo] ?? '').trim() : '',
      area: iArea !== -1 ? String(row[iArea] ?? '').trim() : '',
      celular: iCelular !== -1 ? String(row[iCelular] ?? '').trim() : '',
      correo: iCorreo !== -1 ? String(row[iCorreo] ?? '').trim() : '',
      tallaCamisa: iTallaCamisa !== -1 ? String(row[iTallaCamisa] ?? '').trim() : '',
      tallaPantalon: iTallaPantalon !== -1 ? String(row[iTallaPantalon] ?? '').trim() : '',
      tallaCalzado: iTallaCalzado !== -1 ? String(row[iTallaCalzado] ?? '').trim() : '',
      fechaIngreso,
    });
  }
  return filas;
}

function descargarPlantillaColaboradores() {
  const wb = window.XLSX.utils.book_new();
  const ws = window.XLSX.utils.aoa_to_sheet([
    ENCABEZADOS_COLABORADORES,
    ['Juan Pérez Gómez', '1234567890', 'Operario de bodega', 'Operaciones', '3001234567', 'juan.perez@ecocosecha.com', 'M', '34', '40', '2026-01-15'],
  ]);
  ws['!cols'] = [{ wch: 26 }, { wch: 14 }, { wch: 20 }, { wch: 16 }, { wch: 14 }, { wch: 26 }, { wch: 12 }, { wch: 14 }, { wch: 12 }, { wch: 22 }];
  window.XLSX.utils.book_append_sheet(wb, ws, 'Colaboradores');
  window.XLSX.writeFile(wb, 'Plantilla_Colaboradores_Inventario_Ecocosecha.xlsx');
}

function ImportarColaboradores({ colaboradores, areas, recargar, toast, onCancelar }) {
  const [cargando, setCargando] = useState(false);
  const [filas, setFilas] = useState(null);
  const [guardando, setGuardando] = useState(false);
  const fileRef = useRef(null);

  function buscarExistente(fila) {
    if (fila.cedula) {
      const porCedula = colaboradores.find((c) => c.cedula && c.cedula === fila.cedula);
      if (porCedula) return porCedula;
    }
    return colaboradores.find((c) => !c.cedula && normTxt(c.nombreCompleto) === normTxt(fila.nombreCompleto)) || null;
  }

  async function elegirArchivo(file) {
    if (!file) return;
    setCargando(true);
    try {
      const buf = await file.arrayBuffer();
      const wb = window.XLSX.read(buf, { type: 'array' });
      const rows = window.XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1, raw: true });
      const parseadas = parsearExcelColaboradores(rows);
      if (!parseadas.length) throw new Error('No se encontró ninguna fila con nombre.');
      const resueltas = parseadas.map((f) => {
        const existente = buscarExistente(f);
        return { ...f, key: DB.uid(), area: f.area || areas?.[0] || '', existenteId: existente?.id || null };
      });
      setFilas(resueltas);
      toast(`${resueltas.length} fila(s) leídas del archivo.`);
    } catch (e) {
      toast('No se pudo leer el archivo: ' + e.message, 'error');
    }
    setCargando(false);
  }

  function cambiarArea(key, area) { setFilas((fs) => fs.map((f) => (f.key === key ? { ...f, area } : f))); }

  const creaciones = filas ? filas.filter((f) => !f.existenteId).length : 0;
  const actualizaciones = filas ? filas.filter((f) => f.existenteId).length : 0;

  async function confirmar() {
    setGuardando(true);
    try {
      for (const f of filas) {
        const datos = {
          nombreCompleto: f.nombreCompleto, cedula: f.cedula, cargo: f.cargo, area: f.area,
          celular: f.celular, correo: f.correo, tallaCamisa: f.tallaCamisa, tallaPantalon: f.tallaPantalon,
          tallaCalzado: f.tallaCalzado, fechaIngreso: f.fechaIngreso, activo: true,
        };
        if (f.existenteId) await DB.put('colaboradores', { id: f.existenteId, ...datos });
        else await DB.put('colaboradores', { id: DB.uid(), ...datos });
      }
      toast(`Importación lista: ${creaciones} colaborador(es) creado(s), ${actualizaciones} actualizado(s).`);
      await recargar();
      onCancelar();
    } catch (e) {
      toast('No se pudo completar la importación: ' + e.message, 'error');
    }
    setGuardando(false);
  }

  return (
    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-y-auto">
      <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-4xl w-full my-8">
        <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl">
          <h3 className="font-bold">Importar colaboradores desde Excel</h3>
          <button onClick={onCancelar}><X className="h-5 w-5" /></button>
        </div>
        <div className="p-6 space-y-4">
          {!filas ? (
            <div className="bg-slate-50 border-2 border-dashed border-slate-300 rounded-xl p-8 text-center space-y-4">
              <FileSpreadsheet className="h-10 w-10 mx-auto text-green-700" />
              <p className="text-sm text-slate-500">Sube un Excel con una fila por colaborador usando la plantilla, o descárgala primero.</p>
              <div className="flex justify-center gap-2">
                <button disabled={cargando} onClick={() => fileRef.current?.click()} className="bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white px-4 py-2.5 rounded-lg text-sm font-bold">
                  {cargando ? 'Leyendo…' : 'Elegir archivo .xlsx'}
                </button>
                <button onClick={descargarPlantillaColaboradores} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold">
                  Descargar plantilla
                </button>
              </div>
              <input ref={fileRef} type="file" accept=".xlsx,.xls" hidden onChange={(e) => elegirArchivo(e.target.files?.[0])} />
            </div>
          ) : (
            <>
              <div className="bg-white border border-slate-200 rounded-lg p-3 text-sm flex flex-wrap gap-x-6 gap-y-1 text-slate-600">
                <span>{filas.length} fila(s) leídas</span>
                <span className="text-green-700 font-semibold">{creaciones} se crearán</span>
                {actualizaciones > 0 && <span className="text-amber-700 font-semibold">{actualizaciones} actualizarán uno existente</span>}
              </div>
              <div className="border border-slate-200 rounded-lg overflow-hidden max-h-96 overflow-y-auto">
                <table className="w-full text-sm">
                  <thead className="bg-slate-50 text-slate-500 text-xs uppercase sticky top-0"><tr>
                    <th className="px-3 py-2 text-left">Nombre</th><th className="px-3 py-2 text-left">Cédula</th>
                    <th className="px-3 py-2 text-left">Cargo</th><th className="px-3 py-2 text-left">Área</th><th className="px-3 py-2 text-left">Acción</th>
                  </tr></thead>
                  <tbody className="divide-y divide-slate-100">
                    {filas.map((f) => (
                      <tr key={f.key}>
                        <td className="px-3 py-2">{f.nombreCompleto}</td>
                        <td className="px-3 py-2 font-mono text-xs">{f.cedula || '—'}</td>
                        <td className="px-3 py-2 text-slate-500">{f.cargo || '—'}</td>
                        <td className="px-3 py-2">
                          <select value={f.area} onChange={(e) => cambiarArea(f.key, e.target.value)} className="border border-slate-300 rounded px-2 py-1 text-xs bg-white">
                            <option value="">— sin área —</option>
                            {(areas || []).map((a) => <option key={a} value={a}>{a}</option>)}
                          </select>
                        </td>
                        <td className="px-3 py-2">
                          {f.existenteId ? (
                            <span className="text-amber-700 text-xs font-semibold">Actualizará existente</span>
                          ) : (
                            <span className="text-green-700 text-xs font-semibold">Crear nuevo</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="flex justify-end gap-2">
                <button onClick={() => setFilas(null)} className="px-4 py-2 text-sm rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50">Elegir otro archivo</button>
                <button disabled={guardando} onClick={confirmar} className="px-5 py-2.5 text-sm rounded-lg bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white font-bold">
                  {guardando ? 'Importando…' : `Importar ${filas.length} colaborador(es)`}
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function Colaboradores({ colaboradores, config, recargar, toast }) {
  const [modal, setModal] = useState(null); // null | 'nuevo' | colaborador-a-editar
  const [importando, setImportando] = useState(false);
  const [busqueda, setBusqueda] = useState('');

  async function crear(datos) {
    await DB.put('colaboradores', { id: DB.uid(), ...datos });
    toast('Colaborador creado.');
    setModal(null);
    recargar();
  }
  async function actualizar(datos) {
    await DB.put('colaboradores', { ...modal, ...datos });
    toast('Colaborador actualizado.');
    setModal(null);
    recargar();
  }
  async function alternarActivo(c) {
    await DB.put('colaboradores', { ...c, activo: !c.activo });
    recargar();
  }

  const q = busqueda.trim().toLowerCase();
  const filtrados = colaboradores.filter((c) => !q || `${c.nombreCompleto} ${c.cedula} ${c.cargo}`.toLowerCase().includes(q));

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Colaboradores</h1>
          <p className="text-slate-500 text-sm">{colaboradores.length} registrados</p>
        </div>
        <div className="flex gap-2">
          <button onClick={() => setImportando(true)} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
            <FileSpreadsheet className="h-4 w-4" /> Importar Excel
          </button>
          <button onClick={() => setModal('nuevo')} className="bg-green-700 hover:bg-green-800 text-white px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
            <Plus className="h-4 w-4" /> Nuevo colaborador
          </button>
        </div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-3">
        <div className="relative max-w-sm">
          <Search className="h-4 w-4 absolute left-3 top-2.5 text-slate-400" />
          <input value={busqueda} onChange={(e) => setBusqueda(e.target.value)} placeholder="Buscar por nombre, cédula o cargo…" className="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm" />
        </div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        {filtrados.length === 0 ? (
          <EmptyState icono={Users} titulo="Sin colaboradores" descripcion="Crea el primero para poder registrar entregas." />
        ) : (
          <table className="w-full text-sm">
            <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr><th className="px-4 py-2 text-left">Nombre</th><th className="px-4 py-2 text-left">Cédula</th><th className="px-4 py-2 text-left">Cargo</th><th className="px-4 py-2 text-left">Área</th><th></th></tr></thead>
            <tbody className="divide-y divide-slate-100">
              {filtrados.map((c) => (
                <tr key={c.id} className={clsx('hover:bg-slate-50', !c.activo && 'opacity-50')}>
                  <td className="px-4 py-2.5 font-medium text-slate-700">{c.nombreCompleto}</td>
                  <td className="px-4 py-2.5 text-slate-500">{c.cedula}</td>
                  <td className="px-4 py-2.5 text-slate-500">{c.cargo}</td>
                  <td className="px-4 py-2.5 text-slate-500">{c.area}</td>
                  <td className="px-4 py-2.5 text-right whitespace-nowrap">
                    <button onClick={() => setModal(c)} className="text-xs text-slate-400 hover:text-green-700 mr-3">Editar</button>
                    <button onClick={() => alternarActivo(c)} className="text-xs text-slate-400 hover:text-red-600">{c.activo ? 'Inactivar' : 'Reactivar'}</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
      {modal && (
        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-xl shadow-xl border border-slate-200 max-w-lg w-full">
            <div className="bg-slate-900 text-white p-4 flex justify-between items-center rounded-t-xl">
              <h3 className="font-bold">{modal === 'nuevo' ? 'Nuevo colaborador' : 'Editar colaborador'}</h3>
              <button onClick={() => setModal(null)} className="text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
            </div>
            <div className="p-6">
              <ColaboradorForm colaborador={modal === 'nuevo' ? null : modal} areas={config?.areas} onGuardar={modal === 'nuevo' ? crear : actualizar} onCancelar={() => setModal(null)} />
            </div>
          </div>
        </div>
      )}

      {importando && (
        <ImportarColaboradores
          colaboradores={colaboradores} areas={config?.areas} recargar={recargar} toast={toast}
          onCancelar={() => setImportando(false)}
        />
      )}
    </div>
  );
}

/* ============================================================================
   Requisiciones de insumos — llegan desde ../requisiciones/ (panel público,
   sin login) a través de Supabase. Aquí solo se revisan y se les cambia el
   estado; crear la Entrega o Entrega correspondiente se sigue haciendo
   manualmente desde los módulos de Entradas/Entregas.
   ============================================================================ */
const CATEGORIAS_REQUISICION = { P: 'Papelería', C: 'Cafetería', H: 'Herramientas y Equipos', O: 'Otro' };
const ESTADOS_REQUISICION = ['Pendiente', 'Parcial', 'Entregada', 'Rechazada'];
const COLOR_ESTADO_REQUISICION = { Pendiente: '#b45309', Parcial: '#2563eb', Entregada: '#16a34a', Rechazada: '#dc2626' };

function RequisicionDetalle({ requisicion, lineas, onVolver, onGuardar, toast }) {
  const [estado, setEstado] = useState(requisicion.estado);
  const [autorizadoPor, setAutorizadoPor] = useState(requisicion.autorizado_por || '');
  const [fechaEntrega, setFechaEntrega] = useState(requisicion.fecha_entrega || '');
  const [observaciones, setObservaciones] = useState(requisicion.observaciones || '');
  const [guardando, setGuardando] = useState(false);

  async function guardar() {
    setGuardando(true);
    try {
      await onGuardar(requisicion.id, { estado, autorizado_por: autorizadoPor, fecha_entrega: fechaEntrega || null, observaciones });
      toast('Requisición actualizada.');
    } catch (e) {
      toast('No se pudo guardar: ' + e.message, 'error');
    }
    setGuardando(false);
  }

  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';

  return (
    <div className="p-6 space-y-4">
      <button onClick={onVolver} className="flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700">
        <ChevronLeft className="h-4 w-4" /> Volver a requisiciones
      </button>
      <div className="flex items-center gap-2 flex-wrap">
        <h1 className="text-xl font-bold text-slate-800">Requisición N.° {requisicion.numero}</h1>
        <Badge color={COLOR_ESTADO_REQUISICION[requisicion.estado]}>{requisicion.estado}</Badge>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-5">
        <div className="grid sm:grid-cols-4 gap-3 text-sm">
          <div><div className="text-xs text-slate-400">Fecha solicitud</div><div className="font-medium">{DB.fechaCO(requisicion.fecha_solicitud)}</div></div>
          <div><div className="text-xs text-slate-400">Área / Proceso</div><div className="font-medium">{requisicion.area || '—'}</div></div>
          <div><div className="text-xs text-slate-400">Solicitado por</div><div className="font-medium">{requisicion.solicitado_por}</div></div>
          <div><div className="text-xs text-slate-400">Recibida</div><div className="font-medium">{DB.fechaCO(requisicion.fecha_creacion?.slice(0, 10))}</div></div>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr>
            <th className="px-3 py-2 w-10 text-center">#</th><th className="px-3 py-2 text-left">Categoría</th>
            <th className="px-3 py-2 text-left">Descripción del insumo</th><th className="px-3 py-2 text-right">Cant.</th>
            <th className="px-3 py-2 text-left">Unidad</th><th className="px-3 py-2 text-left">Observaciones</th>
          </tr></thead>
          <tbody className="divide-y divide-slate-100">
            {lineas.map((l, i) => (
              <tr key={l.id}>
                <td className="px-3 py-2 text-center text-slate-400">{i + 1}</td>
                <td className="px-3 py-2">{CATEGORIAS_REQUISICION[l.categoria] || l.categoria || '—'}</td>
                <td className="px-3 py-2">{l.descripcion}</td>
                <td className="px-3 py-2 text-right">{l.cantidad}</td>
                <td className="px-3 py-2 text-slate-500">{l.unidad}</td>
                <td className="px-3 py-2 text-slate-500">{l.observaciones}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Gestión</h2>
        <div className="grid sm:grid-cols-3 gap-3">
          <div>
            <label className={labelCls}>Estado</label>
            <select className={inputCls} value={estado} onChange={(e) => setEstado(e.target.value)}>
              {ESTADOS_REQUISICION.map((e) => <option key={e}>{e}</option>)}
            </select>
          </div>
          <div><label className={labelCls}>Autorizado por</label><input className={inputCls} value={autorizadoPor} onChange={(e) => setAutorizadoPor(e.target.value)} /></div>
          <div><label className={labelCls}>Fecha de entrega</label><input type="date" className={inputCls} value={fechaEntrega} onChange={(e) => setFechaEntrega(e.target.value)} /></div>
        </div>
        <div><label className={labelCls}>Observaciones internas</label><textarea rows={2} className={inputCls} value={observaciones} onChange={(e) => setObservaciones(e.target.value)} /></div>
        <div className="flex justify-end">
          <button disabled={guardando} onClick={guardar} className="px-5 py-2.5 text-sm rounded-lg bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white font-bold flex items-center gap-2">
            <Save className="h-4 w-4" /> {guardando ? 'Guardando…' : 'Guardar'}
          </button>
        </div>
      </div>
    </div>
  );
}

function Requisiciones({ toast }) {
  const [cargando, setCargando] = useState(true);
  const [error, setError] = useState('');
  const [requisiciones, setRequisiciones] = useState([]);
  const [detallePorRequisicion, setDetallePorRequisicion] = useState({});
  const [seleccionada, setSeleccionada] = useState(null);
  const [filtroEstado, setFiltroEstado] = useState('');

  async function cargar() {
    setCargando(true);
    setError('');
    try {
      if (!window.SB) throw new Error('No se pudo conectar con el servidor de requisiciones.');
      const [cabeceras, detalles] = await Promise.all([
        window.SB.crudSelect('inv_requisiciones', { order: { col: 'fecha_creacion', asc: false } }),
        window.SB.crudSelect('inv_requisicion_detalle'),
      ]);
      const porRequisicion = {};
      for (const d of detalles) (porRequisicion[d.requisicion_id] ||= []).push(d);
      setRequisiciones(cabeceras);
      setDetallePorRequisicion(porRequisicion);
    } catch (e) {
      setError(e.message || 'No se pudieron cargar las requisiciones.');
    }
    setCargando(false);
  }
  useEffect(() => { cargar(); }, []);

  async function guardarGestion(id, patch) {
    await window.SB.crudUpdate('inv_requisiciones', id, patch);
    await cargar();
    setSeleccionada((s) => (s ? { ...s, ...patch } : s));
  }

  if (seleccionada) {
    return (
      <RequisicionDetalle
        requisicion={seleccionada}
        lineas={detallePorRequisicion[seleccionada.id] || []}
        onVolver={() => setSeleccionada(null)}
        onGuardar={guardarGestion}
        toast={toast}
      />
    );
  }

  const filtradas = requisiciones.filter((r) => !filtroEstado || r.estado === filtroEstado);
  const pendientes = requisiciones.filter((r) => r.estado === 'Pendiente').length;

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Requisiciones de insumos</h1>
          <p className="text-slate-500 text-sm">
            {requisiciones.length} recibidas{pendientes > 0 && <span className="text-amber-700 font-semibold"> · {pendientes} pendiente(s)</span>}
          </p>
        </div>
        <button onClick={cargar} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
          <RotateCcw className="h-4 w-4" /> Actualizar
        </button>
      </div>

      <p className="text-xs text-slate-400">
        Las envían los colaboradores desde el formulario público de requisición de insumos. Aquí solo se revisan y se
        les cambia el estado — para entregar los insumos, regístralo aparte en el módulo de Entregas.
      </p>

      {error ? (
        <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-xl p-4">{error}</div>
      ) : cargando ? (
        <p className="text-sm text-slate-400">Cargando…</p>
      ) : (
        <>
          <div className="bg-white rounded-xl border border-slate-200 p-3 flex flex-wrap gap-2">
            <select value={filtroEstado} onChange={(e) => setFiltroEstado(e.target.value)} className="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
              <option value="">Cualquier estado</option>
              {ESTADOS_REQUISICION.map((e) => <option key={e}>{e}</option>)}
            </select>
          </div>

          <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
            {filtradas.length === 0 ? (
              <EmptyState icono={Inbox} titulo="Sin requisiciones" descripcion="Cuando un colaborador envíe una requisición de insumos, aparecerá aquí." />
            ) : (
              <table className="w-full text-sm">
                <thead className="bg-slate-50 text-slate-500 text-xs uppercase"><tr>
                  <th className="px-4 py-2 text-left">N.°</th><th className="px-4 py-2 text-left">Fecha</th>
                  <th className="px-4 py-2 text-left">Área</th><th className="px-4 py-2 text-left">Solicitado por</th>
                  <th className="px-4 py-2 text-right">Líneas</th><th className="px-4 py-2 text-left">Estado</th>
                </tr></thead>
                <tbody className="divide-y divide-slate-100">
                  {filtradas.map((r) => (
                    <tr key={r.id} className="hover:bg-slate-50 cursor-pointer" onClick={() => setSeleccionada(r)}>
                      <td className="px-4 py-2.5 font-mono text-xs">{r.numero}</td>
                      <td className="px-4 py-2.5">{DB.fechaCO(r.fecha_solicitud)}</td>
                      <td className="px-4 py-2.5 text-slate-500">{r.area || '—'}</td>
                      <td className="px-4 py-2.5">{r.solicitado_por}</td>
                      <td className="px-4 py-2.5 text-right">{(detallePorRequisicion[r.id] || []).length}</td>
                      <td className="px-4 py-2.5"><Badge color={COLOR_ESTADO_REQUISICION[r.estado]}>{r.estado}</Badge></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </>
      )}
    </div>
  );
}

/* ============================================================================
   Configuración
   ============================================================================ */
function Configuracion({ config, categorias, recargar, toast }) {
  const [f, setF] = useState(config);
  const [nuevaCategoria, setNuevaCategoria] = useState('');
  const [confirmarVaciar, setConfirmarVaciar] = useState(false);
  const fileRef = useRef(null);

  useEffect(() => setF(config), [config]);

  async function guardar() {
    await DB.guardarConfiguracion(f);
    toast('Configuración guardada.');
    recargar();
  }

  async function agregarCategoria() {
    const nombre = nuevaCategoria.trim();
    if (!nombre) return;
    await DB.put('categorias', { id: DB.uid(), nombre, color: '#16a34a', icono: 'box', activa: true });
    setNuevaCategoria('');
    toast('Categoría agregada.');
    recargar();
  }
  async function alternarCategoria(cat) {
    await DB.put('categorias', { ...cat, activa: !cat.activa });
    recargar();
  }

  async function agregarArea(nombre) {
    if (!nombre.trim()) return;
    await DB.guardarConfiguracion({ areas: [...(f.areas || []), nombre.trim()] });
    recargar();
  }
  async function quitarArea(area) {
    await DB.guardarConfiguracion({ areas: (f.areas || []).filter((a) => a !== area) });
    recargar();
  }

  async function exportar() {
    const respaldo = await DB.exportarRespaldo();
    const blob = new Blob([JSON.stringify(respaldo)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `respaldo_inventario_ecocosecha_${DB.hoyBogota()}.json`;
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 4000);
    toast('Respaldo descargado.');
  }
  async function restaurar(file) {
    if (!file) return;
    try {
      const texto = await file.text();
      const respaldo = JSON.parse(texto);
      await DB.restaurarRespaldo(respaldo);
      toast('Respaldo restaurado. Recargando…');
      setTimeout(() => window.location.reload(), 1000);
    } catch (e) {
      toast('No se pudo restaurar: ' + e.message, 'error');
    }
  }
  async function vaciarTodo() {
    await DB.vaciarTodo();
    setConfirmarVaciar(false);
    window.location.reload();
  }

  const inputCls = 'w-full p-2.5 border border-slate-300 rounded-lg text-sm';
  const labelCls = 'block text-xs font-semibold text-slate-600 mb-1';
  if (!f) return null;

  return (
    <div className="p-6 space-y-6 max-w-3xl">
      <div>
        <h1 className="text-2xl font-bold text-slate-800">Configuración</h1>
        <p className="text-slate-500 text-sm">Datos de la empresa, formato del acta, categorías, áreas y respaldo.</p>
      </div>

      <section className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Empresa</h2>
        <div className="flex items-center gap-4">
          <img src={f.logo} alt="Logo" className="h-14 w-14 object-contain border border-slate-200 rounded-lg p-1" />
          <div className="flex-1 grid sm:grid-cols-2 gap-3">
            <div><label className={labelCls}>Razón social</label><input className={inputCls} value={f.empresa.razonSocial} onChange={(e) => setF({ ...f, empresa: { ...f.empresa, razonSocial: e.target.value } })} /></div>
            <div><label className={labelCls}>NIT</label><input className={inputCls} value={f.empresa.nit} onChange={(e) => setF({ ...f, empresa: { ...f.empresa, nit: e.target.value } })} /></div>
          </div>
        </div>
        <div><label className={labelCls}>Dirección</label><input className={inputCls} value={f.empresa.direccion} onChange={(e) => setF({ ...f, empresa: { ...f.empresa, direccion: e.target.value } })} /></div>
      </section>

      <section className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Costeo y archivos</h2>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input type="checkbox" checked={f.costoIncluyeIva} onChange={(e) => setF({ ...f, costoIncluyeIva: e.target.checked })} className="accent-green-700" />
          El costo del inventario incluye IVA
        </label>
        <div className="max-w-xs">
          <label className={labelCls}>Tamaño máximo de archivo (MB)</label>
          <input type="number" min="1" className={inputCls} value={f.tamanoMaxArchivoMB} onChange={(e) => setF({ ...f, tamanoMaxArchivoMB: Number(e.target.value) || 10 })} />
        </div>
      </section>

      <section className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Acta de entrega</h2>
        <div className="grid sm:grid-cols-3 gap-3">
          <div><label className={labelCls}>Código de formato</label><input className={inputCls} value={f.actaFormato.codigo} onChange={(e) => setF({ ...f, actaFormato: { ...f.actaFormato, codigo: e.target.value } })} /></div>
          <div><label className={labelCls}>Versión</label><input className={inputCls} value={f.actaFormato.version} onChange={(e) => setF({ ...f, actaFormato: { ...f.actaFormato, version: e.target.value } })} /></div>
          <div><label className={labelCls}>Copias al imprimir</label><input type="number" min="1" className={inputCls} value={f.copiasImpresion} onChange={(e) => setF({ ...f, copiasImpresion: Number(e.target.value) || 1 })} /></div>
        </div>
        <div className="grid sm:grid-cols-3 gap-3">
          <div><label className={labelCls}>Quien entrega (nombre)</label><input className={inputCls} value={f.responsableEntregas.nombre} onChange={(e) => setF({ ...f, responsableEntregas: { ...f.responsableEntregas, nombre: e.target.value } })} /></div>
          <div><label className={labelCls}>Cargo</label><input className={inputCls} value={f.responsableEntregas.cargo} onChange={(e) => setF({ ...f, responsableEntregas: { ...f.responsableEntregas, cargo: e.target.value } })} /></div>
          <div><label className={labelCls}>Cédula</label><input className={inputCls} value={f.responsableEntregas.cedula || ''} onChange={(e) => setF({ ...f, responsableEntregas: { ...f.responsableEntregas, cedula: e.target.value } })} /></div>
        </div>
        <div>
          <label className={labelCls}>Texto de la declaración</label>
          <textarea rows={5} className={inputCls} value={f.actaDeclaracion} onChange={(e) => setF({ ...f, actaDeclaracion: e.target.value })} />
        </div>
      </section>

      <section className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Categorías</h2>
        <div className="flex flex-wrap gap-2">
          {categorias.map((c) => (
            <button key={c.id} onClick={() => alternarCategoria(c)} className={clsx('px-3 py-1.5 rounded-full text-xs font-semibold border', c.activa ? 'border-transparent' : 'border-slate-300 text-slate-400 line-through')} style={c.activa ? { backgroundColor: `${c.color}1A`, color: c.color } : {}}>
              {c.nombre}
            </button>
          ))}
        </div>
        <div className="flex gap-2 max-w-sm">
          <input value={nuevaCategoria} onChange={(e) => setNuevaCategoria(e.target.value)} placeholder="Nueva categoría" className={inputCls} />
          <button onClick={agregarCategoria} className="bg-slate-800 text-white px-3 rounded-lg text-sm shrink-0">Agregar</button>
        </div>
      </section>

      <section className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Áreas de la empresa</h2>
        <div className="flex flex-wrap gap-2">
          {(f.areas || []).map((a) => (
            <span key={a} className="px-3 py-1.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 flex items-center gap-1.5">
              {a}
              <button onClick={() => quitarArea(a)} className="text-slate-400 hover:text-red-600"><X className="h-3 w-3" /></button>
            </span>
          ))}
        </div>
        <AreaForm onAgregar={agregarArea} />
      </section>

      <div className="flex justify-end">
        <button onClick={guardar} className="bg-green-700 hover:bg-green-800 text-white px-5 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2">
          <Save className="h-4 w-4" /> Guardar configuración
        </button>
      </div>

      <section className="bg-white rounded-xl border border-slate-200 p-5 space-y-3">
        <h2 className="font-bold text-slate-800 text-sm">Respaldo</h2>
        <p className="text-xs text-slate-500">Descarga todos los datos (incluidos los archivos) en un solo archivo, o restáuralos en otro navegador.</p>
        <div className="flex flex-wrap gap-2">
          <button onClick={exportar} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
            <Download className="h-4 w-4" /> Exportar respaldo
          </button>
          <button onClick={() => fileRef.current?.click()} className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
            <Upload className="h-4 w-4" /> Restaurar respaldo
          </button>
          <input ref={fileRef} type="file" accept="application/json" hidden onChange={(e) => restaurar(e.target.files?.[0])} />
        </div>
      </section>

      <section className="bg-red-50 rounded-xl border border-red-200 p-5 space-y-3">
        <h2 className="font-bold text-red-700 text-sm">Zona de riesgo</h2>
        <p className="text-xs text-red-600">Borra absolutamente todos los datos de prueba (productos, entradas, entregas, kardex, configuración) para volver a empezar.</p>
        <button onClick={() => setConfirmarVaciar(true)} className="bg-white border border-red-300 text-red-600 hover:bg-red-100 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
          <RotateCcw className="h-4 w-4" /> Borrar todos los datos
        </button>
      </section>

      <ConfirmModal
        abierto={confirmarVaciar}
        titulo="¿Borrar todos los datos?"
        mensaje="Se eliminará todo el inventario, entradas, entregas y configuración de este navegador. No se puede deshacer."
        peligro
        textoConfirmar="Borrar todo"
        onCancelar={() => setConfirmarVaciar(false)}
        onConfirmar={vaciarTodo}
      />
    </div>
  );
}

function AreaForm({ onAgregar }) {
  const [v, setV] = useState('');
  return (
    <div className="flex gap-2 max-w-sm">
      <input value={v} onChange={(e) => setV(e.target.value)} placeholder="Nueva área" className="w-full p-2.5 border border-slate-300 rounded-lg text-sm" />
      <button onClick={() => { onAgregar(v); setV(''); }} className="bg-slate-800 text-white px-3 rounded-lg text-sm shrink-0">Agregar</button>
    </div>
  );
}

/* ============================================================================
   Placeholder de módulos que llegan en fases siguientes
   ============================================================================ */
function EnConstruccion({ modulo }) {
  const NOMBRES = {
    entradas: ['Entradas', 'Fase 2: cargar remisiones/facturas e importar el Excel del proveedor.'],
    entregas: ['Entregas', 'Fase 3: generar el acta de entrega, imprimirla y firmarla.'],
    colaboradores: ['Colaboradores', 'Fase 4: CRUD, importación desde Excel y hoja de vida de dotación.'],
    ajustes: ['Ajustes de inventario', 'Fase 4: conteo físico y bajas por daño, vencimiento o pérdida.'],
    proveedores: ['Proveedores', 'Fase 2: CRUD e historial de compras por proveedor.'],
    reportes: ['Reportes', 'Fase 4: inventario valorizado, kardex, consumo y sugerido de pedido.'],
  };
  const [titulo, desc] = NOMBRES[modulo] || [modulo, ''];
  return (
    <div className="p-6">
      <EmptyState icono={Wrench} titulo={`${titulo} — en construcción`} descripcion={desc} />
    </div>
  );
}

// Mantiene al día los espejos de solo lectura que usa el formulario público
// de Requisiciones (../requisiciones/) para que el colaborador elija su
// nombre y el insumo de una lista en vez de escribirlos a mano. La fuente de
// verdad sigue siendo IndexedDB — esto solo empuja lo necesario a Supabase
// cada vez que Inventario carga o cambian colaboradores/productos. Falla en
// silencio (consola, no toast) porque nunca debe bloquear el uso normal del
// inventario si Supabase no está disponible por algún motivo.
async function sincronizarReferenciasPublicas(colaboradores, productos) {
  if (!window.SB) return;
  try {
    const colabActivos = colaboradores.filter((c) => c.activo).map((c) => ({ id: c.id, nombre_completo: c.nombreCompleto, cedula: c.cedula || null }));
    const prodActivos = productos.filter((p) => p.activo).map((p) => ({ id: p.id, descripcion: p.descripcion, unidad: p.unidadEntrega, categoria: p.categoriaId || null }));

    if (colabActivos.length) await window.SB.client.from('inv_colaboradores_pub').upsert(colabActivos, { onConflict: 'id' });
    if (colabActivos.length) await window.SB.client.from('inv_colaboradores_pub').delete().not('id', 'in', `(${colabActivos.map((c) => c.id).join(',')})`);
    else await window.SB.client.from('inv_colaboradores_pub').delete().not('id', 'is', null);

    if (prodActivos.length) await window.SB.client.from('inv_productos_pub').upsert(prodActivos, { onConflict: 'id' });
    if (prodActivos.length) await window.SB.client.from('inv_productos_pub').delete().not('id', 'in', `(${prodActivos.map((p) => p.id).join(',')})`);
    else await window.SB.client.from('inv_productos_pub').delete().not('id', 'is', null);
  } catch (e) {
    console.error('No se pudo sincronizar las referencias públicas de Requisiciones:', e);
  }
}

/* ============================================================================
   App raíz
   ============================================================================ */
function App() {
  const { toast, ToastHost } = useToasts();
  const [listo, setListo] = useState(false);
  const [necesitaSemilla, setNecesitaSemilla] = useState(false);
  const [vista, setVista] = useState('panel');
  const [config, setConfig] = useState(null);
  const [categorias, setCategorias] = useState([]);
  const [productos, setProductos] = useState([]);
  const [proveedores, setProveedores] = useState([]);
  const [colaboradores, setColaboradores] = useState([]);
  const [abrirNuevo, setAbrirNuevo] = useState(null); // 'entradas' | 'entregas' | null

  async function cargarTodo() {
    const [cfg, cats, prods, provs, colabs] = await Promise.all([DB.getConfiguracion(), DB.getAll('categorias'), DB.getAll('productos'), DB.getAll('proveedores'), DB.getAll('colaboradores')]);
    setConfig(cfg); setCategorias(cats); setProductos(prods); setProveedores(provs); setColaboradores(colabs);
    sincronizarReferenciasPublicas(colabs, prods);
  }
  async function recargarProveedores() { setProveedores(await DB.getAll('proveedores')); }
  async function recargarColaboradores() {
    const colabs = await DB.getAll('colaboradores');
    setColaboradores(colabs);
    sincronizarReferenciasPublicas(colabs, productos);
  }

  function irAConAccion(destino) { setVista(destino); setAbrirNuevo(destino); }

  useEffect(() => {
    (async () => {
      const vacio = await DB.estaVacia();
      if (vacio) { setNecesitaSemilla(true); setListo(true); return; }
      await cargarTodo();
      setListo(true);
    })();
  }, []);

  if (!listo) {
    return <div className="min-h-screen flex items-center justify-center text-slate-400"><Loader2 className="h-6 w-6 animate-spin" /></div>;
  }
  if (necesitaSemilla) {
    return (
      <>
        <PantallaBienvenida toast={toast} onListo={async () => { setNecesitaSemilla(false); await cargarTodo(); }} />
        <ToastHost />
      </>
    );
  }

  return (
    <div className="flex">
      <Sidebar vista={vista} irA={setVista} config={config} />
      <main className="flex-1 min-h-screen">
        {vista === 'panel' && <Panel productos={productos} categorias={categorias} irA={irAConAccion} />}
        {vista === 'productos' && <Productos productos={productos} categorias={categorias} recargar={cargarTodo} toast={toast} />}
        {vista === 'entradas' && (
          <Entradas
            productos={productos} categorias={categorias} proveedores={proveedores} config={config}
            recargarProductos={cargarTodo} recargarProveedores={recargarProveedores} toast={toast}
            abrirNuevo={abrirNuevo === 'entradas'} onAbrirNuevoConsumido={() => setAbrirNuevo(null)}
          />
        )}
        {vista === 'entregas' && (
          <Entregas
            productos={productos} colaboradores={colaboradores} config={config}
            recargarProductos={cargarTodo} recargarColaboradores={recargarColaboradores} toast={toast}
            abrirNuevo={abrirNuevo === 'entregas'} onAbrirNuevoConsumido={() => setAbrirNuevo(null)}
          />
        )}
        {vista === 'requisiciones' && <Requisiciones toast={toast} />}
        {vista === 'colaboradores' && <Colaboradores colaboradores={colaboradores} config={config} recargar={recargarColaboradores} toast={toast} />}
        {vista === 'proveedores' && <Proveedores proveedores={proveedores} recargar={recargarProveedores} toast={toast} />}
        {vista === 'configuracion' && config && <Configuracion config={config} categorias={categorias} recargar={cargarTodo} toast={toast} />}
        {['ajustes', 'reportes'].includes(vista) && <EnConstruccion modulo={vista} />}
      </main>
      <ToastHost />
    </div>
  );
}

createRoot(document.getElementById('app')).render(<App />);