import type { RenderResult } from '../hooks/useRenderer';

export default function DiagnosticsPanel({ result }: { result: RenderResult }) {
  const d = result.diag;
  return (
    <div className="diag">
      <table>
        <tbody>
          <tr>
            <th>Stroke</th>
            <td>
              {d.strokesPlayed === 1
                ? `single, hand ${d.meanV.toFixed(2)} m/s`
                : `${d.strokesPlayed} strokes, mean hand ${d.meanV.toFixed(2)} m/s`}
              {' '}→ tip {Math.abs(d.contactVel).toFixed(2)} m/s at contact
            </td>
          </tr>
          <tr>
            <th>Contact</th>
            <td>
              {d.peakForceN.toFixed(0)} N peak · {d.peakXiMm.toFixed(2)} mm compression ·{' '}
              {d.contactMs.toFixed(1)} ms over {d.contactEvents} event{d.contactEvents === 1 ? '' : 's'}
            </td>
          </tr>
          <tr>
            <th>Where</th>
            <td>
              strike r = {(d.strikeRadiusM * 100).toFixed(1)} cm · pickup r ={' '}
              {(d.pickupRadiusM * 100).toFixed(1)} cm
            </td>
          </tr>
          <tr>
            <th>Shell</th>
            <td>
              curvature radius {d.RsM.toFixed(2)} m · peak {d.peakDispMm.toFixed(1)} mm ={' '}
              {d.peakDispThickness.toFixed(1)} thicknesses
            </td>
          </tr>
          <tr>
            <th>Pickup</th>
            <td>{d.peakAccel.toExponential(2)} m/s² peak acceleration</td>
          </tr>
          <tr>
            <th>Integration</th>
            <td>
              {d.nsteps.toLocaleString()} steps at {(d.simRate / 1000).toFixed(1)} kHz ·{' '}
              {d.nTheta} azimuthal points · oversample {d.oversample}
            </td>
          </tr>
          <tr>
            <th>Length</th>
            <td>
              {d.durationS.toFixed(2)} s · {result.quality} · rendered in{' '}
              {(d.renderMs / 1000).toFixed(1)} s{' '}
              {d.backend === 'webgpu' ? 'on the GPU' : 'on the CPU'}
            </td>
          </tr>
        </tbody>
      </table>
      {d.warnings.map((w, i) => (
        <div key={i} className="warning">⚠ {w}</div>
      ))}
    </div>
  );
}