'use client'

/**
 * Klausur-Korrektur Admin Page
 *
 * Hauptseite für die KI-gestützte Abitur-Korrektur.
 * Zeigt alle Klausuren und ermöglicht das Erstellen neuer Klausuren.
 */

import { useState, useEffect, useCallback } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'
import Link from 'next/link'
import type { Klausur, GradeInfo, STATUS_COLORS, STATUS_LABELS } from './types'

// API Base URL for klausur-service
const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'

// Tab definitions
type TabId = 'willkommen' | 'klausuren' | 'erstellen' | 'direktupload' | 'statistiken'

const tabs: { id: TabId; name: string; icon: JSX.Element; hidden?: boolean }[] = [
  {
    id: 'willkommen',
    name: 'Start',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
      </svg>
    ),
  },
  {
    id: 'klausuren',
    name: 'Klausuren',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
      </svg>
    ),
  },
  {
    id: 'erstellen',
    name: 'Neue Klausur',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
      </svg>
    ),
  },
  {
    id: 'direktupload',
    name: 'Schnellstart',
    hidden: true, // Hidden from tab bar, accessible via willkommen
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
      </svg>
    ),
  },
  {
    id: 'statistiken',
    name: 'Statistiken',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
    ),
  },
]

interface CreateKlausurForm {
  title: string
  subject: string
  year: number
  semester: string
  modus: 'abitur' | 'vorabitur'
}

interface VorabiturEHForm {
  aufgabentyp: string
  titel: string
  text_titel: string
  text_autor: string
  aufgabenstellung: string
}

interface EHTemplate {
  aufgabentyp: string
  name: string
  description: string
  category: string
}

// Direktupload form interface
interface DirektuploadForm {
  files: File[]
  ehFile: File | null
  ehText: string
  aufgabentyp: string
  klausurTitle: string
}

export default function KlausurKorrekturPage() {
  // Check localStorage for returning users
  const [activeTab, setActiveTab] = useState<TabId>(() => {
    if (typeof window !== 'undefined') {
      const hasVisited = localStorage.getItem('klausur_korrektur_visited')
      return hasVisited ? 'klausuren' : 'willkommen'
    }
    return 'willkommen'
  })
  const [klausuren, setKlausuren] = useState<Klausur[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [creating, setCreating] = useState(false)
  const [gradeInfo, setGradeInfo] = useState<GradeInfo | null>(null)

  // Vorabitur templates
  const [templates, setTemplates] = useState<EHTemplate[]>([])
  const [loadingTemplates, setLoadingTemplates] = useState(false)

  // Form state for creating new Klausur
  const [form, setForm] = useState<CreateKlausurForm>({
    title: '',
    subject: 'Deutsch',
    year: new Date().getFullYear(),
    semester: 'Abitur',
    modus: 'abitur',
  })

  // Vorabitur EH form
  const [ehForm, setEhForm] = useState<VorabiturEHForm>({
    aufgabentyp: '',
    titel: '',
    text_titel: '',
    text_autor: '',
    aufgabenstellung: '',
  })

  // Direktupload form
  const [direktForm, setDirektForm] = useState<DirektuploadForm>({
    files: [],
    ehFile: null,
    ehText: '',
    aufgabentyp: '',
    klausurTitle: `Schnellkorrektur ${new Date().toLocaleDateString('de-DE')}`,
  })
  const [direktStep, setDirektStep] = useState<1 | 2 | 3>(1)
  const [uploading, setUploading] = useState(false)

  // Fetch klausuren
  const fetchKlausuren = useCallback(async () => {
    try {
      setLoading(true)
      const res = await fetch(`${API_BASE}/api/v1/klausuren`)
      if (res.ok) {
        const data = await res.json()
        setKlausuren(Array.isArray(data) ? data : data.klausuren || [])
        setError(null)
      } else {
        setError(`Fehler beim Laden: ${res.status}`)
      }
    } catch (err) {
      console.error('Failed to fetch klausuren:', err)
      setError('Verbindung zum Klausur-Service fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }, [])

  // Fetch grade info
  const fetchGradeInfo = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/api/v1/grade-info`)
      if (res.ok) {
        const data = await res.json()
        setGradeInfo(data)
      }
    } catch (err) {
      console.error('Failed to fetch grade info:', err)
    }
  }, [])

  // Fetch Vorabitur templates
  const fetchTemplates = useCallback(async () => {
    try {
      setLoadingTemplates(true)
      const res = await fetch(`${API_BASE}/api/v1/vorabitur/templates`)
      if (res.ok) {
        const data = await res.json()
        setTemplates(data.templates || [])
      }
    } catch (err) {
      console.error('Failed to fetch templates:', err)
    } finally {
      setLoadingTemplates(false)
    }
  }, [])

  useEffect(() => {
    fetchKlausuren()
    fetchGradeInfo()
  }, [fetchKlausuren, fetchGradeInfo])

  // Fetch templates when Vorabitur mode is selected
  useEffect(() => {
    if (form.modus === 'vorabitur' && templates.length === 0) {
      fetchTemplates()
    }
  }, [form.modus, templates.length, fetchTemplates])

  // Create new Klausur
  const handleCreateKlausur = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!form.title.trim()) {
      setError('Bitte einen Titel eingeben')
      return
    }

    // Validate Vorabitur form
    if (form.modus === 'vorabitur') {
      if (!ehForm.aufgabentyp) {
        setError('Bitte einen Aufgabentyp auswählen')
        return
      }
      if (!ehForm.aufgabenstellung.trim()) {
        setError('Bitte die Aufgabenstellung eingeben')
        return
      }
    }

    try {
      setCreating(true)

      // First create the Klausur
      const res = await fetch(`${API_BASE}/api/v1/klausuren`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })

      if (!res.ok) {
        const errorData = await res.json()
        setError(errorData.detail || 'Fehler beim Erstellen')
        return
      }

      const newKlausur = await res.json()

      // If Vorabitur mode, create the custom EH
      if (form.modus === 'vorabitur') {
        const ehRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/vorabitur-eh`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            aufgabentyp: ehForm.aufgabentyp,
            titel: ehForm.titel || `EH: ${form.title}`,
            text_titel: ehForm.text_titel || null,
            text_autor: ehForm.text_autor || null,
            aufgabenstellung: ehForm.aufgabenstellung,
          }),
        })

        if (!ehRes.ok) {
          // Klausur was created but EH failed - warn but don't fail
          console.error('Failed to create EH:', await ehRes.text())
          setError('Klausur erstellt, aber Erwartungshorizont konnte nicht erstellt werden. Sie koennen ihn spaeter hinzufuegen.')
        }
      }

      setKlausuren(prev => [newKlausur, ...prev])
      setForm({
        title: '',
        subject: 'Deutsch',
        year: new Date().getFullYear(),
        semester: 'Abitur',
        modus: 'abitur',
      })
      setEhForm({
        aufgabentyp: '',
        titel: '',
        text_titel: '',
        text_autor: '',
        aufgabenstellung: '',
      })
      setActiveTab('klausuren')
      if (!error) setError(null)
    } catch (err) {
      console.error('Failed to create klausur:', err)
      setError('Fehler beim Erstellen der Klausur')
    } finally {
      setCreating(false)
    }
  }

  // Delete Klausur
  const handleDeleteKlausur = async (id: string) => {
    if (!confirm('Klausur wirklich löschen? Alle Studentenarbeiten werden ebenfalls gelöscht.')) {
      return
    }

    try {
      const res = await fetch(`${API_BASE}/api/v1/klausuren/${id}`, {
        method: 'DELETE',
      })

      if (res.ok) {
        setKlausuren(prev => prev.filter(k => k.id !== id))
      } else {
        setError('Fehler beim Löschen')
      }
    } catch (err) {
      console.error('Failed to delete klausur:', err)
      setError('Fehler beim Löschen der Klausur')
    }
  }

  // Render Klausuren list
  const renderKlausurenTab = () => (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-lg font-semibold text-slate-800">Alle Klausuren</h2>
          <p className="text-sm text-slate-500">{klausuren.length} Klausuren insgesamt</p>
        </div>
        <button
          onClick={() => setActiveTab('erstellen')}
          className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center gap-2"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
          Neue Klausur
        </button>
      </div>

      {/* Klausuren Grid */}
      {loading ? (
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
        </div>
      ) : klausuren.length === 0 ? (
        <div className="text-center py-12 bg-white rounded-lg border border-slate-200">
          <svg className="mx-auto h-12 w-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
          </svg>
          <h3 className="mt-2 text-sm font-medium text-slate-900">Keine Klausuren</h3>
          <p className="mt-1 text-sm text-slate-500">Erstellen Sie Ihre erste Klausur zum Korrigieren.</p>
          <button
            onClick={() => setActiveTab('erstellen')}
            className="mt-4 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
          >
            Klausur erstellen
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {klausuren.map((klausur) => (
            <div
              key={klausur.id}
              className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
            >
              <div className="p-4">
                {/* Header */}
                <div className="flex justify-between items-start mb-3">
                  <div>
                    <h3 className="font-semibold text-slate-800 truncate">{klausur.title}</h3>
                    <p className="text-sm text-slate-500">{klausur.subject} - {klausur.year}</p>
                  </div>
                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                    klausur.modus === 'abitur'
                      ? 'bg-purple-100 text-purple-800'
                      : 'bg-blue-100 text-blue-800'
                  }`}>
                    {klausur.modus === 'abitur' ? 'Abitur' : 'Vorabitur'}
                  </span>
                </div>

                {/* Stats */}
                <div className="flex items-center gap-4 text-sm text-slate-600 mb-4">
                  <div className="flex items-center gap-1">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    <span>{klausur.student_count || 0} Arbeiten</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>{klausur.completed_count || 0} fertig</span>
                  </div>
                </div>

                {/* Progress bar */}
                {(klausur.student_count || 0) > 0 && (
                  <div className="mb-4">
                    <div className="flex justify-between text-xs text-slate-500 mb-1">
                      <span>Fortschritt</span>
                      <span>{Math.round(((klausur.completed_count || 0) / (klausur.student_count || 1)) * 100)}%</span>
                    </div>
                    <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-green-500 rounded-full transition-all"
                        style={{ width: `${((klausur.completed_count || 0) / (klausur.student_count || 1)) * 100}%` }}
                      />
                    </div>
                  </div>
                )}

                {/* Actions */}
                <div className="flex gap-2">
                  <Link
                    href={`/admin/klausur-korrektur/${klausur.id}`}
                    className="flex-1 px-3 py-2 bg-primary-600 text-white text-sm text-center rounded-lg hover:bg-primary-700"
                  >
                    Korrigieren
                  </Link>
                  <button
                    onClick={() => handleDeleteKlausur(klausur.id)}
                    className="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg"
                    title="Löschen"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )

  // Render Create form
  const renderErstellenTab = () => (
    <div className="max-w-2xl mx-auto">
      <div className="bg-white rounded-lg border border-slate-200 shadow-sm p-6">
        <h2 className="text-lg font-semibold text-slate-800 mb-6">Neue Klausur erstellen</h2>

        <form onSubmit={handleCreateKlausur} className="space-y-4">
          {/* Title */}
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Titel der Klausur *
            </label>
            <input
              type="text"
              value={form.title}
              onChange={(e) => setForm(prev => ({ ...prev, title: e.target.value }))}
              placeholder="z.B. Deutsch LK Abitur 2025 - Kurs D1"
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              required
            />
          </div>

          {/* Subject + Year */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Fach
              </label>
              <select
                value={form.subject}
                onChange={(e) => setForm(prev => ({ ...prev, subject: e.target.value }))}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              >
                <option value="Deutsch">Deutsch</option>
                <option value="Englisch">Englisch</option>
                <option value="Mathematik">Mathematik</option>
                <option value="Geschichte">Geschichte</option>
                <option value="Biologie">Biologie</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Jahr
              </label>
              <input
                type="number"
                value={form.year}
                onChange={(e) => setForm(prev => ({ ...prev, year: parseInt(e.target.value) }))}
                min={2020}
                max={2030}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              />
            </div>
          </div>

          {/* Semester + Modus */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Semester / Prüfung
              </label>
              <select
                value={form.semester}
                onChange={(e) => setForm(prev => ({ ...prev, semester: e.target.value }))}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              >
                <option value="Abitur">Abitur</option>
                <option value="Q1">Q1 (11/1)</option>
                <option value="Q2">Q2 (11/2)</option>
                <option value="Q3">Q3 (12/1)</option>
                <option value="Q4">Q4 (12/2)</option>
                <option value="Vorabitur">Vorabitur</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Modus
              </label>
              <select
                value={form.modus}
                onChange={(e) => setForm(prev => ({ ...prev, modus: e.target.value as 'abitur' | 'vorabitur' }))}
                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              >
                <option value="abitur">Abitur (mit offiziellem EH)</option>
                <option value="vorabitur">Vorabitur (eigener EH)</option>
              </select>
            </div>
          </div>

          {/* Vorabitur EH Form */}
          {form.modus === 'vorabitur' && (
            <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg space-y-4">
              <div className="flex items-start gap-3">
                <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                <div className="text-sm text-blue-800">
                  <p className="font-medium mb-1">Eigenen Erwartungshorizont erstellen</p>
                  <p>Waehlen Sie einen Aufgabentyp und beschreiben Sie die Aufgabenstellung. Der EH wird automatisch mit Ihrer Klausur verknuepft.</p>
                </div>
              </div>

              {/* Aufgabentyp Selection */}
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                  Aufgabentyp *
                </label>
                {loadingTemplates ? (
                  <div className="flex items-center gap-2 text-sm text-slate-500">
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
                    Lade Vorlagen...
                  </div>
                ) : (
                  <select
                    value={ehForm.aufgabentyp}
                    onChange={(e) => setEhForm(prev => ({ ...prev, aufgabentyp: e.target.value }))}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white"
                  >
                    <option value="">-- Aufgabentyp waehlen --</option>
                    {templates.map(t => (
                      <option key={t.aufgabentyp} value={t.aufgabentyp}>
                        {t.name}
                      </option>
                    ))}
                  </select>
                )}
                {ehForm.aufgabentyp && templates.find(t => t.aufgabentyp === ehForm.aufgabentyp) && (
                  <p className="mt-1 text-xs text-slate-500">
                    {templates.find(t => t.aufgabentyp === ehForm.aufgabentyp)?.description}
                  </p>
                )}
              </div>

              {/* Text Details (optional) */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Texttitel (optional)
                  </label>
                  <input
                    type="text"
                    value={ehForm.text_titel}
                    onChange={(e) => setEhForm(prev => ({ ...prev, text_titel: e.target.value }))}
                    placeholder="z.B. 'Die Verwandlung'"
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Autor (optional)
                  </label>
                  <input
                    type="text"
                    value={ehForm.text_autor}
                    onChange={(e) => setEhForm(prev => ({ ...prev, text_autor: e.target.value }))}
                    placeholder="z.B. 'Franz Kafka'"
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                  />
                </div>
              </div>

              {/* Aufgabenstellung */}
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                  Aufgabenstellung *
                </label>
                <textarea
                  value={ehForm.aufgabenstellung}
                  onChange={(e) => setEhForm(prev => ({ ...prev, aufgabenstellung: e.target.value }))}
                  placeholder="Beschreiben Sie hier die konkrete Aufgabenstellung fuer die Schueler..."
                  rows={4}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
                />
                <p className="mt-1 text-xs text-slate-500">
                  Die Aufgabenstellung wird zusammen mit dem Template in den Erwartungshorizont eingebunden.
                </p>
              </div>
            </div>
          )}

          {/* Submit */}
          <div className="flex gap-3 pt-4">
            <button
              type="button"
              onClick={() => setActiveTab('klausuren')}
              className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg"
            >
              Abbrechen
            </button>
            <button
              type="submit"
              disabled={creating}
              className="flex-1 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              {creating ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                  Erstelle...
                </>
              ) : (
                'Klausur erstellen'
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  )

  // Mark as visited when user navigates away from willkommen
  const markAsVisited = () => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('klausur_korrektur_visited', 'true')
    }
  }

  // Handle Direktupload - Create klausur and upload files
  const handleDirektupload = async () => {
    if (direktForm.files.length === 0) {
      setError('Bitte mindestens eine Arbeit hochladen')
      return
    }

    try {
      setUploading(true)

      // Step 1: Create a new klausur
      const klausurRes = await fetch(`${API_BASE}/api/v1/klausuren`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: direktForm.klausurTitle,
          subject: 'Deutsch',
          year: new Date().getFullYear(),
          semester: 'Vorabitur',
          modus: 'vorabitur',
        }),
      })

      if (!klausurRes.ok) {
        const err = await klausurRes.json()
        throw new Error(err.detail || 'Klausur erstellen fehlgeschlagen')
      }

      const newKlausur = await klausurRes.json()

      // Step 2: Create EH if provided
      if (direktForm.ehText.trim() || direktForm.aufgabentyp) {
        const ehRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/vorabitur-eh`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            aufgabentyp: direktForm.aufgabentyp || 'textanalyse_pragmatisch',
            titel: `EH: ${direktForm.klausurTitle}`,
            aufgabenstellung: direktForm.ehText || 'Individuelle Aufgabenstellung',
          }),
        })

        if (!ehRes.ok) {
          console.error('EH creation failed, continuing with upload')
        }
      }

      // Step 3: Upload all student files
      for (let i = 0; i < direktForm.files.length; i++) {
        const file = direktForm.files[i]
        const formData = new FormData()
        formData.append('file', file)
        formData.append('anonym_id', `Arbeit-${i + 1}`)

        const uploadRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/students`, {
          method: 'POST',
          body: formData,
        })

        if (!uploadRes.ok) {
          console.error(`Upload failed for file ${i + 1}:`, file.name)
        }
      }

      // Success - redirect to klausur
      setKlausuren(prev => [newKlausur, ...prev])
      markAsVisited()

      // Navigate to the new klausur
      window.location.href = `/admin/klausur-korrektur/${newKlausur.id}`

    } catch (err) {
      console.error('Direktupload failed:', err)
      setError(err instanceof Error ? err.message : 'Fehler beim Direktupload')
    } finally {
      setUploading(false)
    }
  }

  // Render Willkommen/Onboarding tab
  const renderWillkommenTab = () => (
    <div className="max-w-4xl mx-auto space-y-8">
      {/* Hero Section */}
      <div className="text-center py-8">
        <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-purple-700 rounded-2xl mb-6">
          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h1 className="text-3xl font-bold text-slate-800 mb-3">Willkommen zur Abiturklausur-Korrektur</h1>
        <p className="text-lg text-slate-600 max-w-2xl mx-auto">
          KI-gestuetzte Korrektur fuer Deutsch-Abiturklausuren nach dem 15-Punkte-System.
          Sparen Sie bis zu 80% Zeit bei der Erstkorrektur.
        </p>
      </div>

      {/* Workflow Explanation */}
      <div className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-xl p-6">
        <h2 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
          <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          So funktioniert es
        </h2>
        <div className="grid md:grid-cols-4 gap-4">
          {[
            { step: 1, title: 'Arbeiten hochladen', desc: 'Scans der Schuelerarbeiten als PDF oder Bilder hochladen', icon: '📤' },
            { step: 2, title: 'EH bereitstellen', desc: 'Erwartungshorizont hochladen oder aus Vorlage erstellen', icon: '📋' },
            { step: 3, title: 'KI korrigiert', desc: 'Automatische Bewertung und Gutachten-Vorschlaege erhalten', icon: '🤖' },
            { step: 4, title: 'Pruefen & Anpassen', desc: 'Vorschlaege pruefen, anpassen und finalisieren', icon: '✅' },
          ].map(({ step, title, desc, icon }) => (
            <div key={step} className="text-center">
              <div className="text-3xl mb-2">{icon}</div>
              <div className="text-xs text-blue-600 font-medium mb-1">Schritt {step}</div>
              <div className="font-medium text-slate-800 text-sm">{title}</div>
              <div className="text-xs text-slate-500 mt-1">{desc}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Action Cards */}
      <div className="grid md:grid-cols-2 gap-6">
        {/* Option 1: Standard Flow */}
        <div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-purple-300 hover:shadow-lg transition-all cursor-pointer"
             onClick={() => { markAsVisited(); setActiveTab('erstellen'); }}>
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
            </div>
            <div className="flex-1">
              <h3 className="font-semibold text-slate-800 mb-1">Neue Klausur erstellen</h3>
              <p className="text-sm text-slate-600 mb-3">
                Empfohlen fuer regelmaessige Nutzung. Erstellen Sie eine Klausur mit allen Metadaten,
                laden Sie dann die Arbeiten hoch.
              </p>
              <ul className="text-xs text-slate-500 space-y-1">
                <li className="flex items-center gap-1">
                  <svg className="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /></svg>
                  Volle Metadaten (Fach, Jahr, Kurs)
                </li>
                <li className="flex items-center gap-1">
                  <svg className="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /></svg>
                  Zweitkorrektur-Workflow
                </li>
                <li className="flex items-center gap-1">
                  <svg className="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /></svg>
                  Fairness-Analyse
                </li>
              </ul>
              <div className="mt-4 text-sm text-purple-600 font-medium flex items-center gap-1">
                Klausur erstellen
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        {/* Option 2: Quick Upload */}
        <div className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-blue-300 hover:shadow-lg transition-all cursor-pointer"
             onClick={() => { markAsVisited(); setActiveTab('direktupload'); }}>
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
              <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
              </svg>
            </div>
            <div className="flex-1">
              <h3 className="font-semibold text-slate-800 mb-1">Schnellstart - Direkt hochladen</h3>
              <p className="text-sm text-slate-600 mb-3">
                Ideal wenn Sie sofort loslegen moechten. Laden Sie Arbeiten und EH direkt hoch,
                wir erstellen die Klausur automatisch.
              </p>
              <ul className="text-xs text-slate-500 space-y-1">
                <li className="flex items-center gap-1">
                  <svg className="w-3 h-3 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" /></svg>
                  Schnellster Weg zum Korrigieren
                </li>
                <li className="flex items-center gap-1">
                  <svg className="w-3 h-3 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" /></svg>
                  Drag & Drop Upload
                </li>
                <li className="flex items-center gap-1">
                  <svg className="w-3 h-3 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" /></svg>
                  Sofort einsatzbereit
                </li>
              </ul>
              <div className="mt-4 text-sm text-blue-600 font-medium flex items-center gap-1">
                Schnellstart
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Already have klausuren? */}
      {klausuren.length > 0 && (
        <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 flex items-center justify-between">
          <div>
            <p className="font-medium text-slate-800">Sie haben {klausuren.length} Klausur{klausuren.length !== 1 ? 'en' : ''}</p>
            <p className="text-sm text-slate-500">Setzen Sie Ihre Arbeit fort oder starten Sie eine neue Korrektur.</p>
          </div>
          <button
            onClick={() => { markAsVisited(); setActiveTab('klausuren'); }}
            className="px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-700 text-sm"
          >
            Zu meinen Klausuren
          </button>
        </div>
      )}

      {/* Help Links */}
      <div className="text-center text-sm text-slate-500">
        <p>Fragen? Lesen Sie unsere <button className="text-purple-600 hover:underline">Dokumentation</button> oder kontaktieren Sie den <button className="text-purple-600 hover:underline">Support</button>.</p>
      </div>
    </div>
  )

  // Render Direktupload tab (3-step wizard)
  const renderDirektuploadTab = () => (
    <div className="max-w-3xl mx-auto">
      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
        {/* Progress Header */}
        <div className="bg-slate-50 border-b border-slate-200 px-6 py-4">
          <div className="flex items-center justify-between mb-2">
            <h2 className="text-lg font-semibold text-slate-800">Schnellstart - Direkt Korrigieren</h2>
            <button
              onClick={() => setActiveTab('willkommen')}
              className="text-sm text-slate-500 hover:text-slate-700"
            >
              Abbrechen
            </button>
          </div>
          <div className="flex items-center gap-2">
            {[1, 2, 3].map((step) => (
              <div key={step} className="flex items-center gap-2 flex-1">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                  direktStep >= step
                    ? 'bg-blue-600 text-white'
                    : 'bg-slate-200 text-slate-500'
                }`}>
                  {step}
                </div>
                <span className={`text-sm ${direktStep >= step ? 'text-slate-800' : 'text-slate-400'}`}>
                  {step === 1 ? 'Arbeiten' : step === 2 ? 'Erwartungshorizont' : 'Starten'}
                </span>
                {step < 3 && <div className={`flex-1 h-1 rounded ${direktStep > step ? 'bg-blue-600' : 'bg-slate-200'}`} />}
              </div>
            ))}
          </div>
        </div>

        {/* Step Content */}
        <div className="p-6">
          {/* Step 1: Upload Files */}
          {direktStep === 1 && (
            <div className="space-y-6">
              <div>
                <h3 className="font-medium text-slate-800 mb-2">Schuelerarbeiten hochladen</h3>
                <p className="text-sm text-slate-500 mb-4">
                  Laden Sie die eingescannten Klausuren hoch. Unterstuetzte Formate: PDF, JPG, PNG.
                </p>

                {/* Drop Zone */}
                <div
                  className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
                    direktForm.files.length > 0 ? 'border-green-300 bg-green-50' : 'border-slate-300 hover:border-blue-400 hover:bg-blue-50'
                  }`}
                  onDrop={(e) => {
                    e.preventDefault()
                    const files = Array.from(e.dataTransfer.files)
                    setDirektForm(prev => ({ ...prev, files: [...prev.files, ...files] }))
                  }}
                  onDragOver={(e) => e.preventDefault()}
                >
                  <svg className="w-12 h-12 mx-auto text-slate-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                  </svg>
                  <p className="text-slate-600 mb-2">Dateien hier ablegen oder</p>
                  <label className="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700">
                    Dateien auswaehlen
                    <input
                      type="file"
                      multiple
                      accept=".pdf,.jpg,.jpeg,.png"
                      className="hidden"
                      onChange={(e) => {
                        const files = Array.from(e.target.files || [])
                        setDirektForm(prev => ({ ...prev, files: [...prev.files, ...files] }))
                      }}
                    />
                  </label>
                </div>

                {/* File List */}
                {direktForm.files.length > 0 && (
                  <div className="mt-4 space-y-2">
                    <div className="flex items-center justify-between text-sm text-slate-600">
                      <span>{direktForm.files.length} Datei{direktForm.files.length !== 1 ? 'en' : ''} ausgewaehlt</span>
                      <button
                        onClick={() => setDirektForm(prev => ({ ...prev, files: [] }))}
                        className="text-red-600 hover:text-red-700"
                      >
                        Alle entfernen
                      </button>
                    </div>
                    <div className="max-h-40 overflow-y-auto space-y-1">
                      {direktForm.files.map((file, idx) => (
                        <div key={idx} className="flex items-center justify-between bg-slate-50 px-3 py-2 rounded-lg text-sm">
                          <span className="truncate">{file.name}</span>
                          <button
                            onClick={() => setDirektForm(prev => ({
                              ...prev,
                              files: prev.files.filter((_, i) => i !== idx)
                            }))}
                            className="text-slate-400 hover:text-red-600"
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

              <div className="flex justify-end">
                <button
                  onClick={() => setDirektStep(2)}
                  disabled={direktForm.files.length === 0}
                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Weiter
                </button>
              </div>
            </div>
          )}

          {/* Step 2: Erwartungshorizont */}
          {direktStep === 2 && (
            <div className="space-y-6">
              <div>
                <h3 className="font-medium text-slate-800 mb-2">Erwartungshorizont (optional)</h3>
                <p className="text-sm text-slate-500 mb-4">
                  Laden Sie Ihren eigenen Erwartungshorizont hoch oder beschreiben Sie die Aufgabenstellung.
                  Dies hilft der KI, passendere Bewertungen vorzuschlagen.
                </p>

                {/* Aufgabentyp */}
                <div className="mb-4">
                  <label className="block text-sm font-medium text-slate-700 mb-1">Aufgabentyp</label>
                  <select
                    value={direktForm.aufgabentyp}
                    onChange={(e) => setDirektForm(prev => ({ ...prev, aufgabentyp: e.target.value }))}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  >
                    <option value="">-- Waehlen Sie einen Aufgabentyp --</option>
                    <option value="textanalyse_pragmatisch">Textanalyse (Sachtexte)</option>
                    <option value="gedichtanalyse">Gedichtanalyse</option>
                    <option value="prosaanalyse">Prosaanalyse</option>
                    <option value="dramenanalyse">Dramenanalyse</option>
                    <option value="eroerterung_textgebunden">Textgebundene Eroerterung</option>
                  </select>
                </div>

                {/* EH Text */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Aufgabenstellung / Erwartungshorizont
                  </label>
                  <textarea
                    value={direktForm.ehText}
                    onChange={(e) => setDirektForm(prev => ({ ...prev, ehText: e.target.value }))}
                    placeholder="Beschreiben Sie hier die Aufgabenstellung und Ihre Erwartungen an eine gute Loesung..."
                    rows={6}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                  />
                  <p className="mt-1 text-xs text-slate-500">
                    Je detaillierter Sie die Erwartungen beschreiben, desto besser werden die KI-Vorschlaege.
                  </p>
                </div>
              </div>

              <div className="flex justify-between">
                <button
                  onClick={() => setDirektStep(1)}
                  className="px-6 py-2 text-slate-600 hover:bg-slate-100 rounded-lg"
                >
                  Zurueck
                </button>
                <button
                  onClick={() => setDirektStep(3)}
                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                >
                  Weiter
                </button>
              </div>
            </div>
          )}

          {/* Step 3: Confirm & Start */}
          {direktStep === 3 && (
            <div className="space-y-6">
              <div>
                <h3 className="font-medium text-slate-800 mb-2">Zusammenfassung</h3>
                <p className="text-sm text-slate-500 mb-4">
                  Pruefen Sie Ihre Eingaben und starten Sie die Korrektur.
                </p>

                {/* Summary */}
                <div className="bg-slate-50 rounded-lg p-4 space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-slate-600">Titel</span>
                    <input
                      type="text"
                      value={direktForm.klausurTitle}
                      onChange={(e) => setDirektForm(prev => ({ ...prev, klausurTitle: e.target.value }))}
                      className="text-sm font-medium text-slate-800 bg-white border border-slate-200 rounded px-2 py-1 text-right"
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-slate-600">Anzahl Arbeiten</span>
                    <span className="text-sm font-medium text-slate-800">{direktForm.files.length}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-slate-600">Aufgabentyp</span>
                    <span className="text-sm font-medium text-slate-800">
                      {direktForm.aufgabentyp || 'Nicht angegeben'}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-slate-600">Erwartungshorizont</span>
                    <span className="text-sm font-medium text-slate-800">
                      {direktForm.ehText ? 'Vorhanden' : 'Nicht angegeben'}
                    </span>
                  </div>
                </div>

                {/* Info */}
                <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                  <div className="flex items-start gap-3">
                    <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div className="text-sm text-blue-800">
                      <p className="font-medium">Was passiert jetzt?</p>
                      <ol className="list-decimal list-inside mt-1 space-y-1 text-blue-700">
                        <li>Eine neue Klausur wird automatisch erstellt</li>
                        <li>Alle {direktForm.files.length} Arbeiten werden hochgeladen</li>
                        <li>OCR-Erkennung der Handschrift startet automatisch</li>
                        <li>Sie werden zur Korrektur-Ansicht weitergeleitet</li>
                      </ol>
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex justify-between">
                <button
                  onClick={() => setDirektStep(2)}
                  className="px-6 py-2 text-slate-600 hover:bg-slate-100 rounded-lg"
                >
                  Zurueck
                </button>
                <button
                  onClick={handleDirektupload}
                  disabled={uploading}
                  className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                >
                  {uploading ? (
                    <>
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                      Wird hochgeladen...
                    </>
                  ) : (
                    <>
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                      </svg>
                      Korrektur starten
                    </>
                  )}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )

  // Render Statistics tab
  const renderStatistikenTab = () => (
    <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>
  )

  return (
    <AdminLayout
      title="Klausur-Korrektur"
      description="KI-gestützte Abitur-Korrektur für Niedersachsen"
    >
      {/* Error display */}
      {error && (
        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
          <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span className="text-red-800">{error}</span>
          <button onClick={() => setError(null)} className="ml-auto text-red-600 hover:text-red-800">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      )}

      {/* Tab navigation */}
      <div className="border-b border-slate-200 mb-6">
        <nav className="flex gap-4">
          {tabs.filter(tab => !tab.hidden).map((tab) => (
            <button
              key={tab.id}
              onClick={() => {
                if (tab.id !== 'willkommen') markAsVisited()
                setActiveTab(tab.id)
              }}
              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.id
                  ? 'border-primary-500 text-primary-600'
                  : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
              }`}
            >
              {tab.icon}
              {tab.name}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab content */}
      {activeTab === 'willkommen' && renderWillkommenTab()}
      {activeTab === 'klausuren' && renderKlausurenTab()}
      {activeTab === 'erstellen' && renderErstellenTab()}
      {activeTab === 'direktupload' && renderDirektuploadTab()}
      {activeTab === 'statistiken' && renderStatistikenTab()}
    </AdminLayout>
  )
}