import type { TestRun } from '../types'

export function TestRunsTable({ runs }: { runs: TestRun[] }) {
  if (runs.length === 0) {
    return (
      <div className="text-center py-8 text-slate-400">
        Keine Test-Laeufe vorhanden
      </div>
    )
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-slate-200">
            <th className="text-left py-3 px-4 font-medium text-slate-600">ID</th>
            <th className="text-left py-3 px-4 font-medium text-slate-600">Service</th>
            <th className="text-left py-3 px-4 font-medium text-slate-600">Zeitpunkt</th>
            <th className="text-right py-3 px-4 font-medium text-slate-600">Tests</th>
            <th className="text-right py-3 px-4 font-medium text-slate-600">Bestanden</th>
            <th className="text-right py-3 px-4 font-medium text-slate-600">Dauer</th>
            <th className="text-center py-3 px-4 font-medium text-slate-600">Status</th>
          </tr>
        </thead>
        <tbody>
          {runs.map((run) => (
            <tr key={run.id} className="border-b border-slate-100 hover:bg-slate-50">
              <td className="py-3 px-4 font-mono text-xs text-slate-500">{run.id.slice(-8)}</td>
              <td className="py-3 px-4 text-slate-900">{run.service}</td>
              <td className="py-3 px-4 text-slate-600">
                {new Date(run.started_at).toLocaleString('de-DE')}
              </td>
              <td className="py-3 px-4 text-right text-slate-600">{run.total_tests}</td>
              <td className="py-3 px-4 text-right">
                <span className="text-emerald-600">{run.passed_tests}</span>
                <span className="text-slate-400"> / </span>
                <span className="text-red-600">{run.failed_tests}</span>
              </td>
              <td className="py-3 px-4 text-right text-slate-500">
                {run.duration_seconds.toFixed(1)}s
              </td>
              <td className="py-3 px-4 text-center">
                <span
                  className={`px-2 py-1 rounded text-xs font-medium ${
                    run.status === 'completed'
                      ? 'bg-emerald-100 text-emerald-700'
                      : run.status === 'failed'
                        ? 'bg-red-100 text-red-700'
                        : run.status === 'running'
                          ? 'bg-blue-100 text-blue-700'
                          : 'bg-slate-100 text-slate-700'
                  }`}
                >
                  {run.status}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}