/* ============================================================
   Gastos.jsx — finanzas personales (/gastos)
   ============================================================ */
function catColor(cat, categories) {
  if (cat === 'Ingreso') return 'var(--pos)';
  const c = (categories || []).find(x => x.name === cat);
  return c ? c.color : 'var(--text-3)';
}

function KpiCard({ label, value, cur, sub, color }) {
  return (
    <div className="metric">
      <div className="m-label">{label}</div>
      <div className="m-value" style={{ color: color || 'var(--text)' }}>{cur && <span className="cur">{cur}</span>}{value}</div>
      <div className="m-foot">{sub}</div>
    </div>
  );
}

function Gastos({ go, invPct, data, loading, errors, sheetConnected, onConnectSheet }) {
  const { onHover, node } = useTooltip();
  const [filter, setFilter] = useState('Todas');

  const series = data.finance.series;
  const hasSeries = series.length > 0;
  const last = hasSeries ? series[series.length - 1] : { ingreso: 0, gasto: 0, m: '—' };
  const prev = series.length >= 2 ? series[series.length - 2] : null;
  const saldo = last.ingreso - last.gasto;
  const ahorro = last.ingreso ? (saldo / last.ingreso) * 100 : 0;
  const disponible = Math.round(saldo * (invPct / 100));
  const ingDelta = prev?.ingreso ? ((last.ingreso / prev.ingreso - 1) * 100) : 0;
  const gastDelta = prev?.gasto  ? ((last.gasto   / prev.gasto   - 1) * 100) : 0;

  const cats = ['Todas', ...Array.from(new Set(data.finance.tx.map(t => t.cat)))];
  const tx = filter === 'Todas' ? data.finance.tx : data.finance.tx.filter(t => t.cat === filter);

  return (
    <div className="content-inner page-enter">
      {node}

      {!sheetConnected && (
        <div className="alert info" style={{ marginBottom: 18 }}>
          <Icon name="sheet" size={17} className="a-ico" />
          <div style={{ flex: 1 }}>
            <div className="a-title">Conectá tu Google Sheet</div>
            <div className="a-body">Sincronizá ingresos y gastos automáticamente desde tu planilla. Ahora estás viendo datos de ejemplo.</div>
          </div>
          <button className="btn btn-primary btn-sm" onClick={onConnectSheet}><Icon name="link" size={14} />Conectar</button>
        </div>
      )}

      {/* KPIs */}
      <div className="kpi-strip" style={{ marginBottom: 22 }}>
        <KpiCard label={`Ingresos · ${last.m}`} cur="$" value={fmtNum(last.ingreso)} color="var(--pos)"
          sub={prev ? <><Delta value={ingDelta} /><span className="muted-note">vs {prev.m}</span></> : <span className="muted-note">sin datos previos</span>} />
        <KpiCard label={`Gastos · ${last.m}`} cur="$" value={fmtNum(last.gasto)} color="var(--neg)"
          sub={prev ? <><Delta value={gastDelta} /><span className="muted-note">vs {prev.m}</span></> : <span className="muted-note">sin datos previos</span>} />
        <KpiCard label="Saldo del mes" cur="$" value={fmtNum(saldo)}
          sub={<span className="muted-note">ingresos — gastos</span>} />
        <KpiCard label="Tasa de ahorro" value={fmtNum(ahorro, 1) + '%'} color="var(--info)"
          sub={<span className="muted-note">del ingreso del mes</span>} />
      </div>

      {/* gráfico + disponible */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, marginBottom: 22 }} className="dash-cols">
        <div className="card">
          <div className="card-head">
            <div className="card-title"><Icon name="market" size={16} className="ico" />Ingresos vs Gastos · {series.length} meses</div>
            <div style={{ display: 'flex', gap: 16, fontSize: 12 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: 'var(--pos)' }} />Ingresos</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: 'var(--neg)' }} />Gastos</span>
            </div>
          </div>
          {series.length > 0
            ? <GroupedBars data={series} onHover={onHover} />
            : <div className="empty-state" style={{ padding: '40px 0', color: 'var(--text-3)', textAlign: 'center' }}>Sin datos de la planilla aún</div>
          }
        </div>

        {/* disponible destacada */}
        <div className="card" style={{ borderColor: 'color-mix(in oklab, var(--pos) 35%, transparent)', background: 'linear-gradient(160deg, color-mix(in oklab, var(--pos) 9%, var(--surface)), var(--surface) 62%)' }}>
          <div className="card-title" style={{ marginBottom: 6 }}><Icon name="target" size={16} className="ico" style={{ color: 'var(--pos)' }} />Disponible para invertir</div>
          <div className="card-sub">{last.m} · regla del {invPct}%</div>
          <div className="m-value num" style={{ fontSize: 38, color: 'var(--pos)', margin: '18px 0 6px', letterSpacing: '-0.03em' }}>
            <span style={{ fontSize: 20, color: 'var(--text-3)' }}>$</span>{fmtNum(disponible)}
          </div>
          <div className="muted-note" style={{ marginBottom: 16 }}>de {fmtARS(saldo)} de saldo este mes</div>
          <div className="divider" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span className="muted-note">Conservador (bonos)</span>
              <span className="num">{fmtARS(Math.round(disponible * 0.6))}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span className="muted-note">Activo (acciones/CEDEARs)</span>
              <span className="num">{fmtARS(Math.round(disponible * 0.4))}</span>
            </div>
          </div>
          <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 18 }} onClick={() => go('mercado')}>
            <Icon name="sparkle" size={15} />Ver dónde invertir
          </button>
        </div>
      </div>

      {/* transacciones */}
      <div className="card">
        <div className="card-head" style={{ flexWrap: 'wrap', gap: 12 }}>
          <div className="card-title"><Icon name="wallet" size={16} className="ico" />Últimas transacciones</div>
          <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', alignItems: 'center' }}>
            <Icon name="filter" size={14} style={{ color: 'var(--text-3)' }} />
            {cats.map(c => (
              <button key={c} className={`chip ${filter === c ? 'active' : ''}`} onClick={() => setFilter(c)}>
                {c !== 'Todas' && <span className="pip" style={{ background: catColor(c, data.finance.categories) }} />}{c}
              </button>
            ))}
          </div>
        </div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Fecha</th><th style={{ textAlign: 'left' }}>Detalle</th><th style={{ textAlign: 'left' }}>Categoría</th><th>Monto</th>
              </tr>
            </thead>
            <tbody>
              {tx.map((t, i) => (
                <tr key={i}>
                  <td className="t-num t-sub" style={{ textAlign: 'left' }}>{t.d}</td>
                  <td style={{ textAlign: 'left' }}>{t.desc}</td>
                  <td style={{ textAlign: 'left' }}><span className="cat-tag"><span className="cat-dot" style={{ background: catColor(t.cat, data.finance.categories) }} />{t.cat}</span></td>
                  <td className={`t-num ${t.amount >= 0 ? 't-pos' : ''}`} style={{ fontWeight: 600 }}>
                    {(t.amount >= 0 ? '+' : '') + fmtARS(t.amount)}
                  </td>
                </tr>
              ))}
              {tx.length === 0 && <tr><td colSpan={4} className="empty-state" style={{ textAlign: 'center' }}>Sin transacciones en esta categoría</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Gastos });