'use client'

import React, { useState, useRef, useEffect } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { useLanguage } from '@/lib/LanguageContext'
import { useRouter } from 'next/navigation'
import { useActivity } from '@/lib/ActivityContext'
import { QRCodeUpload, UploadedFile } from '@/components/QRCodeUpload'
import { Sidebar } from '@/components/Sidebar'

// API Base URL - dynamisch basierend auf Browser-Host
// Verwendet /klausur-api/ Proxy um Zertifikat-Probleme zu vermeiden
const getApiBase = () => {
  if (typeof window === 'undefined') return 'http://localhost:8086'
  const { hostname, protocol } = window.location
  if (hostname === 'localhost') return 'http://localhost:8086'
  // Für macmini/lokales Netzwerk: Proxy-Pfad verwenden (gleiches Zertifikat wie Hauptseite)
  return `${protocol}//${hostname}/klausur-api`
}

// LocalStorage Keys
const DOCUMENTS_KEY = 'bp_documents'
const OCR_PROMPTS_KEY = 'bp_ocr_prompts'
const SESSION_ID_KEY = 'bp_upload_session'

// Types
interface VocabularyEntry {
  id: string
  english: string
  german: string
  example_sentence?: string
  example_sentence_gap?: string
  word_type?: string
  source_page?: number
  selected?: boolean
}

interface Session {
  id: string
  name: string
  status: string
  vocabulary_count: number
  image_path?: string
  description?: string
  source_language?: string
  target_language?: string
  created_at?: string
}

interface StoredDocument {
  id: string
  name: string
  type: string
  size: number
  uploadedAt: Date
  url?: string
}

interface OcrPrompts {
  filterHeaders: boolean
  filterFooters: boolean
  filterPageNumbers: boolean
  customFilter: string
  headerPatterns: string[]
  footerPatterns: string[]
}

type TabId = 'upload' | 'pages' | 'vocabulary' | 'worksheet' | 'export' | 'settings'
type WorksheetType = 'en_to_de' | 'de_to_en' | 'copy' | 'gap_fill'
type WorksheetFormat = 'standard' | 'nru'

// Worksheet format templates
const worksheetFormats: { id: WorksheetFormat; label: string; description: string; icon: string }[] = [
  {
    id: 'standard',
    label: 'Standard-Format',
    description: 'Klassisches Arbeitsblatt mit waehlbarer Uebersetzungsrichtung',
    icon: 'document'
  },
  {
    id: 'nru',
    label: 'NRU-Vorlage',
    description: '3-Spalten-Tabelle (EN|DE|Korrektur) + Lernsaetze mit Uebersetzungszeilen',
    icon: 'template'
  },
]

// Default OCR filtering prompts
const defaultOcrPrompts: OcrPrompts = {
  filterHeaders: true,
  filterFooters: true,
  filterPageNumbers: true,
  customFilter: '',
  headerPatterns: ['Unit', 'Chapter', 'Lesson', 'Kapitel', 'Lektion'],
  footerPatterns: ['zweihundert', 'dreihundert', 'vierhundert', 'Page', 'Seite']
}

export default function VocabWorksheetPage() {
  const { isDark } = useTheme()
  const { t } = useLanguage()
  const router = useRouter()
  const { startActivity, completeActivity } = useActivity()
  const [mounted, setMounted] = useState(false)

  // Tab state
  const [activeTab, setActiveTab] = useState<TabId>('upload')

  // Session state
  const [session, setSession] = useState<Session | null>(null)
  const [sessionName, setSessionName] = useState('')
  const [isCreatingSession, setIsCreatingSession] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [extractionStatus, setExtractionStatus] = useState<string>('')

  // Existing sessions list
  const [existingSessions, setExistingSessions] = useState<Session[]>([])
  const [isLoadingSessions, setIsLoadingSessions] = useState(true)

  // Documents from storage
  const [storedDocuments, setStoredDocuments] = useState<StoredDocument[]>([])
  const [selectedDocumentId, setSelectedDocumentId] = useState<string | null>(null)

  // Direct file upload
  const [directFile, setDirectFile] = useState<File | null>(null)
  const [directFilePreview, setDirectFilePreview] = useState<string | null>(null)
  const directFileInputRef = useRef<HTMLInputElement>(null)

  // PDF page selection state
  const [pdfPageCount, setPdfPageCount] = useState<number>(0)
  const [selectedPages, setSelectedPages] = useState<number[]>([])
  const [pagesThumbnails, setPagesThumbnails] = useState<string[]>([])
  const [isLoadingThumbnails, setIsLoadingThumbnails] = useState(false)
  const [excludedPages, setExcludedPages] = useState<number[]>([])

  // Upload state
  const [uploadedImage, setUploadedImage] = useState<string | null>(null)
  const [isExtracting, setIsExtracting] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

  // Vocabulary state
  const [vocabulary, setVocabulary] = useState<VocabularyEntry[]>([])

  // Worksheet state
  const [selectedTypes, setSelectedTypes] = useState<WorksheetType[]>(['en_to_de'])
  const [worksheetTitle, setWorksheetTitle] = useState('')
  const [includeSolutions, setIncludeSolutions] = useState(true)
  const [lineHeight, setLineHeight] = useState('normal')
  const [selectedFormat, setSelectedFormat] = useState<WorksheetFormat>('standard')

  // Export state
  const [worksheetId, setWorksheetId] = useState<string | null>(null)
  const [isGenerating, setIsGenerating] = useState(false)

  // Processing results
  const [processingErrors, setProcessingErrors] = useState<string[]>([])
  const [successfulPages, setSuccessfulPages] = useState<number[]>([])
  const [failedPages, setFailedPages] = useState<number[]>([])
  const [currentlyProcessingPage, setCurrentlyProcessingPage] = useState<number | null>(null)
  const [processingQueue, setProcessingQueue] = useState<number[]>([])

  // OCR Prompts/Settings
  const [ocrPrompts, setOcrPrompts] = useState<OcrPrompts>(defaultOcrPrompts)
  const [showSettings, setShowSettings] = useState(false)

  // QR Code Upload
  const [showQRModal, setShowQRModal] = useState(false)
  const [uploadSessionId, setUploadSessionId] = useState('')
  const [mobileUploadedFiles, setMobileUploadedFiles] = useState<UploadedFile[]>([])
  const [selectedMobileFile, setSelectedMobileFile] = useState<UploadedFile | null>(null)

  // OCR Comparison
  const [showOcrComparison, setShowOcrComparison] = useState(false)
  const [ocrComparePageIndex, setOcrComparePageIndex] = useState<number | null>(null)
  const [ocrCompareResult, setOcrCompareResult] = useState<any>(null)
  const [isComparingOcr, setIsComparingOcr] = useState(false)
  const [ocrCompareError, setOcrCompareError] = useState<string | null>(null)

  // SSR Safety
  useEffect(() => {
    setMounted(true)

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

  // Load OCR prompts from localStorage
  useEffect(() => {
    if (!mounted) return
    const stored = localStorage.getItem(OCR_PROMPTS_KEY)
    if (stored) {
      try {
        setOcrPrompts({ ...defaultOcrPrompts, ...JSON.parse(stored) })
      } catch (e) {
        console.error('Failed to parse OCR prompts:', e)
      }
    }
  }, [mounted])

  // Save OCR prompts to localStorage
  const saveOcrPrompts = (prompts: OcrPrompts) => {
    setOcrPrompts(prompts)
    localStorage.setItem(OCR_PROMPTS_KEY, JSON.stringify(prompts))
  }

  // Load documents from localStorage
  useEffect(() => {
    if (!mounted) return
    const stored = localStorage.getItem(DOCUMENTS_KEY)
    if (stored) {
      try {
        const docs = JSON.parse(stored)
        const imagesDocs = docs.filter((d: StoredDocument) =>
          d.type?.startsWith('image/') || d.type === 'application/pdf'
        )
        setStoredDocuments(imagesDocs)
      } catch (e) {
        console.error('Failed to parse stored documents:', e)
      }
    }
  }, [mounted])

  // Load existing sessions from API
  useEffect(() => {
    if (!mounted) return
    const loadSessions = async () => {
      const API_BASE = getApiBase()
      try {
        const res = await fetch(`${API_BASE}/api/v1/vocab/sessions`)
        if (res.ok) {
          const sessions = await res.json()
          setExistingSessions(sessions)
        }
      } catch (e) {
        console.error('Failed to load sessions:', e)
      } finally {
        setIsLoadingSessions(false)
      }
    }
    loadSessions()
  }, [mounted])

  // Handle direct file selection
  const handleDirectFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

    setDirectFile(file)
    setSelectedDocumentId(null)

    if (file.type.startsWith('image/')) {
      const reader = new FileReader()
      reader.onload = (ev) => {
        setDirectFilePreview(ev.target?.result as string)
      }
      reader.readAsDataURL(file)
    } else {
      setDirectFilePreview(null)
    }
  }

  // Create session and handle file upload
  const startSession = async () => {
    if (!sessionName.trim()) {
      setError('Bitte geben Sie einen Namen fuer die Session ein.')
      return
    }
    if (!selectedDocumentId && !directFile && !selectedMobileFile) {
      setError('Bitte waehlen Sie ein Dokument aus oder laden Sie eine Datei hoch.')
      return
    }

    setError(null)
    setIsCreatingSession(true)
    setExtractionStatus('Session wird erstellt...')

    const API_BASE = getApiBase()

    try {
      const sessionRes = await fetch(`${API_BASE}/api/v1/vocab/sessions`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: sessionName,
          ocr_prompts: ocrPrompts
        }),
      })

      if (!sessionRes.ok) {
        throw new Error('Session konnte nicht erstellt werden')
      }

      const sessionData = await sessionRes.json()
      setSession(sessionData)
      setWorksheetTitle(sessionName)

      // Start activity tracking for time savings calculation
      startActivity('vocab_extraction', { description: sessionName })

      let file: File
      let isPdf = false

      if (directFile) {
        file = directFile
        isPdf = directFile.type === 'application/pdf'
      } else if (selectedMobileFile) {
        // Convert mobile uploaded file (base64 dataUrl) to File object
        isPdf = selectedMobileFile.type === 'application/pdf'
        const base64Data = selectedMobileFile.dataUrl.split(',')[1]
        const byteCharacters = atob(base64Data)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray], { type: selectedMobileFile.type })
        file = new File([blob], selectedMobileFile.name, { type: selectedMobileFile.type })
      } else {
        const selectedDoc = storedDocuments.find(d => d.id === selectedDocumentId)
        if (!selectedDoc || !selectedDoc.url) {
          throw new Error('Das ausgewaehlte Dokument ist nicht verfuegbar.')
        }

        isPdf = selectedDoc.type === 'application/pdf'

        const base64Data = selectedDoc.url.split(',')[1]
        const byteCharacters = atob(base64Data)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray], { type: selectedDoc.type })
        file = new File([blob], selectedDoc.name, { type: selectedDoc.type })
      }

      if (isPdf) {
        setExtractionStatus('PDF wird analysiert...')

        const formData = new FormData()
        formData.append('file', file)

        const pdfInfoRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionData.id}/upload-pdf-info`, {
          method: 'POST',
          body: formData,
        })

        if (!pdfInfoRes.ok) {
          throw new Error('PDF konnte nicht verarbeitet werden')
        }

        const pdfInfo = await pdfInfoRes.json()
        setPdfPageCount(pdfInfo.page_count)

        setIsLoadingThumbnails(true)
        const thumbnails: string[] = []

        for (let i = 0; i < pdfInfo.page_count; i++) {
          try {
            const thumbRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionData.id}/pdf-thumbnail/${i}?hires=true`)
            if (thumbRes.ok) {
              const blob = await thumbRes.blob()
              thumbnails.push(URL.createObjectURL(blob))
            }
          } catch (e) {
            console.error(`Failed to load thumbnail for page ${i}`)
          }
        }

        setPagesThumbnails(thumbnails)
        setIsLoadingThumbnails(false)
        setSelectedPages(Array.from({ length: pdfInfo.page_count }, (_, i) => i))
        setActiveTab('pages')
        setExtractionStatus(`PDF hat ${pdfInfo.page_count} Seiten. Bitte waehlen Sie die zu verarbeitenden Seiten.`)

      } else {
        setExtractionStatus('KI analysiert das Bild... (kann 30-60 Sekunden dauern)')

        const formData = new FormData()
        formData.append('file', file)

        const uploadRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionData.id}/upload`, {
          method: 'POST',
          body: formData,
        })

        if (!uploadRes.ok) {
          throw new Error('Bild konnte nicht verarbeitet werden')
        }

        const uploadData = await uploadRes.json()
        setSession(prev => prev ? { ...prev, status: 'extracted', vocabulary_count: uploadData.vocabulary_count } : null)

        const vocabRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionData.id}/vocabulary`)
        if (vocabRes.ok) {
          const vocabData = await vocabRes.json()
          setVocabulary(vocabData.vocabulary || [])
          setExtractionStatus(`${vocabData.vocabulary?.length || 0} Vokabeln gefunden!`)
        }

        await new Promise(r => setTimeout(r, 1000))
        setActiveTab('vocabulary')
      }

    } catch (error) {
      console.error('Session start failed:', error)
      setError(error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten')
      setExtractionStatus('')
      setSession(null)
    } finally {
      setIsCreatingSession(false)
    }
  }

  // Process a single page
  const processSinglePage = async (pageIndex: number): Promise<{ success: boolean; vocabulary: VocabularyEntry[]; error?: string }> => {
    const API_BASE = getApiBase()

    try {
      const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session!.id}/process-single-page/${pageIndex}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ocr_prompts: ocrPrompts }),
      })

      if (!res.ok) {
        return { success: false, vocabulary: [], error: `Seite ${pageIndex + 1}: HTTP ${res.status}` }
      }

      const data = await res.json()

      if (!data.success) {
        return { success: false, vocabulary: [], error: data.error || `Seite ${pageIndex + 1}: Unbekannter Fehler` }
      }

      return { success: true, vocabulary: data.vocabulary || [] }
    } catch (e) {
      return { success: false, vocabulary: [], error: `Seite ${pageIndex + 1}: ${e instanceof Error ? e.message : 'Netzwerkfehler'}` }
    }
  }

  // Process selected PDF pages
  const processSelectedPages = async () => {
    if (!session || selectedPages.length === 0) return

    const pagesToProcess = [...selectedPages].sort((a, b) => a - b)

    setIsExtracting(true)
    setProcessingErrors([])
    setSuccessfulPages([])
    setFailedPages([])
    setProcessingQueue(pagesToProcess)
    setVocabulary([])

    setActiveTab('vocabulary')

    const API_BASE = getApiBase()
    const errors: string[] = []
    const successful: number[] = []
    const failed: number[] = []

    for (let i = 0; i < pagesToProcess.length; i++) {
      const pageIndex = pagesToProcess[i]
      setCurrentlyProcessingPage(pageIndex + 1)
      setExtractionStatus(`Verarbeite Seite ${pageIndex + 1} von ${pagesToProcess.length}... (kann 30-60 Sekunden dauern)`)

      const result = await processSinglePage(pageIndex)

      if (result.success) {
        successful.push(pageIndex + 1)
        setSuccessfulPages([...successful])
        setVocabulary(prev => [...prev, ...result.vocabulary])
        setExtractionStatus(`Seite ${pageIndex + 1} fertig: ${result.vocabulary.length} Vokabeln gefunden`)
      } else {
        failed.push(pageIndex + 1)
        setFailedPages([...failed])
        if (result.error) {
          errors.push(result.error)
          setProcessingErrors([...errors])
        }
        setExtractionStatus(`Seite ${pageIndex + 1} fehlgeschlagen`)
      }

      await new Promise(r => setTimeout(r, 500))
    }

    setCurrentlyProcessingPage(null)
    setProcessingQueue([])
    setIsExtracting(false)

    const totalVocab = vocabulary.length
    if (successful.length === pagesToProcess.length) {
      setExtractionStatus(`Fertig! Alle ${successful.length} Seiten verarbeitet.`)
    } else if (successful.length > 0) {
      setExtractionStatus(`${successful.length} von ${pagesToProcess.length} Seiten verarbeitet. ${failed.length} fehlgeschlagen.`)
    } else {
      setExtractionStatus(`Alle Seiten fehlgeschlagen.`)
    }

    setSession(prev => prev ? { ...prev, status: 'extracted' } : null)
  }

  // Toggle page selection
  const togglePageSelection = (pageIndex: number) => {
    setSelectedPages(prev =>
      prev.includes(pageIndex)
        ? prev.filter(p => p !== pageIndex)
        : [...prev, pageIndex].sort((a, b) => a - b)
    )
  }

  const selectAllPages = () => setSelectedPages(
    Array.from({ length: pdfPageCount }, (_, i) => i).filter(p => !excludedPages.includes(p))
  )
  const selectNoPages = () => setSelectedPages([])

  const excludePage = (pageIndex: number, e: React.MouseEvent) => {
    e.stopPropagation()
    setExcludedPages(prev => [...prev, pageIndex])
    setSelectedPages(prev => prev.filter(p => p !== pageIndex))
  }

  const restoreExcludedPages = () => {
    setExcludedPages([])
  }

  // Run OCR Comparison on a single page
  const runOcrComparison = async (pageIndex: number) => {
    if (!session) return

    setOcrComparePageIndex(pageIndex)
    setShowOcrComparison(true)
    setIsComparingOcr(true)
    setOcrCompareError(null)
    setOcrCompareResult(null)

    const API_BASE = getApiBase()

    try {
      const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/compare-ocr/${pageIndex}`, {
        method: 'POST',
      })

      if (!res.ok) {
        throw new Error(`HTTP ${res.status}`)
      }

      const data = await res.json()
      setOcrCompareResult(data)
    } catch (e) {
      setOcrCompareError(e instanceof Error ? e.message : 'Vergleich fehlgeschlagen')
    } finally {
      setIsComparingOcr(false)
    }
  }

  // Update vocabulary entry
  const updateVocabularyEntry = (id: string, field: keyof VocabularyEntry, value: string) => {
    setVocabulary(prev => prev.map(v =>
      v.id === id ? { ...v, [field]: value } : v
    ))
  }

  // Delete vocabulary entry
  const deleteVocabularyEntry = (id: string) => {
    setVocabulary(prev => prev.filter(v => v.id !== id))
  }

  // Toggle vocabulary entry selection
  const toggleVocabularySelection = (id: string) => {
    setVocabulary(prev => prev.map(v =>
      v.id === id ? { ...v, selected: !v.selected } : v
    ))
  }

  // Toggle all vocabulary entries selection
  const toggleAllSelection = () => {
    const allSelected = vocabulary.every(v => v.selected)
    setVocabulary(prev => prev.map(v => ({ ...v, selected: !allSelected })))
  }

  // Add new vocabulary entry at specific position (default: end)
  const addVocabularyEntry = (atIndex?: number) => {
    const newEntry: VocabularyEntry = {
      id: `new-${Date.now()}`,
      english: '',
      german: '',
      example_sentence: '',
      selected: true
    }
    setVocabulary(prev => {
      if (atIndex === undefined) {
        return [...prev, newEntry]
      }
      const newList = [...prev]
      newList.splice(atIndex, 0, newEntry)
      return newList
    })
  }

  // Save vocabulary changes
  const saveVocabulary = async () => {
    if (!session) return
    const API_BASE = getApiBase()

    try {
      await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/vocabulary`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ vocabulary }),
      })
    } catch (error) {
      console.error('Failed to save vocabulary:', error)
    }
  }

  // Generate worksheet
  const generateWorksheet = async () => {
    if (!session) return
    // For standard format, require worksheet types; for NRU, types are not needed
    if (selectedFormat === 'standard' && selectedTypes.length === 0) return

    setIsGenerating(true)
    const API_BASE = getApiBase()

    try {
      await saveVocabulary()

      let res: Response

      if (selectedFormat === 'nru') {
        // Use NRU format endpoint
        res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/generate-nru`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            title: worksheetTitle || session.name,
            include_solutions: includeSolutions,
          }),
        })
      } else {
        // Use standard format endpoint
        res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/generate`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            worksheet_types: selectedTypes,
            title: worksheetTitle || session.name,
            include_solutions: includeSolutions,
            line_height: lineHeight,
          }),
        })
      }

      if (res.ok) {
        const data = await res.json()
        // NRU endpoint returns worksheet_id, standard returns id
        setWorksheetId(data.worksheet_id || data.id)
        setActiveTab('export')

        // Complete activity tracking with vocab count
        completeActivity({ vocabCount: vocabulary.length })
      }
    } catch (error) {
      console.error('Failed to generate worksheet:', error)
    } finally {
      setIsGenerating(false)
    }
  }

  // Download PDF
  const downloadPDF = (type: 'worksheet' | 'solution') => {
    if (!worksheetId) return
    const API_BASE = getApiBase()
    const endpoint = type === 'worksheet' ? 'pdf' : 'solution'
    window.open(`${API_BASE}/api/v1/vocab/worksheets/${worksheetId}/${endpoint}`, '_blank')
  }

  // Toggle worksheet type selection
  const toggleWorksheetType = (type: WorksheetType) => {
    setSelectedTypes(prev =>
      prev.includes(type) ? prev.filter(t => t !== type) : [...prev, type]
    )
  }

  // Resume an existing session
  const resumeSession = async (existingSession: Session) => {
    setError(null)
    setExtractionStatus('Session wird geladen...')

    const API_BASE = getApiBase()

    try {
      const sessionRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${existingSession.id}`)
      if (!sessionRes.ok) throw new Error('Session nicht gefunden')
      const sessionData = await sessionRes.json()
      setSession(sessionData)
      setWorksheetTitle(sessionData.name)

      if (sessionData.status === 'extracted' || sessionData.status === 'completed') {
        const vocabRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${existingSession.id}/vocabulary`)
        if (vocabRes.ok) {
          const vocabData = await vocabRes.json()
          setVocabulary(vocabData.vocabulary || [])
        }
        setActiveTab('vocabulary')
        setExtractionStatus('')
      } else if (sessionData.status === 'pending') {
        setActiveTab('upload')
        setExtractionStatus('Diese Session hat noch keine Vokabeln. Bitte laden Sie ein Dokument hoch.')
      } else {
        setActiveTab('vocabulary')
        setExtractionStatus('')
      }

    } catch (error) {
      console.error('Failed to resume session:', error)
      setError(error instanceof Error ? error.message : 'Fehler beim Laden der Session')
      setExtractionStatus('')
    }
  }

  // Reset session
  const resetSession = async () => {
    setSession(null)
    setSessionName('')
    setVocabulary([])
    setUploadedImage(null)
    setWorksheetId(null)
    setSelectedDocumentId(null)
    setDirectFile(null)
    setDirectFilePreview(null)
    setPdfPageCount(0)
    setSelectedPages([])
    setPagesThumbnails([])
    setExcludedPages([])
    setActiveTab('upload')
    setError(null)
    setExtractionStatus('')

    const API_BASE = getApiBase()
    try {
      const res = await fetch(`${API_BASE}/api/v1/vocab/sessions`)
      if (res.ok) {
        const sessions = await res.json()
        setExistingSessions(sessions)
      }
    } catch (e) {
      console.error('Failed to reload sessions:', e)
    }
  }

  // Delete a session
  const deleteSession = async (sessionId: string, e: React.MouseEvent) => {
    e.stopPropagation()
    if (!confirm('Session wirklich loeschen? Diese Aktion kann nicht rueckgaengig gemacht werden.')) {
      return
    }

    const API_BASE = getApiBase()
    try {
      const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionId}`, {
        method: 'DELETE',
      })
      if (res.ok) {
        setExistingSessions(prev => prev.filter(s => s.id !== sessionId))
      }
    } catch (e) {
      console.error('Failed to delete session:', e)
    }
  }

  // Format file size
  const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
  }

  const worksheetTypes: { id: WorksheetType; label: string; description: string }[] = [
    { id: 'en_to_de', label: 'Englisch → Deutsch', description: 'Englische Woerter uebersetzen' },
    { id: 'de_to_en', label: 'Deutsch → Englisch', description: 'Deutsche Woerter uebersetzen' },
    { id: 'copy', label: 'Abschreibuebung', description: 'Woerter mehrfach schreiben' },
    { id: 'gap_fill', label: 'Lueckensaetze', description: 'Saetze mit Luecken ausfuellen' },
  ]

  // Glassmorphism styles
  const glassCard = isDark
    ? 'backdrop-blur-xl bg-white/10 border border-white/20'
    : 'backdrop-blur-xl bg-white/70 border border-black/10'

  const glassInput = isDark
    ? 'bg-white/10 border-white/20 text-white placeholder-white/40 focus:border-purple-400'
    : 'bg-white/50 border-black/10 text-slate-900 placeholder-slate-400 focus:border-purple-500'

  if (!mounted) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 flex items-center justify-center">
        <div className="w-8 h-8 border-4 border-purple-400 border-t-transparent rounded-full animate-spin" />
      </div>
    )
  }

  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-purple-50 to-pink-100'
    }`}>
      {/* Animated Background Blobs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${
          isDark ? 'bg-purple-500 opacity-70' : 'bg-purple-300 opacity-50'
        }`} />
        <div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${
          isDark ? 'bg-pink-500 opacity-70' : 'bg-pink-300 opacity-50'
        }`} />
        <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${
          isDark ? 'bg-indigo-500 opacity-70' : 'bg-indigo-300 opacity-50'
        }`} />
      </div>

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

      {/* Main Content */}
      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto">
        {/* Header */}
        <div className={`border-b ${isDark ? 'border-white/10' : 'border-black/5'}`}>
          <div className={`${glassCard} border-0 border-b`}>
            <div className="max-w-7xl mx-auto px-6 py-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
                    isDark ? 'bg-purple-500/30' : 'bg-purple-200'
                  }`}>
                    <svg className={`w-6 h-6 ${isDark ? 'text-purple-300' : 'text-purple-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                    </svg>
                  </div>
                  <div>
                    <h1 className={`text-xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                      Vokabel-Arbeitsblatt Generator
                    </h1>
                    <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                      Schulbuchseiten scannen → KI extrahiert Vokabeln → Druckfertige Arbeitsblaetter
                    </p>
                  </div>
              </div>

              <div className="flex items-center gap-2">
                {/* Settings Button */}
                <button
                  onClick={() => setShowSettings(!showSettings)}
                  className={`p-2 rounded-xl transition-all ${
                    showSettings
                      ? (isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700')
                      : (isDark ? 'hover:bg-white/10 text-white/60 hover:text-white' : 'hover:bg-black/5 text-slate-500 hover:text-slate-700')
                  }`}
                  title="OCR-Einstellungen"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                </button>

                {session && (
                  <button
                    onClick={resetSession}
                    className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
                      isDark
                        ? 'bg-white/10 text-white/80 hover:bg-white/20'
                        : 'bg-black/5 text-slate-700 hover:bg-black/10'
                    }`}
                  >
                    ← Neue Session
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="relative z-10 max-w-7xl mx-auto px-6 py-6">
        {/* OCR Settings Panel */}
        {showSettings && (
          <div className={`${glassCard} rounded-2xl p-6 mb-6`}>
            <div className="flex items-center justify-between mb-4">
              <h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                OCR-Filter Einstellungen
              </h2>
              <button
                onClick={() => setShowSettings(false)}
                className={`p-1 rounded-lg ${isDark ? 'hover:bg-white/10 text-white/60' : 'hover:bg-black/5 text-slate-500'}`}
              >
                <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>

            <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-blue-500/20 text-blue-200' : 'bg-blue-100 text-blue-800'}`}>
              <p className="text-sm">
                Diese Einstellungen helfen, unerwuenschte Elemente wie Seitenzahlen, Kapitelnamen oder Kopfzeilen aus dem OCR-Ergebnis zu filtern.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Checkboxes */}
              <div className="space-y-3">
                <label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  <input
                    type="checkbox"
                    checked={ocrPrompts.filterHeaders}
                    onChange={(e) => saveOcrPrompts({ ...ocrPrompts, filterHeaders: e.target.checked })}
                    className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500"
                  />
                  <span>Kopfzeilen filtern (z.B. Kapitelnamen)</span>
                </label>

                <label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  <input
                    type="checkbox"
                    checked={ocrPrompts.filterFooters}
                    onChange={(e) => saveOcrPrompts({ ...ocrPrompts, filterFooters: e.target.checked })}
                    className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500"
                  />
                  <span>Fusszeilen filtern</span>
                </label>

                <label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  <input
                    type="checkbox"
                    checked={ocrPrompts.filterPageNumbers}
                    onChange={(e) => saveOcrPrompts({ ...ocrPrompts, filterPageNumbers: e.target.checked })}
                    className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500"
                  />
                  <span>Seitenzahlen filtern (auch ausgeschrieben: "zweihundertzwoelf")</span>
                </label>
              </div>

              {/* Patterns */}
              <div className="space-y-4">
                <div>
                  <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
                    Kopfzeilen-Muster (kommagetrennt)
                  </label>
                  <input
                    type="text"
                    value={ocrPrompts.headerPatterns.join(', ')}
                    onChange={(e) => saveOcrPrompts({
                      ...ocrPrompts,
                      headerPatterns: e.target.value.split(',').map(s => s.trim()).filter(Boolean)
                    })}
                    placeholder="Unit, Chapter, Lesson..."
                    className={`w-full px-4 py-2 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}
                  />
                </div>

                <div>
                  <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
                    Fusszeilen-Muster (kommagetrennt)
                  </label>
                  <input
                    type="text"
                    value={ocrPrompts.footerPatterns.join(', ')}
                    onChange={(e) => saveOcrPrompts({
                      ...ocrPrompts,
                      footerPatterns: e.target.value.split(',').map(s => s.trim()).filter(Boolean)
                    })}
                    placeholder="zweihundert, Page, Seite..."
                    className={`w-full px-4 py-2 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}
                  />
                </div>
              </div>
            </div>

            <div className="mt-4">
              <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
                Zusaetzlicher Filter-Prompt (optional)
              </label>
              <textarea
                value={ocrPrompts.customFilter}
                onChange={(e) => saveOcrPrompts({ ...ocrPrompts, customFilter: e.target.value })}
                placeholder="z.B.: Ignoriere alle Zeilen, die nur Zahlen oder Buchstaben enthalten..."
                rows={2}
                className={`w-full px-4 py-2 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none`}
              />
            </div>

            <div className="mt-4 flex justify-end">
              <button
                onClick={() => saveOcrPrompts(defaultOcrPrompts)}
                className={`px-4 py-2 rounded-xl text-sm ${isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-700'}`}
              >
                Auf Standard zuruecksetzen
              </button>
            </div>
          </div>
        )}

        {/* Error Message */}
        {error && (
          <div className={`${glassCard} rounded-2xl p-4 mb-6 ${isDark ? 'bg-red-500/20 border-red-500/30' : 'bg-red-100/80 border-red-200'}`}>
            <p className={isDark ? 'text-red-200' : 'text-red-700'}>{error}</p>
          </div>
        )}

        {/* Status Message */}
        {extractionStatus && (
          <div className={`${glassCard} rounded-2xl p-4 mb-6 ${isDark ? 'bg-purple-500/20 border-purple-500/30' : 'bg-purple-100/80 border-purple-200'}`}>
            {isCreatingSession || isExtracting ? (
              <div className="flex items-center gap-3">
                <div className={`w-5 h-5 border-2 ${isDark ? 'border-purple-300' : 'border-purple-600'} border-t-transparent rounded-full animate-spin`} />
                <span className={isDark ? 'text-purple-200' : 'text-purple-700'}>{extractionStatus}</span>
              </div>
            ) : (
              <span className={isDark ? 'text-purple-200' : 'text-purple-700'}>{extractionStatus}</span>
            )}
          </div>
        )}

        {/* Initial Upload Screen */}
        {!session && (
          <div className="space-y-6">
            {/* Existing Sessions */}
            {existingSessions.length > 0 && (
              <div className={`${glassCard} rounded-2xl p-6`}>
                <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  Vorhandene Sessions fortsetzen
                </h2>
                {isLoadingSessions ? (
                  <div className="flex items-center gap-3 py-4">
                    <div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
                    <span className={isDark ? 'text-white/60' : 'text-slate-500'}>Lade Sessions...</span>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {existingSessions.map((s) => (
                      <div
                        key={s.id}
                        className={`${glassCard} p-4 rounded-xl text-left transition-all hover:shadow-lg relative group cursor-pointer ${
                          isDark ? 'hover:border-purple-400/50' : 'hover:border-purple-400'
                        }`}
                        onClick={() => resumeSession(s)}
                      >
                        {/* Delete Button */}
                        <button
                          onClick={(e) => deleteSession(s.id, e)}
                          className={`absolute top-2 right-2 p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity ${
                            isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-100 text-red-500'
                          }`}
                          title="Session loeschen"
                        >
                          <svg className="w-4 h-4" 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 className="flex items-start gap-3">
                          <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
                            s.status === 'extracted' || s.status === 'completed'
                              ? (isDark ? 'bg-green-500/30' : 'bg-green-100')
                              : (isDark ? 'bg-white/10' : 'bg-slate-100')
                          }`}>
                            {s.status === 'extracted' || s.status === 'completed' ? (
                              <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                              </svg>
                            ) : (
                              <svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-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>
                          <div className="flex-1 min-w-0">
                            <h3 className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{s.name}</h3>
                            <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                              {s.vocabulary_count} Vokabeln
                              {s.status === 'pending' && ' • Nicht gestartet'}
                              {s.status === 'extracted' && ' • Bereit'}
                              {s.status === 'completed' && ' • Abgeschlossen'}
                            </p>
                            {s.created_at && (
                              <p className={`text-xs mt-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                                {new Date(s.created_at).toLocaleDateString('de-DE', {
                                  day: '2-digit',
                                  month: '2-digit',
                                  year: 'numeric',
                                  hour: '2-digit',
                                  minute: '2-digit'
                                })}
                              </p>
                            )}
                          </div>
                          <svg className={`w-5 h-5 flex-shrink-0 ${isDark ? 'text-white/30' : 'text-slate-300'}`} 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>
            )}

            {/* Explanation */}
            <div className={`${glassCard} rounded-2xl p-6 ${isDark ? 'bg-gradient-to-br from-purple-500/20 to-pink-500/20' : 'bg-gradient-to-br from-purple-100/50 to-pink-100/50'}`}>
              <h2 className={`text-lg font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                {existingSessions.length > 0 ? 'Oder neue Session starten:' : 'So funktioniert es:'}
              </h2>
              <ol className={`space-y-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
                <li className="flex items-start gap-2">
                  <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>1</span>
                  <span>Session benennen und Dokument (Bild oder PDF) auswaehlen</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>2</span>
                  <span>Bei PDFs: Seiten auswaehlen die verarbeitet werden sollen</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>3</span>
                  <span>KI extrahiert automatisch Vokabeln (Englisch | Deutsch | Beispiel)</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>4</span>
                  <span>Vokabeln pruefen/korrigieren und Arbeitsblatt-Typ waehlen</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>5</span>
                  <span>PDF herunterladen und ausdrucken</span>
                </li>
              </ol>
            </div>

            {/* Two Column Layout */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Session Name */}
              <div className={`${glassCard} rounded-2xl p-6`}>
                <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  1. Session benennen
                </h2>
                <input
                  type="text"
                  value={sessionName}
                  onChange={(e) => { setSessionName(e.target.value); setError(null) }}
                  placeholder="z.B. Englisch Klasse 7 - Unit 3"
                  className={`w-full px-4 py-3 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}
                />
              </div>

              {/* Document Selection */}
              <div className={`${glassCard} rounded-2xl p-6`}>
                <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  2. Dokument auswaehlen
                </h2>

                {/* Direct Upload */}
                <input ref={directFileInputRef} type="file" accept="image/png,image/jpeg,image/jpg,application/pdf" onChange={handleDirectFileSelect} className="hidden" />

                {/* Two upload options side by side */}
                <div className="grid grid-cols-2 gap-3 mb-4">
                  {/* File Upload Button */}
                  <button
                    onClick={() => directFileInputRef.current?.click()}
                    className={`p-4 rounded-xl border-2 border-dashed transition-all ${
                      directFile
                        ? (isDark ? 'border-green-400/50 bg-green-500/20' : 'border-green-500 bg-green-50')
                        : (isDark ? 'border-white/20 hover:border-purple-400/50' : 'border-slate-300 hover:border-purple-500')
                    }`}
                  >
                    {directFile ? (
                      <div className="flex items-center gap-3">
                        <span className="text-2xl">{directFile.type === 'application/pdf' ? '📄' : '🖼️'}</span>
                        <div className="text-left flex-1 min-w-0">
                          <p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{directFile.name}</p>
                          <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(directFile.size)}</p>
                        </div>
                        <svg className="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                    ) : (
                      <div className={`text-center ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                        <span className="text-2xl block mb-1">📁</span>
                        <span className="text-sm">Datei auswaehlen</span>
                      </div>
                    )}
                  </button>

                  {/* QR Code Upload Button */}
                  <button
                    onClick={() => setShowQRModal(true)}
                    className={`p-4 rounded-xl border-2 border-dashed transition-all ${
                      selectedMobileFile
                        ? (isDark ? 'border-green-400/50 bg-green-500/20' : 'border-green-500 bg-green-50')
                        : (isDark ? 'border-white/20 hover:border-purple-400/50' : 'border-slate-300 hover:border-purple-500')
                    }`}
                  >
                    {selectedMobileFile ? (
                      <div className="flex items-center gap-3">
                        <span className="text-2xl">{selectedMobileFile.type.startsWith('image/') ? '🖼️' : '📄'}</span>
                        <div className="text-left flex-1 min-w-0">
                          <p className={`font-medium truncate text-sm ${isDark ? 'text-white' : 'text-slate-900'}`}>{selectedMobileFile.name}</p>
                          <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>vom Handy</p>
                        </div>
                        <svg className="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                    ) : (
                      <div className={`text-center ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                        <span className="text-2xl block mb-1">📱</span>
                        <span className="text-sm">Mit Handy scannen</span>
                      </div>
                    )}
                  </button>
                </div>

                {/* Mobile Uploaded Files */}
                {mobileUploadedFiles.length > 0 && !directFile && (
                  <>
                    <div className={`text-center text-sm mb-3 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>— Vom Handy hochgeladen —</div>
                    <div className="space-y-2 max-h-32 overflow-y-auto mb-4">
                      {mobileUploadedFiles.map((file) => (
                        <button
                          key={file.id}
                          onClick={() => { setSelectedMobileFile(file); setDirectFile(null); setSelectedDocumentId(null); setError(null) }}
                          className={`w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all ${
                            selectedMobileFile?.id === file.id
                              ? (isDark ? 'bg-green-500/30 border-2 border-green-400/50' : 'bg-green-100 border-2 border-green-500')
                              : (isDark ? 'bg-white/5 border-2 border-transparent hover:border-white/20' : 'bg-slate-50 border-2 border-transparent hover:border-slate-200')
                          }`}
                        >
                          <span className="text-xl">{file.type.startsWith('image/') ? '🖼️' : '📄'}</span>
                          <div className="flex-1 min-w-0">
                            <p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{file.name}</p>
                            <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(file.size)}</p>
                          </div>
                          {selectedMobileFile?.id === file.id && (
                            <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                          )}
                        </button>
                      ))}
                    </div>
                  </>
                )}

                {/* Stored Documents */}
                {storedDocuments.length > 0 && !directFile && (
                  <>
                    <div className={`text-center text-sm mb-3 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>— oder aus Ihren Dokumenten —</div>
                    <div className="space-y-2 max-h-32 overflow-y-auto">
                      {storedDocuments.map((doc) => (
                        <button
                          key={doc.id}
                          onClick={() => { setSelectedDocumentId(doc.id); setDirectFile(null); setError(null) }}
                          className={`w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all ${
                            selectedDocumentId === doc.id
                              ? (isDark ? 'bg-purple-500/30 border-2 border-purple-400/50' : 'bg-purple-100 border-2 border-purple-500')
                              : (isDark ? 'bg-white/5 border-2 border-transparent hover:border-white/20' : 'bg-slate-50 border-2 border-transparent hover:border-slate-200')
                          }`}
                        >
                          <span className="text-xl">{doc.type === 'application/pdf' ? '📄' : '🖼️'}</span>
                          <div className="flex-1 min-w-0">
                            <p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{doc.name}</p>
                            <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(doc.size)}</p>
                          </div>
                          {selectedDocumentId === doc.id && (
                            <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                          )}
                        </button>
                      ))}
                    </div>
                  </>
                )}
              </div>
            </div>

            {/* Start Button */}
            <div className="flex justify-center">
              <button
                onClick={() => {
                  if (!sessionName.trim()) {
                    alert('Bitte geben Sie einen Session-Namen ein (z.B. "Englisch Klasse 7 - Unit 3")')
                    return
                  }
                  if (!selectedDocumentId && !directFile && !selectedMobileFile) {
                    alert('Bitte wählen Sie ein Dokument aus oder laden Sie eine Datei hoch.')
                    return
                  }
                  startSession()
                }}
                disabled={isCreatingSession}
                className="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl font-semibold text-lg disabled:opacity-50 hover:shadow-xl hover:shadow-purple-500/30 transition-all transform hover:scale-105"
              >
                {isCreatingSession ? 'Verarbeite...' : 'Weiter →'}
              </button>
            </div>
          </div>
        )}

        {/* PDF Page Selection */}
        {session && activeTab === 'pages' && (
          <div className={`${glassCard} rounded-2xl p-6`}>
            <div className="flex items-center justify-between mb-4">
              <h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                PDF-Seiten auswaehlen ({selectedPages.length} von {pdfPageCount - excludedPages.length} ausgewaehlt)
              </h2>
              <div className="flex gap-2">
                {excludedPages.length > 0 && (
                  <button onClick={restoreExcludedPages} className={`px-3 py-1 rounded-lg text-sm ${isDark ? 'bg-orange-500/20 text-orange-300 hover:bg-orange-500/30' : 'bg-orange-100 text-orange-700 hover:bg-orange-200'}`}>
                    {excludedPages.length} ausgeblendet - wiederherstellen
                  </button>
                )}
                <button onClick={selectAllPages} className={`px-3 py-1 rounded-lg text-sm transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
                  Alle
                </button>
                <button onClick={selectNoPages} className={`px-3 py-1 rounded-lg text-sm transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
                  Keine
                </button>
              </div>
            </div>

            <p className={`text-sm mb-4 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
              Klicken Sie auf eine Seite um sie auszuwaehlen. Klicken Sie auf das X um leere Seiten auszublenden.
            </p>

            {isLoadingThumbnails ? (
              <div className="flex items-center justify-center py-12">
                <div className="w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin" />
                <span className={`ml-3 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Lade Seitenvorschau...</span>
              </div>
            ) : (
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
                {pagesThumbnails.map((thumb, idx) => {
                  if (excludedPages.includes(idx)) return null
                  return (
                    <div key={idx} className="relative group">
                      {/* Exclude/Delete Button */}
                      <button
                        onClick={(e) => excludePage(idx, e)}
                        className="absolute top-1 left-1 z-10 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity bg-red-500/80 hover:bg-red-600 text-white"
                        title="Seite ausblenden"
                      >
                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                        </svg>
                      </button>

                      {/* OCR Compare Button */}
                      <button
                        onClick={(e) => { e.stopPropagation(); runOcrComparison(idx); }}
                        className="absolute top-1 right-1 z-10 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/80 hover:bg-blue-600 text-white"
                        title="OCR-Methoden vergleichen"
                      >
                        <svg className="w-3 h-3" 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>
                      </button>

                      <button
                        onClick={() => togglePageSelection(idx)}
                        className={`relative rounded-xl overflow-hidden border-2 transition-all w-full ${
                          selectedPages.includes(idx)
                            ? 'border-purple-500 ring-2 ring-purple-500/50'
                            : (isDark ? 'border-white/20 hover:border-white/40' : 'border-slate-200 hover:border-slate-300')
                        }`}
                      >
                        <img src={thumb} alt={`Seite ${idx + 1}`} className="w-full h-auto" />
                        <div className={`absolute bottom-0 left-0 right-0 py-1 text-center text-xs font-medium ${
                          selectedPages.includes(idx)
                            ? 'bg-purple-500 text-white'
                            : (isDark ? 'bg-black/60 text-white/80' : 'bg-white/90 text-slate-700')
                        }`}>
                          Seite {idx + 1}
                        </div>
                        {selectedPages.includes(idx) && (
                          <div className="absolute top-2 right-2 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center">
                            <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                          </div>
                        )}
                      </button>
                    </div>
                  )
                })}
              </div>
            )}

            <div className="flex justify-center">
              <button
                onClick={processSelectedPages}
                disabled={selectedPages.length === 0 || isExtracting}
                className="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl font-semibold disabled:opacity-50 hover:shadow-xl hover:shadow-purple-500/30 transition-all transform hover:scale-105"
              >
                {isExtracting ? 'Extrahiere Vokabeln...' : `${selectedPages.length} Seiten verarbeiten`}
              </button>
            </div>
          </div>
        )}

        {/* Vocabulary Tab */}
        {session && activeTab === 'vocabulary' && (
          <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
            {/* Left: Vocabulary List (3/5) */}
            <div className={`${glassCard} rounded-2xl p-6 lg:col-span-3`}>
              <div className="flex items-center justify-between mb-4">
                <h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  Vokabeln ({vocabulary.length})
                </h2>
                <div className="flex gap-2">
                  <button onClick={saveVocabulary} className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
                    Speichern
                  </button>
                  <button onClick={() => setActiveTab('worksheet')} className="px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:shadow-lg transition-all">
                    Weiter →
                  </button>
                </div>
              </div>

            {/* Error messages for failed pages */}
            {processingErrors.length > 0 && (
              <div className={`rounded-xl p-4 mb-4 ${isDark ? 'bg-orange-500/20 text-orange-200 border border-orange-500/30' : 'bg-orange-100 text-orange-700 border border-orange-200'}`}>
                <div className="font-medium mb-2">Einige Seiten konnten nicht verarbeitet werden:</div>
                <ul className="text-sm space-y-1">
                  {processingErrors.map((err, idx) => (
                    <li key={idx}>• {err}</li>
                  ))}
                </ul>
              </div>
            )}

            {/* Processing Progress */}
            {currentlyProcessingPage && (
              <div className={`rounded-xl p-4 mb-4 ${isDark ? 'bg-purple-500/20 border border-purple-500/30' : 'bg-purple-100 border border-purple-200'}`}>
                <div className="flex items-center gap-3">
                  <div className={`w-5 h-5 border-2 ${isDark ? 'border-purple-300' : 'border-purple-600'} border-t-transparent rounded-full animate-spin`} />
                  <div>
                    <div className={`font-medium ${isDark ? 'text-purple-200' : 'text-purple-700'}`}>Verarbeite Seite {currentlyProcessingPage}...</div>
                    <div className={`text-sm ${isDark ? 'text-purple-300/70' : 'text-purple-600'}`}>
                      {successfulPages.length > 0 && `${successfulPages.length} Seite(n) fertig • `}
                      {vocabulary.length} Vokabeln bisher
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Success info */}
            {!currentlyProcessingPage && successfulPages.length > 0 && failedPages.length === 0 && (
              <div className={`rounded-xl p-3 mb-4 text-sm ${isDark ? 'bg-green-500/20 text-green-200 border border-green-500/30' : 'bg-green-100 text-green-700 border border-green-200'}`}>
                Alle {successfulPages.length} Seite(n) erfolgreich verarbeitet - {vocabulary.length} Vokabeln insgesamt
              </div>
            )}

            {/* Partial success info */}
            {!currentlyProcessingPage && successfulPages.length > 0 && failedPages.length > 0 && (
              <div className={`rounded-xl p-3 mb-4 text-sm ${isDark ? 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30' : 'bg-yellow-100 text-yellow-700 border border-yellow-200'}`}>
                {successfulPages.length} Seite(n) erfolgreich, {failedPages.length} fehlgeschlagen - {vocabulary.length} Vokabeln extrahiert
              </div>
            )}

            {vocabulary.length === 0 ? (
              <p className={`text-center py-8 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Keine Vokabeln gefunden.</p>
            ) : (
              <div className="flex flex-col" style={{ height: 'calc(100vh - 400px)', minHeight: '300px' }}>
                {/* Fixed Header */}
                <div className={`grid grid-cols-13 gap-2 px-3 py-2 text-sm font-medium border-b ${isDark ? 'border-white/10 text-white/60' : 'border-black/10 text-slate-500'}`} style={{ gridTemplateColumns: 'auto repeat(12, minmax(0, 1fr))' }}>
                  <div className="flex items-center justify-center w-6">
                    <input
                      type="checkbox"
                      checked={vocabulary.length > 0 && vocabulary.every(v => v.selected)}
                      onChange={toggleAllSelection}
                      className="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500 cursor-pointer"
                      title="Alle auswählen"
                    />
                  </div>
                  <div className="col-span-1">S.</div>
                  <div className="col-span-3">Englisch</div>
                  <div className="col-span-4">Deutsch</div>
                  <div className="col-span-3">Beispiel</div>
                  <div className="col-span-1"></div>
                </div>

                {/* Scrollable Content */}
                <div className="flex-1 overflow-y-auto py-2">
                  {/* Insert button at the beginning */}
                  <div className="flex justify-center py-1 group">
                    <button
                      onClick={() => addVocabularyEntry(0)}
                      className={`px-3 py-0.5 rounded-full text-xs flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity ${
                        isDark
                          ? 'bg-purple-500/20 text-purple-300 hover:bg-purple-500/30'
                          : 'bg-purple-100 text-purple-600 hover:bg-purple-200'
                      }`}
                    >
                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                      </svg>
                      Zeile einfügen
                    </button>
                  </div>

                  {vocabulary.map((entry, index) => (
                    <React.Fragment key={entry.id}>
                      {/* Vocabulary row */}
                      <div className={`grid gap-2 px-3 py-2 rounded-xl ${isDark ? 'bg-white/5' : 'bg-black/5'}`} style={{ gridTemplateColumns: 'auto repeat(12, minmax(0, 1fr))' }}>
                        <div className="flex items-center justify-center w-6">
                          <input
                            type="checkbox"
                            checked={entry.selected || false}
                            onChange={() => toggleVocabularySelection(entry.id)}
                            className="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500 cursor-pointer"
                          />
                        </div>
                        <div className={`col-span-1 flex items-center justify-center text-xs font-medium rounded ${isDark ? 'bg-white/10 text-white/60' : 'bg-black/10 text-slate-600'}`}>
                          {entry.source_page || '-'}
                        </div>
                        <input
                          type="text"
                          value={entry.english}
                          onChange={(e) => updateVocabularyEntry(entry.id, 'english', e.target.value)}
                          className={`col-span-3 px-2 py-1 rounded-lg border ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                        />
                        <input
                          type="text"
                          value={entry.german}
                          onChange={(e) => updateVocabularyEntry(entry.id, 'german', e.target.value)}
                          className={`col-span-4 px-2 py-1 rounded-lg border ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                        />
                        <input
                          type="text"
                          value={entry.example_sentence || ''}
                          onChange={(e) => updateVocabularyEntry(entry.id, 'example_sentence', e.target.value)}
                          placeholder="Beispiel"
                          className={`col-span-3 px-2 py-1 rounded-lg border text-sm ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                        />
                        <button onClick={() => deleteVocabularyEntry(entry.id)} className={`col-span-1 p-1 rounded-lg ${isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-100 text-red-500'}`}>
                          <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>

                      {/* Insert button after each row */}
                      <div className="flex justify-center py-1 group">
                        <button
                          onClick={() => addVocabularyEntry(index + 1)}
                          className={`px-3 py-0.5 rounded-full text-xs flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity ${
                            isDark
                              ? 'bg-purple-500/20 text-purple-300 hover:bg-purple-500/30'
                              : 'bg-purple-100 text-purple-600 hover:bg-purple-200'
                          }`}
                        >
                          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                          </svg>
                          Zeile einfügen
                        </button>
                      </div>
                    </React.Fragment>
                  ))}
                </div>

                {/* Add new row button at the end */}
                <button
                  onClick={() => addVocabularyEntry()}
                  className={`w-full py-2 mt-2 rounded-xl border-2 border-dashed flex items-center justify-center gap-2 transition-colors ${
                    isDark
                      ? 'border-white/20 text-white/60 hover:border-purple-400 hover:text-purple-400 hover:bg-purple-500/10'
                      : 'border-black/20 text-slate-500 hover:border-purple-500 hover:text-purple-500 hover:bg-purple-50'
                  }`}
                >
                  <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 Zeile hinzufügen
                </button>

                {/* Footer with scroll hint */}
                <div className={`pt-2 border-t text-center text-sm ${isDark ? 'border-white/10 text-white/50' : 'border-black/10 text-slate-400'}`}>
                  {vocabulary.length} Vokabeln insgesamt
                  {vocabulary.filter(v => v.selected).length > 0 && ` (${vocabulary.filter(v => v.selected).length} ausgewählt)`}
                  {(() => {
                    const pages = [...new Set(vocabulary.map(v => v.source_page).filter(Boolean))].sort((a, b) => (a || 0) - (b || 0))
                    return pages.length > 1 ? ` • Seiten: ${pages.join(', ')}` : ''
                  })()}
                </div>
              </div>
            )}
            </div>

            {/* Right: Original Worksheet Preview (2/5) */}
            <div className={`${glassCard} rounded-2xl p-6 lg:col-span-2`}>
              <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                Original-Arbeitsblatt
              </h2>
              <div className="flex flex-col" style={{ height: 'calc(100vh - 400px)', minHeight: '300px' }}>
                {pagesThumbnails.length > 0 ? (
                  <div className="flex-1 overflow-y-auto space-y-4">
                    {pagesThumbnails.map((thumb, idx) => (
                      <div key={idx} className={`relative rounded-xl overflow-hidden border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
                        <div className={`absolute top-2 left-2 px-2 py-1 rounded-lg text-xs font-medium ${isDark ? 'bg-black/50 text-white' : 'bg-white/90 text-slate-700'}`}>
                          Seite {idx + 1}
                        </div>
                        <img
                          src={thumb}
                          alt={`Seite ${idx + 1}`}
                          className="w-full h-auto"
                        />
                      </div>
                    ))}
                  </div>
                ) : uploadedImage ? (
                  <div className="flex-1 overflow-y-auto">
                    <div className={`relative rounded-xl overflow-hidden border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
                      <img
                        src={uploadedImage}
                        alt="Hochgeladenes Arbeitsblatt"
                        className="w-full h-auto"
                      />
                    </div>
                  </div>
                ) : (
                  <div className={`flex-1 flex items-center justify-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                    <div className="text-center">
                      <svg className="w-16 h-16 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                      </svg>
                      <p className="text-sm">Kein Bild verfügbar</p>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {/* Worksheet Tab */}
        {session && activeTab === 'worksheet' && (
          <div className={`${glassCard} rounded-2xl p-6`}>
            {/* Step 1: Format Selection */}
            <div className="mb-8">
              <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                1. Vorlage waehlen
              </h2>
              <div className="grid grid-cols-2 gap-4">
                {worksheetFormats.map((format) => (
                  <button
                    key={format.id}
                    onClick={() => setSelectedFormat(format.id)}
                    className={`p-5 rounded-xl border text-left transition-all ${
                      selectedFormat === format.id
                        ? (isDark ? 'border-purple-400/50 bg-purple-500/20 ring-2 ring-purple-500/50' : 'border-purple-500 bg-purple-50 ring-2 ring-purple-500/30')
                        : (isDark ? 'border-white/20 hover:border-white/40' : 'border-slate-200 hover:border-slate-300')
                    }`}
                  >
                    <div className="flex items-start gap-3">
                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${
                        selectedFormat === format.id
                          ? (isDark ? 'bg-purple-500/30' : 'bg-purple-200')
                          : (isDark ? 'bg-white/10' : 'bg-slate-100')
                      }`}>
                        {format.id === 'standard' ? (
                          <svg className={`w-5 h-5 ${selectedFormat === format.id ? 'text-purple-400' : (isDark ? 'text-white/60' : 'text-slate-500')}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
                        ) : (
                          <svg className={`w-5 h-5 ${selectedFormat === format.id ? 'text-purple-400' : (isDark ? 'text-white/60' : 'text-slate-500')}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                          </svg>
                        )}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center justify-between">
                          <span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{format.label}</span>
                          {selectedFormat === format.id && (
                            <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                          )}
                        </div>
                        <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{format.description}</p>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            </div>

            {/* Step 2: Configuration based on format */}
            <div className="mb-6">
              <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                2. Arbeitsblatt konfigurieren
              </h2>

              {/* Title (for both formats) */}
              <div className="mb-6">
                <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Titel</label>
                <input
                  type="text"
                  value={worksheetTitle}
                  onChange={(e) => setWorksheetTitle(e.target.value)}
                  placeholder="z.B. Vokabeln Unit 3"
                  className={`w-full px-4 py-3 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}
                />
              </div>

              {/* Standard format options */}
              {selectedFormat === 'standard' && (
                <>
                  <div className="mb-6">
                    <label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Arbeitsblatt-Typen</label>
                    <div className="grid grid-cols-2 gap-3">
                      {worksheetTypes.map((type) => (
                        <button
                          key={type.id}
                          onClick={() => toggleWorksheetType(type.id)}
                          className={`p-4 rounded-xl border text-left transition-all ${
                            selectedTypes.includes(type.id)
                              ? (isDark ? 'border-purple-400/50 bg-purple-500/20' : 'border-purple-500 bg-purple-50')
                              : (isDark ? 'border-white/20 hover:border-white/40' : 'border-slate-200 hover:border-slate-300')
                          }`}
                        >
                          <div className="flex items-center justify-between">
                            <span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{type.label}</span>
                            {selectedTypes.includes(type.id) && <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>}
                          </div>
                          <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{type.description}</p>
                        </button>
                      ))}
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-6 mb-6">
                    <div>
                      <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Zeilenhoehe</label>
                      <select value={lineHeight} onChange={(e) => setLineHeight(e.target.value)} className={`w-full px-4 py-3 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}>
                        <option value="normal">Normal</option>
                        <option value="large">Gross</option>
                        <option value="extra-large">Extra gross</option>
                      </select>
                    </div>
                    <div className="flex items-center">
                      <label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
                        <input type="checkbox" checked={includeSolutions} onChange={(e) => setIncludeSolutions(e.target.checked)} className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500" />
                        <span>Loesungsblatt erstellen</span>
                      </label>
                    </div>
                  </div>
                </>
              )}

              {/* NRU format options */}
              {selectedFormat === 'nru' && (
                <div className="space-y-4">
                  <div className={`p-4 rounded-xl ${isDark ? 'bg-indigo-500/20 border border-indigo-500/30' : 'bg-indigo-50 border border-indigo-200'}`}>
                    <h4 className={`font-medium mb-2 ${isDark ? 'text-indigo-200' : 'text-indigo-700'}`}>NRU-Format Uebersicht:</h4>
                    <ul className={`text-sm space-y-1 ${isDark ? 'text-indigo-200/80' : 'text-indigo-600'}`}>
                      <li>• <strong>Vokabeln:</strong> 3-Spalten-Tabelle (Englisch | Deutsch leer | Korrektur leer)</li>
                      <li>• <strong>Lernsaetze:</strong> Deutscher Satz + 2 leere Zeilen fuer englische Uebersetzung</li>
                      <li>• Pro gescannter Seite werden 2 Arbeitsblatt-Seiten erzeugt</li>
                    </ul>
                  </div>

                  <div className="flex items-center">
                    <label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
                      <input type="checkbox" checked={includeSolutions} onChange={(e) => setIncludeSolutions(e.target.checked)} className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500" />
                      <span>Loesungsblatt erstellen (mit deutschen Uebersetzungen)</span>
                    </label>
                  </div>
                </div>
              )}
            </div>

            <button
              onClick={generateWorksheet}
              disabled={(selectedFormat === 'standard' && selectedTypes.length === 0) || isGenerating}
              className="w-full py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl font-semibold disabled:opacity-50 hover:shadow-xl hover:shadow-purple-500/30 transition-all"
            >
              {isGenerating ? 'Generiere PDF...' : `${selectedFormat === 'nru' ? 'NRU-Arbeitsblatt' : 'Arbeitsblatt'} generieren`}
            </button>
          </div>
        )}

        {/* Export Tab */}
        {session && activeTab === 'export' && (
          <div className={`${glassCard} rounded-2xl p-6`}>
            <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>PDF herunterladen</h2>

            {worksheetId ? (
              <div className="space-y-4">
                <div className={`p-4 rounded-xl ${isDark ? 'bg-green-500/20 border border-green-500/30' : 'bg-green-100 border border-green-200'}`}>
                  <div className="flex items-center gap-3">
                    <svg className="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    <span className={`font-medium ${isDark ? 'text-green-200' : 'text-green-700'}`}>Arbeitsblatt erfolgreich generiert!</span>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <button onClick={() => downloadPDF('worksheet')} className={`${glassCard} p-6 rounded-xl text-left transition-all hover:shadow-lg ${isDark ? 'hover:border-purple-400/50' : 'hover:border-purple-500'}`}>
                    <div className={`w-12 h-12 mb-3 rounded-xl flex items-center justify-center ${isDark ? 'bg-purple-500/30' : 'bg-purple-100'}`}>
                      <svg className={`w-6 h-6 ${isDark ? 'text-purple-300' : 'text-purple-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                    <h3 className={`font-semibold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Arbeitsblatt</h3>
                    <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>PDF zum Ausdrucken</p>
                  </button>

                  {includeSolutions && (
                    <button onClick={() => downloadPDF('solution')} className={`${glassCard} p-6 rounded-xl text-left transition-all hover:shadow-lg ${isDark ? 'hover:border-green-400/50' : 'hover:border-green-500'}`}>
                      <div className={`w-12 h-12 mb-3 rounded-xl flex items-center justify-center ${isDark ? 'bg-green-500/30' : 'bg-green-100'}`}>
                        <svg className={`w-6 h-6 ${isDark ? 'text-green-300' : 'text-green-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      </div>
                      <h3 className={`font-semibold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Loesungsblatt</h3>
                      <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>PDF mit Loesungen</p>
                    </button>
                  )}
                </div>

                <button onClick={resetSession} className={`w-full py-3 rounded-xl border font-medium transition-colors ${isDark ? 'border-white/20 text-white/80 hover:bg-white/10' : 'border-slate-300 text-slate-700 hover:bg-slate-50'}`}>
                  Neues Arbeitsblatt erstellen
                </button>
              </div>
            ) : (
              <p className={`text-center py-12 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Noch kein Arbeitsblatt generiert.</p>
            )}
          </div>
        )}

        {/* Tab Navigation (when session exists) */}
        {session && activeTab !== 'pages' && (
          <div className={`mt-6 border-t pt-4 ${isDark ? 'border-white/10' : 'border-black/5'}`}>
            <div className="flex justify-center gap-2">
              {['vocabulary', 'worksheet', 'export'].map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab as TabId)}
                  className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
                    activeTab === tab
                      ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg'
                      : (isDark ? 'bg-white/10 text-white/80 hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200')
                  }`}
                >
                  {tab === 'vocabulary' ? 'Vokabeln' : tab === 'worksheet' ? 'Arbeitsblatt' : 'Export'}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* 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)}
              onFilesChanged={(files) => {
                setMobileUploadedFiles(files)
                if (files.length > 0) {
                  // Always select the latest uploaded file
                  setSelectedMobileFile(files[files.length - 1])
                  setDirectFile(null)
                  setSelectedDocumentId(null)
                }
              }}
            />
          </div>
        </div>
      )}

      {/* OCR Comparison Modal */}
      {showOcrComparison && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
          <div className={`relative w-full max-w-6xl max-h-[90vh] overflow-auto rounded-3xl ${glassCard} p-6`}>
            {/* Header */}
            <div className="flex items-center justify-between mb-6">
              <div>
                <h2 className={`text-xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  OCR-Methoden Vergleich
                </h2>
                <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                  Seite {ocrComparePageIndex !== null ? ocrComparePageIndex + 1 : '-'}
                </p>
              </div>
              <button
                onClick={() => setShowOcrComparison(false)}
                className={`p-2 rounded-xl ${isDark ? 'hover:bg-white/10 text-white' : 'hover:bg-black/5 text-slate-500'}`}
              >
                <svg className="w-6 h-6" 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>

            {/* Loading State */}
            {isComparingOcr && (
              <div className="flex flex-col items-center justify-center py-12">
                <div className="w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mb-4" />
                <p className={isDark ? 'text-white/60' : 'text-slate-500'}>
                  Vergleiche OCR-Methoden... (kann 1-2 Minuten dauern)
                </p>
              </div>
            )}

            {/* Error State */}
            {ocrCompareError && (
              <div className={`p-4 rounded-xl ${isDark ? 'bg-red-500/20 text-red-300' : 'bg-red-100 text-red-700'}`}>
                Fehler: {ocrCompareError}
              </div>
            )}

            {/* Results */}
            {ocrCompareResult && !isComparingOcr && (
              <div className="space-y-6">
                {/* Method Results Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {Object.entries(ocrCompareResult.methods || {}).map(([key, method]: [string, any]) => (
                    <div
                      key={key}
                      className={`p-4 rounded-2xl ${
                        ocrCompareResult.recommendation?.best_method === key
                          ? (isDark ? 'bg-green-500/20 border border-green-500/50' : 'bg-green-100 border border-green-300')
                          : (isDark ? 'bg-white/5 border border-white/10' : 'bg-white/50 border border-black/10')
                      }`}
                    >
                      <div className="flex items-center justify-between mb-3">
                        <h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                          {method.name}
                        </h3>
                        {ocrCompareResult.recommendation?.best_method === key && (
                          <span className="px-2 py-1 text-xs font-medium bg-green-500 text-white rounded-full">
                            Beste
                          </span>
                        )}
                      </div>

                      {method.success ? (
                        <>
                          <div className={`text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                            <span className="font-medium">{method.vocabulary_count}</span> Vokabeln in <span className="font-medium">{method.duration_seconds}s</span>
                          </div>

                          {method.vocabulary && method.vocabulary.length > 0 && (
                            <div className={`max-h-48 overflow-y-auto rounded-xl p-2 ${isDark ? 'bg-black/20' : 'bg-white/50'}`}>
                              {method.vocabulary.slice(0, 10).map((v: any, idx: number) => (
                                <div key={idx} className={`text-sm py-1 border-b last:border-0 ${isDark ? 'border-white/10 text-white/80' : 'border-black/5 text-slate-700'}`}>
                                  <span className="font-medium">{v.english}</span> = {v.german}
                                </div>
                              ))}
                              {method.vocabulary.length > 10 && (
                                <div className={`text-xs mt-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                                  + {method.vocabulary.length - 10} weitere...
                                </div>
                              )}
                            </div>
                          )}
                        </>
                      ) : (
                        <div className={`text-sm ${isDark ? 'text-red-300' : 'text-red-600'}`}>
                          {method.error || 'Fehler'}
                        </div>
                      )}
                    </div>
                  ))}
                </div>

                {/* Comparison Summary */}
                {ocrCompareResult.comparison && (
                  <div className={`p-4 rounded-2xl ${isDark ? 'bg-blue-500/20 border border-blue-500/30' : 'bg-blue-100 border border-blue-200'}`}>
                    <h3 className={`font-semibold mb-3 ${isDark ? 'text-blue-300' : 'text-blue-900'}`}>
                      Uebereinstimmung
                    </h3>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                      <div>
                        <span className={isDark ? 'text-blue-200' : 'text-blue-700'}>Von allen erkannt:</span>
                        <span className="ml-2 font-bold">{ocrCompareResult.comparison.found_by_all_methods?.length || 0}</span>
                      </div>
                      <div>
                        <span className={isDark ? 'text-blue-200' : 'text-blue-700'}>Nur teilweise:</span>
                        <span className="ml-2 font-bold">{ocrCompareResult.comparison.found_by_some_methods?.length || 0}</span>
                      </div>
                      <div>
                        <span className={isDark ? 'text-blue-200' : 'text-blue-700'}>Gesamt einzigartig:</span>
                        <span className="ml-2 font-bold">{ocrCompareResult.comparison.total_unique_vocabulary || 0}</span>
                      </div>
                      <div>
                        <span className={isDark ? 'text-blue-200' : 'text-blue-700'}>Uebereinstimmung:</span>
                        <span className="ml-2 font-bold">{Math.round((ocrCompareResult.comparison.agreement_rate || 0) * 100)}%</span>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      {/* CSS for animations */}
      <style jsx>{`
        @keyframes blob {
          0% { transform: translate(0px, 0px) scale(1); }
          33% { transform: translate(30px, -50px) scale(1.1); }
          66% { transform: translate(-20px, 20px) scale(0.9); }
          100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob {
          animation: blob 7s infinite;
        }
        .animation-delay-2000 {
          animation-delay: 2s;
        }
        .animation-delay-4000 {
          animation-delay: 4s;
        }
      `}</style>
      </div>
    </div>
  )
}