// Monthly matrix table: rows × 12 months + total, with a totals footer.
// Used by the House detail page for income and expense breakdowns.
function MonthlyMatrix({ title, subtitle, color, labels, rows, totals, grandTotal, netRow }) {
  // Find max value for heatmap shading
  const allVals = rows.flatMap(r => r.cells).concat(totals);
  const max = Math.max(...allVals, 1);

  const cellStyle = (v) => {
    if (!v) return { color: 'var(--text-quaternary)' };
    const intensity = Math.min(1, v / max);
    return {
      color: 'var(--text)',
      fontWeight: 450,
      background: `color-mix(in oklab, ${color} ${Math.round(intensity * 14)}%, transparent)`,
    };
  };

  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      <div className="card-header">
        <div>
          <h3>{title}</h3>
          <div className="xs muted" style={{ marginTop: 2 }}>{subtitle}</div>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <span className="xs muted">Total</span>
          <span className="serif tabular" style={{ fontSize: 18, color, letterSpacing: '-0.01em' }}>{fmt$(grandTotal)}</span>
        </div>
      </div>
      <div style={{ overflow: 'auto' }}>
        <table className="table" style={{ minWidth: 960, fontSize: 12.5 }}>
          <thead>
            <tr>
              <th style={{ position: 'sticky', left: 0, background: 'var(--bg-sunken)', zIndex: 2, minWidth: 150 }}>Category</th>
              {labels.map(l => (
                <th key={l} className="num" style={{ padding: '10px 10px', minWidth: 64 }}>{l}</th>
              ))}
              <th className="num" style={{ minWidth: 84, background: 'var(--bg-sunken)' }}>Total</th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 ? (
              <tr><td colSpan={14} style={{ padding: '24px', textAlign: 'center', color: 'var(--text-tertiary)' }}>No entries yet</td></tr>
            ) : rows.map(r => (
              <tr key={r.category}>
                <td style={{ position: 'sticky', left: 0, background: 'var(--bg-elev)', zIndex: 1, fontWeight: 450 }}>{r.category}</td>
                {r.cells.map((v, i) => (
                  <td key={i} className="num tabular" style={{ padding: '10px 10px', ...cellStyle(v) }}>
                    {v ? fmt$(v) : '—'}
                  </td>
                ))}
                <td className="num tabular" style={{ fontWeight: 600, background: 'var(--bg-sunken)' }}>{fmt$(r.total)}</td>
              </tr>
            ))}
            {/* Totals row */}
            <tr style={{ background: 'var(--bg-sunken)' }}>
              <td style={{ position: 'sticky', left: 0, background: 'var(--bg-sunken)', zIndex: 1, fontWeight: 700 }}>Total</td>
              {totals.map((v, i) => (
                <td key={i} className="num tabular" style={{ padding: '12px 10px', fontWeight: 600 }}>{v ? fmt$(v) : '—'}</td>
              ))}
              <td className="num tabular" style={{ fontWeight: 700, color, fontSize: 13 }}>{fmt$(grandTotal)}</td>
            </tr>
            {netRow && (
              <tr style={{ borderTop: '2px solid var(--text)' }}>
                <td style={{ position: 'sticky', left: 0, background: 'var(--bg-elev)', zIndex: 1, fontWeight: 700 }}>Net</td>
                {netRow.map((v, i) => (
                  <td key={i} className="num tabular" style={{ padding: '12px 10px', fontWeight: 600, color: v >= 0 ? 'var(--income)' : 'var(--expense)' }}>
                    {v === 0 ? '—' : fmt$(v)}
                  </td>
                ))}
                <td className="num tabular" style={{ fontWeight: 700, fontSize: 13, color: netRow.reduce((a,b)=>a+b,0) >= 0 ? 'var(--income)' : 'var(--expense)' }}>
                  {fmt$(netRow.reduce((a,b)=>a+b,0))}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { MonthlyMatrix });