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

export default function DiagnosticsPanel({ result }: { result: RenderResponse }) {
  const d = result.diag;
  return (
    <div className="diag">
      <table>
        <tbody>
          <tr>
            <th>Partials</th>
            <td className="partials">
              {d.partialsHz.map((f) => f.toFixed(0)).join(', ')} Hz
            </td>
          </tr>
          <tr>
            <th>Ratios</th>
            <td className="partials">{d.ratios.map((r) => r.toFixed(2)).join(', ')}</td>
          </tr>
          <tr>
            <th>Helmholtz</th>
            <td>{d.helmholtzHz.toFixed(0)} Hz</td>
          </tr>
          <tr>
            <th>Contact</th>
            <td>
              {d.contactMs.toFixed(3)} ms, peak {d.peakForceN.toFixed(0)} N
            </td>
          </tr>
          <tr>
            <th>Listener</th>
            <td>{(d.listenerDistM * 100).toFixed(0)} cm from block centre</td>
          </tr>
          <tr>
            <th>Peak pressure</th>
            <td>
              {d.peakPa.toFixed(3)} Pa ({d.peakSplDb.toFixed(1)} dB SPL)
            </td>
          </tr>
          <tr>
            <th>Quality</th>
            <td>
              {result.quality} · oversample {d.oversample} · {d.elements} elements
            </td>
          </tr>
        </tbody>
      </table>
      <div className="cachenote">
        solve: {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>
  );
}