'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
  extras?: Record<string, string>
}

// Dynamic column definition (per source page)
interface ExtraColumn {
  key: string
  label: string
}

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 [showFullPreview, setShowFullPreview] = useState(false)
  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[]>([])

  // Dynamic extra columns per source page (key: page number, value: extra columns)
  const [pageExtraColumns, setPageExtraColumns] = useState<Record<number, ExtraColumn[]>>({})

  // 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')
  const [ipaMode, setIpaMode] = useState<'auto' | 'en' | 'de' | 'all' | 'none'>('none')
  const [syllableMode, setSyllableMode] = useState<'auto' | 'en' | 'de' | 'all' | 'none'>('none')

  // 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)
    setSelectedMobileFile(null)

    if (file.type.startsWith('image/')) {
      const reader = new FileReader()
      reader.onload = (ev) => {
        setDirectFilePreview(ev.target?.result as string)
      }
      reader.readAsDataURL(file)
    } else if (file.type === 'application/pdf') {
      setDirectFilePreview(URL.createObjectURL(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 hochgeladen...')

        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)
        setSelectedPages(Array.from({ length: pdfInfo.page_count }, (_, i) => i))

        // Switch to pages tab immediately so user sees progress
        setActiveTab('pages')
        setExtractionStatus(`${pdfInfo.page_count} Seiten erkannt. Vorschau wird geladen...`)
        setIsLoadingThumbnails(true)

        // Load thumbnails progressively
        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)
        setExtractionStatus(`${pdfInfo.page_count} Seiten bereit. 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}?ipa_mode=${ipaMode}&syllable_mode=${syllableMode}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ocr_prompts: ocrPrompts }),
      })

      if (!res.ok) {
        const errBody = await res.json().catch(() => ({}))
        const detail = errBody.detail || `HTTP ${res.status}`
        return { success: false, vocabulary: [], error: `Seite ${pageIndex + 1}: ${detail}` }
      }

      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.`)
    }

    // Reload thumbnails for processed pages (server may have rotated them)
    if (successful.length > 0 && session) {
      const updatedThumbs = [...pagesThumbnails]
      for (const pageNum of successful) {
        const idx = pageNum - 1  // successful stores 1-indexed
        try {
          const thumbRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/pdf-thumbnail/${idx}?hires=true&t=${Date.now()}`)
          if (thumbRes.ok) {
            const blob = await thumbRes.blob()
            // Revoke old blob URL to avoid memory leaks
            if (updatedThumbs[idx]) URL.revokeObjectURL(updatedThumbs[idx])
            updatedThumbs[idx] = URL.createObjectURL(blob)
          }
        } catch (e) {
          console.error(`Failed to refresh thumbnail for page ${pageNum}`)
        }
      }
      setPagesThumbnails(updatedThumbs)
    }

    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: string, value: string) => {
    setVocabulary(prev => prev.map(v => {
      if (v.id !== id) return v
      // Check if it's a base field or an extra column
      if (field === 'english' || field === 'german' || field === 'example_sentence' || field === 'word_type') {
        return { ...v, [field]: value }
      }
      // Extra column
      return { ...v, extras: { ...(v.extras || {}), [field]: value } }
    }))
  }

  // Add a custom column for a specific source page (0 = all pages)
  const addExtraColumn = (sourcePage: number) => {
    const label = prompt('Spaltenname:')
    if (!label || !label.trim()) return
    const key = `extra_${Date.now()}`
    setPageExtraColumns(prev => ({
      ...prev,
      [sourcePage]: [...(prev[sourcePage] || []), { key, label: label.trim() }],
    }))
  }

  // Remove a custom column
  const removeExtraColumn = (sourcePage: number, key: string) => {
    setPageExtraColumns(prev => ({
      ...prev,
      [sourcePage]: (prev[sourcePage] || []).filter(c => c.key !== key),
    }))
    // Clean up extras from entries
    setVocabulary(prev => prev.map(v => {
      if (!v.extras || !(key in v.extras)) return v
      const { [key]: _, ...rest } = v.extras
      return { ...v, extras: rest }
    }))
  }

  // Get extra columns for a given source page (page-specific + global)
  const getExtraColumnsForPage = (sourcePage: number): ExtraColumn[] => {
    const global = pageExtraColumns[0] || []
    const pageSpecific = pageExtraColumns[sourcePage] || []
    return [...global, ...pageSpecific]
  }

  // Get ALL extra columns across all pages (for unified table header)
  const getAllExtraColumns = (): ExtraColumn[] => {
    const seen = new Set<string>()
    const result: ExtraColumn[] = []
    for (const cols of Object.values(pageExtraColumns)) {
      for (const col of cols) {
        if (!seen.has(col.key)) {
          seen.add(col.key)
          result.push(col)
        }
      }
    }
    return result
  }

  // 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)
    setShowFullPreview(false)
    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
                      {session && (
                        <span className={`ml-2 font-mono text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                          Session: {session.id.slice(0, 8)}
                        </span>
                      )}
                    </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 w-full 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>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>Vorschau pruefen und Session benennen</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>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'}`}>4</span>
                  <span>KI extrahiert Vokabeln — pruefen, korrigieren, 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>

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

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

              <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 && !selectedMobileFile && (
                <>
                  <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); setSelectedMobileFile(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>

            {/* Step 2: Preview + Session Name (shown when document selected) */}
            {(directFile || selectedMobileFile || selectedDocumentId) && (
              <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
                {/* Document Preview */}
                <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'}`}>
                      Vorschau
                    </h2>
                    <button
                      onClick={() => setShowFullPreview(true)}
                      className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
                        isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-700'
                      }`}
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
                      </svg>
                      Originalgroesse
                    </button>
                  </div>
                  <div className={`max-h-[60vh] overflow-auto rounded-xl border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
                    {/* Image preview from file */}
                    {directFile?.type.startsWith('image/') && directFilePreview && (
                      <img src={directFilePreview} alt="Vorschau" className="w-full h-auto" />
                    )}
                    {/* PDF preview from file */}
                    {directFile?.type === 'application/pdf' && directFilePreview && (
                      <iframe src={directFilePreview} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
                    )}
                    {/* Mobile file preview */}
                    {selectedMobileFile && !directFile && (
                      selectedMobileFile.type.startsWith('image/')
                        ? <img src={selectedMobileFile.dataUrl} alt="Vorschau" className="w-full h-auto" />
                        : <iframe src={selectedMobileFile.dataUrl} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
                    )}
                    {/* Stored document preview */}
                    {selectedDocumentId && !directFile && !selectedMobileFile && (() => {
                      const doc = storedDocuments.find(d => d.id === selectedDocumentId)
                      if (!doc?.url) return <p className={`p-8 text-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Keine Vorschau verfuegbar</p>
                      return doc.type.startsWith('image/')
                        ? <img src={doc.url} alt="Vorschau" className="w-full h-auto" />
                        : <iframe src={doc.url} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
                    })()}
                  </div>
                </div>

                {/* Session Name + Start */}
                <div className={`${glassCard} rounded-2xl p-6 lg:col-span-2 flex flex-col`}>
                  <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    2. 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 mb-4`}
                    autoFocus
                  />
                  <p className={`text-sm mb-6 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
                    Benennen Sie die Session z.B. nach dem Schulbuch-Kapitel, damit Sie sie spaeter wiederfinden.
                  </p>
                  <div className="flex-1" />
                  <button
                    onClick={() => {
                      if (!sessionName.trim()) {
                        setError('Bitte geben Sie einen Session-Namen ein (z.B. "Englisch Klasse 7 - Unit 3")')
                        return
                      }
                      startSession()
                    }}
                    disabled={isCreatingSession || !sessionName.trim()}
                    className="w-full px-6 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>
            )}
          </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' && (() => {
            const extras = getAllExtraColumns()
            const baseCols = 3 + extras.length // english, german, example + extras
            const gridCols = `14px 32px 36px repeat(${baseCols}, 1fr) 32px`
            return (
          <div className="flex flex-col lg:flex-row gap-4" style={{ height: 'calc(100vh - 240px)', minHeight: '500px' }}>
            {/* Left: Original pages — full quality */}
            <div className={`${glassCard} rounded-2xl p-4 lg:w-1/3 flex flex-col overflow-hidden`}>
              <h2 className={`text-sm font-semibold mb-3 flex-shrink-0 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
                Original ({(() => { const pp = selectedPages.length > 0 ? selectedPages : [...new Set(vocabulary.map(v => (v.source_page || 1) - 1))]; return pp.length; })()} Seiten)
              </h2>
              <div className="flex-1 overflow-y-auto space-y-3">
                {(() => {
                  const processedPageIndices = selectedPages.length > 0
                    ? selectedPages
                    : [...new Set(vocabulary.map(v => (v.source_page || 1) - 1))].sort((a, b) => a - b)

                  const apiBase = getApiBase()
                  const pagesToShow = processedPageIndices
                    .filter(idx => idx >= 0)
                    .map(idx => ({
                      idx,
                      src: session ? `${apiBase}/api/v1/vocab/sessions/${session.id}/pdf-page-image/${idx}` : null,
                    }))
                    .filter(t => t.src !== null) as { idx: number; src: string }[]

                  if (pagesToShow.length > 0) {
                    return pagesToShow.map(({ idx, src }) => (
                      <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-0.5 rounded-lg text-xs font-medium z-10 ${isDark ? 'bg-black/60 text-white' : 'bg-white/90 text-slate-700'}`}>
                          S. {idx + 1}
                        </div>
                        <img src={src} alt={`Seite ${idx + 1}`} className="w-full h-auto" />
                      </div>
                    ))
                  }
                  if (uploadedImage) {
                    return (
                      <div className={`relative rounded-xl overflow-hidden border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
                        <img src={uploadedImage} alt="Arbeitsblatt" className="w-full h-auto" />
                      </div>
                    )
                  }
                  return (
                    <div className={`flex-1 flex items-center justify-center py-12 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                      <div className="text-center">
                        <svg className="w-12 h-12 mx-auto mb-2 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-xs">Kein Bild verfuegbar</p>
                      </div>
                    </div>
                  )
                })()}
              </div>
            </div>

            {/* Right: Vocabulary table (2/3 width) */}
            <div className={`${glassCard} rounded-2xl p-4 lg:w-2/3 flex flex-col overflow-hidden`}>
              <div className="flex items-center justify-between mb-3 flex-shrink-0">
                <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-3 mb-3 flex-shrink-0 ${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-1 text-sm">Einige Seiten konnten nicht verarbeitet werden:</div>
                <ul className="text-xs space-y-0.5">
                  {processingErrors.map((err, idx) => (
                    <li key={idx}>• {err}</li>
                  ))}
                </ul>
              </div>
            )}

            {/* Processing Progress */}
            {currentlyProcessingPage && (
              <div className={`rounded-xl p-3 mb-3 flex-shrink-0 ${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-4 h-4 border-2 ${isDark ? 'border-purple-300' : 'border-purple-600'} border-t-transparent rounded-full animate-spin`} />
                  <div>
                    <div className={`text-sm font-medium ${isDark ? 'text-purple-200' : 'text-purple-700'}`}>Verarbeite Seite {currentlyProcessingPage}...</div>
                    <div className={`text-xs ${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-2 mb-3 text-xs flex-shrink-0 ${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-2 mb-3 text-xs flex-shrink-0 ${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 flex-1 overflow-hidden">
                {/* Fixed Header */}
                <div className={`flex-shrink-0 grid gap-1 px-2 py-2 text-sm font-medium border-b items-center ${isDark ? 'border-white/10 text-white/60' : 'border-black/10 text-slate-500'}`} style={{ gridTemplateColumns: gridCols }}>
                  <div>{/* insert-triangle spacer */}</div>
                  <div className="flex items-center justify-center">
                    <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 auswaehlen"
                    />
                  </div>
                  <div>S.</div>
                  <div>Englisch</div>
                  <div>Deutsch</div>
                  <div>Beispiel</div>
                  {extras.map(col => (
                    <div key={col.key} className="flex items-center gap-1 group">
                      <span className="truncate">{col.label}</span>
                      <button
                        onClick={() => {
                          const page = Object.entries(pageExtraColumns).find(([, cols]) => cols.some(c => c.key === col.key))
                          if (page) removeExtraColumn(Number(page[0]), col.key)
                        }}
                        className={`opacity-0 group-hover:opacity-100 transition-opacity ${isDark ? 'text-red-400 hover:text-red-300' : 'text-red-500 hover:text-red-600'}`}
                        title="Spalte entfernen"
                      >
                        <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>
                    </div>
                  ))}
                  <div className="flex items-center justify-center">
                    <button
                      onClick={() => addExtraColumn(0)}
                      className={`p-0.5 rounded transition-colors ${isDark ? 'hover:bg-white/10 text-white/40 hover:text-white/70' : 'hover:bg-slate-200 text-slate-400 hover:text-slate-600'}`}
                      title="Spalte hinzufuegen"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                    </button>
                  </div>
                </div>

                {/* Scrollable Content */}
                <div className="flex-1 overflow-y-auto">
                  {vocabulary.map((entry, index) => (
                    <React.Fragment key={entry.id}>
                      {/* Vocabulary row */}
                      <div className={`grid gap-1 px-2 py-1 items-center ${isDark ? 'hover:bg-white/5' : 'hover:bg-black/5'}`} style={{ gridTemplateColumns: gridCols }}>
                        {/* Insert triangle */}
                        <button
                          onClick={() => addVocabularyEntry(index)}
                          className={`w-3.5 h-3.5 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity ${isDark ? 'text-purple-400' : 'text-purple-500'}`}
                          title="Zeile einfuegen"
                        >
                          <svg className="w-2.5 h-2.5" viewBox="0 0 10 10" fill="currentColor"><polygon points="0,0 10,5 0,10" /></svg>
                        </button>
                        <div className="flex items-center justify-center">
                          <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={`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={`px-2 py-1 rounded-lg border text-sm min-w-0 ${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={`px-2 py-1 rounded-lg border text-sm min-w-0 ${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={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                        />
                        {extras.map(col => (
                          <input
                            key={col.key}
                            type="text"
                            value={(entry.extras && entry.extras[col.key]) || ''}
                            onChange={(e) => updateVocabularyEntry(entry.id, col.key, e.target.value)}
                            placeholder={col.label}
                            className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                          />
                        ))}
                        <button onClick={() => deleteVocabularyEntry(entry.id)} className={`p-1 rounded-lg ${isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-100 text-red-500'}`}>
                          <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>
                    </React.Fragment>
                  ))}
                  {/* Final insert triangle after last row */}
                  <div className="px-2 py-1">
                    <button
                      onClick={() => addVocabularyEntry()}
                      className={`w-3.5 h-3.5 flex items-center justify-center opacity-30 hover:opacity-100 transition-opacity ${isDark ? 'text-purple-400' : 'text-purple-500'}`}
                      title="Zeile am Ende einfuegen"
                    >
                      <svg className="w-2.5 h-2.5" viewBox="0 0 10 10" fill="currentColor"><polygon points="0,0 10,5 0,10" /></svg>
                    </button>
                  </div>
                </div>

                {/* Footer */}
                <div className={`flex-shrink-0 pt-2 border-t flex items-center justify-between text-xs ${isDark ? 'border-white/10 text-white/50' : 'border-black/10 text-slate-400'}`}>
                  <span>
                    {vocabulary.length} Vokabeln
                    {vocabulary.filter(v => v.selected).length > 0 && ` (${vocabulary.filter(v => v.selected).length} ausgewaehlt)`}
                    {(() => {
                      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(', ')}` : ''
                    })()}
                  </span>
                  <button
                    onClick={() => addVocabularyEntry()}
                    className={`px-3 py-1 rounded-lg text-xs flex items-center gap-1 transition-colors ${
                      isDark
                        ? 'bg-white/10 hover:bg-white/20 text-white/70'
                        : 'bg-slate-100 hover:bg-slate-200 text-slate-600'
                    }`}
                  >
                    <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
                  </button>
                </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>

            {/* OCR display options */}
            <div className={`p-4 rounded-xl border ${isDark ? 'bg-white/5 border-white/10' : 'bg-gray-50 border-gray-200'} space-y-3`}>
              <h4 className={`text-sm font-medium ${isDark ? 'text-white/70' : 'text-slate-600'}`}>Anzeigeoptionen</h4>
              <div className="flex flex-col gap-3">
                <div>
                  <label className={`block text-sm mb-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Lautschrift (IPA)</label>
                  <select
                    value={ipaMode}
                    onChange={(e) => setIpaMode(e.target.value as typeof ipaMode)}
                    className={`w-full px-3 py-2 rounded-lg border text-sm ${isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-gray-200 text-slate-900'}`}
                  >
                    <option value="none">Aus</option>
                    <option value="auto">Auto (erkannte EN-Woerter)</option>
                    <option value="en">Nur Englisch</option>
                    <option value="de">Nur Deutsch</option>
                    <option value="all">Alle (EN + DE)</option>
                  </select>
                </div>
                <div>
                  <label className={`block text-sm mb-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Silbentrennung</label>
                  <select
                    value={syllableMode}
                    onChange={(e) => setSyllableMode(e.target.value as typeof syllableMode)}
                    className={`w-full px-3 py-2 rounded-lg border text-sm ${isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-gray-200 text-slate-900'}`}
                  >
                    <option value="none">Aus</option>
                    <option value="auto">Original (nur wo im Scan vorhanden)</option>
                    <option value="en">Nur Englisch</option>
                    <option value="de">Nur Deutsch</option>
                    <option value="all">Alle</option>
                  </select>
                </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>

      {/* Fullscreen Preview Modal */}
      {showFullPreview && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center" onClick={() => setShowFullPreview(false)}>
          <button
            onClick={() => setShowFullPreview(false)}
            className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white z-10 transition-colors"
          >
            <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 className="max-w-[95vw] max-h-[95vh] overflow-auto" onClick={(e) => e.stopPropagation()}>
            {directFile?.type.startsWith('image/') && directFilePreview && (
              <img src={directFilePreview} alt="Original" className="max-w-none" />
            )}
            {directFile?.type === 'application/pdf' && directFilePreview && (
              <iframe src={directFilePreview} className="border-0 rounded-xl bg-white" style={{ width: '90vw', height: '90vh' }} />
            )}
            {selectedMobileFile && !directFile && (
              selectedMobileFile.type.startsWith('image/')
                ? <img src={selectedMobileFile.dataUrl} alt="Original" className="max-w-none" />
                : <iframe src={selectedMobileFile.dataUrl} className="border-0 rounded-xl bg-white" style={{ width: '90vw', height: '90vh' }} />
            )}
            {selectedDocumentId && !directFile && !selectedMobileFile && (() => {
              const doc = storedDocuments.find(d => d.id === selectedDocumentId)
              if (!doc?.url) return null
              return doc.type.startsWith('image/')
                ? <img src={doc.url} alt="Original" className="max-w-none" />
                : <iframe src={doc.url} className="border-0 rounded-xl bg-white" style={{ width: '90vw', height: '90vh' }} />
            })()}
          </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>
  )
}
