import React from 'react';

export default function ResultsPanel({ results }) {
  return (
    <div className="decidron-panel">
      <h2>Latest Run Results</h2>
      {(!results || results.length === 0) ? (
        <p className="panel-hint">No runs yet. Queue a sensor input and run the simulation.</p>
      ) : (
        <table className="decidron-table">
          <thead>
            <tr>
              <th>Command</th>
              <th>Sensor</th>
              <th>Value</th>
              <th>Result</th>
              <th>Output</th>
              <th>Net ops</th>
            </tr>
          </thead>
          <tbody>
            {results.map((r, i) => (
              <tr key={i}>
                <td>{r.command}</td>
                <td>{r.sensor}</td>
                <td>{r.value}</td>
                <td>
                  <span className={`decidron-chip ${r.matched ? 'match' : 'nomatch'}`}>
                    {r.matched ? 'matched' : 'no match'}
                  </span>
                </td>
                <td>{r.output || '—'}{r.actuator ? ` → ${r.actuator}` : ''}</td>
                <td>{r.network_ops_applied}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}