// ============================================================
// CONTAX · EXTRA VIEWS — Saldo, Diferencia, Nómina + dashboard widgets
// ============================================================
const Cx = window.CONTAX; const Ix = window.I;

function SaldoBancarioCard() {
  const data = Cx.SALDO_BANCO;
  const saldoActual = data[data.length - 1].saldo;
  const pico   = data.reduce((a, b) => b.saldo > a.saldo ? b : a, data[0]);
  const minimo = data.reduce((a, b) => b.saldo < a.saldo ? b : a, data[0]);
  const inicial = data[0].saldo;
  const R = window.Recharts;
  const tickStyle = { fontSize: 11, fontFamily: 'Geist Mono, monospace' };
  return (
    <div className="card">
      <div className="card-header">
        <div>
          <h3 className="card-title">Saldo bancario · BANCO 0479</h3>
          <span className="card-sub">Evolución diaria del saldo</span>
        </div>
        <span className="tnum" style={{ fontSize: 16, fontWeight: 500 }}>{Cx.COPK(saldoActual)} <span style={{ color: 'var(--text-tertiary)', fontSize: 11, fontWeight: 400 }}>actual</span></span>
      </div>
      <div className="chart-frame" style={{ height: 220 }}>
        <R.ResponsiveContainer>
          <R.LineChart data={data} margin={{ top: 10, right: 10, left: -8, bottom: 0 }}>
            <R.CartesianGrid stroke="var(--grid)" vertical={false}/>
            <R.XAxis dataKey="idx" stroke="var(--text-tertiary)" tick={tickStyle} tickLine={false} axisLine={false}/>
            <R.YAxis stroke="var(--text-tertiary)" tick={tickStyle} tickLine={false} axisLine={false} tickFormatter={(v) => Cx.COPK(v)} width={56}/>
            <R.Tooltip content={<window.ChartTooltip/>}/>
            <R.Line type="monotone" dataKey="saldo" stroke="var(--accent)" strokeWidth={1.8} dot={false}
              activeDot={{ r: 4, strokeWidth: 0, fill: 'var(--accent)' }}/>
            <R.ReferenceDot x={pico.idx} y={pico.saldo} r={5} fill="var(--success)" stroke="var(--bg-elevated)" strokeWidth={2}/>
            <R.ReferenceDot x={minimo.idx} y={minimo.saldo} r={5} fill="var(--warning)" stroke="var(--bg-elevated)" strokeWidth={2}/>
          </R.LineChart>
        </R.ResponsiveContainer>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 14 }}>
        {[
          { l: 'Saldo inicial', v: inicial, c: 'var(--text-primary)' },
          { l: 'Pico del mes',  v: pico.saldo, c: 'var(--success)' },
          { l: 'Mínimo',        v: minimo.saldo, c: 'var(--warning)' },
        ].map((s, i) => (
          <div key={i} style={{ padding: '10px 12px', background: 'var(--bg-overlay)', borderRadius: 8 }}>
            <div style={{ fontSize: 10, color: 'var(--text-tertiary)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{s.l}</div>
            <div className="tnum" style={{ fontSize: 16, fontWeight: 500, marginTop: 4, color: s.c }}>{Cx.COPK(s.v)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DiferenciaBancoCard() {
  const data = Cx.DIF_BANCO;
  const totalRep = data.reduce((a,b) => a + b.reportado, 0);
  const totalBan = data.reduce((a,b) => a + b.banco, 0);
  const totalDif = totalBan - totalRep;
  return (
    <div className="card">
      <div className="card-header">
        <div>
          <h3 className="card-title">Control bancario · transferencias reportadas vs banco</h3>
          <span className="card-sub">Detecta inconsistencias entre operario y banco</span>
        </div>
        <span className={`pill ${Math.abs(totalDif) < 1000 ? 'success' : totalDif < 0 ? 'danger' : 'warning'}`}>
          <span className="dot-status"/> {totalDif === 0 ? 'OK' : (totalDif > 0 ? '+' : '−') + Cx.COP(Math.abs(totalDif))}
        </span>
      </div>
      <table className="table">
        <thead><tr><th>Fecha</th><th className="num">Reportado</th><th className="num">Banco</th><th className="num">Diferencia</th><th>Estado</th></tr></thead>
        <tbody>
          {data.map((r, i) => {
            const fecha = r.fecha.toLocaleDateString('es-CO', { day: 'numeric', month: 'short' });
            const ok = r.diferencia === 0;
            const sobra = r.diferencia > 0;
            return (
              <tr key={i}>
                <td className="muted mono" style={{ fontSize: 11.5 }}>{fecha}</td>
                <td className="num">{Cx.COP(r.reportado)}</td>
                <td className="num">{Cx.COP(r.banco)}</td>
                <td className="num" style={{ color: ok ? 'var(--text-tertiary)' : sobra ? 'var(--warning)' : 'var(--danger)' }}>
                  {ok ? '$0' : (sobra ? '+' : '−') + Cx.COP(Math.abs(r.diferencia))}
                </td>
                <td>
                  <span className={`pill ${ok ? 'success' : sobra ? 'warning' : 'danger'}`}>
                    <span className="dot-status"/>
                    {ok ? 'OK' : sobra ? 'SOBRA' : 'FALTA'}
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
        <tfoot>
          <tr style={{ borderTop: '1px solid var(--border-default)' }}>
            <td style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Total mes</td>
            <td className="num" style={{ fontWeight: 500 }}>{Cx.COP(totalRep)}</td>
            <td className="num" style={{ fontWeight: 500 }}>{Cx.COP(totalBan)}</td>
            <td className="num" style={{ fontWeight: 500, color: 'var(--danger)' }}>{(totalDif > 0 ? '+' : '−') + Cx.COP(Math.abs(totalDif))}</td>
            <td><span className="pill warning"><span className="dot-status"/> Revisar</span></td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

function ResumenDescuadres() {
  const cuadran = Cx.VENTAS.filter(v => v.estado === 'cuadra').length;
  const sobran  = Cx.VENTAS.filter(v => v.estado === 'sobra').length;
  const faltan  = Cx.VENTAS.filter(v => v.estado === 'falta').length;
  const neto = Cx.VENTAS.reduce((a, b) => a + b.descuadre, 0);
  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
      <div className="card-header"><h3 className="card-title">Resumen del mes</h3></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="pill success" style={{ minWidth: 28, justifyContent: 'center' }}><Ix.Check size={11}/></span>
          <span className="tnum" style={{ fontSize: 22, fontWeight: 500, lineHeight: 1 }}>{cuadran}</span>
          <span style={{ color: 'var(--text-tertiary)', fontSize: 12 }}>días cuadran</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="pill warning" style={{ minWidth: 28, justifyContent: 'center' }}><Ix.ArrowUp size={11}/></span>
          <span className="tnum" style={{ fontSize: 22, fontWeight: 500, lineHeight: 1 }}>{sobran}</span>
          <span style={{ color: 'var(--text-tertiary)', fontSize: 12 }}>sobran</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="pill danger" style={{ minWidth: 28, justifyContent: 'center' }}><Ix.X size={11}/></span>
          <span className="tnum" style={{ fontSize: 22, fontWeight: 500, lineHeight: 1 }}>{faltan}</span>
          <span style={{ color: 'var(--text-tertiary)', fontSize: 12 }}>faltan</span>
        </div>
      </div>
      <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ fontSize: 10.5, color: 'var(--text-tertiary)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Descuadre neto</div>
        <div className="tnum" style={{ fontSize: 22, fontWeight: 500, marginTop: 4, color: neto < 0 ? 'var(--danger)' : neto > 0 ? 'var(--warning)' : 'var(--text-primary)' }}>
          {neto >= 0 ? '+' : '−'}{Cx.COP(Math.abs(neto))}
        </div>
      </div>
    </div>
  );
}

// ============= NÓMINA VIEW =============
function NominaView() {
  const [editId, setEditId] = React.useState(null);
  const [mes, setMes] = React.useState('Mayo 2026');
  const total = Cx.NOMINA.reduce((a,b) => a + b.total, 0);
  const labels = {
    sueldo: 'Sueldo', extras: 'Horas extras y recargos', transporte: 'Auxilio de transporte',
    cesantias: 'Cesantías', intCesantias: 'Intereses sobre cesantías', prima: 'Prima de servicios',
    vacaciones: 'Vacaciones', arl: 'Aportes ARL', pension: 'Aporte fondo pensión', caja: 'Aportes caja compensación',
  };
  const R = window.Recharts;
  const tickStyle = { fontSize: 11, fontFamily: 'Geist Mono, monospace' };
  return (
    <div className="page">
      <div className="page-greeting">
        <div>
          <h1>Nómina</h1>
          <p className="sub">{Cx.NOMINA.length} empleados de planta · Total {Cx.COP(total)}</p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <select className="input" style={{ width: 180 }} value={mes} onChange={e => setMes(e.target.value)}>
            <option>Mayo 2026</option><option>Abril 2026</option><option>Marzo 2026</option><option>Febrero 2026</option>
          </select>
          <button className="btn primary"><Ix.Plus size={14}/> Agregar empleado</button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: 'repeat(3, minmax(0,1fr))', marginBottom: 20 }}>
        {Cx.NOMINA.map(emp => (
          <div key={emp.id} className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--border-subtle)' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.005em' }}>{emp.nombre}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>{emp.cargo}</div>
                </div>
                <button className="btn ghost" style={{ padding: '4px 10px' }} onClick={() => setEditId(emp.id)}><Ix.Edit3 size={12}/> Editar</button>
              </div>
              <div className="tnum" style={{ fontSize: 22, fontWeight: 500, marginTop: 12, letterSpacing: '-0.02em' }}>{Cx.COP(emp.total)}</div>
              <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Total mensual</div>
            </div>
            <div style={{ padding: '8px 18px 16px' }}>
              {Object.entries(labels).map(([k, l]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', fontSize: 12, borderBottom: '1px solid var(--border-subtle)' }}>
                  <span style={{ color: 'var(--text-secondary)' }}>{l}</span>
                  <span className="tnum mono" style={{ color: 'var(--text-primary)' }}>{Cx.COP(emp[k])}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-header">
          <div>
            <h3 className="card-title">Evolución de nómina · últimos 6 meses</h3>
            <span className="card-sub">Total mensual con prestaciones</span>
          </div>
        </div>
        <div className="chart-frame" style={{ height: 220 }}>
          <R.ResponsiveContainer>
            <R.LineChart data={Cx.NOMINA_HISTORIA} margin={{ top: 8, right: 8, left: -8, bottom: 0 }}>
              <R.CartesianGrid stroke="var(--grid)" vertical={false}/>
              <R.XAxis dataKey="mes" stroke="var(--text-tertiary)" tick={tickStyle} tickLine={false} axisLine={false}/>
              <R.YAxis stroke="var(--text-tertiary)" tick={tickStyle} tickLine={false} axisLine={false} tickFormatter={(v) => Cx.COPK(v)} width={56}/>
              <R.Tooltip content={<window.ChartTooltip/>}/>
              <R.Line type="monotone" dataKey="total" stroke="var(--accent)" strokeWidth={1.8} dot={{ r: 3, fill: 'var(--accent)', strokeWidth: 0 }} activeDot={{ r: 5 }}/>
            </R.LineChart>
          </R.ResponsiveContainer>
        </div>
      </div>

      {editId && (
        <div className="modal-backdrop" onClick={() => setEditId(null)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 480 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <h3 className="card-title" style={{ fontSize: 16 }}>Editar empleado</h3>
              <button className="icon-btn" onClick={() => setEditId(null)}><Ix.X size={14}/></button>
            </div>
            {(() => {
              const emp = Cx.NOMINA.find(e => e.id === editId);
              return (
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  {Object.entries(labels).map(([k, l]) => (
                    <div key={k} className="field">
                      <label className="field-label">{l}</label>
                      <input className="input mono" defaultValue={emp[k]}/>
                    </div>
                  ))}
                  <button className="btn primary lg" style={{ gridColumn: 'span 2' }} onClick={() => setEditId(null)}>Guardar cambios</button>
                </div>
              );
            })()}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { SaldoBancarioCard, DiferenciaBancoCard, ResumenDescuadres, NominaView });