'use client'

/**
 * Statistics tab for the Klausur-Korrektur page.
 * Shows summary cards and grade criteria info.
 */

import type { Klausur, GradeInfo } from '../../app/admin/klausur-korrektur/types'

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

export default function StatistikenTab({ klausuren, gradeInfo }: StatistikenTabProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold text-slate-800">Korrektur-Statistiken</h2>

      {/* Summary cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-lg border border-slate-200 p-4">
          <div className="text-2xl font-bold text-slate-800">{klausuren.length}</div>
          <div className="text-sm text-slate-500">Klausuren</div>
        </div>
        <div className="bg-white rounded-lg border border-slate-200 p-4">
          <div className="text-2xl font-bold text-slate-800">
            {klausuren.reduce((sum, k) => sum + (k.student_count || 0), 0)}
          </div>
          <div className="text-sm text-slate-500">Studentenarbeiten</div>
        </div>
        <div className="bg-white rounded-lg border border-slate-200 p-4">
          <div className="text-2xl font-bold text-green-600">
            {klausuren.reduce((sum, k) => sum + (k.completed_count || 0), 0)}
          </div>
          <div className="text-sm text-slate-500">Abgeschlossen</div>
        </div>
        <div className="bg-white rounded-lg border border-slate-200 p-4">
          <div className="text-2xl font-bold text-orange-600">
            {klausuren.reduce((sum, k) => sum + ((k.student_count || 0) - (k.completed_count || 0)), 0)}
          </div>
          <div className="text-sm text-slate-500">Ausstehend</div>
        </div>
      </div>

      {/* Grade Info */}
      {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>
  )
}