import { NOTE_NAMES } from '../params';
import type { RenderResponse } from '../worker/renderWorker';

export default function DiagnosticsPanel({ result }: { result: RenderResponse }) {
  const d = result.diag;
  const modes = Array.from(result.modeF);
  const shown = modes.slice(0, 8);
  return (
    <div className="diag">
      <table>
        <tbody>
          {Array.from(result.noteIdx).map((idx, i) => (
            <tr key={i}>
              <th>{d.noteCount === 1 ? 'Note' : `Note ${i + 1}`}</th>
              <td>
                {NOTE_NAMES[idx - 1] ?? '?'} ·{' '}
                {result.fPlay[i] > 0
                  ? `played ${result.fPlay[i].toFixed(1)} Hz (${result.cents[i] >= 0 ? '+' : ''}${result.cents[i].toFixed(0)} cents of ${result.fTarget[i].toFixed(1)})`
                  : 'did not speak'}
              </td>
            </tr>
          ))}
          <tr>
            <th>Bore modes</th>
            <td className="partials">
              {shown.map((f) => f.toFixed(0)).join(', ')}
              {modes.length > shown.length ? `, … (${modes.length} total)` : ''} Hz
            </td>
          </tr>
          <tr>
            <th>Listener</th>
            <td>{(d.listenerDistM * 100).toFixed(0)} cm from the window</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">
        bore solve: {d.basisCached ? 'cached' : `${(d.basisMs / 1000).toFixed(2)} s`} · jet:{' '}
        {d.jetCached ? 'cached' : `${(d.jetMs / 1000).toFixed(2)} s`} · radiation:{' '}
        {(d.radiateMs / 1000).toFixed(2)} s
      </div>
      {d.warnings.map((w, i) => (
        <div key={i} className="warning">⚠ {w}</div>
      ))}
    </div>
  );
}