// Metrics.jsx — RMS · Pulse (BPM) · Key · Length

function Metrics({ rmsDb, bpm, keyEst, duration, isLive }) {
  const fmtDur = (s) => {
    if (!s || !isFinite(s)) return '—';
    const m = Math.floor(s/60), ss = Math.floor(s%60);
    return m + ':' + String(ss).padStart(2, '0');
  };
  return (
    <section className="mm-metrics">
      <div className="mm-metric">
        <div className="mm-metric__k">RMS dBFS</div>
        <div className="mm-metric__v">
          {rmsDb ? rmsDb.toFixed(1) : '—'}<small>dBFS</small>
          {rmsDb ? <span className="mm-est mm-est--meas">meas.</span> : null}
        </div>
      </div>
      <div className="mm-metric">
        <div className="mm-metric__k">Pulse</div>
        <div className="mm-metric__v">
          {bpm ? Math.round(bpm) : '—'}<small>BPM</small>
          {bpm ? <span className="mm-est">est.</span> : null}
        </div>
      </div>
      <div className="mm-metric">
        <div className="mm-metric__k">Key estimate</div>
        <div className="mm-metric__v">
          {keyEst && keyEst !== '—' ? keyEst : '—'}
          {keyEst && keyEst !== '—' && keyEst !== 'Uncertain' ? <span className="mm-est">est.</span> : null}
        </div>
      </div>
      <div className="mm-metric">
        <div className="mm-metric__k">Length</div>
        <div className="mm-metric__v">{isLive ? 'live' : fmtDur(duration)}</div>
      </div>
    </section>
  );
}

Object.assign(window, { Metrics });