// metrics-table.jsx — Reusable summary metrics table (current vs prev w/ Δ%)
// Each row: { m: name, cur, prev, fmt: (v) => string, inv?: bool (true if lower=better) }

function MetricsTable({ title, sub, rows }) {
  return (
    <div className="card">
      <div className="card-head">
        <div className="card-head-info">
          <div className="card-title">{title}</div>
          {sub && <div className="card-sub">{sub}</div>}
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Metric</th>
            <th className="num">Current</th>
            <th className="num">Previous</th>
            <th className="num">Δ</th>
            <th className="num">% Δ</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => {
            const diff = r.cur - r.prev;
            const pct = r.prev !== 0 ? (diff / r.prev) * 100 : 0;
            const good = r.inv ? diff < 0 : diff > 0;
            const fmt = r.fmt || ((v) => v.toLocaleString());
            const fmtDiff = (v) => {
              const f = fmt(Math.abs(v));
              // Strip currency prefix and trailing units for the delta column to keep it clean
              const num = String(f).replace(/^[A-Z]{2,3}\s/, '').replace(/[%x]$/, '');
              return num;
            };
            return (
              <tr key={i}>
                <td className="strong">{r.m}</td>
                <td className="num">{fmt(r.cur)}</td>
                <td className="num" style={{ color: 'var(--ink-3)' }}>{fmt(r.prev)}</td>
                <td className="num" style={{ color: good ? 'var(--pos)' : 'var(--neg)' }}>
                  {diff >= 0 ? '+' : '−'}{fmtDiff(diff)}
                </td>
                <td className="num">
                  <span className={`badge ${good ? 'pos' : 'neg'}`}>
                    {pct >= 0 ? '+' : ''}{pct.toFixed(1)}%
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

window.MetricsTable = MetricsTable;