'use client'

export interface QualityTest {
  id: string
  name: string
  status: 'passed' | 'failed' | 'warning' | 'pending'
  last_run: string
  duration: string | null
  ai_system: string | null
  details: string | null
}

export function TestRow({ test, onDelete }: { test: QualityTest; onDelete: (id: string) => void }) {
  const statusColors = {
    passed: 'bg-green-100 text-green-700',
    failed: 'bg-red-100 text-red-700',
    warning: 'bg-yellow-100 text-yellow-700',
    pending: 'bg-gray-100 text-gray-500',
  }

  const statusLabels = {
    passed: 'Bestanden',
    failed: 'Fehlgeschlagen',
    warning: 'Warnung',
    pending: 'Ausstehend',
  }

  return (
    <tr className="hover:bg-gray-50">
      <td className="px-6 py-4">
        <div className="font-medium text-gray-900">{test.name}</div>
        {test.ai_system && <div className="text-xs text-gray-500">{test.ai_system}</div>}
      </td>
      <td className="px-6 py-4">
        <span className={`px-2 py-1 text-xs rounded-full ${statusColors[test.status]}`}>
          {statusLabels[test.status]}
        </span>
      </td>
      <td className="px-6 py-4 text-sm text-gray-500">
        {new Date(test.last_run).toLocaleString('de-DE')}
      </td>
      <td className="px-6 py-4 text-sm text-gray-500">{test.duration || '-'}</td>
      <td className="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">{test.details || '-'}</td>
      <td className="px-6 py-4">
        <button
          onClick={() => { if (window.confirm(`"${test.name}" loeschen?`)) onDelete(test.id) }}
          className="text-sm text-red-400 hover:text-red-600"
        >
          Loeschen
        </button>
      </td>
    </tr>
  )
}