// ── Hooks de utilidad ─────────────────────────────────────────────────────────
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

function useAPI(path, deps = []) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const load = useCallback(async () => {
    if (!path) return;
    setLoading(true); setError(null);
    try { setData(await window.api.get(path)); }
    catch (e) { setError(e.message); }
    finally { setLoading(false); }
  }, [path]);
  useEffect(() => { load(); }, [load, ...deps]);
  return { data, loading, error, reload: load };
}

// ── Toast system ───────────────────────────────────────────────────────────────
const ToastCtx = createContext(null);
function ToastProvider({ children }) {
  const [toasts, setToasts] = useState([]);
  let _id = 0;
  const push = (msg, kind = 'success') => {
    const id = ++_id;
    setToasts(t => [...t, { id, msg, kind }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3000);
  };
  return (
    <ToastCtx.Provider value={push}>
      {children}
      <div className="toast-wrap">
        {toasts.map(t => (
          <div key={t.id} className={`toast ${t.kind}`}>
            <div className="ic">
              {t.kind === 'success' && <Icon.check size={14}/>}
              {t.kind === 'warn'    && <Icon.alert size={14}/>}
              {t.kind === 'error'   && <Icon.x size={14}/>}
            </div>
            <span>{t.msg}</span>
          </div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
}
function useToast() { return useContext(ToastCtx); }

// ── AuthContext ────────────────────────────────────────────────────────────────
const AuthCtx = createContext(null);
function useAuth() { return useContext(AuthCtx); }

// ── LOGIN PAGE ────────────────────────────────────────────────────────────────
function LoginPage({ onLogin }) {
  const [email, setEmail]       = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading]   = useState(false);
  const [err, setErr]           = useState('');
  const toast = useToast();

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true); setErr('');
    try {
      const res = await window.api.post('/auth/login', { email, password });
      localStorage.setItem('ad_token', res.token);
      localStorage.setItem('ad_user', JSON.stringify(res.user));
      toast('Bienvenido, ' + res.user.nombre.split(' ')[0]);
      onLogin(res.user);
    } catch (e) {
      setErr(e.message);
    } finally { setLoading(false); }
  };

  return (
    <div className="login-wrap">
      <div className="login-box">
        <div className="login-logo"/>
        <div style={{textAlign:'center', marginBottom:28}}>
          <h1 style={{margin:'0 0 6px',fontSize:24,fontWeight:700,letterSpacing:'-.02em'}}>
            Aquarium <span style={{color:'var(--aqua)'}}>Delux</span>
          </h1>
          <p style={{margin:0,color:'var(--muted)',fontSize:13}}>Sistema administrativo · v3.0</p>
        </div>

        <div className="card" style={{padding:24}}>
          <form onSubmit={submit} style={{display:'flex',flexDirection:'column',gap:14}}>
            <div className="field">
              <label>Correo electrónico</label>
              <input className="input" type="email" value={email}
                onChange={e => setEmail(e.target.value)} required autoFocus/>
            </div>
            <div className="field">
              <label>Contraseña</label>
              <input className="input" type="password" value={password}
                onChange={e => setPassword(e.target.value)} required/>
            </div>
            {err && (
              <div style={{color:'var(--red)',fontSize:12,padding:'8px 10px',background:'rgba(239,68,68,.08)',borderRadius:8,border:'1px solid rgba(239,68,68,.2)'}}>
                {err}
              </div>
            )}
            <button className="btn primary" type="submit" disabled={loading}
              style={{height:40,justifyContent:'center',marginTop:4}}>
              {loading ? <span className="loading-spin"/> : 'Ingresar al sistema'}
            </button>
          </form>

        </div>
      </div>
    </div>
  );
}

// ── SIDEBAR NAV ────────────────────────────────────────────────────────────────
const NAV = [
  { group:'General', items:[
    { id:'overview',    label:'Overview',      icon:'home' },
    { id:'pos',         label:'POS',           icon:'pos' },
    { id:'ventas',      label:'Ventas',        icon:'sale' },
    { id:'facturacion', label:'Facturación',   icon:'invoice' },
  ]},
  { group:'Catálogo', items:[
    { id:'inventario',  label:'Inventario',    icon:'box' },
    { id:'animales',    label:'Animales',      icon:'fish' },
    { id:'servicios',   label:'Servicios',     icon:'tool' },
    { id:'reservas',    label:'Reservas',      icon:'bookmark' },
  ]},
  { group:'Operación', items:[
    { id:'perdidas',       label:'Pérdidas',         icon:'death'    },
    { id:'proveedores',    label:'Proveedores',       icon:'truck'    },
    { id:'creditos-prov',  label:'Créditos Proveed.', icon:'card'    },
    { id:'compras',        label:'Compras',           icon:'buy'      },
    { id:'gastos',         label:'Gastos',            icon:'money'    },
    { id:'cuarentena',     label:'Cuarentena',        icon:'flask'    },
    { id:'higiene',        label:'Higiene',           icon:'check'    },
  ]},
  { group:'Clientes', items:[
    { id:'clientes',    label:'Clientes',      icon:'user' },
    { id:'fidelizacion',label:'Fidelización',  icon:'crown' },
  ]},
  { group:'Tienda Virtual', items:[
    { id:'tienda-pedidos', label:'Pedidos Web',   icon:'cart' },
    { id:'tienda-armakit', label:'Arma tu Acuario', icon:'box' },
    { id:'tienda-cupones', label:'Cupones',       icon:'tag' },
    { id:'tienda-autofotos', label:'Fotos Automáticas', icon:'image' },
    { id:'tienda-config',  label:'Config Tienda', icon:'store' },
  ]},
  { group:'Análisis', items:[
    { id:'analytics',   label:'Analytics',     icon:'chart' },
  ]},
  { group:'Sistema', items:[
    { id:'usuarios',    label:'Usuarios',      icon:'users' },
    { id:'config',      label:'Configuración', icon:'cog' },
    { id:'logs',        label:'Logs',          icon:'log' },
  ]},
];

function Sidebar({ active, setActive, collapsed, setCollapsed, user, onLogout, mobileOpen, onMobileClose }) {
  return (
    <aside className={`side${mobileOpen ? ' mob-open' : ''}`} data-c={collapsed}>
      <div className="side-head">
        <div className="logo"/>
        <div className="brand">
          <b>Aquarium <span style={{color:'var(--aqua)'}}>Delux</span></b>
          <span>Admin · v3.0</span>
        </div>
        <button className="collapse-btn" onClick={() => setCollapsed(!collapsed)}>
          <Icon.collapse size={14}/>
        </button>
      </div>

      <div className="side-user">
        <div className="avatar" style={{background:`linear-gradient(135deg,${user.avatar || '#4A90E2,#7C83FD'})`}}>
          {user.nombre.split(' ').map(s => s[0]).slice(0,2).join('')}
        </div>
        <div className="who">
          <b className="truncate">{user.nombre}</b>
          <span className="truncate">{user.rol}</span>
        </div>
        <span className="role-pill"><span className="dot"/></span>
      </div>

      <nav className="nav">
        {NAV.map((g, gi) => (
          <div className="nav-group" key={gi}>
            <div className="nav-label">{g.group}</div>
            {g.items.map(it => (
              <div key={it.id}
                className={'nav-item ' + (active === it.id ? 'active' : '')}
                onClick={() => { setActive(it.id); onMobileClose && onMobileClose(); }}>
                {Icon[it.icon] ? Icon[it.icon]({size:17}) : <Icon.box size={17}/>}
                <span className="lbl">{it.label}</span>
              </div>
            ))}
          </div>
        ))}
        <div className="nav-group">
          <div className="nav-label">Sesión</div>
          <div className="nav-item" onClick={onLogout} style={{color:'var(--red)'}}>
            <Icon.x size={17}/>
            <span className="lbl">Cerrar sesión</span>
          </div>
        </div>
      </nav>
    </aside>
  );
}

function Topbar({ user, theme, setTheme, onAlerts, onMenuOpen }) {
  return (
    <div className="top">
      <button className="mob-menu-btn top-btn" onClick={onMenuOpen} style={{padding:'0 8px',justifyContent:'center'}}>
        <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
      </button>
      <div className="search">
        <Icon.search size={15}/>
        <input placeholder="Buscar productos, animales, clientes…"/>
      </div>
      <div className="top-right">
        <a href="/store" target="_blank" className="top-btn" style={{display:'flex',alignItems:'center',gap:5,fontSize:12,fontWeight:600,color:'var(--aqua)',textDecoration:'none'}}>
          <Icon.globe size={13}/> Tienda
        </a>
        <button className="top-btn"><span className="dot"/> En línea</button>
        <button className="top-btn" style={{position:'relative'}} onClick={onAlerts}>
          <Icon.bell size={15}/>
        </button>
        <button className="top-btn" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
          {theme === 'dark' ? <Icon.sun size={15}/> : <Icon.moon size={15}/>}
        </button>
        <div className="top-avatar">
          {user.nombre.split(' ').map(s => s[0]).slice(0,2).join('')}
        </div>
      </div>
    </div>
  );
}

// ── MODAL helper ───────────────────────────────────────────────────────────────
function Modal({ open, onClose, title, sub, children, width = 520, footer }) {
  if (!open) return null;

  // Si no se pasa footer explícito, el último hijo con className "row" se trata como footer
  const childArray = React.Children.toArray(children);
  let bodyChildren = childArray;
  let footerChild  = footer || null;

  // Auto-detectar footer: si el último hijo es un .row (botones), separarlo
  if (!footer && childArray.length > 0) {
    const last = childArray[childArray.length - 1];
    if (last?.props?.className?.includes?.('row') || last?.props?.style?.marginTop) {
      footerChild  = last;
      bodyChildren = childArray.slice(0, -1);
    }
  }

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" style={{width}} onClick={e => e.stopPropagation()}>
        {/* Header fijo */}
        <div className="modal-header">
          <div className="between" style={{marginBottom: sub ? 4 : 14}}>
            <div>
              <h3>{title}</h3>
              {sub && <p className="sub">{sub}</p>}
            </div>
            <button className="top-btn" style={{height:30,minWidth:30,padding:0,justifyContent:'center',flexShrink:0}} onClick={onClose}>
              <Icon.x size={14}/>
            </button>
          </div>
        </div>
        {/* Body scrollable */}
        <div className="modal-body">
          {bodyChildren}
        </div>
        {/* Footer fijo con botones */}
        {footerChild && (
          <div className="modal-footer" style={{borderTop:'1px solid var(--border)',paddingTop:16}}>
            {footerChild}
          </div>
        )}
      </div>
    </div>
  );
}
window.Modal = Modal;

// ── LOADING skeleton ───────────────────────────────────────────────────────────
function Loading() {
  return (
    <div className="center" style={{padding:60,flexDirection:'column',gap:12,color:'var(--muted)'}}>
      <span className="loading-spin" style={{width:28,height:28,borderTopColor:'var(--aqua)'}}/>
      <span style={{fontSize:13}}>Cargando…</span>
    </div>
  );
}

// ── OVERVIEW ──────────────────────────────────────────────────────────────────
function OverviewPage() {
  const { data: kpis, loading, reload } = useAPI('/dashboard');
  const toast = useToast();

  if (loading) return <div className="page"><Loading/></div>;
  if (!kpis) return null;

  const metColors = ['#4A90E2','#7C83FD','#5FD6D0','#94A3B8','#F59E0B'];

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Overview</h1><p>Resumen en tiempo real · datos de la base de datos</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/> Actualizar</button>
        </div>
      </div>

      <div className="kpi-grid">
        {[
          { label:'Ventas del día',    value: money(kpis.ventas_hoy),   sub: kpis.tickets_hoy + ' tickets' },
          { label:'Ventas del mes',    value: money(kpis.ventas_mes),   sub: 'Total acumulado' },
          { label:'Utilidad neta',     value: money(kpis.utilidad),     sub: 'Ventas - costo' },
          { label:'Pérdidas (mes)',     value: money(kpis.perdidas_mes), sub: 'Mortalidad + daños', color:'red' },
          { label:'Inventario crítico',  value: kpis.stock_critico + ' SKU', sub: 'Requieren reposición', color:'amber' },
          { label:'Reservas activas',    value: kpis.reservas_act,          sub: 'Stock bloqueado' },
          { label:'Valor mercancía',     value: money(kpis.valor_mercancia), sub: 'Precio venta × stock disponible', color:'aqua' },
          { label:'Costo en bodega',     value: money(kpis.costo_mercancia), sub: 'Costo × stock disponible' },
        ].map((k,i) => (
          <div className="kpi" key={i}>
            <div className="kpi-label">{k.label}</div>
            <div className={`kpi-val num`} style={k.color ? {color:`var(--${k.color})`} : {}}>{k.value}</div>
            <div className="small mt-2">{k.sub}</div>
          </div>
        ))}
      </div>

      <div className="grid-2" style={{marginTop:14}}>
        <div className="card">
          <div className="card-head"><div><h3>Tendencia de ventas</h3><p>Últimos 6 meses</p></div></div>
          {kpis.ventas_trend?.length ? (
            <div style={{overflowX:'auto'}}>
              <div style={{display:'flex',alignItems:'flex-end',gap:8,height:120,padding:'0 4px'}}>
                {kpis.ventas_trend.map((d,i) => {
                  const max = Math.max(...kpis.ventas_trend.map(x=>x.v)) || 1;
                  const h = Math.max(4, (d.v/max)*100);
                  return (
                    <div key={i} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:4}}>
                      <div style={{fontSize:10,color:'var(--muted)',fontFamily:'var(--mono)'}}>{moneyK(d.v*1e6)}</div>
                      <div style={{width:'100%',height:h+'%',background:'linear-gradient(180deg,var(--aqua),var(--blue))',borderRadius:'4px 4px 0 0',minHeight:4}}/>
                      <div style={{fontSize:10,color:'var(--muted)'}}>{d.x}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          ) : <div className="small center" style={{padding:32}}>Sin datos de ventas aún</div>}
        </div>

        <div className="card">
          <div className="card-head"><div><h3>Métodos de pago</h3><p>Este mes</p></div></div>
          {kpis.metodos_pago?.length ? (
            <div className="stack" style={{gap:8}}>
              {kpis.metodos_pago.map((m,i) => (
                <div key={i} className="between">
                  <div className="row">
                    <span className="legend-dot" style={{background: metColors[i % metColors.length]}}/>
                    <span style={{fontSize:13}}>{m.name || 'Otros'}</span>
                  </div>
                  <span className="mono small">{m.value} ventas</span>
                </div>
              ))}
            </div>
          ) : <div className="small center" style={{padding:32}}>Sin ventas este mes</div>}
        </div>
      </div>

      <div className="grid-3" style={{marginTop:14}}>
        <div className="card">
          <div className="card-head"><div><h3>Top productos</h3><p>Más vendidos del mes</p></div></div>
          {kpis.top_productos?.length ? (
            <div className="stack">
              {kpis.top_productos.map((p,i) => (
                <div key={i} className="between">
                  <div className="row">
                    <div className="thumb food" style={{width:24,height:24}}/>
                    <div>
                      <div style={{fontSize:13}}>{p.nombre}</div>
                      <div className="small">{p.unidades} unidades</div>
                    </div>
                  </div>
                  <span className="mono" style={{fontSize:12}}>{money(p.total)}</span>
                </div>
              ))}
            </div>
          ) : <div className="small center" style={{padding:20}}>Sin ventas registradas</div>}
        </div>

        <div className="card">
          <div className="card-head"><div><h3>Stock crítico</h3><p>Requieren reposición</p></div></div>
          <div className="stack">
            {(kpis.stock_critico_items || []).map((p,i) => (
              <div key={i} className="between">
                <span style={{fontSize:13}}>{p.nombre || p.especie}</span>
                <span className={`chip ${p.stock <= 2 ? 'red' : 'amber'}`}>Stock: {p.stock}</span>
              </div>
            ))}
            {!kpis.stock_critico_items?.length && <div className="small center" style={{padding:20}}>Todo en orden ✓</div>}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div><h3>Mortalidad peces</h3><p>Pérdidas del mes</p></div></div>
          {kpis.mortalidad?.length ? (
            <div className="stack">
              {kpis.mortalidad.map((m,i) => (
                <div key={i} className="between" style={{padding:'4px 0',borderBottom:'1px solid var(--border)'}}>
                  <span style={{fontSize:12.5}}>{m.name}</span>
                  <span className="mono" style={{fontSize:12.5}}>{m.n}</span>
                </div>
              ))}
            </div>
          ) : <div className="small center" style={{padding:20}}>Sin pérdidas este mes ✓</div>}
        </div>
      </div>
    </div>
  );
}

// ── POS ───────────────────────────────────────────────────────────────────────
// Subcomponente: modal de checkout en 2 pasos (cliente → pago)
function CheckoutModal({ open, onClose, total, subtotal, iva, descuento, cart, user, cfgData, onSuccess }) {
  const toast = useToast();
  const { data: clientes, reload: reloadClientes } = useAPI('/clientes');
  const pesosPorPunto = cfgData?.pesosPorPunto || 1000;

  const [step, setStep]           = useState(1); // 1=cliente, 2=pago
  const [busqCliente, setBusqCliente] = useState('');
  const [clienteSel, setClienteSel]   = useState(null);
  const [acumular, setAcumular]       = useState(true);
  const [payMethod, setPayMethod]     = useState('Efectivo');
  const [tipoVenta, setTipoVenta]     = useState('contado');
  const [interesPct, setInteresPct]   = useState(0);
  const [fechaVenc, setFechaVenc]     = useState('');
  const [saving, setSaving]           = useState(false);

  // form nuevo cliente
  const [nuevoForm, setNuevoForm] = useState({ nombre:'', documento:'', telefono:'' });
  const [modoNuevo, setModoNuevo] = useState(false);

  const puntosGanar = acumular && clienteSel ? Math.floor(total / pesosPorPunto) : 0;
  const nivelColor  = n => n==='Black Reef Elite'?'#7C83FD':n==='Ocean'?'#4A90E2':n==='Aqua'?'#5FD6D0':'#F59E0B';

  const clientesFiltrados = (clientes||[]).filter(c =>
    !busqCliente ||
    c.nombre.toLowerCase().includes(busqCliente.toLowerCase()) ||
    (c.documento||'').includes(busqCliente) ||
    (c.telefono||'').includes(busqCliente)
  );

  const crearCliente = async () => {
    if (!nuevoForm.nombre.trim()) { toast('El nombre es obligatorio', 'error'); return; }
    try {
      const res = await window.api.post('/clientes', {
        nombre: nuevoForm.nombre,
        documento: nuevoForm.documento || null,
        telefono: nuevoForm.telefono || null,
      });
      await reloadClientes();
      // Buscar el cliente recién creado
      const todos = await window.api.get('/clientes');
      const nuevo = todos.find(c => c.id === res.id);
      if (nuevo) setClienteSel(nuevo);
      setModoNuevo(false);
      toast(`Cliente ${nuevoForm.nombre} creado`);
    } catch(e) { toast(e.message, 'error'); }
  };

  const confirmarPago = async () => {
    setSaving(true);
    try {
      const items = cart.map(x => ({
        tipo: x.tipo, item_id: x.id, nombre: x.nombre,
        cantidad: x.qty, precio_unitario: x.precio
      }));
      const res = await window.api.post('/ventas', {
        cliente_id: (acumular && clienteSel) ? clienteSel.id : null,
        items, descuento, metodo_pago: payMethod, sede: user.sede,
        tipo_venta: tipoVenta, interes_pct: Number(interesPct),
        fecha_vencimiento: tipoVenta === 'credito' ? fechaVenc : null,
      });
      const msg = puntosGanar > 0
        ? `Venta ${res.numero} registrada · +${puntosGanar} pts a ${clienteSel.nombre}`
        : `Venta ${res.numero} registrada · ${money(res.total)}`;
      toast(msg);
      onSuccess();
    } catch(e) { toast(e.message, 'error'); }
    finally { setSaving(false); }
  };

  const reset = () => {
    setStep(1); setBusqCliente(''); setClienteSel(null);
    setAcumular(true); setPayMethod('Efectivo');
    setNuevoForm({ nombre:'', documento:'', telefono:'' }); setModoNuevo(false);
  };

  const handleClose = () => { reset(); onClose(); };

  if (!open) return null;

  return (
    <div className="modal-back" onClick={handleClose}>
      <div className="modal" style={{width:540}} onClick={e=>e.stopPropagation()}>
        {/* Header */}
        <div className="between" style={{marginBottom:6}}>
          <div>
            <h3 style={{margin:0}}>Cobrar · {money(total)}</h3>
            <p className="sub" style={{marginBottom:0}}>{step===1 ? 'Paso 1: ¿A quién le vendemos?' : 'Paso 2: Método de pago'}</p>
          </div>
          <button className="top-btn" style={{height:30,minWidth:30,padding:0,justifyContent:'center'}} onClick={handleClose}>
            <Icon.x size={14}/>
          </button>
        </div>

        {/* Indicador pasos */}
        <div className="row" style={{gap:6,marginBottom:16}}>
          {[1,2].map(s => (
            <div key={s} style={{flex:1,height:4,borderRadius:99,
              background: s<=step ? 'var(--aqua)' : 'var(--border)',transition:'background .2s'}}/>
          ))}
        </div>

        {/* ── PASO 1: Cliente ── */}
        {step === 1 && (
          <div>
            {!modoNuevo ? (
              <>
                <div className="search" style={{width:'100%',maxWidth:'none',marginBottom:10}}>
                  <Icon.search size={14}/>
                  <input autoFocus placeholder="Buscar por nombre, cédula o celular…"
                    value={busqCliente} onChange={e=>setBusqCliente(e.target.value)}/>
                </div>

                {/* Lista de clientes */}
                <div style={{maxHeight:240,overflowY:'auto',border:'1px solid var(--border)',borderRadius:10,marginBottom:12}}>
                  {clientesFiltrados.length === 0 && (
                    <div className="center" style={{padding:24,color:'var(--muted)',fontSize:13}}>
                      No se encontró "{busqCliente}"
                    </div>
                  )}
                  {clientesFiltrados.map(c => (
                    <div key={c.id}
                      onClick={() => { setClienteSel(clienteSel?.id===c.id ? null : c); }}
                      style={{
                        padding:'10px 14px', cursor:'pointer', display:'flex', alignItems:'center', gap:10,
                        background: clienteSel?.id===c.id ? 'rgba(95,214,208,.07)' : 'transparent',
                        borderBottom:'1px solid var(--border)',
                        borderLeft: clienteSel?.id===c.id ? '3px solid var(--aqua)' : '3px solid transparent',
                      }}>
                      <div className="avatar" style={{width:32,height:32,fontSize:12,background:`linear-gradient(135deg,hsl(${c.id*53} 60% 50%),hsl(${c.id*97} 55% 40%))`}}>
                        {c.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}
                      </div>
                      <div style={{flex:1}}>
                        <div style={{fontSize:13,fontWeight:500}}>{c.nombre}</div>
                        <div className="small">{c.documento ? `CC ${c.documento}` : ''}{c.telefono ? ` · ${c.telefono}` : ''}</div>
                      </div>
                      <div style={{textAlign:'right'}}>
                        <span className="chip" style={{fontSize:10,color:nivelColor(c.nivel_fidelizacion),borderColor:`${nivelColor(c.nivel_fidelizacion)}40`,background:`${nivelColor(c.nivel_fidelizacion)}14`}}>
                          {c.nivel_fidelizacion}
                        </span>
                        <div className="mono small" style={{marginTop:2}}>{c.puntos?.toLocaleString('es-CO')} pts</div>
                      </div>
                      {clienteSel?.id===c.id && <Icon.check size={15} style={{color:'var(--aqua)',flexShrink:0}}/>}
                    </div>
                  ))}
                </div>

                {/* Acciones */}
                <div className="row" style={{gap:8,marginBottom:14}}>
                  <button className="btn" style={{flex:1}} onClick={() => setModoNuevo(true)}>
                    <Icon.plus size={13}/> Nuevo cliente
                  </button>
                  {clienteSel && (
                    <label className="row" style={{gap:6,cursor:'pointer',fontSize:13,flex:1.5,padding:'0 8px'}}>
                      <input type="checkbox" checked={acumular} onChange={e=>setAcumular(e.target.checked)}
                        style={{accentColor:'var(--aqua)',width:15,height:15}}/>
                      Acumular {Math.floor(total/pesosPorPunto)} pts
                    </label>
                  )}
                </div>
              </>
            ) : (
              /* Formulario nuevo cliente */
              <div style={{marginBottom:12}}>
                <div style={{fontWeight:500,marginBottom:10,fontSize:14}}>Nuevo cliente</div>
                <div className="field" style={{marginBottom:8}}>
                  <label>Nombre completo *</label>
                  <input className="input" autoFocus value={nuevoForm.nombre}
                    onChange={e=>setNuevoForm(f=>({...f,nombre:e.target.value}))}
                    placeholder="Ej. Juan García"/>
                </div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:12}}>
                  <div className="field">
                    <label>Número de cédula</label>
                    <input className="input mono" value={nuevoForm.documento}
                      onChange={e=>setNuevoForm(f=>({...f,documento:e.target.value}))}
                      placeholder="1234567890"/>
                  </div>
                  <div className="field">
                    <label>Celular</label>
                    <input className="input mono" value={nuevoForm.telefono}
                      onChange={e=>setNuevoForm(f=>({...f,telefono:e.target.value}))}
                      placeholder="3001234567"/>
                  </div>
                </div>
                <div className="row" style={{gap:8}}>
                  <button className="btn" style={{flex:1}} onClick={()=>setModoNuevo(false)}>Cancelar</button>
                  <button className="btn primary" style={{flex:2}} onClick={crearCliente}>
                    <Icon.check size={13}/> Crear y seleccionar
                  </button>
                </div>
              </div>
            )}

            {/* Resumen selección */}
            {clienteSel && !modoNuevo && (
              <div style={{padding:'10px 12px',borderRadius:10,marginBottom:12,
                background:`${nivelColor(clienteSel.nivel_fidelizacion)}10`,
                border:`1px solid ${nivelColor(clienteSel.nivel_fidelizacion)}40`}}>
                <div className="between">
                  <div className="row" style={{gap:8}}>
                    <div className="avatar" style={{width:28,height:28,fontSize:11}}>{clienteSel.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
                    <div>
                      <div style={{fontWeight:500,fontSize:13}}>{clienteSel.nombre}</div>
                      <div style={{fontSize:11,color:nivelColor(clienteSel.nivel_fidelizacion)}}>{clienteSel.nivel_fidelizacion} · {clienteSel.puntos?.toLocaleString('es-CO')} pts</div>
                    </div>
                  </div>
                  {acumular && <span style={{fontSize:12,color:'var(--green)',fontWeight:600}}>+{Math.floor(total/pesosPorPunto)} pts</span>}
                </div>
              </div>
            )}

            <div className="row" style={{gap:8}}>
              <button className="btn danger" style={{flex:1}} onClick={() => { setClienteSel(null); setStep(2); }}>
                Omitir · sin cliente
              </button>
              <button className="btn primary" style={{flex:2,height:38}} onClick={() => setStep(2)}>
                {clienteSel ? `Continuar con ${clienteSel.nombre.split(' ')[0]}` : 'Continuar sin cliente'}
                <Icon.arrowRight size={13}/>
              </button>
            </div>
          </div>
        )}

        {/* ── PASO 2: Pago ── */}
        {step === 2 && (
          <div>
            <div className="grid-2-eq" style={{gap:10,marginBottom:16}}>
              {[
                {id:'Efectivo',      ic:'cash',  sub:'Pago en caja'},
                {id:'Tarjeta',       ic:'card',  sub:'VISA / MC'},
                {id:'Transferencia', ic:'globe', sub:'Nequi · Bancolombia'},
                {id:'Mixto',         ic:'more',  sub:'Varios métodos'},
              ].map(m => (
                <button key={m.id} onClick={()=>setPayMethod(m.id)} style={{
                  padding:12,borderRadius:10,cursor:'pointer',textAlign:'left',
                  border: payMethod===m.id ? '1px solid rgba(95,214,208,.5)' : '1px solid var(--border)',
                  background: payMethod===m.id ? 'rgba(95,214,208,.06)' : 'transparent',
                  color:'var(--fg)',display:'flex',flexDirection:'column',gap:5
                }}>
                  <div className="between">{Icon[m.ic]({size:17})}{payMethod===m.id&&<Icon.check size={13}/>}</div>
                  <div style={{fontWeight:500,fontSize:13}}>{m.id}</div>
                  <div className="small">{m.sub}</div>
                </button>
              ))}
            </div>

            {/* Tipo de venta */}
            <div style={{display:'flex',gap:8,marginBottom:12}}>
              {['contado','credito'].map(t=>(
                <button key={t} onClick={()=>setTipoVenta(t)} style={{
                  flex:1,padding:'8px',borderRadius:9,cursor:'pointer',fontWeight:600,fontSize:13,
                  border: tipoVenta===t ? '1.5px solid var(--aqua)' : '1px solid var(--border)',
                  background: tipoVenta===t ? 'rgba(95,214,208,.08)' : 'transparent',
                  color: tipoVenta===t ? 'var(--aqua)' : 'var(--muted)',
                }}>
                  {t === 'contado' ? '💵 Contado' : '🤝 Crédito'}
                </button>
              ))}
            </div>

            {tipoVenta === 'credito' && (
              <div style={{background:'rgba(251,191,36,.08)',border:'1px solid rgba(251,191,36,.3)',borderRadius:9,padding:'12px',marginBottom:12}}>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
                  <div>
                    <div style={{fontSize:12,color:'var(--muted)',marginBottom:4}}>Interés (%)</div>
                    <input className="input mono" type="number" min="0" max="100" step="0.5"
                      value={interesPct} onChange={e=>setInteresPct(e.target.value)}
                      style={{height:32,fontSize:13}} placeholder="0"/>
                  </div>
                  <div>
                    <div style={{fontSize:12,color:'var(--muted)',marginBottom:4}}>Fecha vencimiento</div>
                    <input className="input" type="date" value={fechaVenc} onChange={e=>setFechaVenc(e.target.value)} style={{height:32,fontSize:13}}/>
                  </div>
                </div>
                {interesPct > 0 && (
                  <div style={{marginTop:8,fontSize:12,color:'#d97706',fontWeight:600}}>
                    Interés: {money(Math.round(total * interesPct / 100))} → Total con interés: {money(total + Math.round(total * interesPct / 100))}
                  </div>
                )}
              </div>
            )}

            <div style={{borderRadius:10,border:'1px solid var(--border)',overflow:'hidden',marginBottom:16}}>
              {[
                ['Cliente',    clienteSel?.nombre || 'Consumidor final'],
                ['Subtotal',   money(subtotal)],
                descuento > 0 && ['Descuento', `-${money(descuento)}`],
                ['IVA 19%',    money(iva)],
                tipoVenta==='credito' && interesPct>0 && ['Interés '+interesPct+'%', money(Math.round(total*interesPct/100))],
                puntosGanar > 0 && ['Puntos a ganar', `+${puntosGanar} pts`],
              ].filter(Boolean).map(([k,v],i,arr) => (
                <div key={k} className="between" style={{padding:'9px 14px',borderBottom:i<arr.length-1?'1px solid var(--border)':'0',fontSize:13}}>
                  <span style={{color:'var(--muted)'}}>{k}</span>
                  <span className="mono" style={{color: k==='Puntos a ganar'?'var(--green)':k==='Descuento'?'var(--green)':'var(--fg)'}}>{v}</span>
                </div>
              ))}
              <div className="between" style={{padding:'12px 14px',background:'var(--bg-card-2)'}}>
                <b style={{fontSize:15}}>TOTAL {tipoVenta==='credito'?'C/INTERÉS':''}</b>
                <b className="mono" style={{fontSize:20,color:tipoVenta==='credito'?'#d97706':''}}>{money(tipoVenta==='credito' ? total + Math.round(total*interesPct/100) : total)}</b>
              </div>
            </div>

            <div className="row" style={{gap:8}}>
              <button className="btn" style={{flex:1}} onClick={()=>setStep(1)}>
                <Icon.chevron size={13} style={{transform:'rotate(180deg)'}}/> Volver
              </button>
              <button className="btn primary" style={{flex:2,height:40,fontSize:14,background:tipoVenta==='credito'?'#d97706':''}} disabled={saving} onClick={confirmarPago}>
                {saving ? <span className="loading-spin"/> : <Icon.check size={14}/>}
                {saving ? ' Procesando…' : tipoVenta==='credito' ? ` Registrar crédito · ${money(total + Math.round(total*interesPct/100))}` : ` Confirmar pago · ${money(total)}`}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function POSPage() {
  const { user } = useAuth();
  const { data: animales } = useAPI('/animales?estado=Disponible');
  const { data: productos } = useAPI('/productos?estado=Disponible');
  const { data: cfgData }   = useAPI('/config');

  const [cart, setCart]         = useState([]);
  const [q, setQ]               = useState('');
  const [cat, setCat]           = useState('Todos');
  const [descuento, setDescuento] = useState(0);
  const [checkoutOpen, setCheckoutOpen] = useState(false);

  const catalog = useMemo(() => {
    const items = [];
    (animales||[]).forEach(a => items.push({
      id:a.id, nombre:a.especie, precio:a.precio, cat:a.grupo, tipo:'animal',
      thumb: a.grupo==='Peces'?'fish': a.grupo==='Carnívoras'?'plant':'mammal'
    }));
    (productos||[]).forEach(p => items.push({
      id:p.id, nombre:p.nombre, precio:p.precio, cat:p.categoria, tipo:'producto',
      thumb: p.categoria.includes('Gato')?'cat': p.categoria.includes('Perro')?'dog':
             p.categoria.includes('Alimento')||p.subcategoria?.includes('Alimento')?'food':
             p.categoria.includes('Acuario')?'tank':'acc'
    }));
    return items;
  }, [animales, productos]);

  const cats = ['Todos', ...new Set(catalog.map(x => x.cat))].slice(0, 14);
  const filtered = catalog.filter(p =>
    (cat === 'Todos' || p.cat === cat) &&
    (!q || p.nombre.toLowerCase().includes(q.toLowerCase()))
  );

  const add = (p) => setCart(c => {
    const i = c.findIndex(x => x.id===p.id && x.tipo===p.tipo);
    if (i >= 0) { const n=[...c]; n[i]={...n[i],qty:n[i].qty+1}; return n; }
    return [...c, {...p, qty:1}];
  });
  const upd = (i, d) => setCart(c => c.map((x,j) => j===i ? {...x,qty:Math.max(1,x.qty+d)} : x));
  const rem = (i) => setCart(c => c.filter((_,j) => j!==i));

  const subtotal = cart.reduce((s,x) => s+x.precio*x.qty, 0);
  const iva      = Math.round((subtotal - descuento) * 0.19);
  const total    = subtotal - descuento + iva;

  return (
    <div className="page" style={{maxWidth:'none'}}>
      <div className="page-head">
        <div><h1>POS · Punto de venta</h1><p>Cajero: {user.nombre} · {user.sede}</p></div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:14}}>
        {/* Catálogo */}
        <div className="card" style={{padding:16}}>
          <div className="search" style={{width:'100%',maxWidth:'none'}}>
            <Icon.search size={15}/>
            <input placeholder="Buscar producto o animal…" value={q} onChange={e=>setQ(e.target.value)} autoFocus/>
          </div>
          <div className="row" style={{marginTop:10,gap:5,flexWrap:'wrap'}}>
            {cats.map(c => (
              <button key={c} onClick={() => setCat(c)} className="btn ghost" style={{
                height:28,padding:'0 9px',fontSize:11.5,
                background: cat===c ? 'rgba(95,214,208,.1)' : 'transparent',
                borderColor: cat===c ? 'rgba(95,214,208,.3)' : 'var(--border)',
                color: cat===c ? 'var(--aqua)' : 'var(--muted)'
              }}>{c}</button>
            ))}
          </div>
          <div style={{marginTop:6,fontSize:11,color:'var(--muted)'}}>{filtered.length} producto{filtered.length!==1?'s':''} encontrado{filtered.length!==1?'s':''}</div>
          <div style={{marginTop:8,display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(155px,1fr))',gap:8,maxHeight:500,overflowY:'auto'}}>
            {filtered.map(p => (
              <button key={p.tipo+p.id} onClick={() => add(p)} style={{
                textAlign:'left',padding:'10px 12px',borderRadius:10,border:'1px solid var(--border)',
                background:'transparent',color:'var(--fg)',display:'flex',flexDirection:'column',gap:5,cursor:'pointer',transition:'all .1s'
              }}
              onMouseOver={e=>{e.currentTarget.style.borderColor='rgba(95,214,208,.5)';e.currentTarget.style.background='rgba(95,214,208,.06)';}}
              onMouseOut={e=>{e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.background='transparent';}}>
                <div style={{fontSize:12,lineHeight:1.35,fontWeight:500}}>{p.nombre}</div>
                <div className="between" style={{marginTop:'auto'}}>
                  <span className="chip" style={{fontSize:10,maxWidth:80,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p.cat.replace('Acuariofilia-','')}</span>
                  <span className="mono" style={{fontSize:12,fontWeight:600,color:'var(--aqua)'}}>{money(p.precio)}</span>
                </div>
              </button>
            ))}
            {!filtered.length && <div className="small" style={{gridColumn:'1/-1',padding:24,textAlign:'center',color:'var(--muted)'}}>Sin resultados para "{q}"</div>}
          </div>
        </div>

        {/* Carrito */}
        <div className="card" style={{padding:0,display:'flex',flexDirection:'column',minHeight:560}}>
          <div className="between" style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',background:'var(--bg-card-2)'}}>
            <b style={{fontSize:15}}>Venta actual</b>
            <button className="top-btn" style={{height:26,padding:'0 8px',fontSize:11}} onClick={() => setCart([])}><Icon.trash size={12}/> Limpiar</button>
          </div>

          <div style={{flex:1,overflow:'auto',padding:'4px 10px',minHeight:220}}>
            {!cart.length && (
              <div className="center" style={{height:180,flexDirection:'column',gap:8,color:'var(--muted)'}}>
                <Icon.cart size={26}/><div style={{fontSize:13}}>Agrega productos del catálogo</div>
              </div>
            )}
            {cart.map((x,i) => (
              <div key={i} className="row" style={{padding:'7px 2px',borderBottom:'1px solid var(--border)'}}>
                <div style={{flex:1,fontSize:12,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{x.nombre}</div>
                <div className="row" style={{gap:2,flexShrink:0}}>
                  <button className="top-btn" style={{height:20,minWidth:20,padding:0}} onClick={() => upd(i,-1)}><Icon.minus size={10}/></button>
                  <span className="mono" style={{minWidth:18,textAlign:'center',fontSize:12}}>{x.qty}</span>
                  <button className="top-btn" style={{height:20,minWidth:20,padding:0}} onClick={() => upd(i,1)}><Icon.plus size={10}/></button>
                </div>
                <span className="mono" style={{width:76,textAlign:'right',fontSize:12,flexShrink:0}}>{money(x.precio*x.qty)}</span>
                <button style={{background:'transparent',border:0,color:'var(--red)',padding:'0 3px',flexShrink:0}} onClick={() => rem(i)}><Icon.x size={11}/></button>
              </div>
            ))}
          </div>

          <div style={{padding:'12px 16px',borderTop:'1px solid var(--border)'}}>
            <div className="between small" style={{padding:'2px 0'}}><span>Subtotal</span><span className="mono">{money(subtotal)}</span></div>
            <div className="between small" style={{padding:'2px 0',color:'var(--green)'}}>
              <span>Descuento (COP)</span>
              <input className="mono" style={{background:'transparent',border:0,outline:0,textAlign:'right',width:90,fontSize:12,color:'var(--green)'}}
                type="number" min="0" value={descuento} onChange={e=>setDescuento(+e.target.value)}/>
            </div>
            <div className="between small" style={{padding:'2px 0'}}><span>IVA 19%</span><span className="mono">{money(iva)}</span></div>
            <div className="between" style={{padding:'9px 0 0',borderTop:'1px solid var(--border)',marginTop:5}}>
              <b style={{fontSize:15}}>Total</b><b className="mono" style={{fontSize:18}}>{money(total)}</b>
            </div>
            <button className="btn primary" style={{width:'100%',height:42,fontSize:15,marginTop:10,justifyContent:'center'}}
              disabled={!cart.length}
              onClick={() => setCheckoutOpen(true)}>
              Cobrar · {money(total)}
            </button>
          </div>
        </div>
      </div>

      <CheckoutModal
        open={checkoutOpen}
        onClose={() => setCheckoutOpen(false)}
        total={total} subtotal={subtotal} iva={iva} descuento={descuento}
        cart={cart} user={user} cfgData={cfgData}
        onSuccess={() => { setCart([]); setDescuento(0); setCheckoutOpen(false); }}
      />
    </div>
  );
}

// ── VENTAS ─────────────────────────────────────────────────────────────────────
function VentasPage() {
  const { data, loading, reload } = useAPI('/ventas');
  const { data: kpis } = useAPI('/ventas/kpis');
  const toast = useToast();
  const [q, setQ] = useState('');
  const [estado, setEstado] = useState('');

  const filtered = (data||[]).filter(v =>
    (!q || v.numero?.includes(q) || v.cliente_nombre?.toLowerCase().includes(q.toLowerCase())) &&
    (!estado || v.estado === estado)
  );

  const cambiarEstado = async (id, nuevoEstado) => {
    try {
      await window.api.put(`/ventas/${id}/estado`, { estado: nuevoEstado });
      toast('Estado actualizado'); reload();
    } catch(e) { toast(e.message,'error'); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Ventas</h1><p>Historial completo de transacciones</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/> Actualizar</button>
        </div>
      </div>

      {kpis && (
        <div className="kpi-grid" style={{marginBottom:14}}>
          <div className="kpi"><div className="kpi-label">Ventas hoy</div><div className="kpi-val num">{money(kpis.ventas_hoy)}</div><div className="small mt-2">{kpis.tickets_hoy} tickets</div></div>
          <div className="kpi"><div className="kpi-label">Ventas del mes</div><div className="kpi-val num">{money(kpis.ventas_mes)}</div></div>
          <div className="kpi"><div className="kpi-label">Devoluciones</div><div className="kpi-val num">{kpis.devoluciones}</div><div className="small mt-2">{money(kpis.devoluciones_monto)}</div></div>
          <div className="kpi"><div className="kpi-label">Ticket promedio</div><div className="kpi-val num">{money(kpis.ticket_prom)}</div></div>
        </div>
      )}

      <div className="card" style={{padding:0}}>
        <div className="row" style={{padding:12,gap:8,borderBottom:'1px solid var(--border)'}}>
          <div className="search" style={{flex:1,width:'auto',maxWidth:'none'}}>
            <Icon.search size={14}/><input placeholder="Buscar por # o cliente…" value={q} onChange={e=>setQ(e.target.value)}/>
          </div>
          <div className="seg">
            {['','Completada','Pendiente','Devuelta'].map(s => (
              <button key={s} className={estado===s?'active':''} onClick={() => setEstado(s)}>{s||'Todas'}</button>
            ))}
          </div>
        </div>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Venta</th><th>Cliente</th><th>Cajero</th><th>Método</th><th>Estado</th><th>Fecha</th><th style={{textAlign:'right'}}>Total</th><th></th></tr></thead>
            <tbody>
              {filtered.map(v => (
                <tr key={v.id}>
                  <td className="mono small">{v.numero}</td>
                  <td style={{fontSize:13}}>{v.cliente_nombre || 'Consumidor final'}</td>
                  <td className="small">{v.cajero_nombre}</td>
                  <td><span className="chip">{v.metodo_pago}</span></td>
                  <td><span className={`chip ${v.estado==='Completada'?'green':v.estado==='Devuelta'?'red':'amber'}`}>{v.estado}</span></td>
                  <td className="small">{v.created_at?.slice(0,16)}</td>
                  <td className="mono" style={{textAlign:'right'}}>{money(v.total)}</td>
                  <td>
                    {v.estado === 'Pendiente' && (
                      <button className="btn ghost" style={{fontSize:11,height:26,padding:'0 8px'}} onClick={() => cambiarEstado(v.id,'Completada')}>
                        Completar
                      </button>
                    )}
                  </td>
                </tr>
              ))}
              {!filtered.length && <tr><td colSpan="8" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin ventas</td></tr>}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

// ── ANIMALES ──────────────────────────────────────────────────────────────────
function AnimalesPage() {
  const toast = useToast();
  const [grupo, setGrupo] = useState('');
  const [q, setQ]         = useState('');
  const [addOpen, setAddOpen] = useState(false);
  const [editItem, setEditItem] = useState(null);
  const emptyForm = { grupo:'Peces', especie:'', stock:1, stock_minimo:5, estado:'Disponible', precio:0, costo:0, proveedor_id:'', notas:'', imagen:'', cuarentena:0, cuarentena_tipo:'ninguna', cuarentena_enfermedad:'', cuarentena_inicio:'', cuarentena_fin:'', precio_oferta:0, oferta_inicio:'', oferta_fin:'' };
  const [form, setForm]   = useState(emptyForm);

  const path = '/animales?' + new URLSearchParams({ ...(grupo && {grupo}), ...(q && {q}) }).toString();
  const { data, loading, reload } = useAPI(path, [grupo, q]);
  const { data: provs } = useAPI('/proveedores');

  const grupos = ['','Peces','Hámsters','Ratones','Conejos','Cobayos','Alimento vivo','Carnívoras'];
  const estadoColor = e => e==='Disponible'?'green':e==='Crítico'?'red':e==='Bajo stock'?'amber':e==='Reservado'?'violet':'blue';

  const save = async () => {
    try {
      if (editItem) { await window.api.put(`/animales/${editItem.id}`, form); toast('Animal actualizado'); }
      else { await window.api.post('/animales', form); toast('Animal registrado'); }
      setAddOpen(false); setEditItem(null);
      setForm(emptyForm);
      reload();
    } catch(e) { toast(e.message,'error'); }
  };

  const del = async (id) => {
    if (!confirm('¿Eliminar este registro?')) return;
    try { await window.api.delete(`/animales/${id}`); toast('Eliminado','warn'); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  const openEdit = (a) => {
    setForm({ grupo:a.grupo, especie:a.especie, stock:a.stock, stock_minimo:a.stock_minimo, estado:a.estado, precio:a.precio, costo:a.costo, proveedor_id:a.proveedor_id||'', notas:a.notas||'', imagen:a.imagen||'', cuarentena:a.cuarentena||0, cuarentena_tipo:a.cuarentena_tipo||'ninguna', cuarentena_enfermedad:a.cuarentena_enfermedad||'', cuarentena_inicio:a.cuarentena_inicio||'', cuarentena_fin:a.cuarentena_fin||'', precio_oferta:a.precio_oferta||0, oferta_inicio:a.oferta_inicio||'', oferta_fin:a.oferta_fin||'' });
    setEditItem(a); setAddOpen(true);
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Animales</h1><p>Inventario vivo — peces, mamíferos, plantas carnívoras y alimento vivo</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
          <button className="btn primary" onClick={() => { setEditItem(null); setAddOpen(true); }}><Icon.plus size={14}/> Nuevo</button>
        </div>
      </div>

      <div className="row" style={{gap:6,marginBottom:12,flexWrap:'wrap'}}>
        {grupos.map(g => (
          <button key={g} onClick={() => setGrupo(g)} className="btn ghost" style={{
            height:32,fontSize:12,
            background: grupo===g ? 'rgba(95,214,208,.1)' : 'transparent',
            borderColor: grupo===g ? 'rgba(95,214,208,.3)' : 'var(--border)',
            color: grupo===g ? 'var(--aqua)' : 'var(--muted)'
          }}>{g||'Todos'}</button>
        ))}
      </div>

      <div className="search" style={{width:'100%',maxWidth:400,marginBottom:12}}>
        <Icon.search size={14}/><input placeholder="Buscar especie…" value={q} onChange={e=>setQ(e.target.value)}/>
      </div>

      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Código</th><th>Especie</th><th>Grupo</th><th style={{textAlign:'right'}}>Stock</th><th>Estado</th><th style={{textAlign:'right'}}>Precio</th><th style={{textAlign:'right'}}>Costo</th><th>Proveedor</th><th></th></tr></thead>
            <tbody>
              {(data||[]).map(a => (
                <tr key={a.id}>
                  <td className="mono small" style={{color:'var(--muted)'}}>{a.codigo||`AN-${a.id}`}</td>
                  <td style={{fontSize:13}}>
                    <div className="row" style={{gap:6}}>
                      {a.especie}
                      {(() => {
                        const po=+a.precio_oferta||0, pr=+a.precio||0, hoy=new Date().toISOString().slice(0,10);
                        const activa = po>0 && po<pr && (!a.oferta_inicio||a.oferta_inicio<=hoy) && (!a.oferta_fin||a.oferta_fin>=hoy);
                        return activa ? <span className="chip amber" style={{fontSize:10}}>−{Math.round((pr-po)/pr*100)}%</span> : null;
                      })()}
                    </div>
                  </td>
                  <td><span className="chip">{a.grupo}</span></td>
                  <td className="mono" style={{textAlign:'right'}}>{a.stock}</td>
                  <td><span className={`chip ${estadoColor(a.estado)}`}>{a.estado}</span></td>
                  <td className="mono small" style={{textAlign:'right'}}>
                    {(() => {
                      const po=+a.precio_oferta||0, pr=+a.precio||0, hoy=new Date().toISOString().slice(0,10);
                      const activa = po>0 && po<pr && (!a.oferta_inicio||a.oferta_inicio<=hoy) && (!a.oferta_fin||a.oferta_fin>=hoy);
                      return activa
                        ? <span style={{display:'inline-flex',flexDirection:'column',alignItems:'flex-end',lineHeight:1.25}}>
                            <span style={{textDecoration:'line-through',color:'var(--muted)',fontSize:11}}>{money(pr)}</span>
                            <span style={{color:'var(--green)',fontWeight:600}}>{money(po)}</span>
                          </span>
                        : money(pr);
                    })()}
                  </td>
                  <td className="mono small" style={{textAlign:'right'}}>{money(a.costo)}</td>
                  <td className="small">{a.proveedor_nombre||'—'}</td>
                  <td>
                    <div className="row" style={{gap:4,justifyContent:'flex-end'}}>
                      <button className="top-btn" style={{height:26,minWidth:26,padding:0}} onClick={() => openEdit(a)}><Icon.edit size={12}/></button>
                      <button className="top-btn" style={{height:26,minWidth:26,padding:0,color:'var(--red)'}} onClick={() => del(a.id)}><Icon.trash size={12}/></button>
                    </div>
                  </td>
                </tr>
              ))}
              {!data?.length && <tr><td colSpan="9" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin registros</td></tr>}
            </tbody>
          </table>
        )}
      </div>

      <Modal open={addOpen} onClose={() => { setAddOpen(false); setEditItem(null); }} title={editItem?'Editar animal':'Nuevo animal'} sub="Registra el ingreso al inventario vivo" width={560}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <div className="field"><label>Grupo</label>
            <select className="input" value={form.grupo} onChange={e=>setForm({...form,grupo:e.target.value})}>
              {['Peces','Hámsters','Ratones','Conejos','Cobayos','Alimento vivo','Carnívoras'].map(g=><option key={g}>{g}</option>)}
            </select>
          </div>
          <div className="field"><label>Especie</label>
            <input className="input" value={form.especie} onChange={e=>setForm({...form,especie:e.target.value})} placeholder="Ej. Disco Blue Diamond"/>
          </div>
          <div className="field"><label>Stock</label>
            <input className="input mono" type="number" min="0" value={form.stock} onChange={e=>setForm({...form,stock:+e.target.value})}/>
          </div>
          <div className="field"><label>Stock mínimo</label>
            <input className="input mono" type="number" min="0" value={form.stock_minimo} onChange={e=>setForm({...form,stock_minimo:+e.target.value})}/>
          </div>
          <div className="field"><label>Estado</label>
            <select className="input" value={form.estado} onChange={e=>setForm({...form,estado:e.target.value})}>
              {['Disponible','Cuarentena','Reservado','Bajo stock','Crítico'].map(s=><option key={s}>{s}</option>)}
            </select>
          </div>
          <div className="field"><label>Proveedor</label>
            <select className="input" value={form.proveedor_id} onChange={e=>setForm({...form,proveedor_id:e.target.value})}>
              <option value="">— ninguno —</option>
              {(provs||[]).map(p=><option key={p.id} value={p.id}>{p.nombre}</option>)}
            </select>
          </div>
          <div className="field"><label>Costo (COP)</label>
            <input className="input mono" type="number" min="0" value={form.costo} onChange={e=>setForm({...form,costo:+e.target.value})}/>
          </div>
          <div className="field"><label>Precio (COP)</label>
            <input className="input mono" type="number" min="0" value={form.precio} onChange={e=>setForm({...form,precio:+e.target.value})}/>
          </div>

          {/* ── Oferta / promoción ── */}
          <div style={{gridColumn:'1/-1',marginTop:4}}>
            {(() => {
              const po = +form.precio_oferta || 0;
              const pr = +form.precio || 0;
              const hoy = new Date().toISOString().slice(0,10);
              const valida = po > 0 && po < pr;
              const vencida = valida && form.oferta_fin && form.oferta_fin < hoy;
              const pendiente = valida && form.oferta_inicio && form.oferta_inicio > hoy;
              const pct = valida ? Math.round((pr - po) / pr * 100) : 0;
              const activa = valida && !vencida && !pendiente;
              return (
                <div className="card" style={{padding:'14px 16px',background:'var(--bg-card-2)',border:'1px solid var(--border)'}}>
                  <div className="between" style={{marginBottom:12}}>
                    <div className="row" style={{gap:8}}>
                      <Icon.tag size={15} style={{color:'var(--amber)'}}/>
                      <b style={{fontSize:13.5}}>Oferta / promoción</b>
                    </div>
                    {valida && (
                      <span className={`chip ${activa?'green':vencida?'red':'amber'}`}>
                        {activa ? `−${pct}% activa` : vencida ? 'Vencida' : pendiente ? 'Programada' : `−${pct}%`}
                      </span>
                    )}
                  </div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                    <div className="field" style={{gridColumn:'1/-1'}}>
                      <label>Precio de oferta (COP)</label>
                      <input className="input mono" type="number" min="0" placeholder="0 = sin oferta"
                        value={form.precio_oferta} onChange={e=>setForm({...form,precio_oferta:+e.target.value})}/>
                      {po > 0 && po >= pr && <span className="small" style={{color:'var(--red)'}}>El precio de oferta debe ser menor al precio normal.</span>}
                      {valida && <span className="small" style={{color:'var(--green)'}}>Ahorro de {money(pr - po)} ({pct}% de descuento)</span>}
                    </div>
                    <div className="field"><label>Inicio (opcional)</label>
                      <input className="input" type="date" value={form.oferta_inicio} onChange={e=>setForm({...form,oferta_inicio:e.target.value})}/>
                    </div>
                    <div className="field"><label>Fecha límite</label>
                      <input className="input" type="date" value={form.oferta_fin} onChange={e=>setForm({...form,oferta_fin:e.target.value})}/>
                    </div>
                  </div>
                  <span className="small" style={{color:'var(--muted)',display:'block',marginTop:8}}>
                    La oferta se aplica automáticamente en la tienda mientras esté vigente. Deja el precio de oferta en 0 para desactivarla.
                  </span>
                </div>
              );
            })()}
          </div>

          <div className="field" style={{gridColumn:'1/-1'}}><label>Notas</label>
            <textarea className="input" rows="2" style={{height:'auto',padding:'8px 11px'}} value={form.notas} onChange={e=>setForm({...form,notas:e.target.value})}/>
          </div>
          {/* Cuarentena */}
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label>Cuarentena</label>
            <select className="input" value={form.cuarentena_tipo} onChange={e=>{
              const t = e.target.value;
              setForm({...form, cuarentena_tipo:t, cuarentena: t==='ninguna'?0:1});
            }}>
              <option value="ninguna">Sin cuarentena (viene habilitado)</option>
              <option value="preventiva">Cuarentena preventiva (llegada nueva)</option>
              <option value="enfermedad">Cuarentena por enfermedad</option>
            </select>
          </div>
          {form.cuarentena_tipo !== 'ninguna' && <>
            {form.cuarentena_tipo === 'enfermedad' && (
              <div className="field" style={{gridColumn:'1/-1'}}>
                <label>Detalle de enfermedad / síntomas</label>
                <textarea className="input" rows={2} style={{height:'auto',padding:'8px 11px'}} value={form.cuarentena_enfermedad} onChange={e=>setForm({...form,cuarentena_enfermedad:e.target.value})} placeholder="Describe síntomas, diagnóstico, tratamiento..."/>
              </div>
            )}
            <div className="field"><label>Inicio cuarentena</label>
              <input className="input" type="date" value={form.cuarentena_inicio} onChange={e=>setForm({...form,cuarentena_inicio:e.target.value})}/>
            </div>
            <div className="field"><label>Fin estimado</label>
              <input className="input" type="date" value={form.cuarentena_fin} onChange={e=>setForm({...form,cuarentena_fin:e.target.value})}/>
            </div>
          </>}
          <InlineImageUpload value={form.imagen||''} onChange={v=>setForm({...form,imagen:v})}/>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={() => { setAddOpen(false); setEditItem(null); }}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> {editItem?'Guardar cambios':'Registrar ingreso'}</button>
        </div>
      </Modal>
    </div>
  );
}

// ── INVENTARIO PRODUCTOS ──────────────────────────────────────────────────────
function InventarioPage() {
  const toast = useToast();
  const [cat, setCat]     = useState('');
  const [q, setQ]         = useState('');
  const [addOpen, setAddOpen] = useState(false);
  const [editItem, setEditItem] = useState(null);
  const [form, setForm]   = useState({ nombre:'', categoria:'', subcategoria:'', stock:0, stock_minimo:5, estado:'Disponible', precio:0, costo:0, proveedor_id:'', descripcion:'', imagen:'' });
  const [csvOpen, setCsvOpen] = useState(false);
  const [csvLimpiar, setCsvLimpiar] = useState(true);
  const [csvLoading, setCsvLoading] = useState(false);
  const [csvFile, setCsvFile] = useState(null);

  const path = '/productos?' + new URLSearchParams({ ...(cat && {categoria:cat}), ...(q && {q}) }).toString();
  const { data, loading, reload } = useAPI(path, [cat, q]);
  const { data: provs } = useAPI('/proveedores');
  const cats = [
    { label: 'Todos', value: '' },
    { label: 'Acuarios', value: 'Acuariofilia-Acuarios' },
    { label: 'Filtración', value: 'Acuariofilia-Filtracion' },
    { label: 'Accesorios Acuario', value: 'Acuariofilia-Accesorios' },
    { label: 'Acondicionadores', value: 'Acuariofilia-Acondicionadores' },
    { label: 'Fertilizantes', value: 'Acuariofilia-Fertilizantes' },
    { label: 'Alimentos', value: 'Acuariofilia-Alimentos' },
    { label: 'Decoración', value: 'Acuariofilia-Decoracion' },
    { label: 'Marina', value: 'Acuariofilia-Marina' },
    { label: 'Monitoreo', value: 'Acuariofilia-Monitoreo' },
    { label: 'Sustratos', value: 'Acuariofilia-Sustratos' },
    { label: 'Medicamentos', value: 'Acuariofilia-Medicamentos' },
    { label: 'Acc. Roedores', value: 'Accesorios-Roedores' },
    { label: 'Acc. Aves', value: 'Accesorios-Aves' },
  ];
  const estadoColor = e => e==='Disponible'?'green':e==='Crítico'?'red':'amber';

  const save = async () => {
    try {
      if (editItem) { await window.api.put(`/productos/${editItem.id}`, form); toast('Producto actualizado'); }
      else { await window.api.post('/productos', form); toast('Producto creado'); }
      setAddOpen(false); setEditItem(null); reload();
    } catch(e) { toast(e.message,'error'); }
  };

  const del = async (id) => {
    if (!confirm('¿Eliminar?')) return;
    try { await window.api.delete(`/productos/${id}`); toast('Eliminado','warn'); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  const importarCSV = async () => {
    if (!csvFile) return;
    setCsvLoading(true);
    try {
      const text = await csvFile.text();
      const res = await window.api.post('/productos/importar-csv', { csv: text, limpiar: csvLimpiar });
      toast(`✅ ${res.importados} productos importados${res.errores ? ` (${res.errores} errores)` : ''}`, 'success');
      setCsvOpen(false); setCsvFile(null); reload();
    } catch(e) { toast(e.message, 'error'); }
    finally { setCsvLoading(false); }
  };

  const openEdit = (p) => {
    setForm({ nombre:p.nombre, categoria:p.categoria, subcategoria:p.subcategoria||'', stock:p.stock, stock_minimo:p.stock_minimo, estado:p.estado, precio:p.precio, costo:p.costo, proveedor_id:p.proveedor_id||'', descripcion:p.descripcion||'', imagen:p.imagen||'' });
    setEditItem(p); setAddOpen(true);
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Inventario</h1><p>Productos: accesorios, alimentos, acuarios, gatos, perros</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
          <button className="btn" onClick={() => setCsvOpen(true)} style={{color:'var(--aqua)',borderColor:'rgba(95,214,208,.3)'}}>⬆ Importar CSV</button>
          <button className="btn primary" onClick={() => { setEditItem(null); setAddOpen(true); }}><Icon.plus size={14}/> Nuevo producto</button>
        </div>
      </div>

      <div className="row" style={{gap:6,marginBottom:12,flexWrap:'wrap'}}>
        {cats.map(c => (
          <button key={c.value} onClick={() => setCat(c.value)} className="btn ghost" style={{
            height:32,fontSize:12,
            background: cat===c.value ? 'rgba(95,214,208,.1)' : 'transparent',
            borderColor: cat===c.value ? 'rgba(95,214,208,.3)' : 'var(--border)',
            color: cat===c.value ? 'var(--aqua)' : 'var(--muted)'
          }}>{c.label}</button>
        ))}
      </div>

      <div className="search" style={{width:'100%',maxWidth:400,marginBottom:12}}>
        <Icon.search size={14}/><input placeholder="Buscar producto…" value={q} onChange={e=>setQ(e.target.value)}/>
      </div>

      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>SKU</th><th>Nombre</th><th>Categoría</th><th style={{textAlign:'right'}}>Stock</th><th>Estado</th><th style={{textAlign:'right'}}>Precio</th><th>Proveedor</th><th></th></tr></thead>
            <tbody>
              {(data||[]).map(p => (
                <tr key={p.id}>
                  <td className="mono small" style={{color:'var(--muted)'}}>{p.sku||`PR-${p.id}`}</td>
                  <td style={{fontSize:13}}>{p.nombre}</td>
                  <td><span className="chip">{p.categoria}</span></td>
                  <td className="mono" style={{textAlign:'right'}}>{p.stock}</td>
                  <td><span className={`chip ${estadoColor(p.estado)}`}>{p.estado}</span></td>
                  <td className="mono small" style={{textAlign:'right'}}>{money(p.precio)}</td>
                  <td className="small">{p.proveedor_nombre||'—'}</td>
                  <td>
                    <div className="row" style={{gap:4,justifyContent:'flex-end'}}>
                      <button className="top-btn" style={{height:26,minWidth:26,padding:0}} onClick={() => openEdit(p)}><Icon.edit size={12}/></button>
                      <button className="top-btn" style={{height:26,minWidth:26,padding:0,color:'var(--red)'}} onClick={() => del(p.id)}><Icon.trash size={12}/></button>
                    </div>
                  </td>
                </tr>
              ))}
              {!data?.length && <tr><td colSpan="8" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin productos</td></tr>}
            </tbody>
          </table>
        )}
      </div>

      <Modal open={addOpen} onClose={() => { setAddOpen(false); setEditItem(null); }} title={editItem?'Editar producto':'Nuevo producto'} width={540}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Nombre</label>
            <input className="input" value={form.nombre} onChange={e=>setForm({...form,nombre:e.target.value})} placeholder="Nombre del producto"/>
          </div>
          <div className="field"><label>Categoría</label>
            <select className="input" value={form.categoria} onChange={e=>setForm({...form,categoria:e.target.value})}>
              <option value="">— selecciona —</option>
              {cats.filter(c=>c.value).map(c=><option key={c.value} value={c.value}>{c.label}</option>)}
            </select>
          </div>
          <div className="field"><label>Subcategoría</label>
            <input className="input" value={form.subcategoria} onChange={e=>setForm({...form,subcategoria:e.target.value})} placeholder="Opcional"/>
          </div>
          <div className="field"><label>Stock</label>
            <input className="input mono" type="number" min="0" value={form.stock} onChange={e=>setForm({...form,stock:+e.target.value})}/>
          </div>
          <div className="field"><label>Estado</label>
            <select className="input" value={form.estado} onChange={e=>setForm({...form,estado:e.target.value})}>
              {['Disponible','Bajo stock','Crítico'].map(s=><option key={s}>{s}</option>)}
            </select>
          </div>
          <div className="field"><label>Costo (COP)</label>
            <input className="input mono" type="number" min="0" value={form.costo} onChange={e=>setForm({...form,costo:+e.target.value})}/>
          </div>
          <div className="field"><label>Precio (COP)</label>
            <input className="input mono" type="number" min="0" value={form.precio} onChange={e=>setForm({...form,precio:+e.target.value})}/>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Proveedor</label>
            <select className="input" value={form.proveedor_id} onChange={e=>setForm({...form,proveedor_id:e.target.value})}>
              <option value="">— ninguno —</option>
              {(provs||[]).map(p=><option key={p.id} value={p.id}>{p.nombre}</option>)}
            </select>
          </div>
          <InlineImageUpload value={form.imagen||''} onChange={v=>setForm({...form,imagen:v})}/>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={() => { setAddOpen(false); setEditItem(null); }}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> {editItem?'Guardar':'Crear producto'}</button>
        </div>
      </Modal>

      <Modal open={csvOpen} onClose={() => { setCsvOpen(false); setCsvFile(null); }} title="Importar productos desde CSV" width={480}>
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <p style={{color:'var(--muted)',fontSize:13}}>
            Selecciona el archivo CSV con la plantilla de productos (columna 23 = PROVEEDOR).
          </p>

          <label style={{
            cursor:'pointer', textAlign:'center', padding:'20px 12px',
            border:'2px dashed var(--border)', borderRadius:8,
            background: csvFile ? 'rgba(95,214,208,.07)' : 'transparent',
            borderColor: csvFile ? 'var(--aqua)' : 'var(--border)',
            color: csvFile ? 'var(--aqua)' : 'var(--muted)',
            fontSize:13, display:'flex', flexDirection:'column', alignItems:'center', gap:6
          }}>
            <span style={{fontSize:28}}>{csvFile ? '✅' : '📂'}</span>
            <span>{csvFile ? csvFile.name : 'Haz clic para seleccionar archivo CSV'}</span>
            {csvFile && <span style={{fontSize:11,color:'var(--muted)'}}>({(csvFile.size/1024).toFixed(1)} KB)</span>}
            <input type="file" accept=".csv,.txt" style={{display:'none'}}
              onChange={e => setCsvFile(e.target.files[0] || null)}/>
          </label>

          <label style={{display:'flex',alignItems:'center',gap:8,fontSize:13,cursor:'pointer'}}>
            <input type="checkbox" checked={csvLimpiar} onChange={e=>setCsvLimpiar(e.target.checked)}/>
            Limpiar productos existentes antes de importar
          </label>

          <div style={{display:'flex',gap:8,marginTop:4}}>
            <button className="btn" style={{flex:1}} onClick={() => { setCsvOpen(false); setCsvFile(null); }}>Cancelar</button>
            <button className="btn primary" style={{flex:2}} onClick={importarCSV} disabled={!csvFile || csvLoading}>
              {csvLoading ? 'Importando...' : `⬆ Importar${csvFile ? ` "${csvFile.name}"` : ''}`}
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

// ── SERVICIOS ─────────────────────────────────────────────────────────────────
function ServiciosPage() {
  const toast = useToast();
  const [addOpen, setAddOpen] = useState(false);
  const [editItem, setEditItem] = useState(null);
  const [q, setQ] = useState('');
  const [estadoF, setEstadoF] = useState('');
  const [form, setForm] = useState({ tipo:'Mantenimiento acuario', cliente_nombre:'', tecnico_nombre:'V. Acevedo', fecha:'', duracion:'2h', precio:90000, notas:'' });

  const path = '/servicios?' + new URLSearchParams({ ...(estadoF && {estado:estadoF}), ...(q && {q}) }).toString();
  const { data, loading, reload } = useAPI(path, [estadoF, q]);
  const { data: kpis } = useAPI('/servicios/kpis');
  const { data: clientes } = useAPI('/clientes');

  const estadoColor = e => e==='Completado'?'green':e==='Programado'?'aqua':'red';

  const save = async () => {
    try {
      const payload = { ...form, cliente_id: form.cliente_id || null };
      if (editItem) { await window.api.put(`/servicios/${editItem.id}`, {...payload, estado: editItem.estado}); toast('Servicio actualizado'); }
      else { await window.api.post('/servicios', payload); toast('Servicio agendado'); }
      setAddOpen(false); setEditItem(null); reload();
    } catch(e) { toast(e.message,'error'); }
  };

  const completar = async (id) => {
    try {
      const svc = (data||[]).find(s=>s.id===id);
      if (!svc) return;
      await window.api.put(`/servicios/${id}`, {...svc, estado:'Completado'});
      toast('Servicio completado'); reload();
    } catch(e) { toast(e.message,'error'); }
  };

  const openEdit = (s) => {
    setForm({ tipo:s.tipo, cliente_nombre:s.cliente_nombre||'', tecnico_nombre:s.tecnico_nombre||'', fecha:s.fecha, duracion:s.duracion||'', precio:s.precio, notas:s.notas||'', cliente_id:s.cliente_id||'' });
    setEditItem(s); setAddOpen(true);
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Servicios</h1><p>Mantenimiento · Montajes · Asesorías · Charlas (Fundación MANOS DEL RÍO)</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
          <button className="btn primary" onClick={() => { setEditItem(null); setAddOpen(true); }}><Icon.plus size={14}/> Agendar</button>
        </div>
      </div>

      {kpis && (
        <div className="kpi-grid" style={{marginBottom:14}}>
          <div className="kpi"><div className="kpi-label">Programados</div><div className="kpi-val num">{kpis.programados}</div></div>
          <div className="kpi"><div className="kpi-label">Completados (mes)</div><div className="kpi-val num">{kpis.completados}</div></div>
          <div className="kpi"><div className="kpi-label">Ingresos servicios</div><div className="kpi-val num">{money(kpis.ingresos)}</div></div>
          <div className="kpi"><div className="kpi-label">Charlas educativas</div><div className="kpi-val num" style={{color:'var(--green)'}}>{kpis.charlas}</div><div className="small mt-2">Alianza MANOS DEL RÍO</div></div>
        </div>
      )}

      <div className="row" style={{gap:8,marginBottom:12}}>
        <div className="search" style={{flex:1,maxWidth:380,width:'auto'}}>
          <Icon.search size={14}/><input placeholder="Buscar…" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
        <div className="seg">
          {['','Programado','Completado','Cancelado'].map(s=>(
            <button key={s} className={estadoF===s?'active':''} onClick={()=>setEstadoF(s)}>{s||'Todos'}</button>
          ))}
        </div>
      </div>

      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Código</th><th>Tipo</th><th>Cliente</th><th>Técnico</th><th>Fecha</th><th>Duración</th><th>Estado</th><th style={{textAlign:'right'}}>Valor</th><th></th></tr></thead>
            <tbody>
              {(data||[]).map(s => (
                <tr key={s.id}>
                  <td className="mono small" style={{color:'var(--muted)'}}>{s.codigo||`SV-${s.id}`}</td>
                  <td style={{fontSize:13}}>{s.tipo}</td>
                  <td style={{fontSize:13}}>{s.cliente_real || s.cliente_nombre || '—'}</td>
                  <td className="small">{s.tecnico_nombre}</td>
                  <td className="mono small">{s.fecha?.slice(0,16)}</td>
                  <td className="small">{s.duracion}</td>
                  <td><span className={`chip ${estadoColor(s.estado)}`}>{s.estado}</span></td>
                  <td className="mono small" style={{textAlign:'right'}}>{s.precio>0?money(s.precio):<span style={{color:'var(--green)'}}>Gratuito</span>}</td>
                  <td>
                    <div className="row" style={{gap:4,justifyContent:'flex-end'}}>
                      {s.estado==='Programado' && <button className="btn ghost" style={{fontSize:11,height:26,padding:'0 8px'}} onClick={()=>completar(s.id)}>Completar</button>}
                      <button className="top-btn" style={{height:26,minWidth:26,padding:0}} onClick={()=>openEdit(s)}><Icon.edit size={12}/></button>
                    </div>
                  </td>
                </tr>
              ))}
              {!data?.length && <tr><td colSpan="9" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin servicios</td></tr>}
            </tbody>
          </table>
        )}
      </div>

      <Modal open={addOpen} onClose={()=>{setAddOpen(false);setEditItem(null);}} title={editItem?'Editar servicio':'Agendar servicio'} sub="Programa una visita, montaje, asesoría o charla" width={560}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Tipo de servicio</label>
            <select className="input" value={form.tipo} onChange={e=>setForm({...form,tipo:e.target.value})}>
              {['Mantenimiento acuario','Montaje aquascape','Asesoría in-situ','Asesoría piscícola','Asesoría institución educativa','Charla educativa'].map(t=><option key={t}>{t}</option>)}
            </select>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Cliente / Institución</label>
            <select className="input" value={form.cliente_id||''} onChange={e=>setForm({...form,cliente_id:e.target.value,cliente_nombre:(clientes||[]).find(c=>c.id==e.target.value)?.nombre||form.cliente_nombre})}>
              <option value="">— escribir nombre libre —</option>
              {(clientes||[]).map(c=><option key={c.id} value={c.id}>{c.nombre}</option>)}
            </select>
          </div>
          {!form.cliente_id && (
            <div className="field" style={{gridColumn:'1/-1'}}><label>Nombre institución (libre)</label>
              <input className="input" value={form.cliente_nombre} onChange={e=>setForm({...form,cliente_nombre:e.target.value})} placeholder="Ej. Col. San Carlos"/>
            </div>
          )}
          <div className="field"><label>Fecha y hora</label>
            <input className="input" type="datetime-local" value={form.fecha} onChange={e=>setForm({...form,fecha:e.target.value})}/>
          </div>
          <div className="field"><label>Duración</label>
            <select className="input" value={form.duracion} onChange={e=>setForm({...form,duracion:e.target.value})}>
              {['1h','2h','3h','4h','6h','1 día'].map(d=><option key={d}>{d}</option>)}
            </select>
          </div>
          <div className="field"><label>Técnico</label>
            <select className="input" value={form.tecnico_nombre} onChange={e=>setForm({...form,tecnico_nombre:e.target.value})}>
              {['V. Acevedo','Carlos Salazar','María Restrepo'].map(t=><option key={t}>{t}</option>)}
            </select>
          </div>
          <div className="field"><label>Precio (COP)</label>
            <input className="input mono" type="number" min="0" value={form.precio} onChange={e=>setForm({...form,precio:+e.target.value})}/>
          </div>
          {form.tipo==='Charla educativa' && (
            <div style={{gridColumn:'1/-1',padding:'8px 10px',borderRadius:8,background:'rgba(34,197,94,.08)',border:'1px solid rgba(34,197,94,.2)',fontSize:12,color:'var(--green)'}}>
              Alianza Fundación MANOS DEL RÍO — sin costo para la institución
            </div>
          )}
          <div className="field" style={{gridColumn:'1/-1'}}><label>Notas</label>
            <textarea className="input" rows="2" style={{height:'auto',padding:'8px 11px'}} value={form.notas} onChange={e=>setForm({...form,notas:e.target.value})}/>
          </div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>{setAddOpen(false);setEditItem(null);}}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> {editItem?'Guardar':'Confirmar agendamiento'}</button>
        </div>
      </Modal>
    </div>
  );
}

// ── CLIENTES ──────────────────────────────────────────────────────────────────
function ClientesPage() {
  const toast = useToast();
  const [q, setQ] = useState('');
  const [addOpen, setAddOpen] = useState(false);
  const [form, setForm] = useState({ nombre:'', email:'', telefono:'', documento:'', tipo_doc:'CC', ciudad:'', notas:'' });
  const { data, loading, reload } = useAPI('/clientes' + (q ? `?q=${q}` : ''), [q]);
  const nivelColor = n => n==='Black Reef Elite'?'violet':n==='Ocean'?'blue':n==='Aqua'?'aqua':'amber';

  const save = async () => {
    try { await window.api.post('/clientes', form); toast('Cliente registrado'); setAddOpen(false); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Clientes</h1><p>{data?.length||0} clientes registrados</p></div>
        <div className="page-actions">
          <button className="btn primary" onClick={()=>setAddOpen(true)}><Icon.plus size={14}/> Nuevo cliente</button>
        </div>
      </div>

      <div className="search" style={{width:'100%',maxWidth:400,marginBottom:12}}>
        <Icon.search size={14}/><input placeholder="Buscar por nombre, email o documento…" value={q} onChange={e=>setQ(e.target.value)}/>
      </div>

      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Cliente</th><th>Teléfono</th><th>Ciudad</th><th>Nivel</th><th style={{textAlign:'right'}}>Puntos</th><th>Registrado</th></tr></thead>
            <tbody>
              {(data||[]).map(c => (
                <tr key={c.id}>
                  <td>
                    <div className="row" style={{gap:10}}>
                      <div className="avatar" style={{width:30,height:30,fontSize:11}}>
                        {c.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}
                      </div>
                      <div><div style={{fontSize:13}}>{c.nombre}</div><div className="small">{c.email}</div></div>
                    </div>
                  </td>
                  <td className="small">{c.telefono||'—'}</td>
                  <td className="small">{c.ciudad||'—'}</td>
                  <td><span className={`chip ${nivelColor(c.nivel_fidelizacion)}`}>{c.nivel_fidelizacion}</span></td>
                  <td className="mono" style={{textAlign:'right'}}>{c.puntos?.toLocaleString('es-CO')}</td>
                  <td className="small">{c.created_at?.slice(0,10)}</td>
                </tr>
              ))}
              {!data?.length && <tr><td colSpan="6" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin clientes</td></tr>}
            </tbody>
          </table>
        )}
      </div>

      <Modal open={addOpen} onClose={()=>setAddOpen(false)} title="Nuevo cliente">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Nombre completo</label>
            <input className="input" value={form.nombre} onChange={e=>setForm({...form,nombre:e.target.value})} placeholder="Nombre completo"/>
          </div>
          <div className="field"><label>Email</label>
            <input className="input" type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})}/>
          </div>
          <div className="field"><label>Teléfono</label>
            <input className="input" value={form.telefono} onChange={e=>setForm({...form,telefono:e.target.value})}/>
          </div>
          <div className="field"><label>Documento</label>
            <input className="input" value={form.documento} onChange={e=>setForm({...form,documento:e.target.value})}/>
          </div>
          <div className="field"><label>Ciudad</label>
            <input className="input" value={form.ciudad} onChange={e=>setForm({...form,ciudad:e.target.value})}/>
          </div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setAddOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> Registrar cliente</button>
        </div>
      </Modal>
    </div>
  );
}

// ── PÉRDIDAS ──────────────────────────────────────────────────────────────────
// ── PÉRDIDAS (wizard guiado con búsqueda automática) ─────────────────────────
function PerdidasPage() {
  const toast  = useToast();
  const { data, loading, reload } = useAPI('/perdidas');
  const { data: kpis, reload: reloadKpis } = useAPI('/perdidas/kpis');
  const [wizOpen, setWizOpen] = useState(false);
  const [step, setStep]       = useState(1); // 1=tipo, 2=buscar item, 3=detalles, 4=confirmar
  const [filtroTipo, setFiltroTipo] = useState('');
  const [busqQ, setBusqQ]     = useState('');
  const [busqRes, setBusqRes] = useState({ animales:[], productos:[] });
  const [busqLoad, setBusqLoad] = useState(false);
  const [form, setForm] = useState({
    tipo:'Pez muerto', causa:'Enfermedad', cantidad:1,
    item_tipo:null, item_id:null, producto:'', proveedor_id:'', proveedor_nombre:'',
    ubicacion:'', costo:0, notas:'', stock_antes:null
  });

  // Buscar item en inventario (debounced)
  useEffect(() => {
    if (!busqQ || busqQ.length < 2) { setBusqRes({animales:[],productos:[]}); return; }
    const t = setTimeout(async () => {
      setBusqLoad(true);
      try {
        const r = await window.api.get(`/perdidas/buscar-item?q=${encodeURIComponent(busqQ)}`);
        setBusqRes(r);
      } finally { setBusqLoad(false); }
    }, 300);
    return () => clearTimeout(t);
  }, [busqQ]);

  const resetWiz = () => {
    setStep(1); setBusqQ(''); setBusqRes({animales:[],productos:[]});
    setForm({ tipo:'Pez muerto', causa:'Enfermedad', cantidad:1,
      item_tipo:null, item_id:null, producto:'', proveedor_id:'', proveedor_nombre:'',
      ubicacion:'', costo:0, notas:'', stock_antes:null });
  };

  const selItem = (item, tipo_item) => {
    setForm(f => ({
      ...f,
      item_tipo:  tipo_item,
      item_id:    item.id,
      producto:   tipo_item === 'animal' ? item.especie : item.nombre,
      ubicacion:  item.ubicacion || f.ubicacion,
      costo:      item.costo || f.costo,
      proveedor_id:   item.proveedor_id || '',
      proveedor_nombre: item.proveedor_nombre || '',
      stock_antes: item.stock,
    }));
    setStep(3);
  };

  const save = async () => {
    try {
      const res = await window.api.post('/perdidas', form);
      const msg = res.deduccion_aplicada
        ? `Pérdida registrada · Stock: ${res.stock_antes}→${res.stock_despues}`
        : 'Pérdida registrada';
      toast(msg, 'warn');
      setWizOpen(false); resetWiz(); reload(); reloadKpis();
    } catch(e) { toast(e.message, 'error'); }
  };

  const TIPO_COLOR = { 'Pez muerto':'red','Planta muerta':'green','Daño producto':'amber','Vencimiento':'violet','Accidente':'amber','Animal muerto':'red' };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Pérdidas</h1><p>Mortalidad, daños y vencimientos · deducción automática de inventario</p></div>
        <div className="page-actions">
          <button className="btn" onClick={() => { reload(); reloadKpis(); }}><Icon.refresh size={14}/></button>
          <button className="btn primary" onClick={() => { resetWiz(); setWizOpen(true); }}>
            <Icon.plus size={14}/> Registrar pérdida
          </button>
        </div>
      </div>

      {kpis && (
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:14,marginBottom:14}}>
          <div className="kpi"><div className="kpi-label">Total mes</div><div className="kpi-val num" style={{color:'var(--red)'}}>{money(kpis.total)}</div><div className="small mt-2">{kpis.count} eventos</div></div>
          <div className="kpi"><div className="kpi-label">Mortalidad animales</div><div className="kpi-val num">{money(kpis.mortalidad)}</div></div>
          <div className="kpi"><div className="kpi-label">Daños</div><div className="kpi-val num">{money(kpis.danos)}</div></div>
          <div className="kpi"><div className="kpi-label">Vencimientos</div><div className="kpi-val num">{money(kpis.vencimientos)}</div></div>
          <div className="kpi"><div className="kpi-label">Otros</div><div className="kpi-val num">{money(kpis.total - kpis.mortalidad - kpis.danos - kpis.vencimientos)}</div></div>
        </div>
      )}

      {kpis && (
        <div className="grid-2" style={{marginBottom:14}}>
          <div className="card">
            <div className="card-head"><div><h3>Tendencia de pérdidas</h3><p>Últimos 6 meses</p></div></div>
            <div style={{display:'flex',alignItems:'flex-end',gap:6,height:90}}>
              {(kpis.trend||[]).map((d,i) => {
                const max = Math.max(...(kpis.trend||[]).map(x=>x.v), 1);
                const h = Math.max(4, (d.v/max)*80);
                return (
                  <div key={i} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:3}}>
                    <div style={{fontSize:9,color:'var(--muted)',fontFamily:'var(--mono)'}}>{moneyK(d.v)}</div>
                    <div style={{width:'100%',height:h,background:'rgba(239,68,68,.5)',borderRadius:'3px 3px 0 0'}}/>
                    <div style={{fontSize:9,color:'var(--muted)'}}>{d.x}</div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="card">
            <div className="card-head"><div><h3>Por proveedor</h3><p>Pérdidas asociadas</p></div></div>
            <div className="stack" style={{gap:4}}>
              {(kpis.por_proveedor||[]).length === 0
                ? <div className="small center" style={{padding:20}}>Sin datos</div>
                : (kpis.por_proveedor||[]).map((p,i) => (
                  <div key={i} className="between" style={{padding:'4px 0',borderBottom:'1px solid var(--border)'}}>
                    <span style={{fontSize:12.5}}>{p.proveedor}</span>
                    <div className="row" style={{gap:8}}>
                      <span className="chip red">{p.n} casos</span>
                      <span className="mono small" style={{color:'var(--red)'}}>{money(p.total)}</span>
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </div>
      )}

      {/* Filtros */}
      <div className="row" style={{gap:8,marginBottom:10}}>
        <div className="seg">
          {['','Pez muerto','Planta muerta','Daño producto','Vencimiento','Accidente'].map(t => (
            <button key={t} className={filtroTipo===t?'active':''} onClick={()=>setFiltroTipo(t)}>{t||'Todos'}</button>
          ))}
        </div>
      </div>

      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Código</th><th>Tipo</th><th>Producto / Especie</th><th>Proveedor</th><th>Ubicación</th><th>Causa</th><th>Responsable</th><th>Fecha</th><th style={{textAlign:'right'}}>Costo</th></tr></thead>
            <tbody>
              {(data||[]).filter(p => !filtroTipo || p.tipo === filtroTipo).map(p => (
                <tr key={p.id}>
                  <td className="mono small" style={{color:'var(--muted)'}}>{p.codigo||`PD-${p.id}`}</td>
                  <td><span className={`chip ${TIPO_COLOR[p.tipo]||'amber'}`}>{p.tipo}</span></td>
                  <td style={{fontSize:13}}>{p.producto}</td>
                  <td className="small">{p.proveedor_nombre||'—'}</td>
                  <td className="small">{p.ubicacion||'—'}</td>
                  <td className="small">{p.causa||'—'}</td>
                  <td className="small">{p.responsable_nombre||'—'}</td>
                  <td className="mono small">{p.created_at?.slice(0,10)}</td>
                  <td className="mono" style={{textAlign:'right',color:'var(--red)'}}>-{money(p.costo)}</td>
                </tr>
              ))}
              {!data?.length && <tr><td colSpan="9" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin pérdidas registradas</td></tr>}
            </tbody>
          </table>
        )}
      </div>

      {/* WIZARD MODAL */}
      <Modal open={wizOpen} onClose={() => { setWizOpen(false); resetWiz(); }}
        title={`Registrar pérdida · Paso ${step} de 4`}
        sub={['','Selecciona el tipo','Busca el animal o producto afectado','Completa los detalles','Confirma y registra'][step]}
        width={600}>

        {/* Indicador de pasos */}
        <div className="row" style={{gap:6,marginBottom:18}}>
          {[1,2,3,4].map(s => (
            <div key={s} style={{flex:1,height:4,borderRadius:99,
              background: s <= step ? 'var(--aqua)' : 'var(--border)',
              transition:'background .2s'}}/>
          ))}
        </div>

        {/* PASO 1: Tipo y causa */}
        {step === 1 && (
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <div className="field" style={{gridColumn:'1/-1'}}><label>¿Qué tipo de pérdida?</label>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8,marginTop:4}}>
                {[
                  {id:'Pez muerto',    icon:'fish',  col:'#EF4444'},
                  {id:'Planta muerta', icon:'plant', col:'#22C55E'},
                  {id:'Animal muerto', icon:'hamster',col:'#F59E0B'},
                  {id:'Daño producto', icon:'box',   col:'#7C83FD'},
                  {id:'Vencimiento',   icon:'alert', col:'#F59E0B'},
                  {id:'Accidente',     icon:'death', col:'#94A3B8'},
                ].map(t => {
                  const Ico = Icon[t.icon] || Icon.alert;
                  const sel = form.tipo === t.id;
                  return (
                    <button key={t.id} onClick={() => setForm(f=>({...f,tipo:t.id}))}
                      style={{padding:'12px 8px',borderRadius:10,border:`1px solid ${sel?t.col+'60':'var(--border)'}`,
                        background: sel ? t.col+'14' : 'transparent',
                        color: sel ? t.col : 'var(--muted)',cursor:'pointer',
                        display:'flex',flexDirection:'column',alignItems:'center',gap:6}}>
                      <Ico size={18}/>
                      <span style={{fontSize:11,textAlign:'center',lineHeight:1.2}}>{t.id}</span>
                    </button>
                  );
                })}
              </div>
            </div>
            <div className="field"><label>Causa principal</label>
              <select className="input" value={form.causa} onChange={e=>setForm(f=>({...f,causa:e.target.value}))}>
                {['Enfermedad','Parámetros agua','Estrés','Accidente','Vencimiento','Daño transporte','Manejo inadecuado','Causa desconocida'].map(c=><option key={c}>{c}</option>)}
              </select>
            </div>
            <div className="field"><label>Cantidad afectada</label>
              <input className="input mono" type="number" min="1" value={form.cantidad}
                onChange={e=>setForm(f=>({...f,cantidad:+e.target.value}))}/>
            </div>
            <div className="row" style={{gap:8,marginTop:8,gridColumn:'1/-1'}}>
              <button className="btn" style={{flex:1}} onClick={() => setWizOpen(false)}>Cancelar</button>
              <button className="btn primary" style={{flex:2}} onClick={() => setStep(2)}>
                Siguiente <Icon.arrowRight size={13}/>
              </button>
            </div>
          </div>
        )}

        {/* PASO 2: Buscar item */}
        {step === 2 && (
          <div>
            <div className="search" style={{width:'100%',maxWidth:'none',marginBottom:12}}>
              <Icon.search size={14}/>
              <input placeholder="Escribe el nombre del animal o producto…" autoFocus
                value={busqQ} onChange={e => setBusqQ(e.target.value)}/>
              {busqLoad && <span className="loading-spin" style={{width:14,height:14}}/>}
            </div>

            {busqQ.length >= 2 && (
              <div style={{maxHeight:320,overflowY:'auto'}}>
                {busqRes.animales.length > 0 && (
                  <>
                    <div style={{fontSize:11,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.06em',padding:'4px 2px 6px'}}>Animales</div>
                    {busqRes.animales.map(a => (
                      <div key={a.id} className="row between"
                        onClick={() => selItem(a, 'animal')}
                        style={{padding:'10px 12px',borderRadius:10,border:'1px solid var(--border)',marginBottom:6,cursor:'pointer',background:'var(--bg-card-2)'}}
                        onMouseOver={e=>e.currentTarget.style.borderColor='var(--aqua)'}
                        onMouseOut={e=>e.currentTarget.style.borderColor='var(--border)'}>
                        <div className="row" style={{gap:10}}>
                          <div className="thumb fish" style={{width:32,height:32}}/>
                          <div>
                            <div style={{fontSize:13,fontWeight:500}}>{a.especie}</div>
                            <div className="small">{a.grupo} · {a.ubicacion||'Sin ubicación'} · Prov: {a.proveedor_nombre||'—'}</div>
                          </div>
                        </div>
                        <div style={{textAlign:'right'}}>
                          <div className="mono" style={{fontSize:13}}>{a.stock} en stock</div>
                          <div className="small">{money(a.costo)} / u</div>
                        </div>
                      </div>
                    ))}
                  </>
                )}
                {busqRes.productos.length > 0 && (
                  <>
                    <div style={{fontSize:11,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.06em',padding:'4px 2px 6px',marginTop:4}}>Productos</div>
                    {busqRes.productos.map(p => (
                      <div key={p.id} className="row between"
                        onClick={() => selItem(p, 'producto')}
                        style={{padding:'10px 12px',borderRadius:10,border:'1px solid var(--border)',marginBottom:6,cursor:'pointer',background:'var(--bg-card-2)'}}
                        onMouseOver={e=>e.currentTarget.style.borderColor='var(--aqua)'}
                        onMouseOut={e=>e.currentTarget.style.borderColor='var(--border)'}>
                        <div className="row" style={{gap:10}}>
                          <div className="thumb acc" style={{width:32,height:32}}/>
                          <div>
                            <div style={{fontSize:13,fontWeight:500}}>{p.nombre}</div>
                            <div className="small">{p.categoria} · Prov: {p.proveedor_nombre||'—'}</div>
                          </div>
                        </div>
                        <div style={{textAlign:'right'}}>
                          <div className="mono" style={{fontSize:13}}>{p.stock} en stock</div>
                          <div className="small">{money(p.costo)} / u</div>
                        </div>
                      </div>
                    ))}
                  </>
                )}
                {!busqRes.animales.length && !busqRes.productos.length && !busqLoad && (
                  <div className="small center" style={{padding:24}}>Sin resultados</div>
                )}
              </div>
            )}

            <div style={{marginTop:12,padding:'10px 12px',borderRadius:10,background:'rgba(245,158,11,.06)',border:'1px solid rgba(245,158,11,.2)',fontSize:12,color:'var(--amber)'}}>
              Si el item no está en inventario, escríbelo manualmente:
              <input className="input" style={{marginTop:8,height:32}} placeholder="Nombre libre…"
                value={form.producto} onChange={e => setForm(f=>({...f,producto:e.target.value,item_tipo:null,item_id:null}))}/>
            </div>

            <div className="row" style={{gap:8,marginTop:14}}>
              <button className="btn" style={{flex:1}} onClick={() => setStep(1)}><Icon.chevron size={13} style={{transform:'rotate(180deg)'}}/> Anterior</button>
              <button className="btn primary" style={{flex:2}} disabled={!form.producto && !form.item_id} onClick={() => setStep(3)}>
                Siguiente <Icon.arrowRight size={13}/>
              </button>
            </div>
          </div>
        )}

        {/* PASO 3: Detalles */}
        {step === 3 && (
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            {/* Item seleccionado */}
            <div style={{gridColumn:'1/-1',padding:'10px 14px',borderRadius:10,background:'rgba(95,214,208,.06)',border:'1px solid rgba(95,214,208,.2)'}}>
              <div className="row between">
                <div><div style={{fontWeight:600}}>{form.producto}</div>
                  <div className="small">{form.item_tipo ? `${form.item_tipo} · ID: ${form.item_id}` : 'Item manual'} {form.stock_antes !== null ? `· Stock actual: ${form.stock_antes}` : ''}</div>
                </div>
                {form.proveedor_nombre && <span className="chip">{form.proveedor_nombre}</span>}
              </div>
            </div>

            {form.stock_antes !== null && (
              <div style={{gridColumn:'1/-1',padding:'8px 12px',borderRadius:8,background:'rgba(239,68,68,.06)',border:'1px solid rgba(239,68,68,.2)',fontSize:12}}>
                <Icon.alert size={12} style={{color:'var(--red)',marginRight:6}}/>
                Se deducirán <strong>{form.cantidad}</strong> unidad(es) del inventario.
                Stock: <strong>{form.stock_antes}</strong> → <strong>{Math.max(0, form.stock_antes - form.cantidad)}</strong>
              </div>
            )}

            <div className="field"><label>Ubicación</label>
              <input className="input" value={form.ubicacion} onChange={e=>setForm(f=>({...f,ubicacion:e.target.value}))} placeholder="Ej. Acuario 3 / Fila B"/>
            </div>
            <div className="field"><label>Costo unitario (COP)</label>
              <input className="input mono" type="number" min="0" value={form.costo} onChange={e=>setForm(f=>({...f,costo:+e.target.value}))}/>
            </div>
            <div className="field" style={{gridColumn:'1/-1'}}><label>Notas adicionales</label>
              <textarea className="input" rows="2" style={{height:'auto',padding:'8px 11px'}}
                value={form.notas} onChange={e=>setForm(f=>({...f,notas:e.target.value}))}
                placeholder="Síntomas, parámetros observados, foto, etc."/>
            </div>

            <div className="row" style={{gap:8,gridColumn:'1/-1'}}>
              <button className="btn" style={{flex:1}} onClick={() => setStep(2)}><Icon.chevron size={13} style={{transform:'rotate(180deg)'}}/> Anterior</button>
              <button className="btn primary" style={{flex:2}} onClick={() => setStep(4)}>
                Revisar y confirmar <Icon.arrowRight size={13}/>
              </button>
            </div>
          </div>
        )}

        {/* PASO 4: Confirmar */}
        {step === 4 && (
          <div>
            <div style={{borderRadius:12,border:'1px solid var(--border)',overflow:'hidden',marginBottom:14}}>
              {[
                ['Tipo', <span className={`chip ${TIPO_COLOR[form.tipo]||'amber'}`}>{form.tipo}</span>],
                ['Causa', form.causa],
                ['Producto / Especie', form.producto],
                ['Cantidad', form.cantidad],
                ['Ubicación', form.ubicacion||'—'],
                ['Proveedor', form.proveedor_nombre||'—'],
                ['Costo total', <span className="mono" style={{color:'var(--red)'}}>-{money(form.costo * form.cantidad)}</span>],
                form.stock_antes !== null && ['Deducción inventario', <span style={{color:'var(--amber)'}}>Stock {form.stock_antes} → {Math.max(0, form.stock_antes - form.cantidad)}</span>],
              ].filter(Boolean).map(([k,v],i,arr) => (
                <div key={k} className="between" style={{padding:'10px 14px',borderBottom: i<arr.length-1?'1px solid var(--border)':'0'}}>
                  <span className="small">{k}</span>
                  <span style={{fontSize:13}}>{v}</span>
                </div>
              ))}
            </div>
            <div className="row" style={{gap:8}}>
              <button className="btn" style={{flex:1}} onClick={() => setStep(3)}><Icon.chevron size={13} style={{transform:'rotate(180deg)'}}/> Anterior</button>
              <button className="btn danger" style={{flex:2}} onClick={save}>
                <Icon.death size={14}/> Confirmar y registrar pérdida
              </button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}

// ── PROVEEDORES ───────────────────────────────────────────────────────────────
function ProveedoresPage() {
  const toast = useToast();
  const { data, loading, reload } = useAPI('/proveedores');
  const [sel, setSel]       = useState(null);
  const [detalle, setDetalle] = useState(null);
  const [editOpen, setEditOpen] = useState(false);
  const [form, setForm]     = useState({ nombre:'', contacto:'', telefono:'', email:'', ciudad:'', calidad:5, tiempo_entrega:'', notas:'' });

  const cargarDetalle = async (p) => {
    setSel(p);
    try { setDetalle(await window.api.get(`/proveedores/${p.id}`)); }
    catch(e) { toast(e.message,'error'); }
  };

  const openEdit = (p, e) => {
    e.stopPropagation();
    setForm({ nombre:p.nombre, contacto:p.contacto||'', telefono:p.telefono||'', email:p.email||'', ciudad:p.ciudad||'', calidad:p.calidad||5, tiempo_entrega:p.tiempo_entrega||'', notas:p.notas||'' });
    setSel(p); setEditOpen(true);
  };

  const save = async () => {
    try {
      if (sel) { await window.api.put(`/proveedores/${sel.id}`, form); toast('Proveedor actualizado'); }
      else { await window.api.post('/proveedores', form); toast('Proveedor creado'); }
      setEditOpen(false); reload();
    } catch(e) { toast(e.message,'error'); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Proveedores</h1><p>{data?.length||0} proveedores · click en uno para ver su detalle completo</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
          <button className="btn primary" onClick={()=>{setSel(null);setForm({nombre:'',contacto:'',telefono:'',email:'',ciudad:'',calidad:5,tiempo_entrega:'',notas:''});setEditOpen(true);}}><Icon.plus size={14}/> Nuevo</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1.1fr',gap:14,alignItems:'flex-start'}}>
        {/* Lista */}
        <div className="card" style={{padding:0}}>
          {loading ? <Loading/> : (
            <table>
              <thead><tr><th>Proveedor</th><th>Ciudad</th><th>Calidad</th><th>Entrega</th><th>Pérdidas</th><th></th></tr></thead>
              <tbody>
                {(data||[]).map(p => (
                  <tr key={p.id} onClick={()=>cargarDetalle(p)} style={{cursor:'pointer',background:sel?.id===p.id?'rgba(95,214,208,.04)':''}}>
                    <td><div className="row" style={{gap:8}}>
                      <div className="avatar" style={{width:28,height:28,fontSize:11,background:`linear-gradient(135deg,hsl(${p.id*40} 60% 50%),hsl(${p.id*70} 60% 40%))`}}>{p.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
                      <div><div style={{fontSize:13}}>{p.nombre}</div><div className="small mono">{p.codigo}</div></div>
                    </div></td>
                    <td className="small">{p.ciudad||'—'}</td>
                    <td><div className="row" style={{gap:1}}>{[1,2,3,4,5].map(s=><Icon.star key={s} size={10} style={{color:s<=p.calidad?'var(--amber)':'rgba(148,163,184,.25)',fill:s<=p.calidad?'var(--amber)':'none'}}/>)}</div></td>
                    <td className="small">{p.tiempo_entrega||'—'}</td>
                    <td className="mono small" style={{color:'var(--red)'}}>{money(p.total_perdidas||0)}</td>
                    <td><button className="top-btn" style={{height:26,minWidth:26,padding:0}} onClick={e=>openEdit(p,e)}><Icon.edit size={12}/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>

        {/* Detalle */}
        {sel && detalle ? (
          <div className="stack">
            {/* Info principal */}
            <div className="card">
              <div className="between" style={{marginBottom:12}}>
                <div className="row" style={{gap:10}}>
                  <div className="avatar" style={{width:40,height:40,fontSize:14,background:`linear-gradient(135deg,hsl(${sel.id*40} 60% 50%),hsl(${sel.id*70} 60% 40%))`}}>{detalle.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
                  <div>
                    <div style={{fontWeight:600,fontSize:16}}>{detalle.nombre}</div>
                    <div className="small">{detalle.codigo} · {detalle.ciudad||'Sin ciudad'}</div>
                  </div>
                </div>
                <button className="top-btn" style={{height:28,padding:'0 8px'}} onClick={e=>openEdit(sel,{stopPropagation:()=>{}})}><Icon.edit size={13}/> Editar</button>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:6,fontSize:12.5}}>
                {[
                  ['Contacto', detalle.contacto||'—'],
                  ['Teléfono', detalle.telefono||'—'],
                  ['Email', detalle.email||'—'],
                  ['Tiempo entrega', detalle.tiempo_entrega||'—'],
                  ['Compras totales', detalle.total_compras||0],
                  ['Pérdidas asociadas', <span style={{color:'var(--red)'}}>{money(detalle.total_perdidas||0)}</span>],
                ].map(([k,v]) => (
                  <div key={k} className="between" style={{borderBottom:'1px solid var(--border)',padding:'5px 0'}}>
                    <span style={{color:'var(--muted)'}}>{k}</span><span>{v}</span>
                  </div>
                ))}
              </div>
              {detalle.notas && <div className="small" style={{marginTop:8,padding:'6px 8px',borderRadius:6,background:'var(--hover)'}}>{detalle.notas}</div>}
            </div>

            {/* Catálogo de productos asociados */}
            <div className="card">
              <div className="card-head"><div><h3>Catálogo de este proveedor</h3><p>Animales y productos que suministra</p></div></div>
              {detalle.catalogo?.length > 0 ? (
                <div style={{maxHeight:220,overflowY:'auto'}}>
                  <table>
                    <thead><tr><th>Nombre</th><th>Tipo</th><th style={{textAlign:'right'}}>Stock</th><th style={{textAlign:'right'}}>Precio</th></tr></thead>
                    <tbody>
                      {detalle.catalogo.map((item,i) => (
                        <tr key={i}>
                          <td style={{fontSize:12.5}}>{item.nombre}</td>
                          <td><span className={`chip ${item.tipo==='animal'?'aqua':'violet'}`}>{item.tipo}</span></td>
                          <td className="mono small" style={{textAlign:'right'}}>{item.stock}</td>
                          <td className="mono small" style={{textAlign:'right'}}>{money(item.precio)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : <div className="small center" style={{padding:16}}>Sin productos registrados</div>}
            </div>

            {/* Historial de compras */}
            <div className="card">
              <div className="card-head"><div><h3>Últimas órdenes de compra</h3></div></div>
              {detalle.compras?.length > 0 ? (
                <div style={{maxHeight:200,overflowY:'auto'}}>
                  <table>
                    <thead><tr><th>Número</th><th>Estado</th><th>Pago</th><th style={{textAlign:'right'}}>Total</th><th>Fecha</th></tr></thead>
                    <tbody>
                      {detalle.compras.map((c,i) => (
                        <tr key={i}>
                          <td className="mono small">{c.numero}</td>
                          <td><span className={`chip ${c.estado==='Recibida'?'green':c.estado==='Pendiente'?'amber':'blue'}`}>{c.estado}</span></td>
                          <td><span className={`chip ${c.estado_pago==='Pagada'?'green':'amber'}`}>{c.estado_pago}</span></td>
                          <td className="mono small" style={{textAlign:'right'}}>{money(c.total)}</td>
                          <td className="small">{c.created_at?.slice(0,10)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : <div className="small center" style={{padding:12}}>Sin órdenes</div>}
            </div>

            {/* Historial de pérdidas */}
            {detalle.perdidas?.length > 0 && (
              <div className="card">
                <div className="card-head"><div><h3>Pérdidas asociadas</h3></div></div>
                <div style={{maxHeight:180,overflowY:'auto'}}>
                  <table>
                    <thead><tr><th>Tipo</th><th>Producto</th><th>Causa</th><th style={{textAlign:'right'}}>Costo</th><th>Fecha</th></tr></thead>
                    <tbody>
                      {detalle.perdidas.map((p,i) => (
                        <tr key={i}>
                          <td><span className="chip red">{p.tipo}</span></td>
                          <td style={{fontSize:12.5}}>{p.producto}</td>
                          <td className="small">{p.causa||'—'}</td>
                          <td className="mono small" style={{textAlign:'right',color:'var(--red)'}}>{money(p.costo)}</td>
                          <td className="small">{p.created_at?.slice(0,10)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </div>
        ) : (
          <div className="card center" style={{padding:60,flexDirection:'column',gap:10,color:'var(--muted)'}}>
            <Icon.truck size={28}/>
            <div style={{fontSize:13}}>Selecciona un proveedor para ver su información detallada</div>
          </div>
        )}
      </div>

      <Modal open={editOpen} onClose={()=>setEditOpen(false)} title={sel?.nombre?`Editar: ${sel.nombre}`:'Nuevo proveedor'} width={520}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Nombre empresa</label>
            <input className="input" value={form.nombre} onChange={e=>setForm({...form,nombre:e.target.value})}/>
          </div>
          <div className="field"><label>Contacto</label><input className="input" value={form.contacto} onChange={e=>setForm({...form,contacto:e.target.value})}/></div>
          <div className="field"><label>Teléfono</label><input className="input" value={form.telefono} onChange={e=>setForm({...form,telefono:e.target.value})}/></div>
          <div className="field"><label>Email</label><input className="input" value={form.email} onChange={e=>setForm({...form,email:e.target.value})}/></div>
          <div className="field"><label>Ciudad</label><input className="input" value={form.ciudad} onChange={e=>setForm({...form,ciudad:e.target.value})}/></div>
          <div className="field"><label>Calidad (1-5)</label><input className="input mono" type="number" min="1" max="5" value={form.calidad} onChange={e=>setForm({...form,calidad:+e.target.value})}/></div>
          <div className="field"><label>Tiempo entrega</label><input className="input" value={form.tiempo_entrega} onChange={e=>setForm({...form,tiempo_entrega:e.target.value})} placeholder="Ej. 3 días"/></div>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Notas</label><textarea className="input" rows="2" style={{height:'auto',padding:'8px 11px'}} value={form.notas} onChange={e=>setForm({...form,notas:e.target.value})}/></div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setEditOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> Guardar</button>
        </div>
      </Modal>
    </div>
  );
}

// ── GASTOS ────────────────────────────────────────────────────────────────────
function GastosPage() {
  const toast = useToast();
  const { data, loading, reload } = useAPI('/gastos');
  const [addOpen, setAddOpen] = useState(false);
  const [sel, setSel]         = useState(null);
  const [form, setForm]       = useState({ categoria:'Electricidad', descripcion:'', monto:0 });
  const gastos = data?.gastos || [];
  const cats   = data?.categorias || [];

  const CAT_COLORS = {Electricidad:'#F59E0B',Agua:'#4A90E2',Mantenimiento:'#5FD6D0',Medicamentos:'#22C55E',Transporte:'#7C83FD',Empleados:'#5FD6D0',Equipos:'#7C83FD',Emergencias:'#EF4444',Otros:'#94A3B8'};

  const save = async () => {
    try { await window.api.post('/gastos', form); toast('Gasto registrado'); setAddOpen(false); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Gastos operativos</h1><p>Total mes: {money(data?.total||0)} · click en un gasto para ver detalle</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
          <button className="btn primary" onClick={()=>{setSel(null);setAddOpen(true);}}><Icon.plus size={14}/> Registrar gasto</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 360px',gap:14,alignItems:'flex-start'}}>
        <div className="card" style={{padding:0}}>
          {loading ? <Loading/> : (
            <table>
              <thead><tr><th>Categoría</th><th>Descripción</th><th>Responsable</th><th style={{textAlign:'right'}}>Monto</th><th>Fecha</th></tr></thead>
              <tbody>
                {gastos.map((g,i) => (
                  <tr key={i} onClick={()=>setSel(sel?.id===g.id?null:g)} style={{cursor:'pointer',background:sel?.id===g.id?'rgba(95,214,208,.04)':''}}>
                    <td>
                      <div className="row" style={{gap:7}}>
                        <div style={{width:10,height:10,borderRadius:3,background:CAT_COLORS[g.categoria]||'#94A3B8',flexShrink:0}}/>
                        <span className="chip">{g.categoria}</span>
                      </div>
                    </td>
                    <td style={{fontSize:13}}>{g.descripcion||'—'}</td>
                    <td className="small">{g.responsable_nombre||'—'}</td>
                    <td className="mono" style={{textAlign:'right',fontWeight:600}}>{money(g.monto)}</td>
                    <td className="small">{g.created_at?.slice(0,10)}</td>
                  </tr>
                ))}
                {!gastos.length && <tr><td colSpan="5" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin gastos este mes</td></tr>}
              </tbody>
            </table>
          )}
        </div>

        <div className="stack">
          {/* Detalle del gasto seleccionado */}
          {sel ? (
            <div className="card">
              <div className="between" style={{marginBottom:12}}>
                <h3 style={{margin:0}}>Detalle del gasto</h3>
                <button className="top-btn" style={{height:26,minWidth:26,padding:0}} onClick={()=>setSel(null)}><Icon.x size={13}/></button>
              </div>
              <div style={{padding:'10px 12px',borderRadius:10,background:`${CAT_COLORS[sel.categoria]||'#94A3B8'}14`,border:`1px solid ${CAT_COLORS[sel.categoria]||'#94A3B8'}40`,marginBottom:12}}>
                <div style={{fontWeight:600,fontSize:15}}>{money(sel.monto)}</div>
                <div className="small">{sel.categoria}</div>
              </div>
              {[
                ['Descripción', sel.descripcion||'Sin descripción'],
                ['Responsable', sel.responsable_nombre||'—'],
                ['Fecha', sel.created_at?.slice(0,16)||'—'],
                ['ID interno', `GS-${sel.id}`],
              ].map(([k,v]) => (
                <div key={k} className="between" style={{padding:'7px 0',borderBottom:'1px solid var(--border)'}}>
                  <span className="small">{k}</span>
                  <span style={{fontSize:13}}>{v}</span>
                </div>
              ))}
            </div>
          ) : null}

          {/* Resumen por categoría */}
          <div className="card">
            <div className="card-head"><div><h3>Por categoría</h3><p>Mes actual</p></div></div>
            {cats.length === 0 ? <div className="small center" style={{padding:16}}>Sin datos</div> : cats.map((c,i) => {
              const total = data?.total || 1;
              const pct = Math.round(c.total/total*100);
              const col = CAT_COLORS[c.categoria]||'#94A3B8';
              return (
                <div key={i} style={{marginBottom:10}}>
                  <div className="between" style={{marginBottom:4}}>
                    <div className="row" style={{gap:6}}>
                      <div style={{width:8,height:8,borderRadius:2,background:col,flexShrink:0}}/>
                      <span style={{fontSize:12.5}}>{c.categoria}</span>
                    </div>
                    <div className="row" style={{gap:8}}>
                      <span className="small">{pct}%</span>
                      <span className="mono" style={{fontSize:12}}>{money(c.total)}</span>
                    </div>
                  </div>
                  <div className="progress" style={{height:5}}>
                    <span style={{width:`${pct}%`,background:col}}/>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <Modal open={addOpen} onClose={()=>setAddOpen(false)} title="Registrar gasto operativo">
        <div className="field"><label>Categoría</label>
          <select className="input" value={form.categoria} onChange={e=>setForm({...form,categoria:e.target.value})}>
            {['Electricidad','Agua','Mantenimiento','Medicamentos','Transporte','Empleados','Equipos','Emergencias','Otros'].map(c=><option key={c}>{c}</option>)}
          </select>
        </div>
        <div className="field" style={{marginTop:10}}><label>Descripción</label>
          <input className="input" value={form.descripcion} onChange={e=>setForm({...form,descripcion:e.target.value})} placeholder="Detalle del gasto"/>
        </div>
        <div className="field" style={{marginTop:10}}><label>Monto (COP)</label>
          <input className="input mono" type="number" min="0" value={form.monto} onChange={e=>setForm({...form,monto:+e.target.value})}/>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setAddOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> Registrar gasto</button>
        </div>
      </Modal>
    </div>
  );
}

// ── RESERVAS ──────────────────────────────────────────────────────────────────
function ReservasPage() {
  const toast = useToast();
  const { data, loading, reload } = useAPI('/reservas');
  const { data: clientes } = useAPI('/clientes');
  const [addOpen, setAddOpen] = useState(false);
  const [form, setForm] = useState({ cliente_id:'', producto:'', anticipo:0, total:0, vence:'' });

  const estadoColor = e => e==='Confirmada'?'green':e==='Vencida'?'red':'amber';

  const cambiarEstado = async (id, estado) => {
    try { await window.api.put(`/reservas/${id}/estado`, { estado }); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  const save = async () => {
    try { await window.api.post('/reservas', form); toast('Reserva creada'); setAddOpen(false); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Reservas</h1><p>Stock bloqueado automáticamente</p></div>
        <div className="page-actions">
          <button className="btn primary" onClick={()=>setAddOpen(true)}><Icon.plus size={14}/> Nueva reserva</button>
        </div>
      </div>
      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Código</th><th>Cliente</th><th>Producto</th><th>Anticipo</th><th>Total</th><th>Vence</th><th>Estado</th><th></th></tr></thead>
            <tbody>
              {(data||[]).map(r => (
                <tr key={r.id}>
                  <td className="mono small">{r.codigo||`RV-${r.id}`}</td>
                  <td style={{fontSize:13}}>{r.cliente_nombre||'—'}</td>
                  <td style={{fontSize:13}}>{r.producto}</td>
                  <td className="mono small">{money(r.anticipo)}</td>
                  <td className="mono">{money(r.total)}</td>
                  <td className="small">{r.vence?.slice(0,16)||'—'}</td>
                  <td><span className={`chip ${estadoColor(r.estado)}`}>{r.estado}</span></td>
                  <td>
                    <div className="row" style={{gap:4,justifyContent:'flex-end'}}>
                      {r.estado !== 'Confirmada' && <button className="btn ghost" style={{fontSize:11,height:26,padding:'0 8px'}} onClick={()=>cambiarEstado(r.id,'Confirmada')}>Confirmar</button>}
                      <button className="btn ghost" style={{fontSize:11,height:26,padding:'0 8px',color:'var(--red)'}} onClick={()=>cambiarEstado(r.id,'Cancelada')}>Cancelar</button>
                    </div>
                  </td>
                </tr>
              ))}
              {!data?.length && <tr><td colSpan="8" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin reservas</td></tr>}
            </tbody>
          </table>
        )}
      </div>

      <Modal open={addOpen} onClose={()=>setAddOpen(false)} title="Nueva reserva">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Cliente</label>
            <select className="input" value={form.cliente_id} onChange={e=>setForm({...form,cliente_id:e.target.value})}>
              <option value="">— selecciona —</option>
              {(clientes||[]).map(c=><option key={c.id} value={c.id}>{c.nombre}</option>)}
            </select>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Producto / Animal</label>
            <input className="input" value={form.producto} onChange={e=>setForm({...form,producto:e.target.value})} placeholder="Ej. Disco Blue Diamond × 2"/>
          </div>
          <div className="field"><label>Anticipo (COP)</label>
            <input className="input mono" type="number" min="0" value={form.anticipo} onChange={e=>setForm({...form,anticipo:+e.target.value})}/>
          </div>
          <div className="field"><label>Total (COP)</label>
            <input className="input mono" type="number" min="0" value={form.total} onChange={e=>setForm({...form,total:+e.target.value})}/>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Fecha límite</label>
            <input className="input" type="datetime-local" value={form.vence} onChange={e=>setForm({...form,vence:e.target.value})}/>
          </div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setAddOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> Crear reserva</button>
        </div>
      </Modal>
    </div>
  );
}

// ── LOGS ──────────────────────────────────────────────────────────────────────
function LogsPage() {
  const [sev, setSev] = useState('');
  const [q, setQ]     = useState('');
  const path = '/logs?' + new URLSearchParams({ ...(sev&&{sev}), ...(q&&{q}) }).toString();
  const { data, loading, reload } = useAPI(path, [sev, q]);

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Logs del sistema</h1><p>Auditoría completa de todas las acciones</p></div>
        <div className="page-actions"><button className="btn" onClick={reload}><Icon.refresh size={14}/> Actualizar</button></div>
      </div>
      <div className="row" style={{gap:8,marginBottom:12}}>
        <div className="search" style={{flex:1,maxWidth:360,width:'auto'}}>
          <Icon.search size={14}/><input placeholder="Buscar…" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
        <div className="seg">
          {['','info','warn','error'].map(s=>(
            <button key={s} className={sev===s?'active':''} onClick={()=>setSev(s)}>{s||'Todos'}</button>
          ))}
        </div>
      </div>
      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Fecha/Hora</th><th>Usuario</th><th>Rol</th><th>Acción</th><th>Referencia</th><th>Severidad</th></tr></thead>
            <tbody>
              {(data||[]).map((l,i) => (
                <tr key={i}>
                  <td className="mono small">{l.created_at?.slice(0,19)}</td>
                  <td style={{fontSize:13}}>{l.usuario_nombre||'Sistema'}</td>
                  <td className="small">{l.rol||'—'}</td>
                  <td style={{fontSize:13}}>{l.accion}</td>
                  <td className="mono small" style={{color:'var(--muted)'}}>{l.referencia||'—'}</td>
                  <td><span className={`chip ${l.severidad==='error'?'red':l.severidad==='warn'?'amber':''}`}><span className="dot"/>{l.severidad?.toUpperCase()}</span></td>
                </tr>
              ))}
              {!data?.length && <tr><td colSpan="6" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin logs</td></tr>}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

// ── USUARIOS ──────────────────────────────────────────────────────────────────
function UsuariosPage() {
  const toast = useToast();
  const { user } = useAuth();
  const { data, loading, reload } = useAPI('/usuarios');
  const [addOpen, setAddOpen] = useState(false);
  const [form, setForm] = useState({ nombre:'', email:'', password:'', rol:'Cajero', sede:'Tienda principal' });

  const save = async () => {
    try { await window.api.post('/usuarios', form); toast('Usuario creado · invitación enviada'); setAddOpen(false); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  const ROLE_COLOR = { Administrador:'violet', Gerente:'blue', Cajero:'aqua', Inventario:'green', 'Veterinario/Acuarista':'aqua', Soporte:'amber' };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Usuarios</h1><p>{data?.length||0} usuarios registrados</p></div>
        <div className="page-actions">
          {user.rol==='Administrador' && <button className="btn primary" onClick={()=>setAddOpen(true)}><Icon.plus size={14}/> Nuevo usuario</button>}
        </div>
      </div>
      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Usuario</th><th>Rol</th><th>Sede</th><th>Estado</th><th>Registrado</th></tr></thead>
            <tbody>
              {(data||[]).map(u => (
                <tr key={u.id}>
                  <td><div className="row" style={{gap:10}}>
                    <div className="avatar" style={{background:`linear-gradient(135deg,${u.avatar||'#4A90E2,#7C83FD'})`}}>
                      {u.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}
                    </div>
                    <div><div style={{fontSize:13}}>{u.nombre}</div><div className="small">{u.email}</div></div>
                  </div></td>
                  <td><span className={`chip ${ROLE_COLOR[u.rol]||'aqua'}`}>{u.rol}</span></td>
                  <td className="small">{u.sede}</td>
                  <td><span className={`chip ${u.estado==='Activo'?'green':''}`}><span className="dot"/>{u.estado}</span></td>
                  <td className="small">{u.created_at?.slice(0,10)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      <Modal open={addOpen} onClose={()=>setAddOpen(false)} title="Nuevo usuario">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Nombre completo</label>
            <input className="input" value={form.nombre} onChange={e=>setForm({...form,nombre:e.target.value})}/>
          </div>
          <div className="field"><label>Email corporativo</label>
            <input className="input" type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})}/>
          </div>
          <div className="field"><label>Contraseña inicial</label>
            <input className="input" type="password" value={form.password} onChange={e=>setForm({...form,password:e.target.value})}/>
          </div>
          <div className="field"><label>Rol</label>
            <select className="input" value={form.rol} onChange={e=>setForm({...form,rol:e.target.value})}>
              {['Administrador','Gerente','Cajero','Inventario','Veterinario/Acuarista','Soporte'].map(r=><option key={r}>{r}</option>)}
            </select>
          </div>
          <div className="field"><label>Sede</label>
            <select className="input" value={form.sede} onChange={e=>setForm({...form,sede:e.target.value})}>
              {['Tienda principal','Bogotá Norte','Medellín','Cali'].map(s=><option key={s}>{s}</option>)}
            </select>
          </div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setAddOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> Crear usuario</button>
        </div>
      </Modal>
    </div>
  );
}

// ── COMPRAS ───────────────────────────────────────────────────────────────────
function ComprasPage() {
  const toast = useToast();
  const { data, loading, reload } = useAPI('/compras');
  const { data: provs } = useAPI('/proveedores');
  const [addOpen, setAddOpen] = useState(false);
  const [sel, setSel]         = useState(null);
  const [selDetalle, setSelDetalle] = useState(null);
  const [form, setForm]       = useState({ proveedor_id:'', total:0, fecha_entrega:'', notas:'' });

  const cargarDetalle = async (c) => {
    setSel(c);
    try { setSelDetalle(await window.api.get(`/compras/${c.id}`)); }
    catch(e) { toast(e.message,'error'); }
  };

  const save = async () => {
    try { await window.api.post('/compras', form); toast('Orden creada'); setAddOpen(false); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  const actualizarEstado = async (id, estado, estado_pago) => {
    try { await window.api.put(`/compras/${id}/estado`, {estado,estado_pago}); reload(); toast('Estado actualizado');
      if (sel?.id===id) { const upd=await window.api.get(`/compras/${id}`); setSelDetalle(upd); }
    } catch(e) { toast(e.message,'error'); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Compras</h1><p>Órdenes de compra · click en una fila para ver detalle</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
          <button className="btn primary" onClick={()=>setAddOpen(true)}><Icon.plus size={14}/> Nueva orden</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 380px',gap:14,alignItems:'flex-start'}}>
        <div className="card" style={{padding:0}}>
          {loading ? <Loading/> : (
            <table>
              <thead><tr><th>Número</th><th>Proveedor</th><th>Fecha</th><th>Estado</th><th>Pago</th><th style={{textAlign:'right'}}>Total</th></tr></thead>
              <tbody>
                {(data||[]).map(c => (
                  <tr key={c.id} onClick={()=>cargarDetalle(c)} style={{cursor:'pointer',background:sel?.id===c.id?'rgba(95,214,208,.04)':''}}>
                    <td className="mono small">{c.numero}</td>
                    <td style={{fontSize:13}}>{c.proveedor_nombre}</td>
                    <td className="small">{c.created_at?.slice(0,10)}</td>
                    <td><span className={`chip ${c.estado==='Recibida'?'green':c.estado==='Pendiente'?'amber':'blue'}`}>{c.estado}</span></td>
                    <td><span className={`chip ${c.estado_pago==='Pagada'?'green':c.estado_pago==='Por pagar'?'amber':''}`}>{c.estado_pago}</span></td>
                    <td className="mono" style={{textAlign:'right'}}>{money(c.total)}</td>
                  </tr>
                ))}
                {!data?.length && <tr><td colSpan="6" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin órdenes</td></tr>}
              </tbody>
            </table>
          )}
        </div>

        {/* Panel detalle */}
        {sel && selDetalle ? (
          <div className="card">
            <div className="between" style={{marginBottom:14}}>
              <div>
                <div className="small" style={{color:'var(--muted)'}}>Orden de compra</div>
                <h3 style={{margin:'2px 0 0',fontSize:16}}>{selDetalle.numero}</h3>
              </div>
              <button className="top-btn" style={{height:26,minWidth:26,padding:0}} onClick={()=>{setSel(null);setSelDetalle(null);}}><Icon.x size={13}/></button>
            </div>

            <div style={{padding:'10px 12px',borderRadius:10,background:'var(--bg-card-2)',marginBottom:12}}>
              <div style={{fontWeight:600,fontSize:14}}>{selDetalle.proveedor_nombre}</div>
              <div className="small">{selDetalle.proveedor_email||'—'} · {selDetalle.proveedor_tel||'—'}</div>
            </div>

            {[
              ['Total', <span className="mono" style={{fontWeight:700}}>{money(selDetalle.total)}</span>],
              ['Estado', <span className={`chip ${selDetalle.estado==='Recibida'?'green':selDetalle.estado==='Pendiente'?'amber':'blue'}`}>{selDetalle.estado}</span>],
              ['Pago', <span className={`chip ${selDetalle.estado_pago==='Pagada'?'green':'amber'}`}>{selDetalle.estado_pago}</span>],
              ['Entrega esperada', selDetalle.fecha_entrega||'No especificada'],
              ['Creada', selDetalle.created_at?.slice(0,10)],
            ].map(([k,v]) => (
              <div key={k} className="between" style={{padding:'7px 0',borderBottom:'1px solid var(--border)'}}>
                <span className="small">{k}</span><span style={{fontSize:13}}>{v}</span>
              </div>
            ))}

            {selDetalle.notas && (
              <div style={{marginTop:8,padding:'6px 8px',borderRadius:6,background:'var(--hover)',fontSize:12,color:'var(--muted)'}}>
                {selDetalle.notas}
              </div>
            )}

            {/* Catálogo de items que puede tener */}
            {selDetalle.catalogo?.length > 0 && (
              <>
                <div style={{marginTop:14,marginBottom:8,fontSize:12,fontWeight:600,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.05em'}}>Productos del proveedor</div>
                <div style={{maxHeight:160,overflowY:'auto'}}>
                  {selDetalle.catalogo.slice(0,8).map((item,i) => (
                    <div key={i} className="between" style={{padding:'5px 0',borderBottom:'1px solid var(--border)'}}>
                      <span style={{fontSize:12}}>{item.nombre}</span>
                      <div className="row" style={{gap:8}}>
                        <span className="small">Stock: {item.stock}</span>
                        <span className="mono small">{money(item.precio)}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </>
            )}

            <div className="row" style={{gap:6,marginTop:14,flexWrap:'wrap'}}>
              {selDetalle.estado !== 'Recibida' && (
                <button className="btn primary" style={{flex:1}} onClick={()=>actualizarEstado(selDetalle.id,'Recibida','Por pagar')}>
                  <Icon.check size={13}/> Marcar recibida
                </button>
              )}
              {selDetalle.estado_pago === 'Por pagar' && (
                <button className="btn" style={{flex:1}} onClick={()=>actualizarEstado(selDetalle.id,selDetalle.estado,'Pagada')}>
                  <Icon.money size={13}/> Marcar pagada
                </button>
              )}
            </div>
          </div>
        ) : (
          <div className="card center" style={{padding:50,flexDirection:'column',gap:10,color:'var(--muted)'}}>
            <Icon.buy size={28}/>
            <div style={{fontSize:13}}>Selecciona una orden para ver su detalle</div>
          </div>
        )}
      </div>

      <Modal open={addOpen} onClose={()=>setAddOpen(false)} title="Nueva orden de compra" width={480}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Proveedor</label>
            <select className="input" value={form.proveedor_id} onChange={e=>setForm({...form,proveedor_id:e.target.value})}>
              <option value="">— selecciona —</option>
              {(provs||[]).map(p=><option key={p.id} value={p.id}>{p.nombre}</option>)}
            </select>
          </div>
          <div className="field"><label>Total estimado (COP)</label>
            <input className="input mono" type="number" min="0" value={form.total} onChange={e=>setForm({...form,total:+e.target.value})}/>
          </div>
          <div className="field"><label>Fecha entrega esperada</label>
            <input className="input" type="date" value={form.fecha_entrega} onChange={e=>setForm({...form,fecha_entrega:e.target.value})}/>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Notas</label>
            <textarea className="input" rows="2" style={{height:'auto',padding:'8px 11px'}} value={form.notas} onChange={e=>setForm({...form,notas:e.target.value})}/>
          </div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setAddOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> Crear orden</button>
        </div>
      </Modal>
    </div>
  );
}

// ── ANALYTICS ─────────────────────────────────────────────────────────────────
function AnalyticsPage() {
  const [tab, setTab] = useState('financiero');
  const { data, loading, reload } = useAPI('/analytics');

  const TABS = [
    {id:'financiero', l:'Financiero'},
    {id:'inventario', l:'Inventario'},
    {id:'clientes',   l:'Clientes'},
    {id:'servicios',  l:'Servicios'},
    {id:'proveedores',l:'Proveedores'},
  ];

  const Bar = ({value, max, color='var(--aqua)', height=8}) => (
    <div className="progress" style={{height}}>
      <span style={{width:`${Math.min(100,(value/Math.max(max,1))*100)}%`,background:color}}/>
    </div>
  );

  if (loading) return <div className="page"><Loading/></div>;
  if (!data) return (
    <div className="page">
      <div className="center" style={{padding:80,flexDirection:'column',gap:12,color:'var(--muted)'}}>
        <Icon.chart size={28}/>
        <div style={{fontSize:14}}>No se pudieron cargar los analytics</div>
        <button className="btn primary" onClick={reload}><Icon.refresh size={13}/> Reintentar</button>
      </div>
    </div>
  );

  const r = data.resumen_mes || {};

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Analytics</h1><p>Reportes avanzados · datos en tiempo real</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/> Actualizar</button>
        </div>
      </div>

      {/* Tabs */}
      <div className="row" style={{gap:6,marginBottom:14,flexWrap:'wrap'}}>
        {TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} className="btn" style={{
            height:34,fontSize:13,
            background: tab===t.id ? 'rgba(95,214,208,.1)' : 'var(--bg-card)',
            borderColor: tab===t.id ? 'rgba(95,214,208,.3)' : 'var(--border)',
            color: tab===t.id ? 'var(--aqua)' : 'var(--muted)'
          }}>{t.l}</button>
        ))}
      </div>

      {/* ── Financiero ── */}
      {tab === 'financiero' && (
        <div className="stack">
          {/* Resumen mes */}
          <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:12}}>
            {[
              {l:'Ventas',    v:r.ventas,    col:'var(--aqua)'},
              {l:'Costo',     v:r.costo,     col:'var(--blue)'},
              {l:'Utilidad bruta', v:r.ventas-r.costo, col:'var(--green)'},
              {l:'Gastos op.', v:r.gastos,   col:'var(--amber)'},
              {l:'Pérdidas',  v:r.perdidas,  col:'var(--red)'},
              {l:'Resultado', v:r.resultado, col: r.resultado>=0?'var(--green)':'var(--red)'},
            ].map((k,i) => (
              <div className="kpi" key={i}>
                <div className="kpi-label">{k.l}</div>
                <div className="kpi-val num" style={{fontSize:18,color:k.col}}>{moneyK(k.v)}</div>
              </div>
            ))}
          </div>

          {/* Tendencia 12 meses */}
          <div className="card">
            <div className="card-head"><div><h3>Tendencia últimos 12 meses</h3><p>Ventas vs Utilidad vs Pérdidas</p></div></div>
            <div style={{overflowX:'auto'}}>
              <div style={{display:'flex',alignItems:'flex-end',gap:6,height:160,minWidth:600,paddingBottom:20,position:'relative'}}>
                {(data.ventas_trend||[]).map((d,i) => {
                  const maxV = Math.max(...(data.ventas_trend||[]).map(x=>x.ventas),1);
                  const hV = Math.max(4,(d.ventas/maxV)*130);
                  const hU = Math.max(2,(Math.max(0,d.utilidad)/maxV)*130);
                  const hP = Math.max(2,(d.perdidas/maxV)*130);
                  return (
                    <div key={i} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:2}}>
                      <div style={{width:'100%',display:'flex',alignItems:'flex-end',gap:2,height:136}}>
                        <div title={`Ventas: ${moneyK(d.ventas)}`} style={{flex:1,height:hV,background:'rgba(95,214,208,.5)',borderRadius:'3px 3px 0 0'}}/>
                        <div title={`Utilidad: ${moneyK(d.utilidad)}`} style={{flex:1,height:hU,background:'rgba(34,197,94,.6)',borderRadius:'3px 3px 0 0'}}/>
                        <div title={`Pérdidas: ${moneyK(d.perdidas)}`} style={{flex:1,height:hP,background:'rgba(239,68,68,.5)',borderRadius:'3px 3px 0 0'}}/>
                      </div>
                      <div style={{fontSize:9,color:'var(--muted)',whiteSpace:'nowrap'}}>{d.label}</div>
                    </div>
                  );
                })}
              </div>
              <div className="row" style={{gap:14,marginTop:4,fontSize:11,color:'var(--muted)'}}>
                <span><span className="legend-dot" style={{background:'rgba(95,214,208,.7)'}}/>Ventas</span>
                <span><span className="legend-dot" style={{background:'rgba(34,197,94,.7)'}}/>Utilidad</span>
                <span><span className="legend-dot" style={{background:'rgba(239,68,68,.6)'}}/>Pérdidas</span>
              </div>
            </div>
          </div>

          {/* Top productos + Categorías */}
          <div className="grid-2">
            <div className="card">
              <div className="card-head"><div><h3>Top 10 productos vendidos</h3><p>Este mes · por ingresos</p></div></div>
              {(data.rent_top_productos||[]).length === 0
                ? <div className="small center" style={{padding:20}}>Sin ventas este mes</div>
                : (data.rent_top_productos||[]).map((p,i) => {
                  const maxI = Math.max(...(data.rent_top_productos||[]).map(x=>x.ingresos),1);
                  return (
                    <div key={i} style={{marginBottom:10}}>
                      <div className="between" style={{marginBottom:4}}>
                        <span style={{fontSize:12.5,flex:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p.nombre}</span>
                        <div className="row" style={{gap:8}}>
                          <span className="mono small">{p.unidades} u.</span>
                          <span className="mono" style={{fontSize:12}}>{moneyK(p.ingresos)}</span>
                        </div>
                      </div>
                      <Bar value={p.ingresos} max={maxI} color='var(--aqua)'/>
                    </div>
                  );
                })}
            </div>
            <div className="card">
              <div className="card-head"><div><h3>Rentabilidad por categoría</h3><p>Margen % este mes</p></div></div>
              {(data.rent_por_categoria||[]).length === 0
                ? <div className="small center" style={{padding:20}}>Sin datos</div>
                : (data.rent_por_categoria||[]).map((c,i) => (
                  <div key={i} style={{marginBottom:10}}>
                    <div className="between" style={{marginBottom:4}}>
                      <span style={{fontSize:12.5}}>{c.categoria}</span>
                      <div className="row" style={{gap:8}}>
                        <span className="small">{c.unidades} u.</span>
                        <span className="mono" style={{fontSize:12,color:'var(--green)'}}>{c.margen_pct}%</span>
                      </div>
                    </div>
                    <Bar value={c.margen_pct} max={100} color='var(--green)'/>
                  </div>
                ))}
            </div>
          </div>
        </div>
      )}

      {/* ── Inventario ── */}
      {tab === 'inventario' && (
        <div className="stack">
          <div className="grid-3">
            {(data.mov_inventario||[]).map((g,i) => (
              <div className="card" key={i}>
                <div className="between" style={{marginBottom:10}}>
                  <div style={{fontWeight:600,fontSize:14}}>{g.grupo}</div>
                  {g.alertas > 0 && <span className="chip amber"><Icon.alert size={10}/> {g.alertas}</span>}
                </div>
                {[
                  ['Especies', g.especies],
                  ['Stock total', g.stock_actual],
                  ['Valor inventario', moneyK(g.valor_inventario)],
                ].map(([k,v]) => (
                  <div key={k} className="between" style={{padding:'5px 0',borderBottom:'1px solid var(--border)'}}>
                    <span className="small">{k}</span><span className="mono" style={{fontSize:12.5}}>{v}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>

          <div className="card">
            <div className="card-head"><div><h3>Animales más vendidos</h3><p>Este mes</p></div></div>
            {(data.animales_mas_vendidos||[]).length === 0
              ? <div className="small center" style={{padding:20}}>Sin ventas de animales este mes</div>
              : (
                <table>
                  <thead><tr><th>Especie</th><th style={{textAlign:'right'}}>Unidades</th><th style={{textAlign:'right'}}>Ingresos</th></tr></thead>
                  <tbody>
                    {(data.animales_mas_vendidos||[]).map((a,i) => (
                      <tr key={i}>
                        <td style={{fontSize:13}}>{a.nombre}</td>
                        <td className="mono" style={{textAlign:'right'}}>{a.unidades}</td>
                        <td className="mono" style={{textAlign:'right'}}>{moneyK(a.ingresos)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
          </div>

          <div className="card">
            <div className="card-head"><div><h3>Mortalidad por grupo</h3><p>Histórico acumulado</p></div></div>
            {(data.mortalidad_grupo||[]).length === 0
              ? <div className="small center" style={{padding:20}}>Sin mortalidad registrada ✓</div>
              : (data.mortalidad_grupo||[]).map((g,i) => {
                const maxN = Math.max(...(data.mortalidad_grupo||[]).map(x=>x.total),1);
                return (
                  <div key={i} style={{marginBottom:10}}>
                    <div className="between" style={{marginBottom:4}}>
                      <span style={{fontSize:13}}>{g.grupo}</span>
                      <div className="row" style={{gap:8}}>
                        <span className="small">{g.n} eventos</span>
                        <span className="mono small" style={{color:'var(--red)'}}>{moneyK(g.total)}</span>
                      </div>
                    </div>
                    <Bar value={g.total} max={maxN} color='var(--red)'/>
                  </div>
                );
              })}
          </div>
        </div>
      )}

      {/* ── Clientes ── */}
      {tab === 'clientes' && (
        <div className="stack">
          <div className="grid-2">
            <div className="card">
              <div className="card-head"><div><h3>Distribución por nivel</h3><p>Programa de fidelización</p></div></div>
              <div className="stack" style={{gap:10}}>
                {(data.clientes_nivel||[]).map((c,i) => {
                  const col = c.nivel_fidelizacion==='Black Reef Elite'?'#7C83FD':c.nivel_fidelizacion==='Ocean'?'#4A90E2':c.nivel_fidelizacion==='Aqua'?'#5FD6D0':'#F59E0B';
                  const max = Math.max(...(data.clientes_nivel||[]).map(x=>x.n),1);
                  return (
                    <div key={i}>
                      <div className="between" style={{marginBottom:5}}>
                        <div className="row" style={{gap:6}}>
                          <span className="legend-dot" style={{background:col}}/>
                          <span style={{fontSize:13}}>{c.nivel_fidelizacion}</span>
                        </div>
                        <div className="row" style={{gap:8}}>
                          <span className="mono small">{c.n} clientes</span>
                          <span className="small">{c.total_puntos?.toLocaleString('es-CO')} pts</span>
                        </div>
                      </div>
                      <Bar value={c.n} max={max} color={col}/>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="card">
              <div className="card-head"><div><h3>Top clientes</h3><p>Por volumen de compras</p></div></div>
              {(data.top_clientes||[]).length === 0
                ? <div className="small center" style={{padding:20}}>Sin datos</div>
                : (data.top_clientes||[]).map((c,i) => (
                  <div key={i} className="between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                    <div className="row" style={{gap:10}}>
                      <span className="mono small" style={{color:'var(--muted)',width:18}}>#{i+1}</span>
                      <div className="avatar" style={{width:26,height:26,fontSize:10}}>
                        {c.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}
                      </div>
                      <div><div style={{fontSize:13}}>{c.nombre}</div><div className="small">{c.compras} compras</div></div>
                    </div>
                    <span className="mono" style={{fontSize:13}}>{moneyK(c.total)}</span>
                  </div>
                ))}
            </div>
          </div>
        </div>
      )}

      {/* ── Servicios ── */}
      {tab === 'servicios' && (
        <div className="stack">
          <div className="card">
            <div className="card-head"><div><h3>Servicios por tipo</h3><p>Histórico completo</p></div></div>
            <table>
              <thead><tr><th>Tipo de servicio</th><th style={{textAlign:'right'}}>Total</th><th style={{textAlign:'right'}}>Completados</th><th style={{textAlign:'right'}}>Ingresos</th></tr></thead>
              <tbody>
                {(data.servicios_tipo||[]).map((s,i) => (
                  <tr key={i}>
                    <td style={{fontSize:13}}>{s.tipo}</td>
                    <td className="mono" style={{textAlign:'right'}}>{s.n}</td>
                    <td className="mono" style={{textAlign:'right'}}>{s.completados}</td>
                    <td className="mono" style={{textAlign:'right',color: s.ingresos>0?'var(--green)':'var(--muted)'}}>
                      {s.ingresos > 0 ? moneyK(s.ingresos) : '—'}
                    </td>
                  </tr>
                ))}
                {!data.servicios_tipo?.length && <tr><td colSpan="4" style={{padding:24,textAlign:'center',color:'var(--muted)'}}>Sin servicios</td></tr>}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* ── Proveedores ── */}
      {tab === 'proveedores' && (
        <div className="stack">
          <div className="card">
            <div className="card-head"><div><h3>Compras vs Pérdidas por proveedor</h3><p>Tasa de pérdida sobre monto comprado</p></div></div>
            <table>
              <thead><tr><th>Proveedor</th><th style={{textAlign:'right'}}>Compras</th><th style={{textAlign:'right'}}>Monto compras</th><th style={{textAlign:'right'}}>Pérdidas</th><th style={{textAlign:'right'}}>Monto pérdidas</th><th style={{textAlign:'right'}}>Tasa %</th></tr></thead>
              <tbody>
                {(data.proveedores_analytics||[]).map((p,i) => (
                  <tr key={i}>
                    <td style={{fontSize:13}}>{p.nombre}</td>
                    <td className="mono" style={{textAlign:'right'}}>{p.total_compras}</td>
                    <td className="mono" style={{textAlign:'right'}}>{moneyK(p.monto_compras)}</td>
                    <td className="mono" style={{textAlign:'right'}}>{p.total_perdidas}</td>
                    <td className="mono" style={{textAlign:'right',color:'var(--red)'}}>{moneyK(p.monto_perdidas)}</td>
                    <td style={{textAlign:'right'}}>
                      <span className={`chip ${p.tasa_perdida_pct > 10 ? 'red' : p.tasa_perdida_pct > 5 ? 'amber' : 'green'}`}>
                        {p.tasa_perdida_pct}%
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

// ── FIDELIZACIÓN ──────────────────────────────────────────────────────────────
function FidelizacionPage() {
  const toast = useToast();
  const [clienteSel, setClienteSel] = useState(null);
  const [detalle, setDetalle] = useState(null);
  const [canjearOpen, setCanjearOpen] = useState(null); // reward a canjear
  const [q, setQ] = useState('');
  const { data: clientes, reload: reloadClientes } = useAPI('/clientes' + (q?`?q=${q}`:''), [q]);

  const cargarDetalle = async (c) => {
    setClienteSel(c);
    try { setDetalle(await window.api.get(`/clientes/${c.id}`)); }
    catch(e) { toast(e.message,'error'); }
  };

  const canjear = async (puntos, motivo) => {
    try {
      const res = await window.api.post(`/clientes/${clienteSel.id}/canjear`, { puntos, motivo });
      toast(`Canje exitoso · ${puntos} pts · Saldo: ${res.puntos_restantes} pts`);
      setCanjearOpen(null);
      reloadClientes();
      cargarDetalle({...clienteSel, puntos: res.puntos_restantes});
    } catch(e) { toast(e.message,'error'); }
  };

  const RECOMPENSAS = [
    {nombre:'Cupón 5% descuento',    puntos:300,  tipo:'Descuento',  desc:'Próxima compra'},
    {nombre:'Cupón 10% descuento',   puntos:600,  tipo:'Descuento',  desc:'Productos no vivos'},
    {nombre:'Cupón 15% descuento',   puntos:900,  tipo:'Descuento',  desc:'Mín. compra $200.000'},
    {nombre:'Mantenimiento gratis',  puntos:1200, tipo:'Servicio',   desc:'Acuario hasta 60cm'},
    {nombre:'Alimento Tropical 100g',puntos:800,  tipo:'Producto',   desc:'Flakes premium'},
    {nombre:'Asesoría aquascape 1h', puntos:1500, tipo:'Servicio',   desc:'Personalizada'},
    {nombre:'Montaje 30% off',       puntos:3000, tipo:'Descuento',  desc:'Acuarios > 90cm'},
    {nombre:'Evento VIP',            puntos:5000, tipo:'Experiencia',desc:'Acceso exclusivo'},
  ];

  const nivelColor = n => n==='Black Reef Elite'?'violet':n==='Ocean'?'blue':n==='Aqua'?'aqua':'amber';
  const nivelPct = n => n==='Black Reef Elite'?100:n==='Ocean'?60:n==='Aqua'?30:10;

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Fidelización</h1><p>Programa de puntos · 4 niveles · canjes en tiempo real</p></div>
      </div>

      <div className="grid-2" style={{alignItems:'flex-start'}}>
        {/* Lista clientes */}
        <div className="stack">
          <div className="search" style={{width:'100%',maxWidth:'none'}}>
            <Icon.search size={14}/><input placeholder="Buscar cliente…" value={q} onChange={e=>setQ(e.target.value)}/>
          </div>
          <div className="card" style={{padding:0}}>
            <div style={{padding:'10px 14px',borderBottom:'1px solid var(--border)',fontSize:12,color:'var(--muted)'}}>
              {clientes?.length||0} clientes registrados
            </div>
            {(clientes||[]).map(c => (
              <div key={c.id}
                onClick={() => cargarDetalle(c)}
                style={{
                  padding:'12px 16px',cursor:'pointer',
                  background: clienteSel?.id===c.id ? 'rgba(95,214,208,.05)' : 'transparent',
                  borderLeft: clienteSel?.id===c.id ? '2px solid var(--aqua)' : '2px solid transparent',
                  borderBottom:'1px solid var(--border)'
                }}>
                <div className="between">
                  <div className="row" style={{gap:10}}>
                    <div className="avatar" style={{width:30,height:30,fontSize:11}}>
                      {c.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}
                    </div>
                    <div>
                      <div style={{fontSize:13,fontWeight:500}}>{c.nombre}</div>
                      <div className="small">{c.email}</div>
                    </div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <span className={`chip ${nivelColor(c.nivel_fidelizacion)}`}>{c.nivel_fidelizacion}</span>
                    <div className="mono small" style={{marginTop:3}}>{c.puntos?.toLocaleString('es-CO')} pts</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Panel derecho */}
        {clienteSel && detalle ? (
          <div className="stack">
            {/* Perfil */}
            <div className="card">
              <div className="row between" style={{marginBottom:14}}>
                <div className="row" style={{gap:12}}>
                  <div className="avatar" style={{width:44,height:44,fontSize:16}}>
                    {clienteSel.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}
                  </div>
                  <div>
                    <div style={{fontWeight:600,fontSize:16}}>{clienteSel.nombre}</div>
                    <div className="small">{clienteSel.email}</div>
                  </div>
                </div>
                <span className={`chip ${nivelColor(detalle.nivel_fidelizacion)}`} style={{fontSize:12,padding:'5px 10px'}}>
                  {detalle.nivel_fidelizacion}
                </span>
              </div>

              <div className="between" style={{marginBottom:6}}>
                <span className="small">Puntos disponibles</span>
                <span className="mono" style={{fontSize:20,fontWeight:700,color:'var(--aqua)'}}>{detalle.puntos?.toLocaleString('es-CO')}</span>
              </div>
              <div className="progress" style={{height:8,marginBottom:10}}>
                <span style={{width:`${nivelPct(detalle.nivel_fidelizacion)}%`}}/>
              </div>
              <div className="small" style={{textAlign:'right'}}>
                {detalle.nivel_fidelizacion !== 'Black Reef Elite' && (
                  <>Siguiente nivel: <strong>{detalle.nivel_fidelizacion==='Coral'?'500':detalle.nivel_fidelizacion==='Aqua'?'1.500':'5.000'} pts</strong></>
                )}
              </div>

              <div className="hr"/>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8,textAlign:'center'}}>
                {[
                  ['Compras', detalle.compras?.length||0],
                  ['Total gastado', moneyK(detalle.compras?.reduce((s,v)=>s+v.total,0)||0)],
                  ['Movimientos', detalle.movimientos?.length||0],
                ].map(([k,v]) => (
                  <div key={k} style={{padding:'8px 4px',borderRadius:8,background:'var(--bg-card-2)'}}>
                    <div className="mono" style={{fontSize:16,fontWeight:600}}>{v}</div>
                    <div className="small">{k}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Historial de movimientos */}
            <div className="card">
              <div className="card-head"><div><h3>Historial de puntos</h3></div></div>
              <div className="stack" style={{gap:0,maxHeight:200,overflowY:'auto'}}>
                {(detalle.movimientos||[]).map((m,i) => (
                  <div key={i} className="between" style={{padding:'7px 0',borderBottom:'1px solid var(--border)'}}>
                    <div>
                      <div style={{fontSize:12.5}}>{m.motivo}</div>
                      <div className="small">{m.created_at?.slice(0,10)}</div>
                    </div>
                    <span className={`mono ${m.tipo==='+'?'':'small'}`}
                      style={{color: m.tipo==='+'?'var(--green)':'var(--red)',fontWeight:600}}>
                      {m.tipo}{m.puntos?.toLocaleString('es-CO')} pts
                    </span>
                  </div>
                ))}
                {!detalle.movimientos?.length && <div className="small center" style={{padding:16}}>Sin movimientos</div>}
              </div>
            </div>

            {/* Catálogo de recompensas */}
            <div className="card">
              <div className="card-head"><div><h3>Canjear puntos</h3><p>Saldo: {detalle.puntos?.toLocaleString('es-CO')} pts</p></div></div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
                {RECOMPENSAS.map((rw,i) => {
                  const puedo = detalle.puntos >= rw.puntos;
                  return (
                    <div key={i} style={{
                      padding:12,borderRadius:10,
                      border:`1px solid ${puedo?'rgba(95,214,208,.3)':'var(--border)'}`,
                      background: puedo?'rgba(95,214,208,.04)':'transparent',
                      opacity: puedo?1:.5
                    }}>
                      <div style={{fontSize:12.5,fontWeight:500,marginBottom:4}}>{rw.nombre}</div>
                      <div className="small" style={{marginBottom:8}}>{rw.desc}</div>
                      <div className="between">
                        <span className="chip violet" style={{fontSize:10}}>{rw.puntos.toLocaleString('es-CO')} pts</span>
                        <button className="btn primary" style={{height:26,fontSize:11,padding:'0 10px'}}
                          disabled={!puedo}
                          onClick={() => setCanjearOpen(rw)}>
                          Canjear
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        ) : (
          <div className="card" style={{padding:60}}>
            <div className="center" style={{flexDirection:'column',gap:10,color:'var(--muted)'}}>
              <Icon.crown size={28}/>
              <div style={{fontSize:13}}>Selecciona un cliente para ver su perfil de fidelización</div>
            </div>
          </div>
        )}
      </div>

      {/* Modal confirmar canje */}
      {canjearOpen && (
        <Modal open={true} onClose={() => setCanjearOpen(null)}
          title={`Canjear: ${canjearOpen.nombre}`}
          sub={`${canjearOpen.puntos.toLocaleString('es-CO')} puntos · ${canjearOpen.desc}`}>
          <div style={{padding:'14px 0'}}>
            <div className="between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
              <span>Cliente</span><span style={{fontWeight:500}}>{clienteSel?.nombre}</span>
            </div>
            <div className="between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
              <span>Puntos actuales</span><span className="mono">{detalle?.puntos?.toLocaleString('es-CO')}</span>
            </div>
            <div className="between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
              <span>Puntos a descontar</span><span className="mono" style={{color:'var(--red)'}}>-{canjearOpen.puntos.toLocaleString('es-CO')}</span>
            </div>
            <div className="between" style={{padding:'8px 0'}}>
              <span>Saldo restante</span>
              <span className="mono" style={{fontWeight:700,color:'var(--aqua)'}}>
                {((detalle?.puntos||0) - canjearOpen.puntos).toLocaleString('es-CO')} pts
              </span>
            </div>
          </div>
          <div className="row" style={{gap:8}}>
            <button className="btn" style={{flex:1}} onClick={() => setCanjearOpen(null)}>Cancelar</button>
            <button className="btn primary" style={{flex:2}}
              onClick={() => canjear(canjearOpen.puntos, `Canje: ${canjearOpen.nombre}`)}>
              <Icon.gift size={14}/> Confirmar canje
            </button>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── FACTURACIÓN ───────────────────────────────────────────────────────────────
function FacturacionPage() {
  const { data: ventas, loading, reload } = useAPI('/ventas?limit=50');
  const { data: cfgData } = useAPI('/config');
  const toast = useToast();
  const [sel, setSel]       = useState(null);
  const [selDetalle, setSelDetalle] = useState(null);
  const [loadingDet, setLoadingDet] = useState(false);

  const empresa = cfgData?.empresa || 'Aquarium Delux';
  const nit     = cfgData?.nit     || '900.184.222-3';
  const dir     = cfgData?.direccion|| 'Cra. 13 #45-22, Bogotá';
  const pie     = cfgData?.pieMsg  || 'Gracias por preferirnos';

  const cargarDetalle = async (v) => {
    setSel(v); setLoadingDet(true);
    try { setSelDetalle(await window.api.get(`/ventas/${v.id}`)); }
    catch(e) { toast(e.message,'error'); }
    finally { setLoadingDet(false); }
  };

  const descargar = () => {
    if (!selDetalle) return;
    const v = selDetalle;
    const items = (v.items||[]).map(it =>
      `  ${it.nombre.padEnd(30)} x${it.cantidad}  ${money(it.precio_unitario).padStart(12)}  ${money(it.subtotal).padStart(12)}`
    ).join('\n');

    const txt = `
================================================================================
                           ${empresa.toUpperCase()}
                           NIT: ${nit}
                           ${dir}
================================================================================
  Factura:  ${v.numero}
  Fecha:    ${v.created_at?.slice(0,16)||'—'}
  Cajero:   ${v.cajero_nombre||'—'}
  Cliente:  ${v.cliente_nombre||'Consumidor final'}
  Método:   ${v.metodo_pago}
================================================================================
  PRODUCTO                             CANT         PRECIO         SUBTOTAL
--------------------------------------------------------------------------------
${items}
================================================================================
  Subtotal:                                                  ${money(v.subtotal).padStart(15)}
  Descuento:                                                 ${v.descuento>0?`-${money(v.descuento)}`.padStart(15):'—'.padStart(15)}
  IVA 19%:                                                   ${money(v.iva).padStart(15)}
--------------------------------------------------------------------------------
  TOTAL:                                                     ${money(v.total).padStart(15)}
================================================================================
  ${pie}
================================================================================
`.trim();

    const blob = new Blob([txt], {type:'text/plain;charset=utf-8'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `factura-${v.numero}.txt`;
    a.click();
    URL.revokeObjectURL(a.href);
    toast(`Factura ${v.numero} descargada`);
  };

  const imprimirHTML = () => {
    if (!selDetalle) return;
    const v = selDetalle;
    const rowsHTML = (v.items||[]).map(it => `
      <tr>
        <td style="padding:6px 0;border-bottom:1px solid #eee;">${it.nombre}</td>
        <td style="padding:6px 0;border-bottom:1px solid #eee;text-align:center;">${it.cantidad}</td>
        <td style="padding:6px 0;border-bottom:1px solid #eee;text-align:right;">${money(it.precio_unitario)}</td>
        <td style="padding:6px 0;border-bottom:1px solid #eee;text-align:right;font-weight:600;">${money(it.subtotal)}</td>
      </tr>`).join('');

    const html = `<!DOCTYPE html><html><head><meta charset="utf-8"/><title>Factura ${v.numero}</title>
    <style>body{font-family:Arial,sans-serif;max-width:580px;margin:0 auto;padding:24px;color:#111;}
    h2{margin:0;}table{width:100%;border-collapse:collapse;}th{text-align:left;padding:8px 0;border-bottom:2px solid #000;font-size:12px;text-transform:uppercase;}
    .total{font-size:18px;font-weight:700;}</style></head><body>
    <h2>${empresa}</h2><div style="font-size:13px;color:#666;">NIT: ${nit} · ${dir}</div>
    <hr style="margin:16px 0"/>
    <table><tr><td><b>Factura:</b> ${v.numero}</td><td><b>Fecha:</b> ${v.created_at?.slice(0,16)||'—'}</td></tr>
    <tr><td><b>Cajero:</b> ${v.cajero_nombre||'—'}</td><td><b>Método:</b> ${v.metodo_pago}</td></tr>
    <tr><td colspan="2"><b>Cliente:</b> ${v.cliente_nombre||'Consumidor final'}</td></tr></table>
    <hr style="margin:16px 0"/>
    <table><thead><tr><th>Producto</th><th style="text-align:center">Cant.</th><th style="text-align:right">P. Unit.</th><th style="text-align:right">Subtotal</th></tr></thead>
    <tbody>${rowsHTML}</tbody></table>
    <div style="margin-top:16px;text-align:right">
      <div>Subtotal: ${money(v.subtotal)}</div>
      ${v.descuento>0?`<div style="color:green">Descuento: -${money(v.descuento)}</div>`:''}
      <div>IVA 19%: ${money(v.iva)}</div>
      <div class="total" style="margin-top:8px">TOTAL: ${money(v.total)}</div>
    </div>
    <hr style="margin:16px 0"/><p style="text-align:center;font-size:12px;color:#888;">${pie}</p>
    </body></html>`;

    const w = window.open('','_blank','width=650,height=800');
    w.document.write(html);
    w.document.close();
    setTimeout(()=>w.print(), 500);
  };

  const [abonoOpen, setAbonoOpen] = useState(false);
  const [abonoMonto, setAbonoMonto] = useState('');
  const [abonoSaving, setAbonoSaving] = useState(false);

  const registrarAbono = async () => {
    if (!abonoMonto || !selDetalle) return;
    setAbonoSaving(true);
    try {
      await window.api.post(`/ventas/${selDetalle.id}/abono`, { monto: Number(abonoMonto) });
      toast('Abono registrado');
      setAbonoOpen(false); setAbonoMonto('');
      const d = await window.api.get(`/ventas/${selDetalle.id}`);
      setSelDetalle(d); reload();
    } catch(e) { toast(e.message,'error'); }
    finally { setAbonoSaving(false); }
  };

  const esCredito = v => v?.tipo_venta === 'credito';
  const totalFinal = v => esCredito(v) && v?.total_con_interes > 0 ? v.total_con_interes : v?.total;
  const saldoPendiente = v => totalFinal(v) - (v?.abonos || 0);

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Facturación</h1><p>Ventas de contado y crédito · comprobantes descargables</p></div>
        <div className="page-actions"><button className="btn" onClick={reload}><Icon.refresh size={14}/></button></div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 440px',gap:14,alignItems:'flex-start'}}>
        {/* ── LISTA VENTAS ── */}
        <div className="card" style={{padding:0}}>
          {loading ? <Loading/> : (
            <table>
              <thead>
                <tr>
                  <th>Número</th>
                  <th>Cliente</th>
                  <th>Tipo</th>
                  <th>Método</th>
                  <th>Estado pago</th>
                  <th>Fecha</th>
                  <th style={{textAlign:'right'}}>Total</th>
                </tr>
              </thead>
              <tbody>
                {(ventas||[]).map(v => {
                  const credito = esCredito(v);
                  const saldo   = saldoPendiente(v);
                  return (
                    <tr key={v.id} onClick={()=>cargarDetalle(v)}
                      style={{cursor:'pointer', background:sel?.id===v.id?'rgba(95,214,208,.04)':''}}>
                      <td className="mono small" style={{color:'var(--aqua)'}}>{v.numero}</td>
                      <td style={{fontSize:13}}>{v.cliente_nombre||<span style={{color:'var(--muted)'}}>Consumidor final</span>}</td>
                      <td>
                        <span className={`chip ${credito?'amber':''}`}>
                          {credito?'🤝 Crédito':'💵 Contado'}
                        </span>
                      </td>
                      <td><span className="chip">{v.metodo_pago}</span></td>
                      <td>
                        <span className={`chip ${v.estado_pago==='pagado'?'green':v.estado_pago==='parcial'?'amber':'red'}`}>
                          {v.estado_pago||'pagado'}
                        </span>
                        {credito && v.estado_pago !== 'pagado' && (
                          <div style={{fontSize:10,color:'var(--red)',marginTop:2}}>{money(saldo)} pendiente</div>
                        )}
                      </td>
                      <td className="small" style={{color:'var(--muted)'}}>{v.created_at?.slice(0,10)}</td>
                      <td className="mono" style={{textAlign:'right',fontWeight:600}}>
                        {money(totalFinal(v))}
                        {credito && v.interes_pct > 0 && (
                          <div style={{fontSize:10,color:'var(--amber)'}}>+{v.interes_pct}% interés</div>
                        )}
                      </td>
                    </tr>
                  );
                })}
                {!ventas?.length && <tr><td colSpan="7" style={{padding:32,textAlign:'center',color:'var(--muted)'}}>Sin ventas registradas</td></tr>}
              </tbody>
            </table>
          )}
        </div>

        {/* ── DETALLE ── */}
        {sel ? (
          <div className="card" style={{fontSize:13}}>
            {/* Header */}
            <div className="between" style={{marginBottom:12}}>
              <div>
                <div style={{fontSize:11,color:'var(--muted)'}}>Comprobante</div>
                <h3 style={{margin:'2px 0 0',fontSize:16}}>{sel.numero}</h3>
              </div>
              <div className="row" style={{gap:5,flexWrap:'wrap'}}>
                <button className="btn" onClick={imprimirHTML} disabled={!selDetalle}><Icon.print size={12}/></button>
                <button className="btn" onClick={descargar} disabled={!selDetalle}><Icon.export size={12}/> .TXT</button>
                {selDetalle && (
                  <a href={`/api/pdf/factura/${selDetalle.id}?token=${localStorage.getItem('ad_token')}`}
                    target="_blank" className="btn" style={{background:'#dc2626',color:'#fff',gap:5,display:'flex',alignItems:'center'}}>
                    <Icon.filePdf size={12}/> PDF
                  </a>
                )}
                <button className="top-btn" style={{height:28,minWidth:28,padding:0}} onClick={()=>{setSel(null);setSelDetalle(null);}}><Icon.x size={13}/></button>
              </div>
            </div>

            {loadingDet ? <Loading/> : selDetalle ? (
              <>
                {/* Banner crédito */}
                {esCredito(selDetalle) && (
                  <div style={{
                    background: selDetalle.estado_pago==='pagado' ? 'rgba(34,197,94,.08)' : 'rgba(245,158,11,.08)',
                    border: `1px solid ${selDetalle.estado_pago==='pagado'?'rgba(34,197,94,.25)':'rgba(245,158,11,.25)'}`,
                    borderRadius:10, padding:'10px 14px', marginBottom:12,
                  }}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:6}}>
                      <span style={{fontWeight:700,fontSize:13,color:selDetalle.estado_pago==='pagado'?'var(--green)':'var(--amber)'}}>
                        🤝 Venta a Crédito — {selDetalle.estado_pago?.toUpperCase()}
                      </span>
                      {selDetalle.estado_pago !== 'pagado' && (
                        <button className="btn primary" style={{height:28,fontSize:11,gap:4}} onClick={()=>{setAbonoMonto('');setAbonoOpen(true);}}>
                          <Icon.money size={11}/> Registrar abono
                        </button>
                      )}
                    </div>
                    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,fontSize:12}}>
                      <div>
                        <div style={{color:'var(--muted)',marginBottom:2}}>Total con interés</div>
                        <div style={{fontWeight:700,fontFamily:'var(--mono)'}}>{money(selDetalle.total_con_interes||selDetalle.total)}</div>
                      </div>
                      <div>
                        <div style={{color:'var(--muted)',marginBottom:2}}>Abonado</div>
                        <div style={{fontWeight:700,fontFamily:'var(--mono)',color:'var(--green)'}}>{money(selDetalle.abonos||0)}</div>
                      </div>
                      <div>
                        <div style={{color:'var(--muted)',marginBottom:2}}>Saldo pendiente</div>
                        <div style={{fontWeight:700,fontFamily:'var(--mono)',color:'var(--red)'}}>{money(saldoPendiente(selDetalle))}</div>
                      </div>
                    </div>
                    {selDetalle.fecha_vencimiento && (
                      <div style={{marginTop:6,fontSize:11,color:'var(--muted)'}}>
                        Vence: <b style={{color:'var(--amber)'}}>{selDetalle.fecha_vencimiento}</b>
                        {selDetalle.interes_pct > 0 && <span style={{marginLeft:8}}>Interés: <b>{selDetalle.interes_pct}%</b></span>}
                      </div>
                    )}
                  </div>
                )}

                {/* Info empresa */}
                <div style={{padding:'8px 10px',borderRadius:8,background:'var(--bg-card-2)',marginBottom:10}}>
                  <div style={{fontWeight:600,fontSize:13}}>{empresa}</div>
                  <div style={{fontSize:11,color:'var(--muted)'}}>NIT: {nit} · {dir}</div>
                </div>

                {/* Datos */}
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:3,marginBottom:10,fontSize:12}}>
                  {[
                    ['Fecha',      selDetalle.created_at?.slice(0,16)||'—'],
                    ['Cajero',     selDetalle.cajero_nombre||'—'],
                    ['Cliente',    selDetalle.cliente_nombre||'Consumidor final'],
                    ['Método',     selDetalle.metodo_pago],
                    ['Tipo venta', esCredito(selDetalle)?'Crédito':'Contado'],
                    ['Est. pago',  selDetalle.estado_pago||'—'],
                  ].map(([k,v]) => (
                    <div key={k} style={{padding:'4px 0',borderBottom:'1px solid var(--border)'}}>
                      <span style={{color:'var(--muted)'}}>{k}: </span><b>{v}</b>
                    </div>
                  ))}
                </div>

                {/* Items */}
                <div style={{fontSize:11,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.05em',marginBottom:5}}>Productos</div>
                <table style={{marginBottom:10}}>
                  <thead><tr>
                    <th style={{padding:'4px 0',fontSize:11}}>Producto</th>
                    <th style={{textAlign:'center',fontSize:11}}>Cant</th>
                    <th style={{textAlign:'right',fontSize:11}}>P.Unit</th>
                    <th style={{textAlign:'right',fontSize:11}}>Total</th>
                  </tr></thead>
                  <tbody>
                    {(selDetalle.items||[]).map((it,i) => (
                      <tr key={i}>
                        <td style={{padding:'4px 0',fontSize:12,borderBottom:'1px solid var(--border)'}}>{it.nombre}</td>
                        <td className="mono" style={{textAlign:'center',borderBottom:'1px solid var(--border)'}}>{it.cantidad}</td>
                        <td className="mono" style={{textAlign:'right',fontSize:11,borderBottom:'1px solid var(--border)'}}>{money(it.precio_unitario)}</td>
                        <td className="mono" style={{textAlign:'right',fontWeight:600,borderBottom:'1px solid var(--border)'}}>{money(it.subtotal)}</td>
                      </tr>
                    ))}
                    {!selDetalle.items?.length && <tr><td colSpan={4} style={{padding:'8px 0',color:'var(--muted)',fontSize:12}}>Sin items</td></tr>}
                  </tbody>
                </table>

                {/* Totales */}
                <div style={{borderTop:'1px solid var(--border)',paddingTop:8}}>
                  {[
                    ['Subtotal',  money(selDetalle.subtotal), ''],
                    selDetalle.descuento > 0 && ['Descuento', `-${money(selDetalle.descuento)}`, 'var(--green)'],
                    ['IVA 19%',   money(selDetalle.iva), ''],
                    esCredito(selDetalle) && selDetalle.interes_pct > 0 && [`Interés (${selDetalle.interes_pct}%)`, money((selDetalle.total_con_interes||0)-(selDetalle.total||0)), 'var(--amber)'],
                  ].filter(Boolean).map(([k,v,c]) => (
                    <div key={k} className="between" style={{padding:'3px 0',fontSize:12}}>
                      <span style={{color:'var(--muted)'}}>{k}</span>
                      <span className="mono" style={{color:c||'inherit'}}>{v}</span>
                    </div>
                  ))}
                  <div className="between" style={{padding:'8px 0 0',marginTop:4,borderTop:'1px solid var(--border)'}}>
                    <b>TOTAL {esCredito(selDetalle)?'C/INTERÉS':''}</b>
                    <b className="mono" style={{fontSize:17,color:esCredito(selDetalle)?'var(--amber)':'inherit'}}>{money(totalFinal(selDetalle))}</b>
                  </div>
                  {esCredito(selDetalle) && selDetalle.abonos > 0 && (
                    <div className="between" style={{padding:'3px 0',fontSize:12,color:'var(--green)'}}>
                      <span>Abonado</span><span className="mono">-{money(selDetalle.abonos)}</span>
                    </div>
                  )}
                  {esCredito(selDetalle) && saldoPendiente(selDetalle) > 0 && (
                    <div className="between" style={{padding:'3px 0',fontSize:13,fontWeight:700,color:'var(--red)'}}>
                      <span>Saldo pendiente</span><span className="mono">{money(saldoPendiente(selDetalle))}</span>
                    </div>
                  )}
                </div>

                <div style={{marginTop:10,padding:'7px 10px',borderRadius:8,background:'rgba(95,214,208,.06)',border:'1px solid rgba(95,214,208,.15)',fontSize:11,textAlign:'center',color:'var(--muted)'}}>
                  {pie}
                </div>
              </>
            ) : null}
          </div>
        ) : (
          <div className="card center" style={{padding:50,flexDirection:'column',gap:10,color:'var(--muted)'}}>
            <Icon.invoice size={28}/>
            <div style={{fontSize:13}}>Selecciona una venta para ver su comprobante y descargarla</div>
          </div>
        )}
      </div>

      {/* Modal abono */}
      <Modal open={abonoOpen} onClose={()=>setAbonoOpen(false)} title="Registrar abono" sub={`Venta ${selDetalle?.numero} — Saldo: ${money(saldoPendiente(selDetalle))}`} width={380}>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <div style={{background:'rgba(245,158,11,.06)',border:'1px solid rgba(245,158,11,.2)',borderRadius:9,padding:'10px 14px'}}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,fontSize:12,textAlign:'center'}}>
              <div><div style={{color:'var(--muted)',marginBottom:2}}>Total</div><b className="mono">{money(totalFinal(selDetalle))}</b></div>
              <div><div style={{color:'var(--muted)',marginBottom:2}}>Abonado</div><b className="mono" style={{color:'var(--green)'}}>{money(selDetalle?.abonos||0)}</b></div>
              <div><div style={{color:'var(--muted)',marginBottom:2}}>Pendiente</div><b className="mono" style={{color:'var(--red)'}}>{money(saldoPendiente(selDetalle))}</b></div>
            </div>
          </div>
          <div className="field">
            <label>Monto del abono (COP)</label>
            <input className="input mono" type="number" min="1" max={saldoPendiente(selDetalle)}
              value={abonoMonto} onChange={e=>setAbonoMonto(e.target.value)}
              style={{fontSize:20,height:48}} placeholder="0" autoFocus/>
          </div>
          {abonoMonto > 0 && (
            <div style={{fontSize:12,color:'var(--muted)',padding:'8px 12px',background:'var(--bg-card-2)',borderRadius:8}}>
              Saldo tras abono: <b style={{color: Number(abonoMonto)>=saldoPendiente(selDetalle)?'var(--green)':'var(--amber)',fontFamily:'var(--mono)'}}>{money(Math.max(0, saldoPendiente(selDetalle) - Number(abonoMonto)))}</b>
              {Number(abonoMonto) >= saldoPendiente(selDetalle) && <span style={{color:'var(--green)',marginLeft:8}}>✓ Pagado completo</span>}
            </div>
          )}
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setAbonoOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={registrarAbono} disabled={abonoSaving||!abonoMonto}>
            {abonoSaving?<span className="loading-spin"/>:<Icon.check size={14}/>} {abonoSaving?'Guardando…':'Confirmar abono'}
          </button>
        </div>
      </Modal>
    </div>
  );
}

// ── CONFIGURACIÓN ─────────────────────────────────────────────────────────────
function ConfigPage() {
  const toast = useToast();
  const { user } = useAuth();
  const [tab, setTab]     = useState('empresa');
  const [cfg, setCfg]     = useState(null);
  const [saving, setSaving] = useState(false);
  const { data: cfgRemoto, reload: reloadCfg } = useAPI('/config');

  useEffect(() => {
    if (cfgRemoto && !cfg) setCfg(cfgRemoto);
  }, [cfgRemoto]);

  const save = async () => {
    if (!cfg) return;
    setSaving(true);
    try {
      await window.api.put('/config', cfg);
      toast('Configuración guardada correctamente');
      reloadCfg();
    } catch(e) { toast(e.message,'error'); }
    finally { setSaving(false); }
  };

  const isAdmin = user?.rol === 'Administrador';
  if (!cfg) return <div className="page"><Loading/></div>;

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Configuración</h1><p>Parámetros del sistema</p></div>
        {isAdmin && <div className="page-actions"><button className="btn primary" onClick={save} disabled={saving}>{saving?<span className="loading-spin"/>:<Icon.check size={14}/>} Guardar cambios</button></div>}
      </div>

      <div className="row" style={{gap:6,marginBottom:14,flexWrap:'wrap'}}>
        {[{id:'empresa',l:'Empresa'},{id:'impuestos',l:'Impuestos'},{id:'inventario',l:'Inventario'},{id:'fidelizacion',l:'Fidelización'},{id:'alertas',l:'Alertas'},{id:'datos',l:'Datos'}].map(t => (
          <button key={t.id} onClick={()=>setTab(t.id)} className="btn" style={{
            background:tab===t.id?'rgba(95,214,208,.1)':'var(--bg-card)',
            borderColor:tab===t.id?'rgba(95,214,208,.3)':'var(--border)',
            color:tab===t.id?'var(--aqua)':'var(--muted)'
          }}>{t.l}</button>
        ))}
      </div>

      {tab === 'empresa' && (
        <div className="grid-2">
          <div className="card">
            <h3 style={{margin:'0 0 14px',fontSize:14}}>Datos de la empresa</h3>
            {[
              ['Nombre empresa', 'empresa'],
              ['NIT', 'nit'],
              ['Dirección', 'direccion'],
              ['Teléfono', 'telefono'],
              ['Email de contacto', 'email'],
            ].map(([l, k]) => (
              <div className="field" key={k} style={{marginBottom:10}}>
                <label>{l}</label>
                <input className="input" value={cfg[k]||''} onChange={e=>setCfg(c=>({...c,[k]:e.target.value}))} disabled={!isAdmin}/>
              </div>
            ))}
            <div className="field" style={{marginBottom:10}}>
              <label>Pie de factura</label>
              <input className="input" value={cfg.pieMsg||''} onChange={e=>setCfg(c=>({...c,pieMsg:e.target.value}))} disabled={!isAdmin} placeholder="Mensaje al pie de la factura"/>
            </div>
          </div>
          <div className="card">
            <h3 style={{margin:'0 0 14px',fontSize:14}}>Información del sistema</h3>
            {[
              ['Versión', 'v3.0'],
              ['Base de datos', 'SQLite · aquarium.db'],
              ['Servidor', 'Node.js + Express'],
              ['Tu rol', user?.rol],
              ['Sede', user?.sede],
            ].map(([k,v]) => (
              <div key={k} className="between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                <span className="small">{k}</span><span className="mono small">{v}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === 'impuestos' && (
        <div className="card" style={{maxWidth:500}}>
          <h3 style={{margin:'0 0 14px',fontSize:14}}>IVA y reglas fiscales</h3>
          <div className="field" style={{marginBottom:10}}>
            <label>IVA general (%)</label>
            <input className="input mono" type="number" value={cfg.iva} onChange={e=>setCfg(c=>({...c,iva:+e.target.value}))} disabled={!isAdmin}/>
          </div>
          {[['Peces vivos (exento)', '0%'],['Alimentos básicos', '5%'],['ReteFuente compras', '2.5%'],['ReteICA Bogotá', '0.41%']].map(([k,v]) => (
            <div key={k} className="between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
              <span style={{fontSize:13}}>{k}</span><span className="mono small">{v}</span>
            </div>
          ))}
        </div>
      )}

      {tab === 'inventario' && (
        <div className="card" style={{maxWidth:500}}>
          <h3 style={{margin:'0 0 14px',fontSize:14}}>Reglas de inventario</h3>
          <div className="field" style={{marginBottom:10}}>
            <label>Stock mínimo global (alerta)</label>
            <input className="input mono" type="number" value={cfg.stockMinGlobal} onChange={e=>setCfg(c=>({...c,stockMinGlobal:+e.target.value}))} disabled={!isAdmin}/>
          </div>
          <div className="field" style={{marginBottom:10}}>
            <label>Días de cuarentena (peces nuevos)</label>
            <input className="input mono" type="number" value={cfg.cuarentenaDias} onChange={e=>setCfg(c=>({...c,cuarentenaDias:+e.target.value}))} disabled={!isAdmin}/>
          </div>
          <div className="field">
            <label>Alerta mortalidad (%)</label>
            <input className="input mono" type="number" value={cfg.reglaMortAlert} onChange={e=>setCfg(c=>({...c,reglaMortAlert:+e.target.value}))} disabled={!isAdmin}/>
          </div>
        </div>
      )}

      {tab === 'fidelizacion' && (
        <div className="card" style={{maxWidth:500}}>
          <h3 style={{margin:'0 0 14px',fontSize:14}}>Programa de puntos</h3>
          <div className="field" style={{marginBottom:10}}>
            <label>Pesos por punto — por cada $X COP gastados, el cliente gana 1 punto</label>
            <input className="input mono" type="number" min="100" step="100" value={cfg.pesosPorPunto} onChange={e=>setCfg(c=>({...c,pesosPorPunto:+e.target.value}))} disabled={!isAdmin}/>
            <div className="small" style={{marginTop:4}}>Ejemplo: $1.000 = 1 punto · una compra de $50.000 = {Math.floor(50000/(cfg.pesosPorPunto||1000))} puntos</div>
          </div>
          {[['Coral','0 – 499 pts'],['Aqua','500 – 1.499 pts'],['Ocean','1.500 – 4.999 pts'],['Black Reef Elite','5.000+ pts']].map(([n,r]) => (
            <div key={n} className="between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
              <span style={{fontSize:13}}>{n}</span><span className="mono small">{r}</span>
            </div>
          ))}
        </div>
      )}

      {tab === 'alertas' && (
        <div className="card" style={{maxWidth:560}}>
          <h3 style={{margin:'0 0 14px',fontSize:14}}>Reglas de alertas automáticas</h3>
          {[
            {t:'Stock crítico global',       s:'Alerta cuando un SKU baje del mínimo configurado',       on:true},
            {t:'Cuarentena automática',       s:'Peces nuevos quedan en cuarentena N días al ingresar',   on:true},
            {t:'Bloqueo venta en cuarentena', s:'No vender animales en estado Cuarentena o Agotado',      on:true},
            {t:'Alerta mortalidad alta',      s:'Notificar si tasa supera el % configurado',              on:true},
            {t:'Proveedor con alta pérdida',  s:'Marcar proveedor si tasa de pérdida > 10%',              on:true},
          ].map((r,i) => (
            <div key={i} className="between" style={{padding:'12px 0',borderBottom:'1px solid var(--border)'}}>
              <div><div style={{fontSize:13}}>{r.t}</div><div className="small">{r.s}</div></div>
              <div style={{width:34,height:20,borderRadius:99,background:r.on?'var(--aqua)':'rgba(148,163,184,.18)',position:'relative',flexShrink:0}}>
                <span style={{position:'absolute',top:2,left:r.on?16:2,width:16,height:16,borderRadius:99,background:'#031218',transition:'left .15s'}}/>
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === 'datos' && (
        <DatosTab toast={toast} user={user} />
      )}
    </div>
  );
}

// ── DATOS — Backup / Restore ──────────────────────────────────────────────────
function DatosTab({ toast, user }) {
  const [restoring, setRestoring] = useState(false);
  const [msg, setMsg] = useState('');
  const isAdmin = user && user.rol === 'Administrador';

  function descargar() {
    const token = localStorage.getItem('token');
    fetch('/api/admin/backup', { headers: { Authorization: 'Bearer ' + token } })
      .then(function(r) {
        if (!r.ok) throw new Error('Error al generar backup');
        return r.blob();
      })
      .then(function(blob) {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'aquarium-backup-' + new Date().toISOString().slice(0,10) + '.db';
        document.body.appendChild(a); a.click(); a.remove();
        URL.revokeObjectURL(url);
        toast('Backup descargado');
      })
      .catch(function(e) { toast(e.message, 'error'); });
  }

  function restaurar(e) {
    var file = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!file) return;
    if (!file.name.endsWith('.db')) { toast('Selecciona un archivo .db', 'error'); return; }
    if (!window.confirm('¿Restaurar la base de datos? Se reemplazarán TODOS los datos actuales.')) return;
    setRestoring(true);
    setMsg('');
    var reader = new FileReader();
    reader.onload = function(ev) {
      var base64 = ev.target.result.split(',')[1];
      window.api.post('/admin/restore', { data: base64 })
        .then(function(r) {
          setMsg('Restaurado (' + r.size_kb + ' KB). Recarga la página para ver los datos.');
          toast('Restauración exitosa — recarga la página');
        })
        .catch(function(er) { toast(er.message, 'error'); })
        .finally(function() { setRestoring(false); });
    };
    reader.readAsDataURL(file);
  }

  return (
    <div className="grid-2" style={{alignItems:'start'}}>
      <div className="card">
        <h3 style={{margin:'0 0 8px',fontSize:14}}>Backup de datos</h3>
        <p className="small" style={{marginBottom:14,lineHeight:1.6}}>
          Descarga una copia del archivo de base de datos. Guárdalo antes de cada actualización del servidor para no perder datos.
        </p>
        <button className="btn primary" onClick={descargar}>
          <Icon.export size={13}/> Descargar backup (.db)
        </button>
      </div>
      {isAdmin && (
        <div className="card">
          <h3 style={{margin:'0 0 8px',fontSize:14}}>Restaurar base de datos</h3>
          <p className="small" style={{marginBottom:14,lineHeight:1.6}}>
            Sube un backup (.db) previamente descargado. Reemplazará todos los datos actuales.
          </p>
          <label className="btn" style={{cursor:'pointer',display:'inline-flex',alignItems:'center',gap:6}}>
            {restoring ? <span className="loading-spin"/> : <Icon.upload size={13}/>}
            {restoring ? ' Restaurando...' : ' Seleccionar archivo .db'}
            <input type="file" accept=".db" style={{display:'none'}} onChange={restaurar} disabled={restoring}/>
          </label>
          {msg && <p className="small" style={{marginTop:10,color:'var(--aqua)'}}>{msg}</p>}
        </div>
      )}
    </div>
  );
}

// ── TIENDA VIRTUAL ADMIN ──────────────────────────────────────────────────────
function TiendaPedidosPage() {
  const toast = useToast();
  const [q, setQ] = useState('');
  const [estadoF, setEstadoF] = useState('');
  const { data, loading, reload } = useAPI(`/tienda/admin/pedidos${estadoF?'?estado='+estadoF:''}`, [estadoF]);
  const estadoColor = e => e==='confirmado'?'green':e==='pendiente'?'amber':e==='cancelado'?'red':'muted';

  const cambiarEstado = async (id, campo, valor) => {
    try {
      await window.api.put(`/tienda/admin/pedidos/${id}`, { [campo]: valor });
      toast('Estado actualizado');
      reload();
    } catch(e) { toast(e.message,'error'); }
  };

  const pedidos = (data||[]).filter(p => !q || p.numero?.includes(q) || p.cliente_nombre?.toLowerCase().includes(q.toLowerCase()));

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Pedidos Web</h1><p>Órdenes recibidas desde la tienda virtual</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
          <a className="btn primary" href="/tienda.html" target="_blank" style={{display:'flex',alignItems:'center',gap:6}}><Icon.globe size={14}/> Ver tienda</a>
        </div>
      </div>
      <div className="row" style={{gap:8,marginBottom:12,flexWrap:'wrap'}}>
        <input className="input" style={{width:260}} placeholder="Buscar número o cliente..." value={q} onChange={e=>setQ(e.target.value)}/>
        {['','pendiente','confirmado','enviado','entregado','cancelado'].map(e=>(
          <button key={e} className="btn ghost" style={{height:32,fontSize:12,background:estadoF===e?'rgba(95,214,208,.1)':'transparent',borderColor:estadoF===e?'rgba(95,214,208,.3)':'var(--border)',color:estadoF===e?'var(--aqua)':'var(--muted)'}}
            onClick={()=>setEstadoF(e)}>{e||'Todos'}</button>
        ))}
      </div>
      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Número</th><th>Cliente</th><th>Teléfono</th><th>Método pago</th><th style={{textAlign:'right'}}>Total</th><th>Estado pago</th><th>Estado pedido</th><th>Fecha</th><th></th></tr></thead>
            <tbody>
              {pedidos.map(p=>(
                <tr key={p.id}>
                  <td><span className="mono" style={{fontWeight:700,color:'var(--aqua)'}}>{p.numero}</span></td>
                  <td><div style={{fontWeight:600}}>{p.cliente_nombre}</div><div style={{fontSize:11,color:'var(--muted)'}}>{p.cliente_email}</div></td>
                  <td style={{fontSize:13}}>{p.cliente_telefono||'—'}</td>
                  <td><span className="chip">{p.metodo_pago}</span></td>
                  <td style={{textAlign:'right',fontWeight:700}}>{money(p.total)}</td>
                  <td>
                    <select className="input" style={{height:28,padding:'0 8px',fontSize:12,
                      background: p.estado_pago==='pagado'?'rgba(34,197,94,.12)': p.estado_pago==='pendiente'?'rgba(251,191,36,.12)':'rgba(239,68,68,.12)',
                      color: p.estado_pago==='pagado'?'#16a34a': p.estado_pago==='pendiente'?'#d97706':'#dc2626',
                      fontWeight:600, borderColor:'transparent'
                    }}
                      value={p.estado_pago||'pendiente'}
                      onChange={e=>cambiarEstado(p.id,'estado_pago',e.target.value)}>
                      <option value="pendiente">Pendiente</option>
                      <option value="pagado">Pagado</option>
                      <option value="rechazado">Rechazado</option>
                      <option value="reembolsado">Reembolsado</option>
                    </select>
                  </td>
                  <td>
                    <select className="input" style={{height:28,padding:'0 8px',fontSize:12}} value={p.estado} onChange={e=>cambiarEstado(p.id,'estado',e.target.value)}>
                      {['pendiente','confirmado','en preparación','enviado','entregado','cancelado'].map(s=><option key={s}>{s}</option>)}
                    </select>
                  </td>
                  <td style={{fontSize:11,color:'var(--muted)'}}>{p.created_at?.slice(0,16)}</td>
                  <td>
                    {p.cliente_telefono && <a href={`https://wa.me/${p.cliente_telefono.replace(/\D/g,'')}?text=${encodeURIComponent('Hola '+p.cliente_nombre+'! Tu pedido '+p.numero+' está siendo procesado.')}`} target="_blank" className="btn ghost" style={{height:28,padding:'0 8px',fontSize:11}}>WhatsApp</a>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
        {!loading && !pedidos.length && <div className="empty-state"><Icon.cart size={32}/><p>No hay pedidos</p></div>}
      </div>
    </div>
  );
}

function TiendaCuponesPage() {
  const toast = useToast();
  const { data, loading, reload } = useAPI('/tienda/admin/cupones');
  const [addOpen, setAddOpen] = useState(false);
  const [form, setForm] = useState({ codigo:'', tipo:'porcentaje', valor:'', minimo:'', usos_max:100, vence:'' });

  const save = async () => {
    if (!form.codigo || !form.valor) { toast('Código y valor son obligatorios','error'); return; }
    try { await window.api.post('/tienda/admin/cupones', form); toast('Cupón creado'); setAddOpen(false); reload(); setForm({codigo:'',tipo:'porcentaje',valor:'',minimo:'',usos_max:100,vence:''}); }
    catch(e) { toast(e.message,'error'); }
  };
  const toggle = async (id, activo) => {
    try { await window.api.put(`/tienda/admin/cupones/${id}`, { activo: !activo }); reload(); }
    catch(e) { toast(e.message,'error'); }
  };
  const del = async (id) => {
    if (!confirm('¿Eliminar cupón?')) return;
    try { await window.api.delete(`/tienda/admin/cupones/${id}`); reload(); }
    catch(e) { toast(e.message,'error'); }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Cupones</h1><p>Descuentos para la tienda virtual</p></div>
        <div className="page-actions">
          <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
          <button className="btn primary" onClick={()=>setAddOpen(true)}><Icon.plus size={14}/> Nuevo cupón</button>
        </div>
      </div>
      <div className="card" style={{padding:0}}>
        {loading ? <Loading/> : (
          <table>
            <thead><tr><th>Código</th><th>Tipo</th><th>Valor</th><th>Mínimo</th><th>Usos</th><th>Vence</th><th>Estado</th><th></th></tr></thead>
            <tbody>
              {(data||[]).map(c=>(
                <tr key={c.id}>
                  <td><span className="mono" style={{fontWeight:800,fontSize:15,color:'var(--aqua)'}}>{c.codigo}</span></td>
                  <td><span className="chip">{c.tipo}</span></td>
                  <td style={{fontWeight:700}}>{c.tipo==='porcentaje' ? c.valor+'%' : money(c.valor)}</td>
                  <td style={{fontSize:13}}>{c.minimo > 0 ? money(c.minimo) : '—'}</td>
                  <td style={{fontSize:13}}>{c.usos_actuales} / {c.usos_max}</td>
                  <td style={{fontSize:12,color:'var(--muted)'}}>{c.vence||'Sin límite'}</td>
                  <td><span className={`chip ${c.activo?'green':'red'}`}>{c.activo?'Activo':'Inactivo'}</span></td>
                  <td className="row" style={{gap:4}}>
                    <button className="btn ghost" style={{height:28,padding:'0 8px',fontSize:12}} onClick={()=>toggle(c.id,c.activo)}>{c.activo?'Pausar':'Activar'}</button>
                    <button className="btn ghost" style={{height:28,padding:'0 8px',fontSize:12,color:'var(--red)'}} onClick={()=>del(c.id)}><Icon.trash size={12}/></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
        {!loading && !(data||[]).length && <div className="empty-state"><Icon.tag size={32}/><p>No hay cupones</p></div>}
      </div>

      <Modal open={addOpen} onClose={()=>setAddOpen(false)} title="Nuevo cupón" width={460}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Código *</label>
            <input className="input" value={form.codigo} onChange={e=>setForm({...form,codigo:e.target.value.toUpperCase()})} placeholder="Ej: VERANO20"/>
          </div>
          <div className="field"><label>Tipo</label>
            <select className="input" value={form.tipo} onChange={e=>setForm({...form,tipo:e.target.value})}>
              <option value="porcentaje">Porcentaje (%)</option>
              <option value="fijo">Monto fijo (COP)</option>
            </select>
          </div>
          <div className="field"><label>Valor *</label>
            <input className="input mono" type="number" value={form.valor} onChange={e=>setForm({...form,valor:+e.target.value})} placeholder={form.tipo==='porcentaje'?'10':'20000'}/>
          </div>
          <div className="field"><label>Compra mínima (COP)</label>
            <input className="input mono" type="number" value={form.minimo} onChange={e=>setForm({...form,minimo:+e.target.value})} placeholder="0"/>
          </div>
          <div className="field"><label>Usos máximos</label>
            <input className="input mono" type="number" value={form.usos_max} onChange={e=>setForm({...form,usos_max:+e.target.value})}/>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}><label>Fecha de vencimiento</label>
            <input className="input" type="date" value={form.vence} onChange={e=>setForm({...form,vence:e.target.value})}/>
          </div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setAddOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={save}><Icon.check size={14}/> Crear cupón</button>
        </div>
      </Modal>
    </div>
  );
}

// ── CRÉDITOS PROVEEDORES ──────────────────────────────────────────────────────
function CreditosProvPage() {
  const toast = useToast();
  const { data: provs, loading, reload } = useAPI('/creditos-prov');
  const [sel, setSel]     = useState(null);
  const [movs, setMovs]   = useState(null);
  const [saldo, setSaldo] = useState(0);
  const [addOpen, setAddOpen] = useState(false);
  const [loadingMov, setLoadingMov] = useState(false);
  const [form, setForm]   = useState({ tipo:'credito', monto:'', descripcion:'', fecha: new Date().toISOString().slice(0,10) });

  const verMov = async (prov) => {
    setSel(prov); setLoadingMov(true);
    try {
      const d = await window.api.get(`/creditos-prov/${prov.id}/movimientos`);
      setMovs(d.movimientos); setSaldo(d.saldo);
    } finally { setLoadingMov(false); }
  };

  const guardar = async () => {
    if (!form.monto || !sel) return;
    try {
      await window.api.post(`/creditos-prov/${sel.id}/movimiento`, form);
      toast('Movimiento registrado');
      setAddOpen(false);
      setForm({ tipo:'credito', monto:'', descripcion:'', fecha: new Date().toISOString().slice(0,10) });
      verMov(sel); reload();
    } catch(e) { toast(e.message,'error'); }
  };

  const eliminar = async (id) => {
    if (!confirm('¿Eliminar movimiento?')) return;
    try { await window.api.delete(`/creditos-prov/mov/${id}`); verMov(sel); reload(); toast('Eliminado','warn'); }
    catch(e) { toast(e.message,'error'); }
  };

  const totalDeuda   = (provs||[]).reduce((s,p) => p.saldo > 0 ? s + p.saldo : s, 0);
  const totalAFavor  = (provs||[]).reduce((s,p) => p.saldo < 0 ? s + Math.abs(p.saldo) : s, 0);
  const conDeuda     = (provs||[]).filter(p => p.saldo > 0).length;

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Créditos de Proveedores</h1><p>Trazabilidad de deudas, abonos y créditos recibidos</p></div>
        <button className="btn" onClick={reload}><Icon.refresh size={14}/></button>
      </div>

      {/* KPIs */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14,marginBottom:20}}>
        {[
          { label:'Deuda total',   val: window.money(totalDeuda),   sub:`${conDeuda} proveedores`,     color:'var(--red)',   bg:'rgba(239,68,68,.06)',  border:'rgba(239,68,68,.15)',   icon:'↑' },
          { label:'A tu favor',   val: window.money(totalAFavor),  sub:'Saldo positivo',              color:'var(--green)', bg:'rgba(34,197,94,.06)',   border:'rgba(34,197,94,.15)',   icon:'↓' },
          { label:'Proveedores',  val: (provs||[]).length,         sub:`${(provs||[]).filter(p=>p.movimientos>0).length} con movimientos`, color:'var(--aqua)', bg:'rgba(95,214,208,.06)', border:'rgba(95,214,208,.15)', icon:'#' },
        ].map(k => (
          <div key={k.label} style={{background:k.bg, border:`1px solid ${k.border}`, borderRadius:14, padding:'18px 20px', display:'flex', alignItems:'center', gap:16}}>
            <div style={{width:44,height:44,borderRadius:12,background:k.bg,border:`1.5px solid ${k.border}`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:20,color:k.color,fontWeight:800,flexShrink:0}}>{k.icon}</div>
            <div>
              <div style={{fontSize:22,fontWeight:800,color:k.color,fontFamily:'var(--mono)',lineHeight:1}}>{k.val}</div>
              <div style={{fontSize:12,color:'var(--muted)',marginTop:4}}>{k.label} · {k.sub}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'280px 1fr',gap:16,alignItems:'start'}}>

        {/* Lista proveedores */}
        <div className="card" style={{padding:0,overflow:'hidden'}}>
          <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <span style={{fontWeight:600,fontSize:13}}>Proveedores</span>
            <span className="chip">{(provs||[]).length}</span>
          </div>
          {loading ? <Loading/> : (provs||[]).length === 0
            ? <div className="empty-state" style={{padding:32}}><Icon.truck size={28}/><p>Sin proveedores</p></div>
            : (provs||[]).map(p => (
            <div key={p.id} onClick={()=>verMov(p)} style={{
              padding:'11px 16px', borderBottom:'1px solid var(--border)', cursor:'pointer',
              borderLeft: sel?.id===p.id ? '3px solid var(--aqua)' : '3px solid transparent',
              background: sel?.id===p.id ? 'rgba(95,214,208,.06)' : 'transparent',
              transition:'background .15s',
            }}
              onMouseOver={e=>{if(sel?.id!==p.id)e.currentTarget.style.background='var(--hover)'}}
              onMouseOut={e=>{if(sel?.id!==p.id)e.currentTarget.style.background='transparent'}}>
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:4}}>
                <span style={{fontWeight:600,fontSize:13}}>{p.nombre}</span>
                <span className={`chip ${p.saldo>0?'red':p.saldo<0?'green':''}`} style={{fontSize:10.5,fontFamily:'var(--mono)'}}>
                  {p.saldo>0?'−':'+'}{window.money(Math.abs(p.saldo))}
                </span>
              </div>
              <div style={{fontSize:11,color:'var(--muted)'}}>
                {p.movimientos} movimientos · {p.saldo>0?'Debes':'Saldo a favor'}
              </div>
            </div>
          ))}
        </div>

        {/* Panel detalle */}
        {!sel ? (
          <div className="card" style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',minHeight:320,color:'var(--muted)',gap:12}}>
            <div style={{width:56,height:56,borderRadius:16,background:'var(--hover)',display:'flex',alignItems:'center',justifyContent:'center'}}>
              <Icon.truck size={24} style={{opacity:.4}}/>
            </div>
            <p style={{fontSize:14,margin:0}}>Selecciona un proveedor</p>
            <p style={{fontSize:12,margin:0}}>Ver movimientos, saldo y estado de cuenta</p>
          </div>
        ) : (
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            {/* Header proveedor */}
            <div className="card" style={{padding:0,overflow:'hidden'}}>
              <div style={{background:'linear-gradient(135deg,rgba(95,214,208,.08),rgba(74,144,226,.08))',borderBottom:'1px solid var(--border)',padding:'16px 20px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:16}}>
                <div>
                  <div style={{fontWeight:700,fontSize:16,marginBottom:3}}>{sel.nombre}</div>
                  <div style={{fontSize:12,color:'var(--muted)',display:'flex',gap:12,flexWrap:'wrap'}}>
                    {sel.telefono&&<span>📞 {sel.telefono}</span>}
                    {sel.email&&<span>✉ {sel.email}</span>}
                    {sel.contacto&&<span>👤 {sel.contacto}</span>}
                  </div>
                </div>
                <div style={{display:'flex',alignItems:'center',gap:12}}>
                  <div style={{textAlign:'right'}}>
                    <div style={{fontSize:11,color:'var(--muted)',marginBottom:2}}>Saldo total</div>
                    <div style={{fontSize:24,fontWeight:800,fontFamily:'var(--mono)',color:saldo>0?'var(--red)':'var(--green)'}}>{window.money(Math.abs(saldo))}</div>
                    <div style={{fontSize:11,fontWeight:600,color:saldo>0?'var(--red)':'var(--green)'}}>{saldo>0?'Debes':'A tu favor'}</div>
                  </div>
                  <div style={{display:'flex',flexDirection:'column',gap:6}}>
                    <button className="btn primary" style={{height:32,fontSize:12,gap:5}} onClick={()=>setAddOpen(true)}>
                      <Icon.plus size={12}/> Movimiento
                    </button>
                    <a href={`/api/pdf/credito-proveedor/${sel.id}?token=${localStorage.getItem('ad_token')}`} target="_blank"
                      className="btn ghost" style={{height:32,fontSize:12,gap:5,display:'flex',alignItems:'center',justifyContent:'center'}}>
                      <Icon.filePdf size={12}/> PDF
                    </a>
                  </div>
                </div>
              </div>

              {/* Tabla movimientos */}
              {loadingMov ? <div style={{padding:40}}><Loading/></div> : (movs||[]).length === 0
                ? <div className="empty-state"><p>Sin movimientos registrados</p></div>
                : (()=>{
                    let acum = 0;
                    const filas = [...(movs||[])].reverse().map(m => {
                      acum += m.tipo === 'credito' ? m.monto : -m.monto;
                      return { ...m, acum };
                    });
                    return (
                      <table>
                        <thead><tr><th>Fecha</th><th>Tipo</th><th>Descripción</th><th style={{textAlign:'right'}}>Monto</th><th style={{textAlign:'right'}}>Saldo acum.</th><th style={{width:40}}></th></tr></thead>
                        <tbody>
                          {filas.map(m=>(
                            <tr key={m.id}>
                              <td style={{fontFamily:'var(--mono)',fontSize:12,color:'var(--muted)'}}>{m.fecha||'—'}</td>
                              <td>
                                <span className={`chip ${m.tipo==='abono'?'green':'red'}`}>
                                  {m.tipo==='abono'?'↑ Abono':'↓ Crédito'}
                                </span>
                              </td>
                              <td style={{fontSize:13,maxWidth:200,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{m.descripcion||<span style={{color:'var(--muted)'}}>—</span>}</td>
                              <td style={{textAlign:'right',fontFamily:'var(--mono)',fontWeight:600,color:m.tipo==='abono'?'var(--green)':'var(--red)'}}>
                                {m.tipo==='abono'?'+':'−'}{window.money(m.monto)}
                              </td>
                              <td style={{textAlign:'right',fontFamily:'var(--mono)',fontWeight:700,color:m.acum>0?'var(--red)':'var(--green)'}}>
                                {window.money(Math.abs(m.acum))}
                              </td>
                              <td>
                                <button className="btn ghost" style={{height:26,minWidth:26,padding:0}} onClick={()=>eliminar(m.id)}>
                                  <Icon.trash size={11}/>
                                </button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    );
                  })()
              }
            </div>
          </div>
        )}
      </div>

      <Modal open={addOpen} onClose={()=>setAddOpen(false)} title={`Registrar movimiento — ${sel?.nombre}`} width={440}>
        {/* Tipo selector visual */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:16}}>
          {[
            {v:'credito', label:'Crédito recibido', sub:'El proveedor nos fía', color:'var(--red)', bg:'rgba(239,68,68,.06)', border:'rgba(239,68,68,.2)', icon:'↓'},
            {v:'abono',   label:'Abono pagado',     sub:'Nosotros pagamos',    color:'var(--green)', bg:'rgba(34,197,94,.06)', border:'rgba(34,197,94,.2)', icon:'↑'},
          ].map(t=>(
            <button key={t.v} onClick={()=>setForm({...form,tipo:t.v})} style={{
              padding:'12px 14px',borderRadius:10,cursor:'pointer',textAlign:'left',
              border:`1.5px solid ${form.tipo===t.v?t.border:'var(--border)'}`,
              background: form.tipo===t.v ? t.bg : 'transparent',
              transition:'all .15s',
            }}>
              <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
                <span style={{fontSize:20,color:t.color,fontWeight:800}}>{t.icon}</span>
                <span style={{fontWeight:600,fontSize:13,color:form.tipo===t.v?t.color:'var(--fg)'}}>{t.label}</span>
              </div>
              <div style={{fontSize:11,color:'var(--muted)'}}>{t.sub}</div>
            </button>
          ))}
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <div className="field"><label>Monto (COP)</label>
              <input className="input mono" type="number" min="1" value={form.monto} onChange={e=>setForm({...form,monto:e.target.value})} placeholder="0" style={{fontSize:16,height:40}}/>
            </div>
            <div className="field"><label>Fecha</label>
              <input className="input" type="date" value={form.fecha} onChange={e=>setForm({...form,fecha:e.target.value})} style={{height:40}}/>
            </div>
          </div>
          <div className="field"><label>Descripción (opcional)</label>
            <input className="input" value={form.descripcion} onChange={e=>setForm({...form,descripcion:e.target.value})} placeholder="Ej: Factura #123, pedido de filtros, abono parcial..."/>
          </div>
          {form.monto > 0 && (
            <div style={{background:form.tipo==='credito'?'rgba(239,68,68,.06)':'rgba(34,197,94,.06)',border:`1px solid ${form.tipo==='credito'?'rgba(239,68,68,.2)':'rgba(34,197,94,.2)'}`,borderRadius:9,padding:'10px 14px',fontSize:13,fontWeight:600,color:form.tipo==='credito'?'var(--red)':'var(--green)'}}>
              {form.tipo==='credito'?'Se sumará':'Se restará'} {window.money(Number(form.monto))} al saldo con {sel?.nombre}
            </div>
          )}
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setAddOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={guardar} disabled={!form.monto}>
            <Icon.check size={14}/> Registrar {form.tipo}
          </button>
        </div>
      </Modal>
    </div>
  );
}

// ── CUARENTENA ────────────────────────────────────────────────────────────────
function CuarentenaPage() {
  const toast   = useToast();
  const [tab, setTab] = useState('activas'); // activas | historial
  const [registros, setRegistros] = useState([]);
  const [historial, setHistorial] = useState([]);
  const [stats, setStats]   = useState(null);
  const [animales, setAnimales] = useState([]);
  const [loading, setLoading] = useState(true);

  // Modales
  const [newOpen, setNewOpen]         = useState(false);
  const [editOpen, setEditOpen]       = useState(false);
  const [liberarOpen, setLiberarOpen] = useState(false);
  const [bajaOpen, setBajaOpen]       = useState(false);
  const [selReg, setSelReg]           = useState(null);

  // Forms
  const hoy = new Date().toISOString().slice(0,10);
  const [formNew, setFormNew]       = useState({ animal_id:'', cantidad:1, tipo:'preventiva', enfermedad:'', inicio:hoy, fin_estimado:'', notas:'' });
  const [formLiberar, setFormLiberar] = useState({ cantidad_liberar:'', fin_real:hoy, notas_liberacion:'' });
  const [formBaja, setFormBaja]       = useState({ cantidad_baja:'', motivo:'' });
  const [busqAnimal, setBusqAnimal]   = useState('');
  const [saving, setSaving]           = useState(false);

  const cargar = async () => {
    setLoading(true);
    try {
      const [r, h, s, a] = await Promise.all([
        window.api.get('/cuarentenas'),
        window.api.get('/cuarentenas/historial'),
        window.api.get('/cuarentenas/stats'),
        window.api.get('/animales'),
      ]);
      setRegistros(r||[]); setHistorial(h||[]); setStats(s); setAnimales(a||[]);
    } catch(e) { toast(e.message,'error'); }
    finally { setLoading(false); }
  };
  useEffect(()=>{ cargar(); },[]);

  const crearQ = async () => {
    if (!formNew.animal_id || !formNew.cantidad) return toast('Selecciona animal y cantidad','error');
    setSaving(true);
    try {
      await window.api.post('/cuarentenas', formNew);
      toast('Cuarentena registrada'); setNewOpen(false);
      setFormNew({ animal_id:'', cantidad:1, tipo:'preventiva', enfermedad:'', inicio:hoy, fin_estimado:'', notas:'' });
      cargar();
    } catch(e) { toast(e.message,'error'); }
    finally { setSaving(false); }
  };

  const liberarQ = async () => {
    setSaving(true);
    try {
      await window.api.post(`/cuarentenas/${selReg.id}/liberar`, formLiberar);
      toast(`${formLiberar.cantidad_liberar||selReg.cantidad} animales liberados`,'success');
      setLiberarOpen(false); cargar();
    } catch(e) { toast(e.message,'error'); }
    finally { setSaving(false); }
  };

  const bajaQ = async () => {
    if (!confirm(`¿Confirmar baja de ${formBaja.cantidad_baja||selReg.cantidad} ${selReg.especie}? Esto descuenta del stock.`)) return;
    setSaving(true);
    try {
      await window.api.post(`/cuarentenas/${selReg.id}/baja`, formBaja);
      toast('Baja registrada','warn'); setBajaOpen(false); cargar();
    } catch(e) { toast(e.message,'error'); }
    finally { setSaving(false); }
  };

  const eliminarQ = async (id) => {
    if (!confirm('¿Eliminar este registro?')) return;
    try { await window.api.delete(`/cuarentenas/${id}`); cargar(); toast('Eliminado','warn'); }
    catch(e) { toast(e.message,'error'); }
  };

  const dias = (fin) => {
    if (!fin) return null;
    return Math.ceil((new Date(fin) - new Date()) / 86400000);
  };

  const animalesFiltrados = animales.filter(a =>
    !busqAnimal || a.especie.toLowerCase().includes(busqAnimal.toLowerCase()) || a.grupo.toLowerCase().includes(busqAnimal.toLowerCase())
  );

  const selAnimal = animales.find(a => a.id === Number(formNew.animal_id));
  const enQActiva = selAnimal ? (registros.filter(r=>r.animal_id===selAnimal.id).reduce((s,r)=>s+r.cantidad,0)) : 0;
  const disponible = selAnimal ? selAnimal.stock - enQActiva : 0;

  const chipTipo = t => t==='enfermedad' ? 'red' : t==='preventiva' ? 'amber' : 'muted';
  const labelTipo = t => t==='enfermedad' ? '🦠 Enfermedad' : t==='preventiva' ? '🛡 Preventiva' : t;
  const chipEstado = e => e==='liberada'?'green':e==='baja'?'red':'amber';

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Cuarentena</h1><p>Aislamiento por lote — controla exactamente cuántos animales están en cuarentena</p></div>
        <div className="row" style={{gap:8}}>
          <button className="btn" onClick={cargar}><Icon.refresh size={14}/></button>
          <button className="btn primary" onClick={()=>setNewOpen(true)}><Icon.plus size={14}/> Nueva cuarentena</button>
        </div>
      </div>

      {/* KPIs */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:12,marginBottom:20}}>
        {[
          { label:'Registros activos',      val:stats?.registros_activos||0,        color:'var(--amber)', bg:'rgba(245,158,11,.06)', border:'rgba(245,158,11,.15)', icon:<Icon.flask size={18}/> },
          { label:'Animales en cuarentena', val:stats?.animales_en_cuarentena||0,   color:'var(--red)',   bg:'rgba(239,68,68,.06)',  border:'rgba(239,68,68,.15)',  icon:<Icon.alert size={18}/> },
          { label:'Por enfermedad',         val:stats?.por_enfermedad||0,           color:'var(--red)',   bg:'rgba(239,68,68,.06)',  border:'rgba(239,68,68,.15)',  icon:<Icon.bug size={18}/> },
          { label:'Preventiva',             val:stats?.preventiva||0,              color:'var(--violet)',bg:'rgba(124,131,253,.06)',border:'rgba(124,131,253,.15)',icon:<Icon.shield size={18}/> },
          { label:'Liberadas (total)',       val:stats?.liberadas_total||0,          color:'var(--green)', bg:'rgba(34,197,94,.06)',  border:'rgba(34,197,94,.15)',  icon:<Icon.check size={18}/> },
        ].map(k=>(
          <div key={k.label} style={{background:k.bg,border:`1px solid ${k.border}`,borderRadius:12,padding:'14px 16px',display:'flex',gap:12,alignItems:'center'}}>
            <div style={{width:36,height:36,borderRadius:10,background:k.bg,border:`1px solid ${k.border}`,display:'flex',alignItems:'center',justifyContent:'center',color:k.color,flexShrink:0}}>{k.icon}</div>
            <div>
              <div style={{fontSize:22,fontWeight:800,color:k.color,lineHeight:1,fontFamily:'var(--mono)'}}>{loading?'…':k.val}</div>
              <div style={{fontSize:11,color:'var(--muted)',marginTop:3,lineHeight:1.3}}>{k.label}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div style={{display:'flex',gap:0,marginBottom:16,borderBottom:'1px solid var(--border)'}}>
        {[['activas','Activas'],['historial','Historial']].map(([v,l])=>(
          <button key={v} onClick={()=>setTab(v)} style={{
            padding:'9px 20px',fontSize:13,fontWeight:tab===v?600:400,
            color:tab===v?'var(--aqua)':'var(--muted)',background:'transparent',border:'none',cursor:'pointer',
            borderBottom:tab===v?'2px solid var(--aqua)':'2px solid transparent',
            marginBottom:-1,transition:'color .15s',
          }}>{l} {v==='activas'&&registros.length>0&&<span className="chip amber" style={{marginLeft:6,fontSize:10}}>{registros.length}</span>}</button>
        ))}
      </div>

      {/* TABLA ACTIVAS */}
      {tab === 'activas' && (
        <div className="card" style={{padding:0,overflow:'hidden'}}>
          {loading ? <Loading/> : registros.length === 0 ? (
            <div className="empty-state" style={{padding:'56px 32px'}}>
              <Icon.flask size={40} style={{opacity:.2,marginBottom:16}}/>
              <p style={{fontSize:15,margin:'0 0 6px',fontWeight:600}}>Sin cuarentenas activas</p>
              <p style={{fontSize:12,color:'var(--muted)',margin:'0 0 20px'}}>Registra una nueva para controlar el aislamiento por lote</p>
              <button className="btn primary" onClick={()=>setNewOpen(true)}><Icon.plus size={13}/> Nueva cuarentena</button>
            </div>
          ) : (
            <table>
              <thead>
                <tr>
                  <th>Animal</th>
                  <th style={{textAlign:'center'}}>Cantidad</th>
                  <th>Tipo</th>
                  <th>Enfermedad / Motivo</th>
                  <th>Inicio</th>
                  <th>Fin estimado</th>
                  <th style={{textAlign:'center'}}>Días</th>
                  <th>Registrado por</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {registros.map(r=>{
                  const d = dias(r.fin_estimado);
                  return (
                    <tr key={r.id}>
                      <td>
                        <div style={{display:'flex',alignItems:'center',gap:10}}>
                          {r.imagen
                            ? <img src={r.imagen} style={{width:32,height:32,borderRadius:8,objectFit:'cover',flexShrink:0}}/>
                            : <div style={{width:32,height:32,borderRadius:8,background:'var(--hover)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><Icon.fish size={14} style={{opacity:.4}}/></div>
                          }
                          <div>
                            <div style={{fontWeight:600,fontSize:13}}>{r.especie}</div>
                            <div style={{fontSize:11,color:'var(--muted)'}}>{r.grupo} · {r.stock_total} en inventario</div>
                          </div>
                        </div>
                      </td>
                      <td style={{textAlign:'center'}}>
                        <div style={{fontSize:22,fontWeight:800,color:'var(--amber)',fontFamily:'var(--mono)'}}>{r.cantidad}</div>
                        <div style={{fontSize:10,color:'var(--muted)'}}>unid.</div>
                      </td>
                      <td><span className={`chip ${chipTipo(r.tipo)}`}>{labelTipo(r.tipo)}</span></td>
                      <td style={{maxWidth:200}}>
                        {r.enfermedad
                          ? <span style={{fontSize:12,color:'var(--red)',display:'-webkit-box',WebkitLineClamp:2,WebkitBoxOrient:'vertical',overflow:'hidden'}}>{r.enfermedad}</span>
                          : <span style={{color:'var(--muted)',fontSize:12}}>—</span>}
                        {r.notas && <div style={{fontSize:11,color:'var(--muted)',marginTop:2}}>{r.notas}</div>}
                      </td>
                      <td style={{fontSize:12,fontFamily:'var(--mono)',color:'var(--muted)'}}>{r.inicio||'—'}</td>
                      <td style={{fontSize:12,fontFamily:'var(--mono)',color:'var(--muted)'}}>{r.fin_estimado||'Sin fecha'}</td>
                      <td style={{textAlign:'center'}}>
                        {d!==null
                          ? <span className={`chip ${d<0?'green':d<=3?'red':d<=7?'amber':''}`}>{d<0?'Vencida':d===0?'Hoy':d+' días'}</span>
                          : <span style={{color:'var(--muted)',fontSize:12}}>—</span>}
                      </td>
                      <td style={{fontSize:12,color:'var(--muted)'}}>{r.creado_por||'—'}</td>
                      <td>
                        <div style={{display:'flex',gap:5,flexDirection:'column'}}>
                          <button className="btn ghost" style={{height:28,padding:'0 8px',fontSize:11,gap:4,color:'var(--green)',borderColor:'rgba(34,197,94,.25)'}}
                            onClick={()=>{setSelReg(r);setFormLiberar({cantidad_liberar:r.cantidad,fin_real:hoy,notas_liberacion:''});setLiberarOpen(true);}}>
                            <Icon.check size={11}/> Liberar
                          </button>
                          <button className="btn ghost danger" style={{height:28,padding:'0 8px',fontSize:11,gap:4}}
                            onClick={()=>{setSelReg(r);setFormBaja({cantidad_baja:r.cantidad,motivo:''});setBajaOpen(true);}}>
                            <Icon.death size={11}/> Baja
                          </button>
                          <button className="btn ghost" style={{height:28,minWidth:28,padding:0}} onClick={()=>eliminarQ(r.id)}>
                            <Icon.trash size={11}/>
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      )}

      {/* HISTORIAL */}
      {tab === 'historial' && (
        <div className="card" style={{padding:0,overflow:'hidden'}}>
          <table>
            <thead><tr><th>Animal</th><th style={{textAlign:'center'}}>Cant.</th><th>Tipo</th><th>Enfermedad</th><th>Inicio</th><th>Fin real</th><th>Estado</th><th>Registrado por</th></tr></thead>
            <tbody>
              {historial.map(r=>(
                <tr key={r.id} style={{opacity:r.estado==='activa'?1:.7}}>
                  <td><div style={{fontWeight:600,fontSize:13}}>{r.especie}</div><div style={{fontSize:11,color:'var(--muted)'}}>{r.grupo}</div></td>
                  <td style={{textAlign:'center',fontFamily:'var(--mono)',fontWeight:700}}>{r.cantidad}</td>
                  <td><span className={`chip ${chipTipo(r.tipo)}`}>{labelTipo(r.tipo)}</span></td>
                  <td style={{fontSize:12,maxWidth:180,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{r.enfermedad||'—'}</td>
                  <td style={{fontSize:12,fontFamily:'var(--mono)',color:'var(--muted)'}}>{r.inicio||'—'}</td>
                  <td style={{fontSize:12,fontFamily:'var(--mono)',color:'var(--muted)'}}>{r.fin_real||r.fin_estimado||'—'}</td>
                  <td><span className={`chip ${chipEstado(r.estado)}`}>{r.estado}</span></td>
                  <td style={{fontSize:12,color:'var(--muted)'}}>{r.creado_por||'—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {historial.length===0&&<div className="empty-state"><p>Sin historial</p></div>}
        </div>
      )}

      {/* MODAL: Nueva cuarentena */}
      <Modal open={newOpen} onClose={()=>setNewOpen(false)} title="Nueva cuarentena" sub="Registra un lote específico de animales en aislamiento" width={520}>
        {/* Selector tipo */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:16}}>
          {[
            {v:'preventiva',label:'Preventiva',    sub:'Llegada nueva, precaución',   color:'var(--amber)', bg:'rgba(245,158,11,.06)',  border:'rgba(245,158,11,.25)'},
            {v:'enfermedad',label:'Por enfermedad',sub:'Animal con signos clínicos',  color:'var(--red)',   bg:'rgba(239,68,68,.06)',   border:'rgba(239,68,68,.25)'},
          ].map(t=>(
            <button key={t.v} onClick={()=>setFormNew({...formNew,tipo:t.v})} style={{
              padding:'11px 14px',borderRadius:10,cursor:'pointer',textAlign:'left',
              border:`1.5px solid ${formNew.tipo===t.v?t.border:'var(--border)'}`,
              background:formNew.tipo===t.v?t.bg:'transparent',transition:'all .15s',
            }}>
              <div style={{fontWeight:600,fontSize:13,color:formNew.tipo===t.v?t.color:'var(--fg)',marginBottom:2}}>{t.label}</div>
              <div style={{fontSize:11,color:'var(--muted)'}}>{t.sub}</div>
            </button>
          ))}
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          {/* Buscador animal */}
          <div className="field">
            <label>Animal</label>
            <input className="input" value={busqAnimal} onChange={e=>setBusqAnimal(e.target.value)} placeholder="Buscar por especie o grupo..."/>
            {busqAnimal && (
              <div style={{border:'1px solid var(--border)',borderRadius:8,background:'var(--bg-card)',maxHeight:160,overflowY:'auto',marginTop:4}}>
                {animalesFiltrados.slice(0,8).map(a=>(
                  <div key={a.id} onClick={()=>{setFormNew({...formNew,animal_id:a.id});setBusqAnimal('');}}
                    style={{padding:'8px 12px',cursor:'pointer',borderBottom:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'center'}}
                    onMouseOver={e=>e.currentTarget.style.background='var(--hover)'}
                    onMouseOut={e=>e.currentTarget.style.background=''}>
                    <div>
                      <div style={{fontWeight:500,fontSize:13}}>{a.especie}</div>
                      <div style={{fontSize:11,color:'var(--muted)'}}>{a.grupo}</div>
                    </div>
                    <span className="chip">{a.stock} disp.</span>
                  </div>
                ))}
                {animalesFiltrados.length===0&&<div style={{padding:'12px',color:'var(--muted)',fontSize:13}}>Sin resultados</div>}
              </div>
            )}
            {selAnimal && (
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',background:'rgba(95,214,208,.06)',border:'1px solid rgba(95,214,208,.2)',borderRadius:8,padding:'8px 12px',marginTop:4}}>
                <div>
                  <span style={{fontWeight:600,fontSize:13,color:'var(--aqua)'}}>{selAnimal.especie}</span>
                  <span style={{fontSize:12,color:'var(--muted)',marginLeft:8}}>{selAnimal.grupo}</span>
                </div>
                <div style={{fontSize:12,color:'var(--muted)'}}>
                  Stock: <b style={{color:'var(--fg)'}}>{selAnimal.stock}</b> · En cuarentena: <b style={{color:'var(--amber)'}}>{enQActiva}</b> · Disponibles: <b style={{color:'var(--green)'}}>{disponible}</b>
                </div>
                <button onClick={()=>setFormNew({...formNew,animal_id:''})} style={{background:'none',border:'none',color:'var(--muted)',cursor:'pointer',fontSize:16}}>×</button>
              </div>
            )}
          </div>

          {/* Cantidad */}
          <div className="field">
            <label>Cantidad a poner en cuarentena {selAnimal&&`(máx. ${disponible})`}</label>
            <input className="input mono" type="number" min={1} max={disponible||9999} value={formNew.cantidad}
              onChange={e=>setFormNew({...formNew,cantidad:Math.max(1,Math.min(disponible||9999,Number(e.target.value)))})}
              style={{fontSize:20,height:44}}/>
            {selAnimal && formNew.cantidad > 0 && (
              <div style={{fontSize:12,color:'var(--muted)',marginTop:4}}>
                Quedan disponibles: <b style={{color:disponible-formNew.cantidad>=0?'var(--green)':'var(--red)'}}>{disponible-formNew.cantidad}</b> de {selAnimal.stock} totales
              </div>
            )}
          </div>

          {formNew.tipo === 'enfermedad' && (
            <div className="field">
              <label>Diagnóstico / síntomas / tratamiento</label>
              <textarea className="input" rows={3} style={{height:'auto',padding:'9px 12px',resize:'vertical'}}
                value={formNew.enfermedad} onChange={e=>setFormNew({...formNew,enfermedad:e.target.value})}
                placeholder="Ej: Manchas blancas en aletas (Ich). Tratamiento con azul de metileno 3ml/10L. Temperatura 30°C..."/>
            </div>
          )}

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <div className="field"><label>Inicio</label>
              <input className="input" type="date" value={formNew.inicio} onChange={e=>setFormNew({...formNew,inicio:e.target.value})}/>
            </div>
            <div className="field"><label>Fin estimado</label>
              <input className="input" type="date" value={formNew.fin_estimado} onChange={e=>setFormNew({...formNew,fin_estimado:e.target.value})}/>
            </div>
          </div>

          {formNew.inicio && formNew.fin_estimado && (
            <div style={{background:'rgba(95,214,208,.06)',border:'1px solid rgba(95,214,208,.15)',borderRadius:9,padding:'9px 14px',fontSize:12.5,color:'var(--aqua)',fontWeight:500}}>
              {Math.ceil((new Date(formNew.fin_estimado)-new Date(formNew.inicio))/86400000)} días de cuarentena estimados
            </div>
          )}

          <div className="field"><label>Notas adicionales (opcional)</label>
            <input className="input" value={formNew.notas} onChange={e=>setFormNew({...formNew,notas:e.target.value})} placeholder="Acuario de cuarentena #2, compartimiento B..."/>
          </div>
        </div>

        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setNewOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2}} onClick={crearQ} disabled={saving||!formNew.animal_id||!formNew.cantidad}>
            {saving?<span className="loading-spin"/>:<Icon.flask size={14}/>} {saving?'Registrando…':'Registrar cuarentena'}
          </button>
        </div>
      </Modal>

      {/* MODAL: Liberar */}
      <Modal open={liberarOpen} onClose={()=>setLiberarOpen(false)} title={`Liberar — ${selReg?.especie}`} sub={`${selReg?.cantidad} en cuarentena`} width={400}>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <div style={{background:'rgba(34,197,94,.06)',border:'1px solid rgba(34,197,94,.2)',borderRadius:9,padding:'12px 14px',fontSize:13,color:'var(--green)',fontWeight:500}}>
            Los animales liberados vuelven a estar disponibles en el inventario.
          </div>
          <div className="field">
            <label>Cantidad a liberar (máx. {selReg?.cantidad})</label>
            <input className="input mono" type="number" min={1} max={selReg?.cantidad} style={{fontSize:18,height:42}}
              value={formLiberar.cantidad_liberar} onChange={e=>setFormLiberar({...formLiberar,cantidad_liberar:e.target.value})} placeholder={selReg?.cantidad}/>
          </div>
          <div className="field"><label>Fecha de liberación</label>
            <input className="input" type="date" value={formLiberar.fin_real} onChange={e=>setFormLiberar({...formLiberar,fin_real:e.target.value})}/>
          </div>
          <div className="field"><label>Notas (opcional)</label>
            <input className="input" value={formLiberar.notas_liberacion} onChange={e=>setFormLiberar({...formLiberar,notas_liberacion:e.target.value})} placeholder="Sin signos clínicos, cuarentena completada..."/>
          </div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setLiberarOpen(false)}>Cancelar</button>
          <button className="btn primary" style={{flex:2,background:'var(--green)',borderColor:'var(--green)'}} onClick={liberarQ} disabled={saving}>
            <Icon.check size={14}/> Confirmar liberación
          </button>
        </div>
      </Modal>

      {/* MODAL: Baja */}
      <Modal open={bajaOpen} onClose={()=>setBajaOpen(false)} title={`Dar de baja — ${selReg?.especie}`} sub="Esta acción descuenta del stock permanentemente" width={400}>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <div style={{background:'rgba(239,68,68,.06)',border:'1px solid rgba(239,68,68,.2)',borderRadius:9,padding:'12px 14px',fontSize:13,color:'var(--red)',fontWeight:500}}>
            Los animales dados de baja se descuentan del inventario permanentemente.
          </div>
          <div className="field">
            <label>Cantidad a dar de baja (máx. {selReg?.cantidad})</label>
            <input className="input mono" type="number" min={1} max={selReg?.cantidad} style={{fontSize:18,height:42}}
              value={formBaja.cantidad_baja} onChange={e=>setFormBaja({...formBaja,cantidad_baja:e.target.value})} placeholder={selReg?.cantidad}/>
          </div>
          <div className="field"><label>Motivo de baja</label>
            <textarea className="input" rows={2} style={{height:'auto',padding:'9px 12px'}}
              value={formBaja.motivo} onChange={e=>setFormBaja({...formBaja,motivo:e.target.value})}
              placeholder="Ej: Fallecieron por infección bacteriana, no respondieron al tratamiento..."/>
          </div>
        </div>
        <div className="row" style={{gap:8,marginTop:16}}>
          <button className="btn" style={{flex:1}} onClick={()=>setBajaOpen(false)}>Cancelar</button>
          <button className="btn danger" style={{flex:2}} onClick={bajaQ} disabled={saving}>
            <Icon.death size={14}/> Confirmar baja
          </button>
        </div>
      </Modal>
    </div>
  );
}

const CATS_CONFIG = [
  { key: 'cat_img_Peces',                       label: 'Peces ornamentales' },
  { key: 'cat_img_Acuariofilia-Acuarios',       label: 'Acuarios' },
  { key: 'cat_img_Acuariofilia-Fertilizantes',  label: 'Plantas acuáticas' },
  { key: 'cat_img_Acuariofilia-Filtracion',     label: 'Filtración' },
  { key: 'cat_img_Acuariofilia-Decoracion',     label: 'Decoración' },
  { key: 'cat_img_Acuariofilia-Monitoreo',      label: 'Monitoreo / CO₂' },
  { key: 'cat_img_Acuariofilia-Alimentos',      label: 'Alimentos' },
  { key: 'cat_img_Acuariofilia-Accesorios',     label: 'Accesorios' },
  { key: 'cat_img_Acuariofilia-Medicamentos',   label: 'Medicamentos' },
  { key: 'cat_img_Acuariofilia-Sustratos',      label: 'Sustratos' },
  { key: 'cat_img_Acuariofilia-Marina',         label: 'Marina' },
  { key: 'cat_img_Accesorios-Roedores',         label: 'Pet Shop / Roedores' },
  { key: 'cat_img_Accesorios-Aves',             label: 'Aves' },
];

function ImageUploadField({label, configKey, form, setForm}) {
  const [uploading, setUploading] = React.useState(false);
  const inputRef = React.useRef();

  const handleFile = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append('file', file);
      const r = await fetch('/api/upload', { method: 'POST', body: fd });
      const data = await r.json();
      if (!r.ok) throw new Error(data.error || 'Error');
      setForm(f => ({...f, [configKey]: data.url}));
    } catch(e) { alert(e.message); }
    finally { setUploading(false); e.target.value = ''; }
  };

  const url = form[configKey];

  return (
    <div style={{display:'flex',flexDirection:'column',gap:6}}>
      <div style={{fontSize:12.5,fontWeight:600,color:'var(--text2)'}}>{label}</div>
      <div
        onClick={() => !uploading && inputRef.current.click()}
        style={{
          border:'1.5px dashed var(--border)', borderRadius:10,
          height:110, cursor:'pointer', overflow:'hidden',
          position:'relative', background:'var(--bg)',
          display:'flex', alignItems:'center', justifyContent:'center',
          transition:'border-color .2s',
        }}
        onMouseOver={e=>e.currentTarget.style.borderColor='var(--aqua)'}
        onMouseOut={e=>e.currentTarget.style.borderColor='var(--border)'}
      >
        {url ? (
          <>
            <img src={url} alt={label} style={{width:'100%',height:'100%',objectFit:'cover',position:'absolute',inset:0}}/>
            <div style={{position:'absolute',inset:0,background:'rgba(0,0,0,.35)',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:6,opacity:0,transition:'opacity .2s'}}
              onMouseOver={e=>{e.currentTarget.style.opacity=1}}
              onMouseOut={e=>{e.currentTarget.style.opacity=0}}
            >
              <span style={{color:'#fff',fontSize:11,fontWeight:700}}>Cambiar</span>
              <button type="button" onClick={ev=>{ev.stopPropagation();setForm(f=>({...f,[configKey]:''}));}}
                style={{background:'rgba(239,68,68,.9)',border:'none',borderRadius:6,padding:'3px 10px',fontSize:11,color:'#fff',cursor:'pointer',fontWeight:600}}>
                Quitar
              </button>
            </div>
          </>
        ) : uploading ? (
          <div style={{width:24,height:24,border:'2px solid var(--border)',borderTopColor:'var(--aqua)',borderRadius:'50%',animation:'spin .7s linear infinite'}}/>
        ) : (
          <div style={{textAlign:'center'}}>
            <svg width={22} height={22} fill="none" stroke="var(--muted)" strokeWidth={1.5} viewBox="0 0 24 24" style={{display:'block',margin:'0 auto 6px'}}>
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
            <span style={{fontSize:11,color:'var(--muted)'}}>Subir imagen</span>
          </div>
        )}
      </div>
      <input ref={inputRef} type="file" accept="image/*" style={{display:'none'}} onChange={handleFile}/>
    </div>
  );
}

// Campo de upload de imagen reutilizable para modales de edición
function InlineImageUpload({value, onChange}) {
  const [uploading, setUploading] = React.useState(false);
  const ref = React.useRef();

  const handleFile = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append('file', file);
      const r = await fetch('/api/upload', { method:'POST', body: fd });
      const data = await r.json();
      if (!r.ok) throw new Error(data.error || 'Error');
      onChange(data.url);
    } catch(e) { alert('Error al subir: ' + e.message); }
    finally { setUploading(false); e.target.value = ''; }
  };

  return (
    <div className="field" style={{gridColumn:'1/-1'}}>
      <label>Imagen del producto</label>
      <div style={{display:'flex', gap:10, alignItems:'center'}}>
        {/* Preview */}
        <div style={{
          width:72, height:72, borderRadius:10, overflow:'hidden', flexShrink:0,
          border:'1.5px solid var(--border)', background:'var(--bg)',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          {value
            ? <img src={value} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            : <Icon.image size={24} style={{opacity:.3}}/>
          }
        </div>

        <div style={{flex:1}}>
          <div style={{display:'flex', gap:6, marginBottom:6}}>
            <button type="button" className="btn" style={{height:32, padding:'0 12px', fontSize:12, gap:6}}
              onClick={()=>ref.current.click()} disabled={uploading}>
              <Icon.export size={13}/>
              {uploading ? 'Subiendo...' : value ? 'Cambiar imagen' : 'Seleccionar imagen'}
            </button>
            {value && (
              <button type="button" className="btn ghost" style={{height:32, padding:'0 10px', fontSize:12}}
                onClick={()=>onChange('')}>
                Quitar
              </button>
            )}
          </div>
          <div style={{fontSize:11.5, color:'var(--muted)'}}>JPG, PNG o WebP · Máx 10 MB</div>
          {value && <div style={{fontSize:11, color:'var(--muted)', marginTop:3, wordBreak:'break-all'}}>{value}</div>}
        </div>
      </div>
      <input ref={ref} type="file" accept="image/*" style={{display:'none'}} onChange={handleFile}/>
    </div>
  );
}

function BannerUpload({form, setForm}) {
  const [uploading, setUploading] = React.useState(false);
  const [err, setErr] = React.useState('');
  const inputRef = React.useRef();

  const handleFile = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    setUploading(true); setErr('');
    try {
      const fd = new FormData();
      fd.append('file', file);
      const r = await fetch('/api/upload', { method: 'POST', body: fd });
      const data = await r.json();
      if (!r.ok) throw new Error(data.error || 'Error al subir');
      setForm(f => ({...f, tienda_banner: data.url}));
    } catch(e) {
      setErr(e.message);
    } finally {
      setUploading(false);
      e.target.value = '';
    }
  };

  const remove = () => setForm(f => ({...f, tienda_banner: ''}));

  return (
    <div className="field">
      <label>Imagen de fondo del Hero Banner</label>

      {/* Área de preview / upload */}
      <div style={{
        border: '2px dashed var(--border)', borderRadius: 12,
        overflow: 'hidden', background: 'var(--bg)',
        minHeight: 160, position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', transition: 'border-color .2s',
      }}
        onClick={() => !uploading && inputRef.current.click()}
        onMouseOver={e => e.currentTarget.style.borderColor='var(--aqua)'}
        onMouseOut={e => e.currentTarget.style.borderColor='var(--border)'}
      >
        {form.tienda_banner ? (
          <>
            <img src={form.tienda_banner} alt="banner" style={{width:'100%',height:'100%',objectFit:'cover',position:'absolute',inset:0}}/>
            {/* Overlay preview */}
            <div style={{position:'absolute',inset:0,background:'linear-gradient(105deg,rgba(8,14,30,.82) 0%,rgba(10,22,40,.65) 50%,rgba(12,40,70,.45) 100%)'}}/>
            <div style={{position:'relative',zIndex:1,textAlign:'center'}}>
              <div style={{color:'#fff',fontSize:13,fontWeight:700,marginBottom:6,textShadow:'0 1px 4px rgba(0,0,0,.5)'}}>Vista previa con overlay</div>
              <div style={{display:'flex',gap:8,justifyContent:'center'}}>
                <button type="button" onClick={e=>{e.stopPropagation();inputRef.current.click();}}
                  style={{background:'rgba(255,255,255,.9)',border:'none',borderRadius:8,padding:'6px 14px',fontSize:12,fontWeight:700,cursor:'pointer',color:'#0d1b3e'}}>
                  Cambiar imagen
                </button>
                <button type="button" onClick={e=>{e.stopPropagation();remove();}}
                  style={{background:'rgba(239,68,68,.9)',border:'none',borderRadius:8,padding:'6px 14px',fontSize:12,fontWeight:700,cursor:'pointer',color:'#fff'}}>
                  Quitar
                </button>
              </div>
            </div>
          </>
        ) : (
          <div style={{textAlign:'center',padding:32}}>
            {uploading ? (
              <>
                <div style={{width:36,height:36,border:'3px solid var(--border)',borderTopColor:'var(--aqua)',borderRadius:'50%',animation:'spin .7s linear infinite',margin:'0 auto 12px'}}/>
                <p style={{fontSize:13,color:'var(--muted)'}}>Subiendo imagen...</p>
              </>
            ) : (
              <>
                <svg width={40} height={40} fill="none" stroke="var(--muted)" strokeWidth={1.5} viewBox="0 0 24 24" style={{margin:'0 auto 12px',display:'block'}}>
                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
                </svg>
                <p style={{fontWeight:600,fontSize:14,marginBottom:4}}>Haz clic para seleccionar imagen</p>
                <p style={{fontSize:12,color:'var(--muted)'}}>JPG, PNG, WebP — máximo 10 MB</p>
              </>
            )}
          </div>
        )}
      </div>

      {err && <p style={{color:'var(--red)',fontSize:12,marginTop:6}}>{err}</p>}
      <p style={{fontSize:11.5,color:'var(--muted)',marginTop:6}}>
        La imagen se mostrará con un overlay oscuro para que el texto del hero sea siempre legible.
      </p>
      <input ref={inputRef} type="file" accept="image/*" style={{display:'none'}} onChange={handleFile}/>
    </div>
  );
}

function AutoFotosPage() {
  const toast = useToast();
  const [stats, setStats]       = useState(null);
  const [loading, setLoading]   = useState(true);
  const [corriendo, setCorriendo] = useState(false);
  const [progreso, setProgreso] = useState(null); // {done, total, ok, fail}
  const [resultado, setResultado] = useState(null); // {ok, fail, total}
  const [log, setLog]           = useState([]); // [{nombre, ok, url?, error?}]

  const cargarStats = async () => {
    setLoading(true);
    try {
      const c = await window.api.get('/admin/autofotos/config');
      setStats(c);
    } catch(e) {
      setStats({ sin_foto: '?', con_foto: '?', sin_foto_productos: '?', sin_foto_animales: '?' });
    } finally { setLoading(false); }
  };

  useEffect(() => { cargarStats(); }, []);

  const ejecutarTodo = async () => {
    setCorriendo(true);
    setResultado(null);
    setLog([]);
    let pendientes = [];
    try {
      pendientes = await window.api.get('/admin/autofotos/pendientes');
    } catch(e) { toast('Error cargando productos: ' + e.message, 'error'); setCorriendo(false); return; }

    if (!pendientes.length) { toast('Todos los productos ya tienen foto', 'error'); setCorriendo(false); return; }

    setProgreso({ done: 0, total: pendientes.length, ok: 0, fail: 0 });

    try {
      const resp = await fetch('/api/admin/autofotos/lote', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + localStorage.getItem('ad_token'),
        },
        body: JSON.stringify({ ids: pendientes }),
      });

      const reader  = resp.body.getReader();
      const decoder = new TextDecoder();
      let buf = '';

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += decoder.decode(value, { stream: true });
        const lines = buf.split('\n\n');
        buf = lines.pop();
        for (const line of lines) {
          if (!line.startsWith('data: ')) continue;
          try {
            const d = JSON.parse(line.slice(6));
            if (d.done) {
              setResultado({ ok: d.ok, fail: d.fail, total: pendientes.length });
              cargarStats();
            } else {
              setLog(prev => [d, ...prev].slice(0, 100));
              setProgreso(prev => prev ? ({
                ...prev,
                done: prev.done + 1,
                ok:   prev.ok   + (d.ok ? 1 : 0),
                fail: prev.fail + (d.ok ? 0 : 1),
              }) : prev);
            }
          } catch {}
        }
      }
    } catch(e) { toast('Error: ' + e.message, 'error'); }
    finally { setCorriendo(false); }
  };

  const pct = progreso && progreso.total ? Math.round(progreso.done / progreso.total * 100) : 0;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Fotos Automáticas</h1>
          <p>Descarga imágenes automáticamente para todos los productos sin foto usando búsqueda en línea</p>
        </div>
        <button className="btn" onClick={cargarStats} disabled={loading}>
          <Icon.refresh size={14}/> Actualizar
        </button>
      </div>

      {/* ── ESTADÍSTICAS ── */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:24}}>
        {[
          { label:'Sin foto',          val: loading ? '…' : stats?.sin_foto,           icon:'📷', color:'var(--amber)' },
          { label:'Con foto',          val: loading ? '…' : stats?.con_foto,           icon:'✅', color:'var(--green)' },
          { label:'Productos sin foto',val: loading ? '…' : stats?.sin_foto_productos, icon:'📦', color:'var(--aqua)'  },
          { label:'Animales sin foto', val: loading ? '…' : stats?.sin_foto_animales,  icon:'🐠', color:'#a78bfa'      },
        ].map(s => (
          <div key={s.label} className="card" style={{padding:'20px 22px'}}>
            <div style={{fontSize:28, marginBottom:8}}>{s.icon}</div>
            <div style={{fontSize:32, fontWeight:900, color:s.color, lineHeight:1}}>{s.val}</div>
            <div style={{fontSize:12, color:'var(--muted)', marginTop:6}}>{s.label}</div>
          </div>
        ))}
      </div>

      {/* ── BOTÓN EJECUTAR ── */}
      {!corriendo && !resultado && (
        <div className="card" style={{padding:28, textAlign:'center', marginBottom:20}}>
          <div style={{fontSize:18, fontWeight:700, marginBottom:8}}>
            {stats?.sin_foto > 0 ? `${stats.sin_foto} productos esperan su foto` : 'Cargando...'}
          </div>
          <div style={{fontSize:13, color:'var(--muted)', marginBottom:24, maxWidth:480, margin:'0 auto 24px'}}>
            El sistema buscará una imagen relevante en línea para cada producto sin foto, la descargará y la asignará automáticamente. Las imágenes son temporales y puedes reemplazarlas luego.
          </div>
          <button className="btn primary" style={{padding:'14px 36px', fontSize:15, gap:10}}
            onClick={ejecutarTodo} disabled={loading || !stats?.sin_foto}>
            <Icon.image size={16}/>
            Ejecutar para todos los productos sin foto
          </button>
        </div>
      )}

      {/* ── PROGRESO ── */}
      {corriendo && progreso && (
        <div className="card" style={{padding:28, marginBottom:20}}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12}}>
            <div style={{fontWeight:700, fontSize:16}}>Buscando imágenes...</div>
            <div style={{fontWeight:700, fontSize:22, color:'var(--aqua)'}}>{pct}%</div>
          </div>
          {/* Barra */}
          <div style={{height:10, background:'var(--bg)', borderRadius:6, overflow:'hidden', marginBottom:16}}>
            <div style={{height:'100%', width:`${pct}%`, background:'linear-gradient(90deg,var(--aqua),#3b82f6)', borderRadius:6, transition:'width .5s'}}/>
          </div>
          <div style={{display:'flex', gap:24, fontSize:13}}>
            <span style={{color:'var(--muted)'}}><b style={{color:'var(--text)'}}>{progreso.done}</b> / {progreso.total} procesados</span>
            <span style={{color:'var(--green)'}}><b>{progreso.ok}</b> asignadas</span>
            <span style={{color:'var(--red)'}}><b>{progreso.fail}</b> sin resultado</span>
          </div>
        </div>
      )}

      {/* ── RESULTADO FINAL ── */}
      {resultado && (
        <div className="card" style={{padding:28, marginBottom:20, border:'1.5px solid', borderColor: resultado.fail === 0 ? 'rgba(34,197,94,.3)' : 'rgba(251,191,36,.3)', background: resultado.fail === 0 ? 'rgba(34,197,94,.05)' : 'rgba(251,191,36,.05)'}}>
          <div style={{fontWeight:800, fontSize:18, marginBottom:6}}>
            {resultado.fail === 0 ? '✅ Completado sin errores' : '⚠️ Completado con algunos errores'}
          </div>
          <div style={{fontSize:14, color:'var(--muted)', marginBottom:20}}>
            Se asignaron <strong style={{color:'var(--green)', fontSize:16}}>{resultado.ok}</strong> imágenes de <strong>{resultado.total}</strong> productos procesados
            {resultado.fail > 0 && <> · <strong style={{color:'var(--amber)'}}>{resultado.fail}</strong> sin resultado</>}
          </div>
          <button className="btn primary" style={{gap:8}} onClick={() => { setResultado(null); setProgreso(null); setLog([]); cargarStats(); }}>
            <Icon.refresh size={14}/> Ver estado actualizado
          </button>
        </div>
      )}

      {/* ── LOG EN TIEMPO REAL ── */}
      {log.length > 0 && (
        <div className="card" style={{padding:0}}>
          <div style={{padding:'12px 16px', borderBottom:'1px solid var(--border)', fontWeight:700, fontSize:13, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <span>Registro en tiempo real</span>
            <span style={{fontSize:12, color:'var(--muted)', fontWeight:400}}>{log.length} procesados</span>
          </div>
          <div style={{maxHeight:400, overflowY:'auto'}}>
            {log.map((r, i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 16px', borderBottom:'1px solid var(--border)'}}>
                {r.ok
                  ? <img src={r.url} alt="" style={{width:44,height:44,objectFit:'cover',borderRadius:8,flexShrink:0,border:'1px solid var(--border)'}}/>
                  : <div style={{width:44,height:44,borderRadius:8,background:'rgba(239,68,68,.1)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,fontSize:18,color:'var(--red)'}}>✕</div>
                }
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:13, fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{r.nombre}</div>
                  <div style={{fontSize:12, color: r.ok ? 'var(--green)' : 'var(--muted)', marginTop:2}}>
                    {r.ok ? '✓ Foto asignada' : r.error || 'Sin resultado'}
                  </div>
                </div>
                <span style={{fontSize:11, color: r.ok ? 'var(--green)' : 'var(--red)', fontWeight:700, flexShrink:0}}>
                  {r.ok ? 'OK' : 'FAIL'}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ── ARMA TU ACUARIO (config del armador de la tienda) ──────────────────────────
const ATQ_CATS = [
  { k:'atq_desc_acuarios',         label:'Acuarios',         def:18 },
  { k:'atq_desc_filtracion',       label:'Filtración',       def:18 },
  { k:'atq_desc_acondicionadores', label:'Acondicionadores', def:18 },
  { k:'atq_desc_sustratos',        label:'Sustratos',        def:20 },
  { k:'atq_desc_accesorios',       label:'Accesorios',       def:12 },
  { k:'atq_desc_monitoreo',        label:'Monitoreo',        def:10 },
  { k:'atq_desc_decoracion',       label:'Decoración',       def:10 },
];
const ATQ_DEF = {
  atq_activo:'true', atq_titulo:'Arma tu Acuario',
  atq_subtitulo:'Diseña tu acuario ideal paso a paso y desbloquea súper descuentos por armar el kit completo.',
  atq_urgencia:'🔥 Promo por tiempo limitado: arma tu kit hoy y ahorra hasta 20%',
  atq_min_productos:'3', atq_cupon_peces:'10', atq_cupon_plantas:'15',
  atq_desc_acuarios:'18', atq_desc_filtracion:'18', atq_desc_acondicionadores:'18',
  atq_desc_sustratos:'20', atq_desc_accesorios:'12', atq_desc_monitoreo:'10', atq_desc_decoracion:'10',
};

function ArmaKitPage() {
  const toast = useToast();
  const { data, loading } = useAPI('/tienda/admin/config');
  const [form, setForm] = useState(null);
  const [seeding, setSeeding] = useState(false);

  useEffect(() => {
    if (data && !form) setForm({ ...ATQ_DEF, ...Object.fromEntries(Object.entries(data).filter(([k]) => k.startsWith('atq_'))) });
  }, [data]);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const save = async () => {
    try { await window.api.put('/tienda/admin/config', form); toast('Configuración del armador guardada'); }
    catch(e) { toast(e.message,'error'); }
  };

  const seedDemo = async () => {
    setSeeding(true);
    try {
      const r = await window.api.post('/tienda/admin/armakit/seed-demo', {});
      toast(r.creados?.length ? `${r.creados.length} producto(s) demo creados` : 'Todas las categorías ya tienen productos');
    } catch(e) { toast(e.message,'error'); }
    finally { setSeeding(false); }
  };

  if (loading || !form) return <div className="page"><Loading/></div>;

  const activo = form.atq_activo !== 'false';

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Arma tu Acuario</h1><p>Configura el armador guiado y los súper descuentos por kit de la tienda</p></div>
        <div className="page-actions">
          <a className="btn" href="/store/#/arma-tu-acuario" target="_blank" style={{display:'flex',alignItems:'center',gap:6}}><Icon.globe size={14}/> Ver en tienda</a>
          <button className="btn primary" onClick={save}><Icon.check size={14}/> Guardar cambios</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
        {/* General */}
        <div className="card">
          <h3 style={{marginBottom:16,fontSize:15,fontWeight:700}}>⚙️ General</h3>
          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            <div className="field"><label>Estado del armador</label>
              <select className="input" value={form.atq_activo||'true'} onChange={e=>set('atq_activo',e.target.value)}>
                <option value="true">Activo (visible en la tienda)</option>
                <option value="false">Desactivado</option>
              </select>
            </div>
            <div className="field"><label>Título</label>
              <input className="input" value={form.atq_titulo||''} onChange={e=>set('atq_titulo',e.target.value)}/>
            </div>
            <div className="field"><label>Subtítulo</label>
              <textarea className="input" rows={2} style={{height:'auto',padding:'8px 11px'}} value={form.atq_subtitulo||''} onChange={e=>set('atq_subtitulo',e.target.value)}/>
            </div>
            <div className="field"><label>Mensaje de urgencia</label>
              <input className="input" value={form.atq_urgencia||''} onChange={e=>set('atq_urgencia',e.target.value)}/>
            </div>
            <div className="field"><label>Mínimo de productos para activar descuentos</label>
              <input className="input mono" type="number" min={1} value={form.atq_min_productos||'3'} onChange={e=>set('atq_min_productos',e.target.value)}/>
              <span className="small">El cliente debe llevar esta cantidad de productos del kit (por separado) para activar los descuentos por categoría.</span>
            </div>
          </div>
        </div>

        {/* Descuentos por categoría */}
        <div className="card">
          <h3 style={{marginBottom:6,fontSize:15,fontWeight:700}}>🏷️ Descuentos por categoría (%)</h3>
          <p className="small" style={{marginBottom:14}}>Cada categoría aplica su descuento por separado a sus productos. No acumulable entre sí ni con cupones.</p>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            {ATQ_CATS.map(c => (
              <div className="field" key={c.k}>
                <label>{c.label}</label>
                <div className="row" style={{gap:6}}>
                  <input className="input mono" type="number" min={0} max={100} value={form[c.k]??c.def} onChange={e=>set(c.k,e.target.value)}/>
                  <span style={{color:'var(--muted)',fontWeight:600}}>%</span>
                </div>
              </div>
            ))}
          </div>

          <div className="hr"/>
          <h3 style={{marginBottom:6,fontSize:15,fontWeight:700}}>🐟 Cupón por compra de acuario</h3>
          <p className="small" style={{marginBottom:14}}>Al comprar un acuario se desbloquea automáticamente. No acumulable con otros descuentos.</p>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <div className="field"><label>Descuento en Peces</label>
              <div className="row" style={{gap:6}}>
                <input className="input mono" type="number" min={0} max={100} value={form.atq_cupon_peces||'10'} onChange={e=>set('atq_cupon_peces',e.target.value)}/>
                <span style={{color:'var(--muted)',fontWeight:600}}>%</span>
              </div>
            </div>
            <div className="field"><label>Descuento en Plantas</label>
              <div className="row" style={{gap:6}}>
                <input className="input mono" type="number" min={0} max={100} value={form.atq_cupon_plantas||'15'} onChange={e=>set('atq_cupon_plantas',e.target.value)}/>
                <span style={{color:'var(--muted)',fontWeight:600}}>%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Productos demo */}
      <div className="card" style={{marginTop:20}}>
        <div className="between" style={{flexWrap:'wrap',gap:12}}>
          <div>
            <h3 style={{fontSize:15,fontWeight:700,marginBottom:4}}>🧪 Productos de demostración</h3>
            <p className="small">Crea productos ficticios para las categorías del armador que no tengan stock, para probar el flujo completo. Solo crea los que falten.</p>
          </div>
          <button className="btn" disabled={seeding} onClick={seedDemo} style={{flexShrink:0}}>
            {seeding ? <span className="loading-spin"/> : <Icon.plus size={14}/>} Generar productos faltantes
          </button>
        </div>
      </div>

      {!activo && (
        <div className="card" style={{marginTop:20,borderColor:'rgba(245,158,11,.3)',background:'rgba(245,158,11,.06)'}}>
          <p style={{fontSize:13,color:'var(--amber)',fontWeight:600}}>⚠️ El armador está desactivado. Los clientes verán un mensaje de "no disponible".</p>
        </div>
      )}
    </div>
  );
}

function TiendaConfigPage() {
  const toast = useToast();
  const { data, loading } = useAPI('/tienda/admin/config');
  const [form, setForm] = useState(null);

  useEffect(() => { if (data && !form) setForm({...data}); }, [data]);

  const save = async () => {
    try { await window.api.put('/tienda/admin/config', form); toast('Configuración guardada'); }
    catch(e) { toast(e.message,'error'); }
  };

  if (loading || !form) return <div className="page"><Loading/></div>;

  const F = ({label, k, type='text', placeholder=''}) => (
    <div className="field">
      <label>{label}</label>
      <input className="input" type={type} value={form[k]||''} placeholder={placeholder} onChange={e=>setForm({...form,[k]:e.target.value})}/>
    </div>
  );

  return (
    <div className="page">
      <div className="page-head">
        <div><h1>Config Tienda Virtual</h1><p>Personaliza la experiencia de tu tienda</p></div>
        <div className="page-actions">
          <a className="btn" href="/tienda.html" target="_blank" style={{display:'flex',alignItems:'center',gap:6}}><Icon.globe size={14}/> Ver tienda</a>
          <button className="btn primary" onClick={save}><Icon.check size={14}/> Guardar cambios</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
        <div className="card">
          <h3 style={{marginBottom:16,fontSize:15,fontWeight:700}}>🏪 Información general</h3>
          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            <F label="Nombre de la tienda" k="tienda_nombre"/>
            <F label="Eslogan" k="tienda_slogan" placeholder="Tu mundo acuático favorito"/>
            <div className="field"><label>Descripción</label>
              <textarea className="input" rows={3} style={{height:'auto',padding:'8px 11px'}} value={form.tienda_descripcion||''} onChange={e=>setForm({...form,tienda_descripcion:e.target.value})}/>
            </div>
            <F label="WhatsApp (con código de país)" k="tienda_whatsapp" placeholder="573001234567"/>
            <F label="Email de contacto" k="tienda_email" type="email"/>
          </div>
        </div>

        <div className="card">
          <h3 style={{marginBottom:16,fontSize:15,fontWeight:700}}>🎨 Apariencia</h3>
          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            <div className="field"><label>Color primario</label>
              <div className="row" style={{gap:8}}>
                <input type="color" value={form.tienda_color_primario||'#0ea5e9'} onChange={e=>setForm({...form,tienda_color_primario:e.target.value})} style={{width:44,height:40,border:'1px solid var(--border)',borderRadius:8,padding:2,cursor:'pointer'}}/>
                <input className="input" value={form.tienda_color_primario||''} onChange={e=>setForm({...form,tienda_color_primario:e.target.value})} placeholder="#0ea5e9"/>
              </div>
            </div>
            <div className="field"><label>Color secundario</label>
              <div className="row" style={{gap:8}}>
                <input type="color" value={form.tienda_color_secundario||'#06b6d4'} onChange={e=>setForm({...form,tienda_color_secundario:e.target.value})} style={{width:44,height:40,border:'1px solid var(--border)',borderRadius:8,padding:2,cursor:'pointer'}}/>
                <input className="input" value={form.tienda_color_secundario||''} onChange={e=>setForm({...form,tienda_color_secundario:e.target.value})} placeholder="#06b6d4"/>
              </div>
            </div>
            <F label="URL del logo" k="tienda_logo" placeholder="https://..."/>
            <BannerUpload form={form} setForm={setForm}/>
          </div>
        </div>

        <div className="card">
          <h3 style={{marginBottom:16,fontSize:15,fontWeight:700}}>💳 Pagos</h3>
          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            <div className="field"><label>Wompi activo</label>
              <select className="input" value={form.wompi_activo||'false'} onChange={e=>setForm({...form,wompi_activo:e.target.value})}>
                <option value="false">Desactivado</option>
                <option value="true">Activado</option>
              </select>
            </div>
            <F label="Wompi Public Key" k="wompi_public_key" placeholder="pub_prod_..."/>
            <F label="Número Nequi" k="nequi_numero" placeholder="3001234567"/>
            <F label="URL QR Nequi" k="qr_nequi" placeholder="https://..."/>
            <F label="Cuenta Bancolombia" k="bancolombia_cuenta" placeholder="Cuenta de ahorros 123-456"/>
            <F label="URL QR Bancolombia" k="qr_bancolombia" placeholder="https://..."/>
            <F label="URL QR Daviplata" k="qr_daviplata" placeholder="https://..."/>
          </div>
        </div>

        <div className="card">
          <h3 style={{marginBottom:16,fontSize:15,fontWeight:700}}>🚚 Envíos y redes</h3>
          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            <div className="field"><label>Precio de envío (COP)</label>
              <input className="input mono" type="number" value={form.envio_precio||15000} onChange={e=>setForm({...form,envio_precio:e.target.value})}/>
            </div>
            <div className="field"><label>Envío gratis desde (COP)</label>
              <input className="input mono" type="number" value={form.envio_gratis_desde||150000} onChange={e=>setForm({...form,envio_gratis_desde:e.target.value})}/>
            </div>
            <F label="Ciudades con envío (separadas por coma)" k="envio_ciudades" placeholder="Bogotá,Medellín,Cali"/>
            <div style={{borderTop:'1px solid var(--border)',paddingTop:12,marginTop:4}}>
              <div style={{fontSize:13,fontWeight:600,color:'var(--muted)',marginBottom:10}}>Redes sociales</div>
              <F label="Instagram" k="instagram" placeholder="https://instagram.com/..."/>
              <F label="Facebook" k="facebook" placeholder="https://facebook.com/..."/>
              <F label="TikTok" k="tiktok" placeholder="https://tiktok.com/@..."/>
            </div>
            <div className="field"><label>Tienda activa</label>
              <select className="input" value={form.tienda_activa||'true'} onChange={e=>setForm({...form,tienda_activa:e.target.value})}>
                <option value="true">Abierta al público</option>
                <option value="false">Mantenimiento (cerrada)</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      {/* Imágenes de categorías */}
      <div className="card" style={{marginTop:20}}>
        <h3 style={{marginBottom:6,fontSize:15,fontWeight:700}}>Imágenes de Categorías</h3>
        <p style={{fontSize:13,color:'var(--muted)',marginBottom:20}}>Estas imágenes aparecen en la sección de categorías de la tienda. Haz clic en cada recuadro para subir una imagen.</p>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(160px,1fr))',gap:16}}>
          {CATS_CONFIG.map(c => (
            <ImageUploadField key={c.key} label={c.label} configKey={c.key} form={form} setForm={setForm}/>
          ))}
        </div>
      </div>

      <div style={{marginTop:16,textAlign:'right'}}>
        <button className="btn primary" style={{padding:'12px 32px'}} onClick={save}><Icon.check size={14}/> Guardar todos los cambios</button>
      </div>
    </div>
  );
}

// ── HIGIENE PAGE ──────────────────────────────────────────────────────────────
const ZONAS_HIGIENE = ['Acuarios principales','Zona de cuarentena','Sala de servicio','Recepción / Mostrador','Bodega','Baños','Cocina / Área de preparación','Exterior / Fachada'];
const FRECUENCIAS   = ['Diaria','Cada 2 días','Semanal','Quincenal','Mensual','Según necesidad'];

function HigienePage() {
  const { user }   = useAuth();
  const toast      = useToast();

  const [tab, setTab]   = useState('checklist');
  const [filtroZona, setFiltroZona]   = useState('');
  const [filtroDesde, setFiltroDesde] = useState('');
  const [filtroHasta, setFiltroHasta] = useState('');

  const { data: actividades, loading: loadAct, reload: reloadAct } = useAPI('/higiene/actividades');
  const { data: stats,       loading: loadStats, reload: reloadStats } = useAPI('/higiene/stats');

  const [registros, setRegistros]     = useState([]);
  const [loadReg, setLoadReg]         = useState(false);

  const cargarRegistros = async () => {
    setLoadReg(true);
    try {
      let q = '/higiene/registros?';
      if (filtroDesde) q += `desde=${filtroDesde}&`;
      if (filtroHasta) q += `hasta=${filtroHasta}&`;
      if (filtroZona)  q += `zona=${encodeURIComponent(filtroZona)}&`;
      const data = await window.api.get(q);
      setRegistros(data);
    } catch (e) { toast(e.message, 'error'); }
    finally { setLoadReg(false); }
  };

  useEffect(() => { if (tab === 'historial') cargarRegistros(); }, [tab, filtroDesde, filtroHasta, filtroZona]);

  // ── Modal nueva actividad ──────────────────────────────────────────────────
  const emptyAct = { nombre:'', zona:'', frecuencia:'Diaria', descripcion:'', producto_usar:'', metodo:'', duracion_estimada:'', responsable_rol:'Cualquiera' };
  const [modalAct, setModalAct]   = useState(false);
  const [editAct, setEditAct]     = useState(null);
  const [formAct, setFormAct]     = useState(emptyAct);
  const [savingAct, setSavingAct] = useState(false);

  const openNuevaAct = () => { setEditAct(null); setFormAct(emptyAct); setModalAct(true); };
  const openEditAct  = (a) => { setEditAct(a); setFormAct({ ...a }); setModalAct(true); };

  const saveActividad = async () => {
    if (!formAct.nombre || !formAct.zona || !formAct.frecuencia) return toast('Completa los campos requeridos','warn');
    setSavingAct(true);
    try {
      if (editAct) await window.api.put(`/higiene/actividades/${editAct.id}`, formAct);
      else         await window.api.post('/higiene/actividades', formAct);
      toast(editAct ? 'Actividad actualizada' : 'Actividad creada');
      setModalAct(false);
      reloadAct(); reloadStats();
    } catch(e) { toast(e.message,'error'); }
    finally { setSavingAct(false); }
  };

  const deleteActividad = async (id) => {
    if (!confirm('¿Eliminar esta actividad?')) return;
    try { await window.api.delete(`/higiene/actividades/${id}`); toast('Eliminada'); reloadAct(); reloadStats(); }
    catch(e) { toast(e.message,'error'); }
  };

  // ── Modal registrar ejecución ──────────────────────────────────────────────
  const [modalReg, setModalReg]   = useState(false);
  const [actSel, setActSel]       = useState(null);
  const [formReg, setFormReg]     = useState({ fecha:'', hora:'', producto_aplicado:'', metodo_usado:'', dosis:'', observaciones:'' });
  const [savingReg, setSavingReg] = useState(false);

  const openRegistrar = (act) => {
    setActSel(act);
    const hoy = new Date().toISOString().slice(0,10);
    const hora = new Date().toTimeString().slice(0,5);
    setFormReg({ fecha: hoy, hora, producto_aplicado: act.producto_usar||'', metodo_usado: act.metodo||'', dosis:'', observaciones:'' });
    setModalReg(true);
  };

  const saveRegistro = async () => {
    if (!formReg.fecha) return toast('Indica la fecha','warn');
    setSavingReg(true);
    try {
      await window.api.post('/higiene/registros', {
        actividad_id:    actSel.id,
        actividad_nombre: actSel.nombre,
        zona:            actSel.zona,
        ...formReg,
      });
      toast('Ejecución registrada');
      setModalReg(false);
      reloadStats();
      if (tab === 'historial') cargarRegistros();
    } catch(e) { toast(e.message,'error'); }
    finally { setSavingReg(false); }
  };

  // ── Export PDF ─────────────────────────────────────────────────────────────
  const exportarPDF = () => {
    let url = '/api/higiene/export-pdf?x=1';
    if (filtroDesde) url += `&desde=${filtroDesde}`;
    if (filtroHasta) url += `&hasta=${filtroHasta}`;
    if (filtroZona)  url += `&zona=${encodeURIComponent(filtroZona)}`;
    const token = localStorage.getItem('ad_token');
    fetch(url, { headers:{ Authorization:'Bearer '+token } })
      .then(r => r.blob())
      .then(b => { const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'salubridad.pdf'; a.click(); })
      .catch(e => toast('Error al exportar: '+e.message,'error'));
  };

  // ── Agrupar actividades por zona ───────────────────────────────────────────
  const actPorZona = useMemo(() => {
    if (!actividades) return {};
    return actividades.reduce((acc, a) => {
      if (!acc[a.zona]) acc[a.zona] = [];
      acc[a.zona].push(a);
      return acc;
    }, {});
  }, [actividades]);

  const frecColor = { Diaria:'aqua', 'Cada 2 días':'blue', Semanal:'violet', Quincenal:'amber', Mensual:'amber', 'Según necesidad':'muted' };

  if (loadAct || loadStats) return <div className="page"><Loading/></div>;

  return (
    <div className="page">
      {/* ── Cabecera ── */}
      <div className="page-head">
        <div>
          <h1>Higiene y Salubridad</h1>
          <p>Registro actualizado de actividades de limpieza y mantenimiento sanitario</p>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={exportarPDF}><Icon.export size={14}/> Exportar PDF</button>
          <button className="btn primary" onClick={openNuevaAct}><Icon.plus size={14}/> Nueva actividad</button>
        </div>
      </div>

      {/* ── KPIs ── */}
      {stats && (
        <div className="kpi-grid" style={{gridTemplateColumns:'repeat(3,1fr)',marginBottom:18}}>
          {[
            { label:'Actividades activas', value: stats.actividades_activas, color:'aqua' },
            { label:'Registros hoy',       value: stats.registros_hoy,       color:'green' },
            { label:'Registros este mes',  value: stats.registros_mes,       color:'blue' },
          ].map((k,i) => (
            <div className="kpi" key={i}>
              <div className="kpi-label">{k.label}</div>
              <div className="kpi-val num" style={{color:`var(--${k.color})`}}>{k.value}</div>
            </div>
          ))}
        </div>
      )}

      {/* ── Tabs ── */}
      <div className="tabs" style={{marginBottom:18}}>
        <button className={`tab ${tab==='checklist'?'active':''}`} onClick={()=>setTab('checklist')}>Checklist de Actividades</button>
        <button className={`tab ${tab==='historial'?'active':''}`} onClick={()=>setTab('historial')}>Historial de Ejecuciones</button>
      </div>

      {/* ═══════════════ TAB: CHECKLIST ═══════════════ */}
      {tab === 'checklist' && (
        actividades && actividades.length === 0
          ? <div className="card center" style={{padding:60,flexDirection:'column',gap:12,color:'var(--muted)'}}>
              <Icon.flask size={40}/>
              <span style={{fontSize:14}}>Sin actividades registradas. Crea la primera.</span>
            </div>
          : Object.entries(actPorZona).map(([zona, acts]) => (
            <div className="card" key={zona} style={{marginBottom:14}}>
              <div className="card-head">
                <div>
                  <h3 style={{display:'flex',alignItems:'center',gap:8}}>
                    <Icon.flask size={15} style={{color:'var(--aqua)'}}/>
                    {zona}
                  </h3>
                  <p>{acts.length} actividad{acts.length>1?'es':''}</p>
                </div>
              </div>
              <table>
                <thead>
                  <tr>
                    <th>Actividad</th>
                    <th>Frecuencia</th>
                    <th>Producto</th>
                    <th>Método</th>
                    <th>Duración est.</th>
                    <th>Responsable</th>
                    <th style={{width:130}}></th>
                  </tr>
                </thead>
                <tbody>
                  {acts.map(a => (
                    <tr key={a.id}>
                      <td>
                        <div style={{fontWeight:500}}>{a.nombre}</div>
                        {a.descripcion && <div className="small mt-2">{a.descripcion}</div>}
                      </td>
                      <td><span className={`chip ${frecColor[a.frecuencia]||'muted'}`}>{a.frecuencia}</span></td>
                      <td style={{color:'var(--muted)',fontSize:12}}>{a.producto_usar||'—'}</td>
                      <td style={{color:'var(--muted)',fontSize:12}}>{a.metodo||'—'}</td>
                      <td style={{color:'var(--muted)',fontSize:12}}>{a.duracion_estimada||'—'}</td>
                      <td style={{color:'var(--muted)',fontSize:12}}>{a.responsable_rol}</td>
                      <td>
                        <div className="row" style={{gap:5,justifyContent:'flex-end'}}>
                          <button className="btn primary" style={{height:28,padding:'0 10px',fontSize:11,gap:5}}
                            onClick={()=>openRegistrar(a)}>
                            <Icon.check size={12}/> Registrar
                          </button>
                          <button className="btn ghost" style={{height:28,padding:'0 8px'}} onClick={()=>openEditAct(a)}>
                            <Icon.edit size={13}/>
                          </button>
                          <button className="btn danger" style={{height:28,padding:'0 8px'}} onClick={()=>deleteActividad(a.id)}>
                            <Icon.trash size={13}/>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ))
      )}

      {/* ═══════════════ TAB: HISTORIAL ═══════════════ */}
      {tab === 'historial' && (
        <>
          <div className="card" style={{marginBottom:14}}>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr auto',gap:10,alignItems:'flex-end'}}>
              <div className="field">
                <label>Desde</label>
                <input className="input" type="date" value={filtroDesde} onChange={e=>setFiltroDesde(e.target.value)}/>
              </div>
              <div className="field">
                <label>Hasta</label>
                <input className="input" type="date" value={filtroHasta} onChange={e=>setFiltroHasta(e.target.value)}/>
              </div>
              <div className="field">
                <label>Zona</label>
                <select className="input" value={filtroZona} onChange={e=>setFiltroZona(e.target.value)}>
                  <option value="">Todas las zonas</option>
                  {ZONAS_HIGIENE.map(z=><option key={z} value={z}>{z}</option>)}
                </select>
              </div>
              <div style={{display:'flex',gap:8}}>
                <button className="btn" onClick={cargarRegistros}><Icon.refresh size={14}/> Filtrar</button>
                <button className="btn" onClick={exportarPDF}><Icon.export size={14}/> PDF</button>
              </div>
            </div>
          </div>

          <div className="card">
            {loadReg ? <Loading/> : registros.length === 0
              ? <div className="center" style={{padding:50,color:'var(--muted)',flexDirection:'column',gap:10}}>
                  <Icon.check size={36}/>
                  <span>Sin registros para los filtros seleccionados</span>
                </div>
              : <table>
                  <thead>
                    <tr>
                      <th>Fecha</th>
                      <th>Hora</th>
                      <th>Zona</th>
                      <th>Actividad</th>
                      <th>Realizado por</th>
                      <th>Producto aplicado</th>
                      <th>Método usado</th>
                      <th>Dosis</th>
                      <th>Observaciones</th>
                      <th style={{width:40}}></th>
                    </tr>
                  </thead>
                  <tbody>
                    {registros.map(r => (
                      <tr key={r.id}>
                        <td className="mono" style={{fontSize:12}}>{r.fecha}</td>
                        <td className="mono" style={{fontSize:12,color:'var(--muted)'}}>{r.hora||'—'}</td>
                        <td><span className="chip aqua" style={{fontSize:10}}>{r.zona}</span></td>
                        <td style={{fontWeight:500}}>{r.actividad_nombre}</td>
                        <td>
                          <div style={{display:'flex',alignItems:'center',gap:7}}>
                            <div className="avatar" style={{width:24,height:24,fontSize:10}}>{r.realizado_por.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
                            <span style={{fontSize:12}}>{r.realizado_por}</span>
                          </div>
                        </td>
                        <td style={{fontSize:12,color:'var(--muted)'}}>{r.producto_aplicado||'—'}</td>
                        <td style={{fontSize:12,color:'var(--muted)'}}>{r.metodo_usado||'—'}</td>
                        <td style={{fontSize:12,color:'var(--muted)'}}>{r.dosis||'—'}</td>
                        <td style={{fontSize:12,color:'var(--muted)',maxWidth:160}}>{r.observaciones||'—'}</td>
                        <td>
                          <button className="btn danger" style={{height:26,padding:'0 7px'}}
                            onClick={async()=>{ if(confirm('¿Eliminar registro?')){ await window.api.delete(`/higiene/registros/${r.id}`); cargarRegistros(); reloadStats(); } }}>
                            <Icon.trash size={12}/>
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
            }
          </div>
        </>
      )}

      {/* ── Modal nueva / editar actividad ── */}
      <Modal open={modalAct} onClose={()=>setModalAct(false)}
        title={editAct ? 'Editar actividad' : 'Nueva actividad de higiene'}
        sub="Define la tarea, la zona y la frecuencia recomendada"
        width={580}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label>Nombre de la actividad *</label>
            <input className="input" placeholder="Ej: Limpieza de filtros principales" value={formAct.nombre} onChange={e=>setFormAct(p=>({...p,nombre:e.target.value}))}/>
          </div>
          <div className="field">
            <label>Zona *</label>
            <select className="input" value={formAct.zona} onChange={e=>setFormAct(p=>({...p,zona:e.target.value}))}>
              <option value="">Seleccionar zona…</option>
              {ZONAS_HIGIENE.map(z=><option key={z} value={z}>{z}</option>)}
            </select>
          </div>
          <div className="field">
            <label>Frecuencia *</label>
            <select className="input" value={formAct.frecuencia} onChange={e=>setFormAct(p=>({...p,frecuencia:e.target.value}))}>
              {FRECUENCIAS.map(f=><option key={f} value={f}>{f}</option>)}
            </select>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label>Descripción</label>
            <textarea className="input" rows={2} style={{height:'auto',paddingTop:8,paddingBottom:8,resize:'vertical'}}
              placeholder="Pasos o instrucciones generales…" value={formAct.descripcion||''}
              onChange={e=>setFormAct(p=>({...p,descripcion:e.target.value}))}/>
          </div>
          <div className="field">
            <label>Producto a usar</label>
            <input className="input" placeholder="Ej: Hipoclorito 5%, jabón neutro…" value={formAct.producto_usar||''}
              onChange={e=>setFormAct(p=>({...p,producto_usar:e.target.value}))}/>
          </div>
          <div className="field">
            <label>Método</label>
            <input className="input" placeholder="Ej: Cepillado, inmersión, aspersión…" value={formAct.metodo||''}
              onChange={e=>setFormAct(p=>({...p,metodo:e.target.value}))}/>
          </div>
          <div className="field">
            <label>Duración estimada</label>
            <input className="input" placeholder="Ej: 30 min, 1 hora…" value={formAct.duracion_estimada||''}
              onChange={e=>setFormAct(p=>({...p,duracion_estimada:e.target.value}))}/>
          </div>
          <div className="field">
            <label>Responsable recomendado</label>
            <input className="input" placeholder="Ej: Técnico, Cajero, Cualquiera…" value={formAct.responsable_rol||''}
              onChange={e=>setFormAct(p=>({...p,responsable_rol:e.target.value}))}/>
          </div>
        </div>
        <div className="row" style={{justifyContent:'flex-end',gap:8,marginTop:16}}>
          <button className="btn ghost" onClick={()=>setModalAct(false)}>Cancelar</button>
          <button className="btn primary" disabled={savingAct} onClick={saveActividad}>
            {savingAct ? <span className="loading-spin"/> : <Icon.check size={14}/>}
            {editAct ? 'Guardar cambios' : 'Crear actividad'}
          </button>
        </div>
      </Modal>

      {/* ── Modal registrar ejecución ── */}
      {actSel && (
        <Modal open={modalReg} onClose={()=>setModalReg(false)}
          title="Registrar ejecución"
          sub={`${actSel.nombre} · ${actSel.zona}`}
          width={540}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <div className="field">
              <label>Fecha *</label>
              <input className="input" type="date" value={formReg.fecha} onChange={e=>setFormReg(p=>({...p,fecha:e.target.value}))}/>
            </div>
            <div className="field">
              <label>Hora</label>
              <input className="input" type="time" value={formReg.hora||''} onChange={e=>setFormReg(p=>({...p,hora:e.target.value}))}/>
            </div>
            <div className="field" style={{gridColumn:'1/-1'}}>
              <label>Producto aplicado</label>
              <input className="input" placeholder="¿Qué producto usaste?" value={formReg.producto_aplicado||''}
                onChange={e=>setFormReg(p=>({...p,producto_aplicado:e.target.value}))}/>
            </div>
            <div className="field">
              <label>Método usado</label>
              <input className="input" placeholder="¿Cómo lo aplicaste?" value={formReg.metodo_usado||''}
                onChange={e=>setFormReg(p=>({...p,metodo_usado:e.target.value}))}/>
            </div>
            <div className="field">
              <label>Dosis / Concentración</label>
              <input className="input" placeholder="Ej: 2 ml por litro…" value={formReg.dosis||''}
                onChange={e=>setFormReg(p=>({...p,dosis:e.target.value}))}/>
            </div>
            <div className="field" style={{gridColumn:'1/-1'}}>
              <label>Observaciones</label>
              <textarea className="input" rows={3} style={{height:'auto',paddingTop:8,paddingBottom:8,resize:'vertical'}}
                placeholder="Novedades, condiciones encontradas, recomendaciones…"
                value={formReg.observaciones||''} onChange={e=>setFormReg(p=>({...p,observaciones:e.target.value}))}/>
            </div>
            <div className="card" style={{gridColumn:'1/-1',padding:'10px 14px',background:'var(--bg-card-2)'}}>
              <div className="small" style={{color:'var(--muted)',marginBottom:4}}>Registrado como</div>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <div className="avatar" style={{width:28,height:28,fontSize:11}}>{user.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
                <div>
                  <div style={{fontWeight:600,fontSize:13}}>{user.nombre}</div>
                  <div style={{fontSize:11,color:'var(--muted)'}}>{user.rol}</div>
                </div>
              </div>
            </div>
          </div>
          <div className="row" style={{justifyContent:'flex-end',gap:8,marginTop:16}}>
            <button className="btn ghost" onClick={()=>setModalReg(false)}>Cancelar</button>
            <button className="btn primary" disabled={savingReg} onClick={saveRegistro}>
              {savingReg ? <span className="loading-spin"/> : <Icon.check size={14}/>}
              Guardar registro
            </button>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── APP ROOT ──────────────────────────────────────────────────────────────────
function App() {
  const [user, setUser]         = useState(() => { try { return JSON.parse(localStorage.getItem('ad_user')); } catch { return null; } });
  const [active, setActive]     = useState(() => localStorage.getItem('ad_route') || 'overview');
  const [collapsed, setCollapsed] = useState(() => localStorage.getItem('ad_collapsed') === '1');
  const [theme, setTheme]       = useState(() => localStorage.getItem('ad_theme') || 'dark');
  const [sideOpen, setSideOpen] = useState(false);

  useEffect(() => { localStorage.setItem('ad_route', active); }, [active]);
  useEffect(() => { localStorage.setItem('ad_collapsed', collapsed?'1':'0'); document.documentElement.style.setProperty('--sw', collapsed?'68px':'248px'); }, [collapsed]);
  useEffect(() => { localStorage.setItem('ad_theme', theme); document.body.setAttribute('data-theme', theme); }, [theme]);

  const logout = () => {
    window.api.post('/auth/logout');
    localStorage.removeItem('ad_token'); localStorage.removeItem('ad_user');
    setUser(null);
  };

  if (!user) return (
    <ToastProvider>
      <LoginPage onLogin={u => setUser(u)}/>
    </ToastProvider>
  );

  const pages = {
    overview:    () => <OverviewPage/>,
    pos:         () => <POSPage/>,
    ventas:      () => <VentasPage/>,
    facturacion: () => <FacturacionPage/>,
    inventario:  () => <InventarioPage/>,
    animales:    () => <AnimalesPage/>,
    servicios:   () => <ServiciosPage/>,
    reservas:    () => <ReservasPage/>,
    perdidas:       () => <PerdidasPage/>,
    proveedores:    () => <ProveedoresPage/>,
    'creditos-prov':() => <CreditosProvPage/>,
    compras:        () => <ComprasPage/>,
    gastos:         () => <GastosPage/>,
    cuarentena:     () => <CuarentenaPage/>,
    higiene:        () => <HigienePage/>,
    clientes:    () => <ClientesPage/>,
    fidelizacion:() => <FidelizacionPage/>,
    analytics:       () => <AnalyticsPage/>,
    'tienda-pedidos':   () => <TiendaPedidosPage/>,
    'tienda-armakit':   () => <ArmaKitPage/>,
    'tienda-cupones':   () => <TiendaCuponesPage/>,
    'tienda-autofotos': () => <AutoFotosPage/>,
    'tienda-config':    () => <TiendaConfigPage/>,
    usuarios:    () => <UsuariosPage/>,
    config:      () => <ConfigPage/>,
    logs:        () => <LogsPage/>,
  };

  const Page = pages[active] || pages.overview;

  return (
    <AuthCtx.Provider value={{ user }}>
      <ToastProvider>
        <div className="app" data-collapsed={collapsed}>
          <div className={`mob-overlay${sideOpen ? ' open' : ''}`} onClick={() => setSideOpen(false)}/>
          <Sidebar active={active} setActive={setActive} collapsed={collapsed}
            setCollapsed={setCollapsed} user={user} onLogout={logout}
            mobileOpen={sideOpen} onMobileClose={() => setSideOpen(false)}/>
          <div className="main">
            <Topbar user={user} theme={theme} setTheme={setTheme} onMenuOpen={() => setSideOpen(true)}/>
            <Page/>
          </div>
        </div>
      </ToastProvider>
    </AuthCtx.Provider>
  );
}

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