'use client'

import { useState, useEffect, useCallback } from 'react'
import { useRouter } from 'next/navigation'
import { useTheme } from '@/lib/ThemeContext'
import { useLanguage } from '@/lib/LanguageContext'
import { Sidebar } from '@/components/Sidebar'
import { ThemeToggle } from '@/components/ThemeToggle'
import { LanguageDropdown } from '@/components/LanguageDropdown'
import { QRCodeUpload, UploadedFile } from '@/components/QRCodeUpload'
import {
  korrekturApi,
  getKorrekturStats,
  type KorrekturStats,
} from '@/lib/korrektur/api'
import type { Klausur, CreateKlausurData } from './types'

// LocalStorage Key for upload session
const SESSION_ID_KEY = 'bp_korrektur_session'

// =============================================================================
// GLASS CARD - Ultra Transparent (Apple Weather Style)
// =============================================================================

interface GlassCardProps {
  children: React.ReactNode
  className?: string
  onClick?: () => void
  size?: 'sm' | 'md' | 'lg'
  delay?: number
}

function GlassCard({ children, className = '', onClick, size = 'md', delay = 0, isDark = true }: GlassCardProps & { isDark?: boolean }) {
  const [isVisible, setIsVisible] = useState(false)
  const [isHovered, setIsHovered] = useState(false)

  useEffect(() => {
    const timer = setTimeout(() => setIsVisible(true), delay)
    return () => clearTimeout(timer)
  }, [delay])

  const sizeClasses = {
    sm: 'p-4',
    md: 'p-5',
    lg: 'p-6',
  }

  return (
    <div
      className={`
        rounded-3xl
        ${sizeClasses[size]}
        ${onClick ? 'cursor-pointer' : ''}
        ${className}
      `}
      style={{
        background: isDark
          ? (isHovered ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255, 255, 255, 0.08)')
          : (isHovered ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 255, 255, 0.7)'),
        backdropFilter: 'blur(24px) saturate(180%)',
        WebkitBackdropFilter: 'blur(24px) saturate(180%)',
        border: isDark ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid rgba(0, 0, 0, 0.1)',
        boxShadow: isDark
          ? '0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
          : '0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5)',
        opacity: isVisible ? 1 : 0,
        transform: isVisible
          ? `translateY(0) scale(${isHovered ? 1.01 : 1})`
          : 'translateY(20px)',
        transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={onClick}
    >
      {children}
    </div>
  )
}

// =============================================================================
// STAT CARD
// =============================================================================

interface StatCardProps {
  label: string
  value: string | number
  icon: React.ReactNode
  color?: string
  delay?: number
  isDark?: boolean
}

function StatCard({ label, value, icon, color = '#a78bfa', delay = 0, isDark = true }: StatCardProps) {
  return (
    <GlassCard size="sm" delay={delay} isDark={isDark}>
      <div className="flex items-center gap-4">
        <div
          className="w-12 h-12 rounded-2xl flex items-center justify-center"
          style={{ backgroundColor: `${color}20` }}
        >
          <span style={{ color }}>{icon}</span>
        </div>
        <div>
          <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{label}</p>
          <p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{value}</p>
        </div>
      </div>
    </GlassCard>
  )
}

// =============================================================================
// KLAUSUR CARD
// =============================================================================

interface KlausurCardProps {
  klausur: Klausur
  onClick: () => void
  delay?: number
  isDark?: boolean
}

function KlausurCard({ klausur, onClick, delay = 0, isDark = true }: KlausurCardProps) {
  const progress = klausur.student_count
    ? Math.round(((klausur.completed_count || 0) / klausur.student_count) * 100)
    : 0

  const statusColor = klausur.status === 'completed'
    ? '#22c55e'
    : klausur.status === 'in_progress'
      ? '#f97316'
      : '#6b7280'

  return (
    <GlassCard onClick={onClick} delay={delay} className="min-h-[180px]" isDark={isDark}>
      <div className="flex flex-col h-full">
        <div className="flex items-start justify-between mb-3">
          <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>{klausur.title}</h3>
          <span
            className="px-2 py-1 rounded-full text-xs font-medium"
            style={{ backgroundColor: `${statusColor}20`, color: statusColor }}
          >
            {klausur.status === 'completed' ? 'Fertig' : klausur.status === 'in_progress' ? 'In Arbeit' : 'Entwurf'}
          </span>
        </div>

        <p className={`text-sm mb-4 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
          {klausur.subject} {klausur.semester} {klausur.year}
        </p>

        <div className="mt-auto">
          <div className="flex justify-between text-sm mb-2">
            <span className={isDark ? 'text-white/50' : 'text-slate-500'}>{klausur.student_count || 0} Arbeiten</span>
            <span className={isDark ? 'text-white' : 'text-slate-900'}>{progress}%</span>
          </div>

          <div className={`h-2 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
            <div
              className="h-full rounded-full transition-all duration-500"
              style={{
                width: `${progress}%`,
                background: `linear-gradient(90deg, ${statusColor}, ${statusColor}80)`,
              }}
            />
          </div>
        </div>
      </div>
    </GlassCard>
  )
}

// =============================================================================
// CREATE KLAUSUR MODAL
// =============================================================================

interface CreateKlausurModalProps {
  isOpen: boolean
  onClose: () => void
  onSubmit: (data: CreateKlausurData) => void
  isLoading: boolean
  isDark?: boolean
}

function CreateKlausurModal({ isOpen, onClose, onSubmit, isLoading, isDark = true }: CreateKlausurModalProps) {
  const [title, setTitle] = useState('')
  const [subject, setSubject] = useState('Deutsch')
  const [year, setYear] = useState(new Date().getFullYear())
  const [semester, setSemester] = useState('Abitur')
  const [modus, setModus] = useState<'landes_abitur' | 'vorabitur'>('landes_abitur')

  if (!isOpen) return null

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit({ title, subject, year, semester, modus })
  }

  const inputClasses = isDark
    ? 'bg-white/10 border-white/20 text-white placeholder-white/40'
    : 'bg-slate-100 border-slate-300 text-slate-900 placeholder-slate-400'

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
      <GlassCard className="relative w-full max-w-md" size="lg" delay={0} isDark={isDark}>
        <h2 className={`text-xl font-bold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>Neue Klausur erstellen</h2>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="klausur-titel" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Titel</label>
            <input
              id="klausur-titel"
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="z.B. Deutsch LK Q4"
              className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 focus:border-transparent ${inputClasses}`}
              required
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="klausur-fach" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Fach</label>
              <select
                id="klausur-fach"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}
              >
                <option value="Deutsch">Deutsch</option>
                <option value="Englisch">Englisch</option>
                <option value="Mathematik">Mathematik</option>
              </select>
            </div>

            <div>
              <label htmlFor="klausur-jahr" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Jahr</label>
              <input
                id="klausur-jahr"
                type="number"
                value={year}
                onChange={(e) => setYear(Number(e.target.value))}
                className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="klausur-semester" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Semester</label>
              <select
                id="klausur-semester"
                value={semester}
                onChange={(e) => setSemester(e.target.value)}
                className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}
              >
                <option value="Abitur">Abitur</option>
                <option value="Q1">Q1</option>
                <option value="Q2">Q2</option>
                <option value="Q3">Q3</option>
                <option value="Q4">Q4</option>
              </select>
            </div>

            <div>
              <label htmlFor="klausur-modus" className={`block text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>Modus</label>
              <select
                id="klausur-modus"
                value={modus}
                onChange={(e) => setModus(e.target.value as 'landes_abitur' | 'vorabitur')}
                className={`w-full p-3 rounded-xl border focus:ring-2 focus:ring-purple-500 ${inputClasses}`}
              >
                <option value="landes_abitur">Landes-Abitur (NiBiS EH)</option>
                <option value="vorabitur">Vorabitur (Eigener EH)</option>
              </select>
            </div>
          </div>

          <div className="flex gap-3 pt-4">
            <button
              type="button"
              onClick={onClose}
              className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
            >
              Abbrechen
            </button>
            <button
              type="submit"
              disabled={isLoading || !title.trim()}
              className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50"
            >
              {isLoading ? 'Erstelle...' : 'Erstellen'}
            </button>
          </div>
        </form>
      </GlassCard>
    </div>
  )
}

// =============================================================================
// MAIN PAGE
// =============================================================================

export default function KorrekturPage() {
  const { isDark } = useTheme()
  const { t } = useLanguage()
  const router = useRouter()

  // State
  const [klausuren, setKlausuren] = useState<Klausur[]>([])
  const [stats, setStats] = useState<KorrekturStats | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Modal states
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [isCreating, setIsCreating] = useState(false)
  const [showQRModal, setShowQRModal] = useState(false)
  const [uploadSessionId, setUploadSessionId] = useState('')
  const [showDirectUpload, setShowDirectUpload] = useState(false)
  const [showEHUpload, setShowEHUpload] = useState(false)
  const [isDragging, setIsDragging] = useState(false)
  const [uploadedFiles, setUploadedFiles] = useState<File[]>([])
  const [ehFile, setEhFile] = useState<File | null>(null)
  const [isUploading, setIsUploading] = useState(false)

  // Initialize session ID
  useEffect(() => {
    let storedSessionId = localStorage.getItem(SESSION_ID_KEY)
    if (!storedSessionId) {
      storedSessionId = `korrektur-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
      localStorage.setItem(SESSION_ID_KEY, storedSessionId)
    }
    setUploadSessionId(storedSessionId)
  }, [])

  // Load data
  const loadData = useCallback(async () => {
    setIsLoading(true)
    setError(null)

    try {
      const [klausurenData, statsData] = await Promise.all([
        korrekturApi.getKlausuren(),
        getKorrekturStats(),
      ])
      setKlausuren(klausurenData)
      setStats(statsData)
    } catch (err) {
      console.error('Failed to load data:', err)
      setError(err instanceof Error ? err.message : 'Laden fehlgeschlagen')
    } finally {
      setIsLoading(false)
    }
  }, [])

  useEffect(() => {
    loadData()
  }, [loadData])

  // Create klausur
  const handleCreateKlausur = async (data: CreateKlausurData) => {
    setIsCreating(true)
    try {
      const newKlausur = await korrekturApi.createKlausur(data)
      setKlausuren((prev) => [newKlausur, ...prev])
      setShowCreateModal(false)
      // Navigate to the new klausur
      router.push(`/korrektur/${newKlausur.id}`)
    } catch (err) {
      console.error('Failed to create klausur:', err)
      setError(err instanceof Error ? err.message : 'Erstellung fehlgeschlagen')
    } finally {
      setIsCreating(false)
    }
  }

  // Handle QR uploaded files
  const handleMobileFileSelect = async (uploadedFile: UploadedFile) => {
    // For now, just close the modal - in production this would create a quick-start klausur
    setShowQRModal(false)
    // Could auto-create a klausur and navigate
  }

  // Handle direct file upload with drag & drop
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
  }

  const handleDrop = (e: React.DragEvent, isEH = false) => {
    e.preventDefault()
    setIsDragging(false)
    const files = Array.from(e.dataTransfer.files).filter(
      f => f.type === 'application/pdf' || f.type.startsWith('image/')
    )
    if (isEH && files.length > 0) {
      setEhFile(files[0])
    } else {
      setUploadedFiles(prev => [...prev, ...files])
    }
  }

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>, isEH = false) => {
    if (!e.target.files) return
    const files = Array.from(e.target.files)
    if (isEH && files.length > 0) {
      setEhFile(files[0])
    } else {
      setUploadedFiles(prev => [...prev, ...files])
    }
  }

  const handleDirectUpload = async () => {
    if (uploadedFiles.length === 0) return
    setIsUploading(true)
    try {
      // Create a quick-start klausur
      const newKlausur = await korrekturApi.createKlausur({
        title: `Schnellstart ${new Date().toLocaleDateString('de-DE')}`,
        subject: 'Deutsch',
        year: new Date().getFullYear(),
        semester: 'Abitur',
        modus: 'landes_abitur'
      })

      // Upload each file
      for (let i = 0; i < uploadedFiles.length; i++) {
        await korrekturApi.uploadStudentWork(newKlausur.id, uploadedFiles[i], `Arbeit-${i + 1}`)
      }

      setShowDirectUpload(false)
      setUploadedFiles([])
      router.push(`/korrektur/${newKlausur.id}`)
    } catch (err) {
      console.error('Upload failed:', err)
      setError(err instanceof Error ? err.message : 'Upload fehlgeschlagen')
    } finally {
      setIsUploading(false)
    }
  }

  const handleEHUpload = async () => {
    if (!ehFile) return
    setIsUploading(true)
    try {
      // Upload EH to backend
      await korrekturApi.uploadEH(ehFile)
      setShowEHUpload(false)
      setEhFile(null)
      loadData() // Refresh to show new EH
    } catch (err) {
      console.error('EH Upload failed:', err)
      setError(err instanceof Error ? err.message : 'EH Upload fehlgeschlagen')
    } finally {
      setIsUploading(false)
    }
  }

  return (
    <div className={`min-h-screen flex relative overflow-hidden ${
      isDark
        ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
    }`}>
      {/* Animated Background Blobs */}
      <div className={`absolute -top-40 -right-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${isDark ? 'bg-purple-500 opacity-30' : 'bg-purple-300 opacity-40'}`} />
      <div className={`absolute top-1/2 -left-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${isDark ? 'bg-pink-500 opacity-30' : 'bg-pink-300 opacity-40'}`} />
      <div className={`absolute -bottom-40 right-1/3 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${isDark ? 'bg-blue-500 opacity-30' : 'bg-blue-300 opacity-40'}`} />

      {/* Sidebar */}
      <div className="relative z-10 p-4">
        <Sidebar />
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col relative z-10 p-6 overflow-y-auto">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className={`text-3xl font-bold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Korrekturplattform</h1>
            <p className={isDark ? 'text-white/50' : 'text-slate-500'}>KI-gestuetzte Abiturklausur-Korrektur</p>
          </div>
          <div className="flex items-center gap-3">
            <ThemeToggle />
            <LanguageDropdown />
          </div>
        </div>

        {/* Stats Cards */}
        {stats && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <StatCard
              label="Offene Korrekturen"
              value={stats.openCorrections}
              icon={
                <svg className="w-6 h-6" 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>
              }
              color="#f97316"
              delay={100}
              isDark={isDark}
            />
            <StatCard
              label="Erledigt (Woche)"
              value={stats.completedThisWeek}
              icon={
                <svg className="w-6 h-6" 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>
              }
              color="#22c55e"
              delay={200}
              isDark={isDark}
            />
            <StatCard
              label="Durchschnitt"
              value={stats.averageGrade > 0 ? `${stats.averageGrade} P` : '-'}
              icon={
                <svg className="w-6 h-6" 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>
              }
              color="#3b82f6"
              delay={300}
              isDark={isDark}
            />
            <StatCard
              label="Zeit gespart"
              value={`${stats.timeSavedHours}h`}
              icon={
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              }
              color="#a78bfa"
              delay={400}
              isDark={isDark}
            />
          </div>
        )}

        {/* Error Display */}
        {error && (
          <GlassCard className="mb-6" size="sm" isDark={isDark}>
            <div className="flex items-center gap-3 text-red-400">
              <svg className="w-6 h-6" 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>{error}</span>
              <button
                onClick={loadData}
                className={`ml-auto px-3 py-1 rounded-lg transition-colors text-sm ${isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-slate-200 hover:bg-slate-300'}`}
              >
                Erneut versuchen
              </button>
            </div>
          </GlassCard>
        )}

        {/* Loading */}
        {isLoading && (
          <div className="flex-1 flex items-center justify-center">
            <div className="w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin" />
          </div>
        )}

        {/* Klausuren Grid */}
        {!isLoading && (
          <>
            <div className="flex items-center justify-between mb-4">
              <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Klausuren</h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
              {klausuren.map((klausur, index) => (
                <KlausurCard
                  key={klausur.id}
                  klausur={klausur}
                  onClick={() => router.push(`/korrektur/${klausur.id}`)}
                  delay={500 + index * 50}
                  isDark={isDark}
                />
              ))}

              {/* New Klausur Card */}
              <GlassCard
                onClick={() => setShowCreateModal(true)}
                delay={500 + klausuren.length * 50}
                className={`min-h-[180px] border-2 border-dashed ${isDark ? 'border-white/20 hover:border-purple-400/50' : 'border-slate-300 hover:border-purple-400'}`}
                isDark={isDark}
              >
                <div className="flex flex-col items-center justify-center h-full text-center">
                  <div className="w-16 h-16 rounded-2xl bg-purple-500/20 flex items-center justify-center mb-4">
                    <svg className="w-8 h-8 text-purple-400" 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>
                  <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Neue Klausur</p>
                  <p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Klausur erstellen</p>
                </div>
              </GlassCard>
            </div>

            {/* Quick Actions */}
            <h2 className={`text-xl font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Schnellaktionen</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              <GlassCard
                onClick={() => setShowQRModal(true)}
                delay={700}
                className="cursor-pointer"
                isDark={isDark}
              >
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-2xl bg-blue-500/20 flex items-center justify-center">
                    <span className="text-2xl">📱</span>
                  </div>
                  <div>
                    <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>QR Upload</p>
                    <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Mit Handy scannen</p>
                  </div>
                </div>
              </GlassCard>

              <GlassCard
                onClick={() => setShowDirectUpload(true)}
                delay={750}
                className="cursor-pointer"
                isDark={isDark}
              >
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-2xl bg-green-500/20 flex items-center justify-center">
                    <svg className="w-6 h-6 text-green-400" 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>
                    <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Direkt hochladen</p>
                    <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Drag & Drop</p>
                  </div>
                </div>
              </GlassCard>

              <GlassCard
                onClick={() => setShowCreateModal(true)}
                delay={800}
                className="cursor-pointer"
                isDark={isDark}
              >
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-2xl bg-purple-500/20 flex items-center justify-center">
                    <svg className="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <div>
                    <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Schnellstart</p>
                    <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Direkt loslegen</p>
                  </div>
                </div>
              </GlassCard>

              <GlassCard
                onClick={() => setShowEHUpload(true)}
                delay={850}
                className="cursor-pointer"
                isDark={isDark}
              >
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-2xl bg-orange-500/20 flex items-center justify-center">
                    <svg className="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                    </svg>
                  </div>
                  <div>
                    <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>EH hochladen</p>
                    <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Erwartungshorizont</p>
                  </div>
                </div>
              </GlassCard>

              <GlassCard
                onClick={() => router.push('/korrektur/archiv')}
                delay={900}
                className="cursor-pointer"
                isDark={isDark}
              >
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-2xl bg-indigo-500/20 flex items-center justify-center">
                    <svg className="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                    </svg>
                  </div>
                  <div>
                    <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Abitur-Archiv</p>
                    <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>EH durchsuchen</p>
                  </div>
                </div>
              </GlassCard>
            </div>
          </>
        )}
      </div>

      {/* Create Klausur Modal */}
      <CreateKlausurModal
        isOpen={showCreateModal}
        onClose={() => setShowCreateModal(false)}
        onSubmit={handleCreateKlausur}
        isLoading={isCreating}
        isDark={isDark}
      />

      {/* QR Code Modal */}
      {showQRModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowQRModal(false)} />
          <div className={`relative w-full max-w-md rounded-3xl ${isDark ? 'bg-slate-900' : 'bg-white'}`}>
            <QRCodeUpload
              sessionId={uploadSessionId}
              onClose={() => setShowQRModal(false)}
              onFileUploaded={handleMobileFileSelect}
            />
          </div>
        </div>
      )}

      {/* Direct Upload Modal */}
      {showDirectUpload && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowDirectUpload(false)} />
          <GlassCard className="relative w-full max-w-lg" size="lg" delay={0} isDark={isDark}>
            <h2 className={`text-xl font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Arbeiten hochladen</h2>
            <p className={`mb-4 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
              Ziehen Sie eingescannte Klausuren hierher oder klicken Sie zum Auswaehlen.
            </p>

            {/* Error Display in Modal */}
            {error && (
              <div className="mb-4 p-3 rounded-lg bg-red-500/20 border border-red-500/30 text-red-300 text-sm">
                {error}
              </div>
            )}

            {/* Drag & Drop Zone */}
            <div
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={(e) => handleDrop(e, false)}
              className={`relative p-8 rounded-2xl border-2 border-dashed transition-colors ${
                isDragging
                  ? 'border-purple-400 bg-purple-500/10'
                  : isDark
                    ? 'border-white/20 hover:border-white/40'
                    : 'border-slate-300 hover:border-slate-400'
              }`}
            >
              <input
                type="file"
                accept=".pdf,image/*"
                multiple
                onChange={(e) => handleFileSelect(e, false)}
                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
              />
              <div className="text-center">
                <svg className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-white/40' : 'text-slate-400'}`} 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={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  {isDragging ? 'Dateien hier ablegen' : 'Dateien hierher ziehen'}
                </p>
                <p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
                  PDF oder Bilder (JPG, PNG)
                </p>
              </div>
            </div>

            {/* Uploaded Files List */}
            {uploadedFiles.length > 0 && (
              <div className="mt-4 space-y-2">
                <p className={`text-sm font-medium ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
                  {uploadedFiles.length} Datei(en) ausgewaehlt:
                </p>
                <div className="max-h-32 overflow-y-auto space-y-1">
                  {uploadedFiles.map((file, idx) => (
                    <div key={idx} className={`flex items-center justify-between p-2 rounded-lg ${isDark ? 'bg-white/5' : 'bg-slate-100'}`}>
                      <span className={`text-sm truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{file.name}</span>
                      <button
                        onClick={() => setUploadedFiles(prev => prev.filter((_, i) => i !== idx))}
                        className="text-red-400 hover:text-red-300"
                      >
                        <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>
            )}

            {/* Actions */}
            <div className="flex gap-3 mt-6">
              <button
                onClick={() => { setShowDirectUpload(false); setUploadedFiles([]) }}
                className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
              >
                Abbrechen
              </button>
              <button
                onClick={handleDirectUpload}
                disabled={uploadedFiles.length === 0 || isUploading}
                className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50"
              >
                {isUploading ? 'Hochladen...' : `${uploadedFiles.length} Arbeiten hochladen`}
              </button>
            </div>
          </GlassCard>
        </div>
      )}

      {/* EH Upload Modal */}
      {showEHUpload && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowEHUpload(false)} />
          <GlassCard className="relative w-full max-w-lg" size="lg" delay={0} isDark={isDark}>
            <h2 className={`text-xl font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Erwartungshorizont hochladen</h2>
            <p className={`mb-6 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
              Laden Sie einen eigenen Erwartungshorizont fuer Vorabitur-Klausuren hoch.
            </p>

            {/* Drag & Drop Zone */}
            <div
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={(e) => handleDrop(e, true)}
              className={`relative p-8 rounded-2xl border-2 border-dashed transition-colors ${
                isDragging
                  ? 'border-orange-400 bg-orange-500/10'
                  : isDark
                    ? 'border-white/20 hover:border-white/40'
                    : 'border-slate-300 hover:border-slate-400'
              }`}
            >
              <input
                type="file"
                accept=".pdf,.docx,.doc"
                onChange={(e) => handleFileSelect(e, true)}
                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
              />
              <div className="text-center">
                <svg className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-white/40' : '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>
                <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  {ehFile ? ehFile.name : 'EH-Datei hierher ziehen'}
                </p>
                <p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
                  PDF oder Word-Dokument
                </p>
              </div>
            </div>

            {/* Selected File */}
            {ehFile && (
              <div className={`mt-4 flex items-center justify-between p-3 rounded-lg ${isDark ? 'bg-white/5' : 'bg-slate-100'}`}>
                <div className="flex items-center gap-3">
                  <svg className="w-6 h-6 text-orange-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>
                  <span className={`text-sm truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{ehFile.name}</span>
                </div>
                <button
                  onClick={() => setEhFile(null)}
                  className="text-red-400 hover:text-red-300"
                >
                  <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>
            )}

            {/* Actions */}
            <div className="flex gap-3 mt-6">
              <button
                onClick={() => { setShowEHUpload(false); setEhFile(null) }}
                className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
              >
                Abbrechen
              </button>
              <button
                onClick={handleEHUpload}
                disabled={!ehFile || isUploading}
                className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold hover:shadow-lg hover:shadow-orange-500/30 transition-all disabled:opacity-50"
              >
                {isUploading ? 'Hochladen...' : 'EH hochladen'}
              </button>
            </div>
          </GlassCard>
        </div>
      )}
    </div>
  )
}