'use client'

import { useState, useEffect, useCallback } from 'react'
import { useRouter } from 'next/navigation'
import { useTheme } from '@/lib/ThemeContext'
import { Sidebar } from '@/components/Sidebar'
import { ThemeToggle } from '@/components/ThemeToggle'
import { LanguageDropdown } from '@/components/LanguageDropdown'
import { QRCodeUpload, UploadedFile } from '@/components/QRCodeUpload'

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

/**
 * Worksheet Cleanup Page - Apple Weather Dashboard Style
 *
 * Design principles:
 * - Dark gradient background
 * - Ultra-translucent glass cards (~8% opacity)
 * - White text, monochrome palette
 * - Step-by-step cleanup wizard
 */

// =============================================================================
// GLASS CARD - Ultra Transparent
// =============================================================================

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

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

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

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

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

// =============================================================================
// PROGRESS RING
// =============================================================================

interface ProgressRingProps {
  progress: number
  size?: number
  strokeWidth?: number
  label: string
  value: string
  color?: string
}

function ProgressRing({
  progress,
  size = 80,
  strokeWidth = 6,
  label,
  value,
  color = '#a78bfa'
}: ProgressRingProps) {
  const radius = (size - strokeWidth) / 2
  const circumference = radius * 2 * Math.PI
  const offset = circumference - (progress / 100) * circumference

  return (
    <div className="flex flex-col items-center">
      <div className="relative" style={{ width: size, height: size }}>
        <svg className="transform -rotate-90" width={size} height={size}>
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            stroke="rgba(255, 255, 255, 0.1)"
            strokeWidth={strokeWidth}
          />
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            stroke={color}
            strokeWidth={strokeWidth}
            strokeDasharray={circumference}
            strokeDashoffset={offset}
            strokeLinecap="round"
            style={{ transition: 'stroke-dashoffset 0.5s ease' }}
          />
        </svg>
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="text-lg font-bold text-white">{value}</span>
        </div>
      </div>
      <span className="mt-2 text-xs text-white/50">{label}</span>
    </div>
  )
}

// =============================================================================
// TYPES
// =============================================================================

interface PreviewResult {
  has_handwriting: boolean
  confidence: number
  handwriting_ratio: number
  image_width: number
  image_height: number
  estimated_times_ms: {
    detection: number
    inpainting: number
    reconstruction: number
    total: number
  }
}

interface PipelineResult {
  success: boolean
  handwriting_detected: boolean
  handwriting_removed: boolean
  layout_reconstructed: boolean
  cleaned_image_base64?: string
  fabric_json?: any
  metadata: any
}

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

export default function WorksheetCleanupPage() {
  const { isDark } = useTheme()
  const router = useRouter()

  // File state
  const [file, setFile] = useState<File | null>(null)
  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
  const [cleanedUrl, setCleanedUrl] = useState<string | null>(null)
  const [maskUrl, setMaskUrl] = useState<string | null>(null)

  // Loading states
  const [isPreviewing, setIsPreviewing] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)
  const [error, setError] = useState<string | null>(null)

  // Results
  const [previewResult, setPreviewResult] = useState<PreviewResult | null>(null)
  const [pipelineResult, setPipelineResult] = useState<PipelineResult | null>(null)

  // Options
  const [removeHandwriting, setRemoveHandwriting] = useState(true)
  const [reconstructLayout, setReconstructLayout] = useState(true)
  const [inpaintingMethod, setInpaintingMethod] = useState<string>('auto')

  // Step tracking
  const [currentStep, setCurrentStep] = useState<'upload' | 'preview' | 'processing' | 'result'>('upload')

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

  // 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]
  }

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

  const getApiUrl = useCallback(() => {
    if (typeof window === 'undefined') return 'http://localhost:8086'
    const { hostname, protocol } = window.location
    return hostname === 'localhost' ? 'http://localhost:8086' : `${protocol}//${hostname}:8086`
  }, [])

  // Handle file selection
  const handleFileSelect = useCallback((selectedFile: File) => {
    setFile(selectedFile)
    setError(null)
    setPreviewResult(null)
    setPipelineResult(null)
    setCleanedUrl(null)
    setMaskUrl(null)

    const url = URL.createObjectURL(selectedFile)
    setPreviewUrl(url)
    setCurrentStep('upload')
  }, [])

  // Handle mobile file selection - convert to File and trigger handleFileSelect
  const handleMobileFileSelect = useCallback(async (uploadedFile: UploadedFile) => {
    try {
      const base64Data = uploadedFile.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: uploadedFile.type })
      const file = new File([blob], uploadedFile.name, { type: uploadedFile.type })
      handleFileSelect(file)
      setShowQRModal(false)
    } catch (error) {
      console.error('Failed to convert mobile file:', error)
      setError('Fehler beim Laden der Datei vom Handy')
    }
  }, [handleFileSelect])

  // Handle drop
  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    const droppedFile = e.dataTransfer.files[0]
    if (droppedFile && droppedFile.type.startsWith('image/')) {
      handleFileSelect(droppedFile)
    }
  }, [handleFileSelect])

  // Preview cleanup
  const handlePreview = useCallback(async () => {
    if (!file) return

    setIsPreviewing(true)
    setError(null)

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

      const response = await fetch(`${getApiUrl()}/api/v1/worksheet/preview-cleanup`, {
        method: 'POST',
        body: formData
      })

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

      const result = await response.json()
      setPreviewResult(result)
      setCurrentStep('preview')
    } catch (err) {
      console.error('Preview failed:', err)
      setError(err instanceof Error ? err.message : 'Vorschau fehlgeschlagen')
    } finally {
      setIsPreviewing(false)
    }
  }, [file, getApiUrl])

  // Run full cleanup pipeline
  const handleCleanup = useCallback(async () => {
    if (!file) return

    setIsProcessing(true)
    setCurrentStep('processing')
    setError(null)

    try {
      const formData = new FormData()
      formData.append('image', file)
      formData.append('remove_handwriting', String(removeHandwriting))
      formData.append('reconstruct', String(reconstructLayout))
      formData.append('inpainting_method', inpaintingMethod)

      const response = await fetch(`${getApiUrl()}/api/v1/worksheet/cleanup-pipeline`, {
        method: 'POST',
        body: formData
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({ detail: 'Unknown error' }))
        throw new Error(errorData.detail || `HTTP ${response.status}`)
      }

      const result: PipelineResult = await response.json()
      setPipelineResult(result)

      // Create cleaned image URL
      if (result.cleaned_image_base64) {
        const cleanedBlob = await fetch(`data:image/png;base64,${result.cleaned_image_base64}`).then(r => r.blob())
        setCleanedUrl(URL.createObjectURL(cleanedBlob))
      }

      setCurrentStep('result')
    } catch (err) {
      console.error('Cleanup failed:', err)
      setError(err instanceof Error ? err.message : 'Bereinigung fehlgeschlagen')
      setCurrentStep('preview')
    } finally {
      setIsProcessing(false)
    }
  }, [file, removeHandwriting, reconstructLayout, inpaintingMethod, getApiUrl])

  // Get detection mask
  const handleGetMask = useCallback(async () => {
    if (!file) return

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

      const response = await fetch(`${getApiUrl()}/api/v1/worksheet/detect-handwriting/mask`, {
        method: 'POST',
        body: formData
      })

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

      const blob = await response.blob()
      setMaskUrl(URL.createObjectURL(blob))
    } catch (err) {
      console.error('Mask fetch failed:', err)
    }
  }, [file, getApiUrl])

  // Open in worksheet editor
  const handleOpenInEditor = useCallback(() => {
    if (pipelineResult?.fabric_json) {
      // Store the fabric JSON in sessionStorage
      sessionStorage.setItem('worksheetCleanupResult', JSON.stringify(pipelineResult.fabric_json))
      router.push('/worksheet-editor')
    }
  }, [pipelineResult, router])

  // Reset to start
  const handleReset = useCallback(() => {
    setFile(null)
    setPreviewUrl(null)
    setCleanedUrl(null)
    setMaskUrl(null)
    setPreviewResult(null)
    setPipelineResult(null)
    setError(null)
    setCurrentStep('upload')
  }, [])

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

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

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

        {/* Step Indicator */}
        <div className="flex items-center justify-center gap-4 mb-8">
          {['upload', 'preview', 'processing', 'result'].map((step, idx) => (
            <div key={step} className="flex items-center">
              <div className={`
                w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all
                ${currentStep === step
                  ? 'bg-purple-500 text-white shadow-lg shadow-purple-500/50'
                  : ['upload', 'preview', 'processing', 'result'].indexOf(currentStep) > idx
                    ? 'bg-green-500 text-white'
                    : isDark ? 'bg-white/10 text-white/40' : 'bg-slate-200 text-slate-400'
                }
              `}>
                {['upload', 'preview', 'processing', 'result'].indexOf(currentStep) > idx ? (
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                ) : (
                  idx + 1
                )}
              </div>
              {idx < 3 && (
                <div className={`w-16 h-0.5 mx-2 ${
                  ['upload', 'preview', 'processing', 'result'].indexOf(currentStep) > idx
                    ? 'bg-green-500'
                    : isDark ? 'bg-white/20' : 'bg-slate-300'
                }`} />
              )}
            </div>
          ))}
        </div>

        {/* Error Display */}
        {error && (
          <GlassCard className="mb-6" size="sm" isDark={isDark}>
            <div className="flex items-center gap-3 text-red-400">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span>{error}</span>
            </div>
          </GlassCard>
        )}

        {/* Content based on step */}
        <div className="flex-1">
          {/* Step 1: Upload */}
          {currentStep === 'upload' && (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Upload Options - File and QR Code side by side */}
              <GlassCard className="col-span-1" delay={100}>
                <div
                  className="border-2 border-dashed border-white/20 rounded-2xl p-8 text-center cursor-pointer transition-all hover:border-purple-400/50 hover:bg-white/5 min-h-[280px] flex flex-col items-center justify-center"
                  onDrop={handleDrop}
                  onDragOver={(e) => e.preventDefault()}
                  onClick={() => document.getElementById('file-input')?.click()}
                >
                  <input
                    id="file-input"
                    type="file"
                    accept="image/*"
                    onChange={(e) => e.target.files?.[0] && handleFileSelect(e.target.files[0])}
                    className="hidden"
                  />
                  {previewUrl ? (
                    <div className="space-y-4">
                      <img
                        src={previewUrl}
                        alt="Preview"
                        className="max-h-40 mx-auto rounded-xl shadow-2xl"
                      />
                      <p className="text-white font-medium text-sm">{file?.name}</p>
                      <p className="text-white/50 text-xs">Klicke zum Ändern</p>
                    </div>
                  ) : (
                    <>
                      <svg className="w-16 h-16 mx-auto mb-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                      </svg>
                      <p className="text-xl font-semibold text-white mb-2">Datei auswählen</p>
                      <p className="text-white/50 text-sm mb-2">Ziehe ein Bild hierher oder klicke</p>
                      <p className="text-white/30 text-xs">PNG, JPG, JPEG</p>
                    </>
                  )}
                </div>
              </GlassCard>

              {/* QR Code Upload */}
              <GlassCard className="col-span-1" delay={150}>
                <div
                  className="border-2 border-dashed border-white/20 rounded-2xl p-8 text-center cursor-pointer transition-all hover:border-purple-400/50 hover:bg-white/5 min-h-[280px] flex flex-col items-center justify-center"
                  onClick={() => setShowQRModal(true)}
                >
                  <div className="w-16 h-16 mx-auto mb-4 rounded-xl bg-purple-500/20 flex items-center justify-center">
                    <span className="text-3xl">📱</span>
                  </div>
                  <p className="text-xl font-semibold text-white mb-2">Mit Handy scannen</p>
                  <p className="text-white/50 text-sm mb-2">QR-Code scannen um Foto hochzuladen</p>
                  <p className="text-white/30 text-xs">Im lokalen Netzwerk</p>
                </div>
              </GlassCard>

              {/* Options */}
              {file && (
                <>
                  <GlassCard delay={200}>
                    <h3 className="text-lg font-semibold text-white mb-4">Optionen</h3>
                    <div className="space-y-4">
                      <label className="flex items-center gap-4 cursor-pointer group">
                        <input
                          type="checkbox"
                          checked={removeHandwriting}
                          onChange={(e) => setRemoveHandwriting(e.target.checked)}
                          className="w-5 h-5 rounded bg-white/10 border-white/20 text-purple-500 focus:ring-purple-500"
                        />
                        <div>
                          <span className="text-white font-medium group-hover:text-purple-300 transition-colors">
                            Handschrift entfernen
                          </span>
                          <p className="text-white/40 text-sm">Erkennt und entfernt handgeschriebene Inhalte</p>
                        </div>
                      </label>

                      <label className="flex items-center gap-4 cursor-pointer group">
                        <input
                          type="checkbox"
                          checked={reconstructLayout}
                          onChange={(e) => setReconstructLayout(e.target.checked)}
                          className="w-5 h-5 rounded bg-white/10 border-white/20 text-purple-500 focus:ring-purple-500"
                        />
                        <div>
                          <span className="text-white font-medium group-hover:text-purple-300 transition-colors">
                            Layout rekonstruieren
                          </span>
                          <p className="text-white/40 text-sm">Erstellt bearbeitbare Textblöcke</p>
                        </div>
                      </label>
                    </div>
                  </GlassCard>

                  <GlassCard delay={300}>
                    <h3 className="text-lg font-semibold text-white mb-4">Methode</h3>
                    <select
                      value={inpaintingMethod}
                      onChange={(e) => setInpaintingMethod(e.target.value)}
                      className="w-full p-3 rounded-xl bg-white/10 border border-white/20 text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    >
                      <option value="auto">Automatisch (empfohlen)</option>
                      <option value="opencv_telea">OpenCV Telea (schnell)</option>
                      <option value="opencv_ns">OpenCV NS (glatter)</option>
                    </select>
                    <p className="text-white/40 text-sm mt-3">
                      Die automatische Methode wählt die beste Option basierend auf dem Bildinhalt.
                    </p>
                  </GlassCard>

                  {/* Action Button */}
                  <div className="col-span-1 lg:col-span-2 flex justify-center">
                    <button
                      onClick={handlePreview}
                      disabled={isPreviewing}
                      className="px-8 py-4 rounded-2xl font-semibold text-lg bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50 flex items-center gap-3"
                    >
                      {isPreviewing ? (
                        <>
                          <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                          Analysiere...
                        </>
                      ) : (
                        <>
                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                          </svg>
                          Vorschau
                        </>
                      )}
                    </button>
                  </div>
                </>
              )}
            </div>
          )}

          {/* Step 2: Preview */}
          {currentStep === 'preview' && previewResult && (
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              {/* Stats */}
              <GlassCard delay={100}>
                <h3 className="text-lg font-semibold text-white mb-6">Analyse</h3>
                <div className="flex justify-around">
                  <ProgressRing
                    progress={previewResult.confidence * 100}
                    label="Konfidenz"
                    value={`${Math.round(previewResult.confidence * 100)}%`}
                    color={previewResult.has_handwriting ? '#f97316' : '#22c55e'}
                  />
                  <ProgressRing
                    progress={previewResult.handwriting_ratio * 100 * 10}
                    label="Handschrift"
                    value={`${(previewResult.handwriting_ratio * 100).toFixed(1)}%`}
                    color="#a78bfa"
                  />
                </div>
                <div className={`mt-6 p-4 rounded-xl text-center ${
                  previewResult.has_handwriting
                    ? 'bg-orange-500/20 text-orange-300'
                    : 'bg-green-500/20 text-green-300'
                }`}>
                  {previewResult.has_handwriting
                    ? 'Handschrift erkannt'
                    : 'Keine Handschrift gefunden'}
                </div>
              </GlassCard>

              {/* Time Estimates */}
              <GlassCard delay={200}>
                <h3 className="text-lg font-semibold text-white mb-4">Geschätzte Zeit</h3>
                <div className="space-y-3">
                  <div className="flex justify-between text-white/70">
                    <span>Erkennung</span>
                    <span className="text-white">~{Math.round(previewResult.estimated_times_ms.detection / 1000)}s</span>
                  </div>
                  {removeHandwriting && previewResult.has_handwriting && (
                    <div className="flex justify-between text-white/70">
                      <span>Bereinigung</span>
                      <span className="text-white">~{Math.round(previewResult.estimated_times_ms.inpainting / 1000)}s</span>
                    </div>
                  )}
                  {reconstructLayout && (
                    <div className="flex justify-between text-white/70">
                      <span>Layout</span>
                      <span className="text-white">~{Math.round(previewResult.estimated_times_ms.reconstruction / 1000)}s</span>
                    </div>
                  )}
                  <div className="flex justify-between pt-3 border-t border-white/10 font-medium">
                    <span className="text-white">Gesamt</span>
                    <span className="text-purple-300">~{Math.round(previewResult.estimated_times_ms.total / 1000)}s</span>
                  </div>
                </div>
              </GlassCard>

              {/* Image Info */}
              <GlassCard delay={300}>
                <h3 className="text-lg font-semibold text-white mb-4">Bild-Info</h3>
                <div className="space-y-3">
                  <div className="flex justify-between text-white/70">
                    <span>Breite</span>
                    <span className="text-white">{previewResult.image_width}px</span>
                  </div>
                  <div className="flex justify-between text-white/70">
                    <span>Höhe</span>
                    <span className="text-white">{previewResult.image_height}px</span>
                  </div>
                  <div className="flex justify-between text-white/70">
                    <span>Pixel</span>
                    <span className="text-white">{(previewResult.image_width * previewResult.image_height / 1000000).toFixed(1)}MP</span>
                  </div>
                </div>
                <button
                  onClick={handleGetMask}
                  className="w-full mt-4 px-4 py-2 rounded-xl bg-white/10 text-white/70 hover:bg-white/20 hover:text-white transition-all text-sm"
                >
                  Maske anzeigen
                </button>
              </GlassCard>

              {/* Preview Images */}
              <GlassCard className="col-span-1 lg:col-span-2" delay={400}>
                <h3 className="text-lg font-semibold text-white mb-4">Original</h3>
                {previewUrl && (
                  <img
                    src={previewUrl}
                    alt="Original"
                    className="w-full max-h-96 object-contain rounded-xl"
                  />
                )}
              </GlassCard>

              {maskUrl && (
                <GlassCard delay={500}>
                  <h3 className="text-lg font-semibold text-white mb-4">Maske</h3>
                  <img
                    src={maskUrl}
                    alt="Mask"
                    className="w-full max-h-96 object-contain rounded-xl"
                  />
                </GlassCard>
              )}

              {/* Actions */}
              <div className="col-span-1 lg:col-span-3 flex justify-center gap-4">
                <button
                  onClick={() => setCurrentStep('upload')}
                  className="px-6 py-3 rounded-xl bg-white/10 text-white hover:bg-white/20 transition-all flex items-center gap-2"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                  </svg>
                  Zurück
                </button>
                <button
                  onClick={handleCleanup}
                  disabled={isProcessing}
                  className="px-8 py-3 rounded-xl font-semibold bg-gradient-to-r from-orange-500 to-red-500 text-white hover:shadow-lg hover:shadow-orange-500/30 transition-all disabled:opacity-50 flex items-center gap-2"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                  </svg>
                  Bereinigen starten
                </button>
              </div>
            </div>
          )}

          {/* Step 3: Processing */}
          {currentStep === 'processing' && (
            <div className="flex flex-col items-center justify-center py-20">
              <GlassCard className="text-center max-w-md" delay={0}>
                <div className="w-20 h-20 mx-auto mb-6 relative">
                  <div className="absolute inset-0 rounded-full border-4 border-white/10"></div>
                  <div className="absolute inset-0 rounded-full border-4 border-purple-500 border-t-transparent animate-spin"></div>
                </div>
                <h3 className="text-xl font-semibold text-white mb-2">Verarbeite Bild...</h3>
                <p className="text-white/50">
                  {removeHandwriting ? 'Handschrift wird erkannt und entfernt' : 'Bild wird analysiert'}
                </p>
              </GlassCard>
            </div>
          )}

          {/* Step 4: Result */}
          {currentStep === 'result' && pipelineResult && (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Status */}
              <GlassCard className="col-span-1 lg:col-span-2" delay={100}>
                <div className={`flex items-center gap-4 ${
                  pipelineResult.success ? 'text-green-300' : 'text-red-300'
                }`}>
                  <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
                    pipelineResult.success ? 'bg-green-500/20' : 'bg-red-500/20'
                  }`}>
                    {pipelineResult.success ? (
                      <svg className="w-6 h-6" 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-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>
                    )}
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold">
                      {pipelineResult.success ? 'Erfolgreich bereinigt!' : 'Verarbeitung fehlgeschlagen'}
                    </h3>
                    <p className="text-white/50">
                      {pipelineResult.handwriting_removed
                        ? `Handschrift wurde entfernt. ${pipelineResult.metadata?.layout?.element_count || 0} Elemente erkannt.`
                        : pipelineResult.handwriting_detected
                          ? 'Handschrift erkannt, aber nicht entfernt'
                          : 'Keine Handschrift im Bild gefunden'}
                    </p>
                  </div>
                </div>
              </GlassCard>

              {/* Original */}
              <GlassCard delay={200}>
                <h3 className="text-lg font-semibold text-white mb-4">Original</h3>
                {previewUrl && (
                  <img
                    src={previewUrl}
                    alt="Original"
                    className="w-full rounded-xl"
                  />
                )}
              </GlassCard>

              {/* Cleaned */}
              <GlassCard delay={300}>
                <h3 className="text-lg font-semibold text-white mb-4">Bereinigt</h3>
                {cleanedUrl ? (
                  <img
                    src={cleanedUrl}
                    alt="Cleaned"
                    className="w-full rounded-xl"
                  />
                ) : (
                  <div className="aspect-video rounded-xl bg-white/5 flex items-center justify-center text-white/40">
                    Kein Bild
                  </div>
                )}
              </GlassCard>

              {/* Actions */}
              <div className="col-span-1 lg:col-span-2 flex justify-center gap-4">
                <button
                  onClick={handleReset}
                  className="px-6 py-3 rounded-xl bg-white/10 text-white hover:bg-white/20 transition-all flex items-center gap-2"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                  </svg>
                  Neues Bild
                </button>
                {cleanedUrl && (
                  <a
                    href={cleanedUrl}
                    download="bereinigt.png"
                    className="px-6 py-3 rounded-xl bg-white/10 text-white hover:bg-white/20 transition-all flex items-center gap-2"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                    </svg>
                    Download
                  </a>
                )}
                {pipelineResult.layout_reconstructed && pipelineResult.fabric_json && (
                  <button
                    onClick={handleOpenInEditor}
                    className="px-8 py-3 rounded-xl font-semibold bg-gradient-to-r from-green-500 to-emerald-500 text-white hover:shadow-lg hover:shadow-green-500/30 transition-all flex items-center gap-2"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    Im Editor öffnen
                  </button>
                )}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* QR Code Modal */}
      {showQRModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowQRModal(false)} />
          <div className="relative w-full max-w-md rounded-3xl bg-slate-900">
            <QRCodeUpload
              sessionId={uploadSessionId}
              onClose={() => setShowQRModal(false)}
              onFilesChanged={(files) => {
                setMobileUploadedFiles(files)
              }}
            />
            {/* Select button for mobile files */}
            {mobileUploadedFiles.length > 0 && (
              <div className="p-4 border-t border-white/10">
                <p className="text-white/60 text-sm mb-3">Datei auswählen:</p>
                <div className="space-y-2 max-h-40 overflow-y-auto">
                  {mobileUploadedFiles.map((file) => (
                    <button
                      key={file.id}
                      onClick={() => handleMobileFileSelect(file)}
                      className="w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all bg-white/5 hover:bg-white/10 border border-white/10"
                    >
                      <span className="text-xl">{file.type.startsWith('image/') ? '🖼️' : '📄'}</span>
                      <div className="flex-1 min-w-0">
                        <p className="text-white font-medium truncate">{file.name}</p>
                        <p className="text-white/50 text-xs">{formatFileSize(file.size)}</p>
                      </div>
                      <span className="text-purple-400 text-sm">Verwenden →</span>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}