// ============================================================
// CONTAX · VIEWS (Dashboard, Inventario, Gastos, Informe, Login)
// ============================================================

const C = window.CONTAX;
const Iv = window.I;

// =================== LOGIN ===================
function LoginView({ onLogin }) {
  const [email, setEmail] = React.useState('andres@contax.co');
  const [pass, setPass] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); onLogin(); }, 700);
  };
  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-logo">
          <img src="assets/contax-logo.png" alt="CONTAX"/>
          <span className="login-product">Cash Flow · Barranquilla</span>
        </div>
        <h2 className="login-title">Bienvenido de vuelta</h2>
        <p className="login-sub">Ingresa para continuar al panel de control.</p>
        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="field">
            <label className="field-label">Correo</label>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} required/>
          </div>
          <div className="field">
            <label className="field-label">Contraseña</label>
            <input className="input" type="password" value={pass} onChange={e => setPass(e.target.value)} placeholder="••••••••"/>
          </div>
          <button className="btn primary lg full" type="submit" disabled={loading}>
            {loading ? <Iv.Loader size={14} style={{ animation: 'spin 1s linear infinite' }}/> : 'Continuar'}
          </button>
        </form>
        <div className="divider">o</div>
        <button className="btn ghost full" type="button">Enviar magic link al correo</button>
      </div>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

// =================== DASHBOARD ===================
function DashboardView({ period }) {
  const today = C.VENTAS[C.VENTAS.length - 1];
  const yest = C.VENTAS[C.VENTAS.length - 2];
  const [pulseKey, setPulseKey] = React.useState(0);
  const [liveValue, setLiveValue] = React.useState(today.ventas);
  // Simulate realtime
  React.useEffect(() => {
    const t = setInterval(() => {
      setLiveValue(v => v + Math.round((Math.random() - 0.3) * 80000));
      setPulseKey(k => k + 1);
    }, 6000);
    return () => clearInterval(t);
  }, []);

  // Period filter: day=1, week=7, month=30, quarter=90 (capped to data length)
  const periodSpec = {
    day:     { n: 1,  label: 'hoy',           prev: 'vs ayer' },
    week:    { n: 7,  label: 'últimos 7 días', prev: 'vs semana ant.' },
    month:   { n: 30, label: 'últimos 30 días', prev: 'vs mes ant.' },
    quarter: { n: 90, label: 'últimos 90 días', prev: 'vs trim. ant.' },
  }[period] || { n: 30, label: 'últimos 30 días', prev: 'vs mes ant.' };
  const filtered = C.VENTAS.slice(-Math.min(periodSpec.n, C.VENTAS.length));
  const ventasMesAcum = filtered.reduce((a,b) => a + b.ventas, 0);
  const utilAcum = filtered.reduce((a,b) => a + b.utilidad, 0);
  const sparkLen = period === 'day' ? 1 : Math.min(filtered.length, 12);
  const ventasSpark = filtered.slice(-sparkLen).map(v => v.ventas);
  const utilSpark   = filtered.slice(-sparkLen).map(v => v.utilidad);

  // Compare to previous equal-length window
  const prevWindow = C.VENTAS.slice(-Math.min(periodSpec.n*2, C.VENTAS.length), -periodSpec.n);
  const prevVentas = prevWindow.reduce((a,b) => a + b.ventas, 0);
  const deltaVentas = prevVentas ? ((ventasMesAcum - prevVentas) / prevVentas) * 100 : 0;

  return (
    <div className="page">
      <div className="page-greeting">
        <div>
          <h1>Buenas noches, Andres</h1>
          <p className="sub">Jueves, 8 de mayo · Sede Barranquilla · <span style={{ color: 'var(--accent)' }}>{periodSpec.label}</span> · <span className="live-dot" style={{ marginLeft: 4 }}/> <span className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>actualizando en vivo</span></p>
        </div>
      </div>

      <div className="grid grid-4 stagger" style={{ marginBottom: 20 }}>
        <MetricCard
          key={pulseKey}
          label="Ventas hoy"
          value={C.COP(liveValue).slice(1)}
          delta={+8.4}
          sparkline={ventasSpark}
          pulse={pulseKey}
        />
        <MetricCard
          label="Cuadre del día"
          value={today.descuadre === 0 ? '0' : Math.abs(today.descuadre).toLocaleString('es-CO')}
          currency={today.descuadre === 0 ? '' : (today.descuadre > 0 ? '+$' : '−$')}
          status={today.estado === 'cuadra' ? 'success' : today.estado === 'sobra' ? 'warning' : 'danger'}
          statusLabel={today.estado.toUpperCase()}
          deltaLabel={today.estado === 'cuadra' ? 'caja confirmada' : 'pendiente revisar'}
        />
        <MetricCard
          label={period === 'day' ? 'Acumulado hoy' : period === 'week' ? 'Acumulado semana' : period === 'quarter' ? 'Acumulado trimestre' : 'Acumulado mes'}
          value={ventasMesAcum >= 1_000_000 ? (ventasMesAcum / 1_000_000).toFixed(2) + 'M' : (ventasMesAcum/1000).toFixed(0)+'K'}
          delta={+parseFloat(deltaVentas.toFixed(1))}
          deltaLabel={periodSpec.prev}
          sparkline={ventasSpark}
        />
        <MetricCard
          label="Utilidad estimada"
          value={utilAcum >= 1_000_000 ? (utilAcum / 1_000_000).toFixed(1) + 'M' : (utilAcum/1000).toFixed(0)+'K'}
          delta={+5.6}
          deltaLabel={periodSpec.prev}
          sparkline={utilSpark}
        />
      </div>

      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-7">
          <div className="card-header">
            <div>
              <h3 className="card-title">Ventas diarias · {periodSpec.label}</h3>
              <span className="card-sub">Promedio diario {C.COP(Math.round(ventasMesAcum / Math.max(filtered.length,1)))}</span>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <span className="pill accent"><span className="dot-status"/> Ventas</span>
              <button className="btn ghost" style={{ padding: '4px 8px' }}><Iv.MoreHorizontal size={14}/></button>
            </div>
          </div>
          <ChartArea data={filtered} dataKey="ventas" xKey="idx" height={260}/>
        </div>
        <div className="card col-5">
          <div className="card-header">
            <div>
              <h3 className="card-title">Mix de pago · mes</h3>
              <span className="card-sub">Efectivo vs transferencia</span>
            </div>
          </div>
          <ChartDonut data={C.MIX_PAGO} height={220}/>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
            {C.MIX_PAGO.map((m,i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '8px 10px', background: 'var(--bg-overlay)', borderRadius: 8 }}>
                <span style={{ fontSize: 10.5, color: 'var(--text-tertiary)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{m.name}</span>
                <span className="tnum" style={{ fontSize: 16, fontWeight: 500 }}>{C.COPK(m.value)}</span>
                <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-tertiary)' }}>{((m.value / C.MES.ventasTotal) * 100).toFixed(1)}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-8">
          <div className="card-header">
            <div>
              <h3 className="card-title">Estado de cuadres · mayo 2026</h3>
              <span className="card-sub">Toca un día para ver el desglose</span>
            </div>
            <span className="pill neutral">{filtered.filter(v => v.estado === 'cuadra').length}/{filtered.length} días cerrados</span>
          </div>
          <CalendarHeatmap data={filtered}/>
        </div>
        <div className="col-4"><window.ResumenDescuadres/></div>
      </div>

      <div className="grid grid-12">
        <div className="card col-7">
          <div className="card-header">
            <div>
              <h3 className="card-title">Top productos · mes</h3>
              <span className="card-sub">{window.__topMode === 'units' ? 'Por unidades vendidas' : 'Por ventas brutas'}</span>
            </div>
            <TopProductsToggle/>
          </div>
          <table className="table">
            <thead>
              <tr>
                <th>Producto</th>
                <th style={{ width: '40%' }}>Volumen</th>
                <th className="num">Ventas</th>
                <th className="num">Mg</th>
              </tr>
            </thead>
            <tbody>
              {C.TOP5.map((p, i) => {
                const max = C.TOP5[0].ventasMes;
                const margin = ((p.precio - p.costo) / p.precio) * 100;
                return (
                  <tr key={p.id}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span className="mono" style={{ fontSize: 10, color: 'var(--text-tertiary)', width: 18 }}>{String(i+1).padStart(2,'0')}</span>
                        <span style={{ color: 'var(--text-primary)' }}>{p.nombre}</span>
                      </div>
                    </td>
                    <td>
                      <div className="bar-inline">
                        <div className="bar-inline-track">
                          <div className="bar-inline-fill" style={{ width: ((p.ventasMes/max)*100) + '%' }}/>
                        </div>
                        <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-tertiary)', minWidth: 30, textAlign: 'right' }}>{p.sold}u</span>
                      </div>
                    </td>
                    <td className="num">{C.COPK(p.ventasMes)}</td>
                    <td className="num" style={{ color: margin > 60 ? 'var(--success)' : 'var(--text-secondary)' }}>{margin.toFixed(0)}%</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        <div className="card col-5">
          <div className="card-header">
            <div>
              <h3 className="card-title">Pérdida por vasos dañados</h3>
              <span className="card-sub">Por tamaño · mes</span>
            </div>
            <span className="pill danger"><span className="dot-status"/> {C.COP(C.DANIADOS.reduce((a,b) => a + b.valor, 0))}</span>
          </div>
          <ChartBars data={C.DANIADOS} dataKey="valor" xKey="size" height={210} color="var(--danger)"/>
          <div style={{ marginTop: 12, padding: '10px 12px', background: 'var(--warning-bg)', border: '1px solid var(--warning-border)', borderRadius: 8, fontSize: 12, color: 'var(--text-secondary)' }}>
            <Iv.AlertCircle size={12} style={{ verticalAlign: '-1px', marginRight: 6, color: 'var(--warning)' }}/>
            El tamaño <span style={{ color: 'var(--text-primary)', fontWeight: 500 }}>12oz</span> concentra el 25.6% de la pérdida del mes.
          </div>
        </div>
      </div>

      <div style={{ marginTop: 20 }}><window.SaldoBancarioCard/></div>
      <div style={{ marginTop: 20 }}><window.DiferenciaBancoCard/></div>
    </div>
  );
}

function TopProductsToggle() {
  const [, force] = React.useReducer(x => x + 1, 0);
  const mode = window.__topMode || 'value';
  const set = (m) => { window.__topMode = m; force(); };
  return (
    <div className="period-switcher">
      <button className={mode === 'value' ? 'active' : ''} onClick={() => set('value')}>Por valor</button>
      <button className={mode === 'units' ? 'active' : ''} onClick={() => set('units')}>Por unidades</button>
    </div>
  );
}

// =================== INVENTARIO ===================
function InventarioView() {
  const [sheetOpen, setSheetOpen] = React.useState(false);
  return (
    <div className="page">
      <div className="page-greeting">
        <div>
          <h1>Inventario</h1>
          <p className="sub">Stock por tamaño · sede Barranquilla</p>
        </div>
        <button className="btn primary" onClick={() => setSheetOpen(true)}><Iv.Plus size={14}/> Registrar salida</button>
      </div>

      <div className="grid stagger" style={{ gridTemplateColumns: 'repeat(6, minmax(0, 1fr))', marginBottom: 24 }}>
        {C.STOCK_BY_SIZE.map(s => {
          const last = s.trend[s.trend.length - 1];
          const first = s.trend[0];
          const delta = ((last - first) / first) * 100;
          return (
            <div key={s.size} className="stock-card">
              <div className="stock-name">{s.size}</div>
              <div className="stock-value tnum">{s.stock}</div>
              <div className="stock-foot">
                <span className={`mono ${delta < 0 ? '' : ''}`} style={{ color: delta < 0 ? 'var(--danger)' : 'var(--success)' }}>{delta > 0 ? '+' : ''}{delta.toFixed(1)}%</span>
                <Sparkline data={s.trend} status={delta < -5 ? 'danger' : null}/>
              </div>
            </div>
          );
        })}
      </div>

      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-7">
          <div className="card-header">
            <div>
              <h3 className="card-title">Salidas de bodega vs ventas</h3>
              <span className="card-sub">Eficiencia operativa por tamaño · mayo</span>
            </div>
            <span className="pill success"><span className="dot-status"/> 94% eficiencia</span>
          </div>
          <ChartBars
            data={C.STOCK_BY_SIZE.map(s => ({ size: s.size, salidas: s.stock + Math.round(s.stock*0.6), ventas: Math.round(s.stock*0.55) }))}
            dataKey="ventas" xKey="size" height={220}
          />
          <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 8 }}>
            6% queda en stock al cierre de mes — dentro del rango sano (≤8%).
          </div>
        </div>
        <div className="card col-5">
          <div className="card-header">
            <div>
              <h3 className="card-title">Vasos dañados por tamaño</h3>
              <span className="card-sub">Tendencia 30 días</span>
            </div>
          </div>
          <ChartBars data={C.DANIADOS} dataKey="cantidad" xKey="size" height={220} color="var(--danger)"/>
          <div style={{ marginTop: 8, padding: '10px 12px', background: 'var(--warning-bg)', border: '1px solid var(--warning-border)', borderRadius: 8, fontSize: 12 }}>
            <Iv.AlertCircle size={12} style={{ verticalAlign: '-1px', marginRight: 6, color: 'var(--warning)' }}/>
            El <span style={{ color: 'var(--text-primary)', fontWeight: 500 }}>12oz</span> creció 35% esta semana.
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div>
            <h3 className="card-title">Salidas de bodega · mes</h3>
            <span className="card-sub">{C.SALIDAS.length} movimientos · {C.SALIDAS.reduce((a,b) => a + b.cantidad, 0)} unidades</span>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ position: 'relative' }}>
              <Iv.Search size={14} style={{ position: 'absolute', left: 10, top: 10, color: 'var(--text-tertiary)' }}/>
              <input className="input" placeholder="Buscar producto…" style={{ paddingLeft: 32, width: 220 }}/>
            </div>
            <button className="btn"><Iv.Filter size={14}/> Filtrar</button>
          </div>
        </div>
        <table className="table">
          <thead>
            <tr><th>Fecha</th><th>Producto</th><th className="num">Cantidad</th><th>Responsable</th><th></th></tr>
          </thead>
          <tbody>
            {C.SALIDAS.map(s => (
              <tr key={s.id}>
                <td className="muted mono" style={{ fontSize: 11.5 }}>{s.fecha}</td>
                <td>{s.producto}</td>
                <td className="num">{s.cantidad}</td>
                <td className="muted">{s.responsable}</td>
                <td style={{ width: 24 }}><Iv.MoreHorizontal size={14} className="muted"/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {sheetOpen && (
        <div className="modal-backdrop" onClick={() => setSheetOpen(false)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h3 className="card-title" style={{ fontSize: 16 }}>Registrar salida</h3>
              <button className="icon-btn" onClick={() => setSheetOpen(false)}><Iv.X size={14}/></button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div className="field"><label className="field-label">Producto</label><select className="input">{C.PRODUCTOS.slice(0,8).map(p => <option key={p.id}>{p.nombre}</option>)}</select></div>
              <div className="field"><label className="field-label">Cantidad</label><input className="input" type="number" placeholder="0"/></div>
              <div className="field"><label className="field-label">Responsable</label><input className="input" placeholder="Nombre del operario"/></div>
              <button className="btn primary lg full" onClick={() => setSheetOpen(false)}>Confirmar salida</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// =================== GASTOS ===================
function GastosView() {
  const [search, setSearch] = React.useState('');
  const [catFilter, setCatFilter] = React.useState('all');
  const [modalOpen, setModalOpen] = React.useState(false);
  const filtered = C.GASTOS.filter(g =>
    (catFilter === 'all' || g.categoria === catFilter) &&
    g.concepto.toLowerCase().includes(search.toLowerCase())
  );
  return (
    <div className="page">
      <div className="page-greeting">
        <div>
          <h1>Gastos</h1>
          <p className="sub">Distribución y control de egresos · mayo 2026</p>
        </div>
        <button className="btn primary" onClick={() => setModalOpen(true)}><Iv.Plus size={14}/> Agregar gasto</button>
      </div>

      <div className="grid grid-3" style={{ marginBottom: 20 }}>
        <MetricCard label="Total mes"     value={(C.GASTOS_BY_CONCEPTO.reduce((a,b)=>a+b.value,0)/1_000_000).toFixed(2) + 'M'} delta={+4.1} deltaLabel={C.GASTOS.length + ' eventos'}/>
        <MetricCard label="De cuadre"     value={C.COP(C.MES.gastos).slice(1)} currency="$" deltaLabel="operativo diario" status="warning" statusLabel="Operativo"/>
        <MetricCard label="Del mes"       value={(2_398_000/1_000_000).toFixed(1)+'M'} deltaLabel="estructural" status="success" statusLabel="Estructural"/>
      </div>

      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-5">
          <div className="card-header">
            <div>
              <h3 className="card-title">Distribución por concepto</h3>
              <span className="card-sub">{C.GASTOS_BY_CONCEPTO.length} categorías</span>
            </div>
          </div>
          <ChartDonut data={C.GASTOS_BY_CONCEPTO} height={240}/>
        </div>
        <div className="card col-7">
          <div className="card-header">
            <div>
              <h3 className="card-title">Top conceptos</h3>
              <span className="card-sub">Donde se está yendo el dinero</span>
            </div>
          </div>
          <table className="table">
            <thead><tr><th>Concepto</th><th>Distribución</th><th className="num">Monto</th><th className="num">%</th></tr></thead>
            <tbody>
              {C.GASTOS_BY_CONCEPTO.map(g => {
                const total = C.GASTOS_BY_CONCEPTO.reduce((a,b) => a + b.value, 0);
                const pct = (g.value / total) * 100;
                return (
                  <tr key={g.name}>
                    <td><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: g.fill, marginRight: 8, verticalAlign: 'middle' }}/>{g.name}</td>
                    <td><div className="bar-inline-track" style={{ maxWidth: 180 }}><div className="bar-inline-fill" style={{ width: pct + '%', background: g.fill }}/></div></td>
                    <td className="num">{C.COP(g.value)}</td>
                    <td className="num">{pct.toFixed(1)}%</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div>
            <h3 className="card-title">Movimientos · mes</h3>
            <span className="card-sub">{filtered.length} registros · {C.COP(filtered.reduce((a,b) => a + b.monto, 0))}</span>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div className="period-switcher">
              <button className={catFilter === 'all' ? 'active' : ''} onClick={() => setCatFilter('all')}>Todos</button>
              <button className={catFilter === 'cuadre' ? 'active' : ''} onClick={() => setCatFilter('cuadre')}>De cuadre</button>
              <button className={catFilter === 'mes' ? 'active' : ''} onClick={() => setCatFilter('mes')}>Del mes</button>
            </div>
            <div style={{ position: 'relative' }}>
              <Iv.Search size={14} style={{ position: 'absolute', left: 10, top: 10, color: 'var(--text-tertiary)' }}/>
              <input className="input" placeholder="Buscar…" value={search} onChange={e => setSearch(e.target.value)} style={{ paddingLeft: 32, width: 220 }}/>
            </div>
          </div>
        </div>
        <table className="table">
          <thead><tr><th>Fecha</th><th>Concepto</th><th>Categoría</th><th>Método</th><th className="num">Monto</th><th>Recibo</th></tr></thead>
          <tbody>
            {filtered.map(g => (
              <tr key={g.id}>
                <td className="muted mono" style={{ fontSize: 11.5 }}>{g.fecha}</td>
                <td>{g.concepto}</td>
                <td><span className={`pill neutral`} style={{ textTransform: 'capitalize' }}>{g.categoria}</span></td>
                <td className="muted">{g.metodo}</td>
                <td className="num">{C.COP(g.monto)}</td>
                <td>{g.recibo ? <span style={{ width: 28, height: 20, display: 'inline-block', borderRadius: 4, background: 'linear-gradient(135deg, var(--bg-overlay), var(--bg-base))', border: '1px solid var(--border-subtle)' }} title="Ver recibo"/> : <span className="muted" style={{ fontSize: 11 }}>—</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {modalOpen && (
        <div className="modal-backdrop" onClick={() => setModalOpen(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h3 className="card-title" style={{ fontSize: 16 }}>Nuevo gasto</h3>
              <button className="icon-btn" onClick={() => setModalOpen(false)}><Iv.X size={14}/></button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div className="field"><label className="field-label">Concepto</label><select className="input">{C.GASTO_CONCEPTOS.map(c => <option key={c}>{c}</option>)}</select></div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field"><label className="field-label">Monto</label><input className="input mono" placeholder="0" inputMode="numeric"/></div>
                <div className="field"><label className="field-label">Método</label><select className="input"><option>Efectivo</option><option>Transferencia</option></select></div>
              </div>
              <div className="field"><label className="field-label">Categoría</label>
                <div className="period-switcher" style={{ width: 'fit-content' }}>
                  <button className="active">Del mes</button><button>De cuadre</button>
                </div>
              </div>
              <button className="btn lg full" type="button"><Iv.Camera size={14}/> Adjuntar recibo</button>
              <button className="btn primary lg full" onClick={() => setModalOpen(false)}>Guardar gasto</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// =================== INFORME MENSUAL (P&L) ===================
function InformeView() {
  const ventas = C.MES.ventasTotal;
  const cogs = Math.round(ventas * 0.42);
  const grossProfit = ventas - cogs;
  const opex = C.MES.gastos + C.MES.pagoTrabajadores;
  const netProfit = grossProfit - opex;
  return (
    <div className="page">
      <div className="page-greeting">
        <div>
          <h1>Informe Mensual</h1>
          <p className="sub">Estado de resultados · mayo 2026 · sede Barranquilla</p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn"><Iv.Download size={14}/> Exportar Excel</button>
          <button className="btn primary"><Iv.Download size={14}/> Exportar PDF</button>
        </div>
      </div>

      <div className="report-doc">
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 28, gap: 16 }}>
          <div>
            <span style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>P&L · Mayo 2026</span>
            <h2 className="report-h1" style={{ marginTop: 6 }}>Estado de resultados</h2>
            <p style={{ color: 'var(--text-secondary)', fontSize: 13, margin: '6px 0 0' }}>Sede Barranquilla · Bebidas · 30 días operativos</p>
          </div>
          <img src="assets/contax-mark.png" style={{ height: 44, opacity: 0.9 }} alt=""/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 28 }}>
          <div className="card" style={{ padding: 14 }}>
            <div style={{ fontSize: 10.5, color: 'var(--text-tertiary)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>Ingresos</div>
            <div className="tnum" style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>{C.COPK(ventas)}</div>
            <div style={{ fontSize: 11, color: 'var(--success)', marginTop: 4 }}>+8.2% vs abril</div>
          </div>
          <div className="card" style={{ padding: 14 }}>
            <div style={{ fontSize: 10.5, color: 'var(--text-tertiary)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>Utilidad bruta</div>
            <div className="tnum" style={{ fontSize: 22, fontWeight: 500, marginTop: 4 }}>{C.COPK(grossProfit)}</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 4 }}>{((grossProfit/ventas)*100).toFixed(1)}% margen</div>
          </div>
          <div className="card" style={{ padding: 14 }}>
            <div style={{ fontSize: 10.5, color: 'var(--text-tertiary)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>Utilidad neta</div>
            <div className="tnum" style={{ fontSize: 22, fontWeight: 500, marginTop: 4, color: 'var(--success)' }}>{C.COPK(netProfit)}</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 4 }}>{((netProfit/ventas)*100).toFixed(1)}% margen neto</div>
          </div>
        </div>

        <div className="report-h2">Ingresos</div>
        <div className="pl-row"><span>Ventas brutas</span><span className="v">{C.COP(ventas)}</span></div>
        <div className="pl-row indent"><span>Efectivo</span><span className="v">{C.COP(C.MES.efectivo)}</span></div>
        <div className="pl-row indent"><span>Transferencias</span><span className="v">{C.COP(C.MES.transferencia)}</span></div>
        <div className="pl-row total"><span>Total ingresos</span><span className="v">{C.COP(ventas)}</span></div>

        <div className="report-h2">Costo de ventas</div>
        <div className="pl-row indent"><span>Insumos (vasos, hielo, mezcladores)</span><span className="v">{C.COP(Math.round(cogs * 0.62))}</span></div>
        <div className="pl-row indent"><span>Licor</span><span className="v">{C.COP(Math.round(cogs * 0.30))}</span></div>
        <div className="pl-row indent"><span>Mermas y vasos dañados</span><span className="v">{C.COP(Math.round(cogs * 0.08))}</span></div>
        <div className="pl-row total"><span>Total costo de ventas</span><span className="v">−{C.COP(cogs)}</span></div>

        <div className="report-h2">Gastos operativos</div>
        <div className="pl-row indent"><span>Pago a trabajadores</span><span className="v">{C.COP(C.MES.pagoTrabajadores)}</span></div>
        <div className="pl-row indent"><span>Arriendo y servicios</span><span className="v">{C.COP(1090000)}</span></div>
        <div className="pl-row indent"><span>Otros gastos</span><span className="v">{C.COP(C.MES.gastos - 1090000)}</span></div>
        <div className="pl-row total"><span>Total gastos operativos</span><span className="v">−{C.COP(opex)}</span></div>

        <div className="pl-row total" style={{ marginTop: 24, fontSize: 16, color: 'var(--success)' }}>
          <span>Utilidad neta</span>
          <span className="v tnum">{C.COP(netProfit)}</span>
        </div>

        <div style={{ marginTop: 36 }}>
          <div className="report-h2">Comparativo · últimos 4 meses</div>
          <ChartBars data={C.TRIMESTRE} dataKey="ventas" xKey="mes" height={220}/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginView, DashboardView, InventarioView, GastosView, InformeView });