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>
          <tr>
            <th>Strokes</th>
            <td>
              {d.strikeCount === 1
                ? `single, ${d.meanV.toFixed(2)} m/s`
                : `${d.strikeCount} · mean ${d.meanV.toFixed(2)} m/s, max ${d.maxV.toFixed(2)} m/s`}
            </td>
          </tr>
          <tr>
            <th>Contact</th>
            <td>
              {d.meanTauUs.toFixed(0)} µs mean (Hertz) · peak force {d.peakForceN.toFixed(0)} N
            </td>
          </tr>
          <tr>
            <th>Plate modes</th>
            <td className="partials">
              {d.modesKept} up to n = {d.maxN} nodal diameters · {d.plateMassKg.toFixed(2)} kg
            </td>
          </tr>
          <tr>
            <th>Lowest</th>
            <td className="partials">{shown.map((f) => f.toFixed(0)).join(', ')} … Hz</td>
          </tr>
          <tr>
            <th>Nonlinearity</th>
            <td>
              peak w<sub>rms</sub> {d.peakWrmsUm.toFixed(0)} µm ={' '}
              {Math.sqrt(d.peakStrength).toFixed(2)} thicknesses ·{' '}
              {(100 * d.cascadeLostFrac).toFixed(1)}% left the top of the band
            </td>
          </tr>
          <tr>
            <th>Listener</th>
            <td>{(d.listenerDistM * 100).toFixed(0)} cm from the plate</td>
          </tr>
          <tr>
            <th>Peak pressure</th>
            <td>
              {d.peakPa.toFixed(3)} Pa ({d.peakSplDb.toFixed(1)} dB SPL) · click{' '}
              {d.directPeakPa.toFixed(2)} Pa
            </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`} · cascade +
        radiation: {d.radiateCached ? 'cached' : `${(d.radiateMs / 1000).toFixed(2)} s`}
      </div>
      {d.warnings.map((w, i) => (
        <div key={i} className="warning">⚠ {w}</div>
      ))}
    </div>
  );
}