'use client'

import type { FullTestResults } from './types'

interface TestSummaryProps {
  results: FullTestResults
}

export function TestSummary({ results }: TestSummaryProps) {
  const passRate = results.total_tests > 0
    ? ((results.total_passed / results.total_tests) * 100).toFixed(1)
    : '0'

  return (
    <div className="bg-white rounded-lg shadow-lg p-6">
      <h3 className="text-xl font-bold mb-4">Test-Ergebnisse</h3>

      {/* Summary Stats */}
      <div className="grid grid-cols-4 gap-4 mb-6">
        <div className="bg-gray-50 rounded-lg p-4 text-center">
          <div className="text-3xl font-bold text-gray-700">{results.total_tests}</div>
          <div className="text-sm text-gray-500">Gesamt</div>
        </div>
        <div className="bg-green-50 rounded-lg p-4 text-center">
          <div className="text-3xl font-bold text-green-600">{results.total_passed}</div>
          <div className="text-sm text-green-600">Bestanden</div>
        </div>
        <div className="bg-red-50 rounded-lg p-4 text-center">
          <div className="text-3xl font-bold text-red-600">{results.total_failed}</div>
          <div className="text-sm text-red-600">Fehlgeschlagen</div>
        </div>
        <div className={`rounded-lg p-4 text-center ${
          parseFloat(passRate) >= 80 ? 'bg-green-50' : parseFloat(passRate) >= 50 ? 'bg-yellow-50' : 'bg-red-50'
        }`}>
          <div className={`text-3xl font-bold ${
            parseFloat(passRate) >= 80 ? 'text-green-600' : parseFloat(passRate) >= 50 ? 'text-yellow-600' : 'text-red-600'
          }`}>{passRate}%</div>
          <div className="text-sm text-gray-500">Erfolgsrate</div>
        </div>
      </div>

      {/* Category Results */}
      <div className="space-y-4">
        {results.categories.map((category) => (
          <div key={category.category} className="border rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <h4 className="font-medium">{category.display_name}</h4>
              <span className={`text-sm px-2 py-1 rounded ${
                category.failed === 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
              }`}>
                {category.passed}/{category.total} bestanden
              </span>
            </div>
            <p className="text-sm text-gray-600">{category.description}</p>
          </div>
        ))}
      </div>

      {/* Duration */}
      <div className="mt-6 text-sm text-gray-500 text-right">
        Gesamtdauer: {(results.duration_ms / 1000).toFixed(2)}s
      </div>
    </div>
  )
}