'use client'

/**
 * StatistikenTab - Correction statistics overview
 */

import type { Klausur, GradeInfo } from '../types'

interface StatistikenTabProps {
  klausuren: Klausur[]
  gradeInfo: GradeInfo | null
}

export function StatistikenTab({ klausuren, gradeInfo }: StatistikenTabProps) {
  const totalStudents = klausuren.reduce((sum, k) => sum + (k.student_count || 0), 0)
  const totalCompleted = klausuren.reduce((sum, k) => sum + (k.completed_count || 0), 0)
  const totalPending = totalStudents - totalCompleted

  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold text-slate-800">Korrektur-Statistiken</h2>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <StatCard value={klausuren.length} label="Klausuren" />
        <StatCard value={totalStudents} label="Studentenarbeiten" />
        <StatCard value={totalCompleted} label="Abgeschlossen" className="text-green-600" />
        <StatCard value={totalPending} label="Ausstehend" className="text-orange-600" />
      </div>

      {gradeInfo && (
        <div className="bg-white rounded-lg border border-slate-200 p-6">
          <h3 className="text-sm font-semibold text-slate-800 mb-4">Bewertungskriterien (Niedersachsen)</h3>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            {Object.entries(gradeInfo.criteria || {}).map(([key, criterion]) => (
              <div key={key} className="text-center p-3 bg-slate-50 rounded-lg">
                <div className="text-lg font-semibold text-slate-700">{criterion.weight}%</div>
                <div className="text-sm text-slate-500">{criterion.name}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

function StatCard({
  value,
  label,
  className,
}: {
  value: number
  label: string
  className?: string
}) {
  return (
    <div className="bg-white rounded-lg border border-slate-200 p-4">
      <div className={`text-2xl font-bold ${className || 'text-slate-800'}`}>{value}</div>
      <div className="text-sm text-slate-500">{label}</div>
    </div>
  )
}
