'use client'

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">Zeitpunkt</th>
            <th className="text-left py-3 px-4 font-medium text-slate-600">Commit</th>
            <th className="text-right py-3 px-4 font-medium text-slate-600">Golden Score</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>
          </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-slate-900">#{run.id}</td>
              <td className="py-3 px-4 text-slate-600">
                {new Date(run.timestamp).toLocaleString('de-DE')}
              </td>
              <td className="py-3 px-4 font-mono text-xs text-slate-500">
                {run.git_commit?.slice(0, 7) || '-'}
              </td>
              <td className="py-3 px-4 text-right">
                <span
                  className={`font-medium ${
                    run.golden_score >= 4 ? 'text-emerald-600' : run.golden_score >= 3 ? 'text-amber-600' : 'text-red-600'
                  }`}
                >
                  {run.golden_score.toFixed(2)}
                </span>
              </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>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}