import React from 'react';

function Section({ title, data }) {
  const rows = Object.entries(data || {});
  if (rows.length === 0) return null;
  return (
    <>
      <tr><th colSpan={4} style={{ paddingTop: '0.6rem' }}>{title}</th></tr>
      {rows.map(([key, s]) => (
        <tr key={title + key}>
          <td>{key}</td>
          <td>{s.count}</td>
          <td>{s.matches}</td>
          <td>{s.avg_latency_ms != null ? s.avg_latency_ms.toFixed(3) : '—'}</td>
        </tr>
      ))}
    </>
  );
}

export default function StatsTable({ stats }) {
  const empty = !stats || stats.total_runs === 0;
  return (
    <div className="decidron-panel">
      <h2>Performance Statistics</h2>
      {empty ? (
        <p className="panel-hint">Run the simulation to collect statistics.</p>
      ) : (
        <>
          <p className="panel-hint">
            {stats.total_runs} command evaluation(s), {stats.total_matches} match(es).
          </p>
          <table className="decidron-table">
            <thead>
              <tr><th>Key</th><th>Runs</th><th>Matches</th><th>Avg ms</th></tr>
            </thead>
            <tbody>
              <Section title="Per Sensor" data={stats.per_sensor} />
              <Section title="Per Command" data={stats.per_command} />
              <Section title="Per Output" data={stats.per_output} />
            </tbody>
          </table>
        </>
      )}
    </div>
  );
}