import { midiHz, midiName } from '../params';
import type { RenderResult } from '../hooks/useRenderer';

export default function DiagnosticsPanel({ result }: { result: RenderResult }) {
  const d = result.diag;
  const pitches = Array.from(result.noteMidi).map((m) => midiName(m));
  const shown = pitches.slice(0, 12);
  const cents = 1200 * Math.log2(d.fundHz / midiHz(result.noteMidi[0]));
  return (
    <div className="diag">
      <table>
        <tbody>
          <tr>
            <th>Notes</th>
            <td className="partials">
              {shown.join(', ')}
              {pitches.length > shown.length ? `, … (${pitches.length} total)` : ''}
              {` · mean pluck ${d.meanForce.toFixed(1)} N`}
            </td>
          </tr>
          <tr>
            <th>Fundamental</th>
            <td>
              {d.fundHz.toFixed(2)} Hz ({cents >= 0 ? '+' : ''}{cents.toFixed(0)} cents) · T60{' '}
              {d.fundT60.toFixed(1)} s
            </td>
          </tr>
          <tr>
            <th>Modes</th>
            <td>
              {d.modesNote1} coupled (note 1) · {d.modesTotal} across {d.fingerings} fingering
              {d.fingerings === 1 ? '' : 's'}
            </td>
          </tr>
          <tr>
            <th>Body</th>
            <td>
              A0 {result.bodyF[0]?.toFixed(1)} Hz · {result.bodyF.length} modes to{' '}
              {result.bodyF[result.bodyF.length - 1]?.toFixed(0)} Hz
            </td>
          </tr>
          <tr>
            <th>Listener</th>
            <td>{(d.listenerDistM * 100).toFixed(0)} cm from the bridge</td>
          </tr>
          <tr>
            <th>Peak pressure</th>
            <td>
              {d.peakPa.toFixed(3)} Pa ({d.peakSplDb.toFixed(1)} dB SPL)
            </td>
          </tr>
          <tr>
            <th>Length</th>
            <td>
              {d.durationS.toFixed(2)} s · {result.quality} · oversample {d.oversample}
            </td>
          </tr>
        </tbody>
      </table>
      <div className="cachenote">
        eigensolves: {d.solveCached ? 'cached' : `${(d.solveMs / 1000).toFixed(2)} s`} · radiation:{' '}
        {d.radiateCached ? 'cached' : `${(d.radiateMs / 1000).toFixed(2)} s`}
      </div>
      {d.warnings.map((w, i) => (
        <div key={i} className="warning">⚠ {w}</div>
      ))}
    </div>
  );
}