'use client'

import { useState, useCallback } from 'react'
import { useTheme } from '@/lib/ThemeContext'
import { useWorksheet } from '@/lib/worksheet-editor/WorksheetContext'

interface CleanupPanelProps {
  isOpen: boolean
  onClose: () => void
}

interface CleanupCapabilities {
  opencv_available: boolean
  lama_available: boolean
  paddleocr_available: boolean
}

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
  }
  capabilities: {
    lama_available: boolean
  }
}

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

export function CleanupPanel({ isOpen, onClose }: CleanupPanelProps) {
  const { isDark } = useTheme()
  const { canvas, saveToHistory } = useWorksheet()

  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)

  const [isLoading, setIsLoading] = useState(false)
  const [isPreviewing, setIsPreviewing] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)

  const [error, setError] = useState<string | null>(null)
  const [previewResult, setPreviewResult] = useState<PreviewResult | null>(null)
  const [pipelineResult, setPipelineResult] = useState<PipelineResult | null>(null)
  const [capabilities, setCapabilities] = useState<CleanupCapabilities | 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' | 'result'>('upload')

  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`
  }, [])

  // Load capabilities on mount
  const loadCapabilities = useCallback(async () => {
    try {
      const response = await fetch(`${getApiUrl()}/api/v1/worksheet/capabilities`)
      if (response.ok) {
        const data = await response.json()
        setCapabilities(data)
      }
    } catch (err) {
      console.error('Failed to load capabilities:', err)
    }
  }, [getApiUrl])

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

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

  // 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')

      // Also load capabilities
      await loadCapabilities()
    } catch (err) {
      console.error('Preview failed:', err)
      setError(err instanceof Error ? err.message : 'Vorschau fehlgeschlagen')
    } finally {
      setIsPreviewing(false)
    }
  }, [file, getApiUrl, loadCapabilities])

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

    setIsProcessing(true)
    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')
    } finally {
      setIsProcessing(false)
    }
  }, [file, removeHandwriting, reconstructLayout, inpaintingMethod, getApiUrl])

  // Import to canvas
  const handleImportToCanvas = useCallback(async () => {
    if (!pipelineResult?.fabric_json || !canvas) return

    try {
      // Clear canvas and load new content
      canvas.clear()
      canvas.loadFromJSON(pipelineResult.fabric_json, () => {
        canvas.renderAll()
        saveToHistory('Imported: Cleaned worksheet')
      })

      onClose()
    } catch (err) {
      console.error('Import failed:', err)
      setError('Import in Canvas fehlgeschlagen')
    }
  }, [pipelineResult, canvas, saveToHistory, onClose])

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

  if (!isOpen) return null

  // Styles
  const overlayStyle = 'fixed inset-0 bg-black/50 backdrop-blur-sm z-50'
  const modalStyle = isDark
    ? 'backdrop-blur-xl bg-white/10 border border-white/20'
    : 'backdrop-blur-xl bg-white/90 border border-black/10 shadow-2xl'
  const labelStyle = isDark ? 'text-white/70' : 'text-slate-600'
  const cardStyle = isDark
    ? 'bg-white/5 border-white/10 hover:bg-white/10'
    : 'bg-white/50 border-slate-200 hover:bg-slate-50'

  return (
    <div className={overlayStyle} onClick={onClose}>
      <div
        className={`fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl max-h-[90vh] rounded-3xl p-6 overflow-hidden flex flex-col ${modalStyle}`}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
              isDark ? 'bg-orange-500/20' : 'bg-orange-100'
            }`}>
              <svg className={`w-7 h-7 ${isDark ? 'text-orange-300' : 'text-orange-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
            </div>
            <div>
              <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                Arbeitsblatt bereinigen
              </h2>
              <p className={`text-sm ${labelStyle}`}>
                Handschrift entfernen und Layout rekonstruieren
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className={`p-2 rounded-xl transition-colors ${
              isDark ? 'hover:bg-white/10 text-white/70' : 'hover:bg-slate-100 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>

        {/* Step Indicator */}
        <div className="flex items-center gap-2 mb-6">
          {['upload', 'preview', 'result'].map((step, idx) => (
            <div key={step} className="flex items-center">
              <div className={`w-8 h-8 rounded-full flex items-center justify-center font-medium ${
                currentStep === step
                  ? isDark ? 'bg-purple-500 text-white' : 'bg-purple-600 text-white'
                  : idx < ['upload', 'preview', 'result'].indexOf(currentStep)
                    ? isDark ? 'bg-green-500 text-white' : 'bg-green-600 text-white'
                    : isDark ? 'bg-white/10 text-white/50' : 'bg-slate-200 text-slate-400'
              }`}>
                {idx < ['upload', 'preview', 'result'].indexOf(currentStep) ? '✓' : idx + 1}
              </div>
              {idx < 2 && (
                <div className={`w-12 h-0.5 ${
                  idx < ['upload', 'preview', 'result'].indexOf(currentStep)
                    ? isDark ? 'bg-green-500' : 'bg-green-600'
                    : isDark ? 'bg-white/20' : 'bg-slate-200'
                }`} />
              )}
            </div>
          ))}
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto">
          {/* Error Display */}
          {error && (
            <div className={`p-4 rounded-xl mb-4 ${
              isDark ? 'bg-red-500/20 text-red-300' : 'bg-red-50 text-red-700'
            }`}>
              {error}
            </div>
          )}

          {/* Step 1: Upload */}
          {currentStep === 'upload' && (
            <div className="space-y-6">
              {/* Dropzone */}
              <div
                className={`border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all ${
                  isDark
                    ? 'border-white/20 hover:border-purple-400/50 hover:bg-white/5'
                    : 'border-slate-300 hover:border-purple-400 hover:bg-purple-50/30'
                }`}
                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-64 mx-auto rounded-xl shadow-lg"
                    />
                    <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                      {file?.name}
                    </p>
                    <p className={`text-sm ${labelStyle}`}>
                      Klicke zum Ändern oder ziehe eine andere Datei hierher
                    </p>
                  </div>
                ) : (
                  <>
                    <svg className={`w-16 h-16 mx-auto mb-4 ${isDark ? 'text-white/30' : 'text-slate-300'}`} 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-lg font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                      Bild hochladen
                    </p>
                    <p className={labelStyle}>
                      Ziehe ein Bild hierher oder klicke zum Auswählen
                    </p>
                    <p className={`text-xs mt-2 ${labelStyle}`}>
                      Unterstützt: PNG, JPG, JPEG
                    </p>
                  </>
                )}
              </div>

              {/* Options */}
              {file && (
                <div className="space-y-4">
                  <h3 className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Optionen
                  </h3>

                  <label className={`flex items-center gap-3 p-4 rounded-xl border cursor-pointer transition-all ${cardStyle}`}>
                    <input
                      type="checkbox"
                      checked={removeHandwriting}
                      onChange={(e) => setRemoveHandwriting(e.target.checked)}
                      className="w-5 h-5 rounded"
                    />
                    <div>
                      <span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                        Handschrift entfernen
                      </span>
                      <p className={`text-sm ${labelStyle}`}>
                        Erkennt und entfernt handgeschriebene Inhalte
                      </p>
                    </div>
                  </label>

                  <label className={`flex items-center gap-3 p-4 rounded-xl border cursor-pointer transition-all ${cardStyle}`}>
                    <input
                      type="checkbox"
                      checked={reconstructLayout}
                      onChange={(e) => setReconstructLayout(e.target.checked)}
                      className="w-5 h-5 rounded"
                    />
                    <div>
                      <span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                        Layout rekonstruieren
                      </span>
                      <p className={`text-sm ${labelStyle}`}>
                        Erstellt bearbeitbare Fabric.js Objekte
                      </p>
                    </div>
                  </label>

                  {removeHandwriting && (
                    <div className="space-y-2">
                      <label className={`block text-sm font-medium ${labelStyle}`}>
                        Inpainting-Methode
                      </label>
                      <select
                        value={inpaintingMethod}
                        onChange={(e) => setInpaintingMethod(e.target.value)}
                        className={`w-full p-3 rounded-xl border ${
                          isDark
                            ? 'bg-white/10 border-white/20 text-white'
                            : 'bg-white border-slate-200 text-slate-900'
                        }`}
                      >
                        <option value="auto">Automatisch (empfohlen)</option>
                        <option value="opencv_telea">OpenCV Telea (schnell)</option>
                        <option value="opencv_ns">OpenCV NS (glatter)</option>
                        {capabilities?.lama_available && (
                          <option value="lama">LaMa (beste Qualität)</option>
                        )}
                      </select>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}

          {/* Step 2: Preview */}
          {currentStep === 'preview' && previewResult && (
            <div className="space-y-6">
              <div className="grid grid-cols-2 gap-6">
                {/* Detection Result */}
                <div className={`p-4 rounded-xl border ${cardStyle}`}>
                  <h3 className={`font-medium mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Erkennungsergebnis
                  </h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className={labelStyle}>Handschrift gefunden:</span>
                      <span className={previewResult.has_handwriting
                        ? isDark ? 'text-orange-300' : 'text-orange-600'
                        : isDark ? 'text-green-300' : 'text-green-600'
                      }>
                        {previewResult.has_handwriting ? 'Ja' : 'Nein'}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className={labelStyle}>Konfidenz:</span>
                      <span className={isDark ? 'text-white' : 'text-slate-900'}>
                        {(previewResult.confidence * 100).toFixed(0)}%
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className={labelStyle}>Handschrift-Anteil:</span>
                      <span className={isDark ? 'text-white' : 'text-slate-900'}>
                        {(previewResult.handwriting_ratio * 100).toFixed(1)}%
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className={labelStyle}>Bildgröße:</span>
                      <span className={isDark ? 'text-white' : 'text-slate-900'}>
                        {previewResult.image_width} × {previewResult.image_height}
                      </span>
                    </div>
                  </div>
                </div>

                {/* Time Estimates */}
                <div className={`p-4 rounded-xl border ${cardStyle}`}>
                  <h3 className={`font-medium mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Geschätzte Zeit
                  </h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className={labelStyle}>Erkennung:</span>
                      <span className={isDark ? 'text-white' : 'text-slate-900'}>
                        ~{Math.round(previewResult.estimated_times_ms.detection / 1000)}s
                      </span>
                    </div>
                    {removeHandwriting && previewResult.has_handwriting && (
                      <div className="flex justify-between">
                        <span className={labelStyle}>Bereinigung:</span>
                        <span className={isDark ? 'text-white' : 'text-slate-900'}>
                          ~{Math.round(previewResult.estimated_times_ms.inpainting / 1000)}s
                        </span>
                      </div>
                    )}
                    {reconstructLayout && (
                      <div className="flex justify-between">
                        <span className={labelStyle}>Layout:</span>
                        <span className={isDark ? 'text-white' : 'text-slate-900'}>
                          ~{Math.round(previewResult.estimated_times_ms.reconstruction / 1000)}s
                        </span>
                      </div>
                    )}
                    <div className={`flex justify-between pt-2 border-t ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
                      <span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>Gesamt:</span>
                      <span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                        ~{Math.round(previewResult.estimated_times_ms.total / 1000)}s
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Preview Images */}
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <h3 className={`font-medium mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Original
                  </h3>
                  {previewUrl && (
                    <img
                      src={previewUrl}
                      alt="Original"
                      className="w-full rounded-xl shadow-lg"
                    />
                  )}
                </div>
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <h3 className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                      Maske
                    </h3>
                    <button
                      onClick={handleGetMask}
                      className={`text-sm px-3 py-1 rounded-lg ${
                        isDark
                          ? 'bg-white/10 text-white/70 hover:bg-white/20'
                          : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                      }`}
                    >
                      Maske laden
                    </button>
                  </div>
                  {maskUrl ? (
                    <img
                      src={maskUrl}
                      alt="Mask"
                      className="w-full rounded-xl shadow-lg"
                    />
                  ) : (
                    <div className={`aspect-video rounded-xl flex items-center justify-center ${
                      isDark ? 'bg-white/5' : 'bg-slate-100'
                    }`}>
                      <span className={labelStyle}>Klicke "Maske laden" zum Anzeigen</span>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}

          {/* Step 3: Result */}
          {currentStep === 'result' && pipelineResult && (
            <div className="space-y-6">
              {/* Status */}
              <div className={`p-4 rounded-xl ${
                pipelineResult.success
                  ? isDark ? 'bg-green-500/20' : 'bg-green-50'
                  : isDark ? 'bg-red-500/20' : 'bg-red-50'
              }`}>
                <div className="flex items-center gap-3">
                  {pipelineResult.success ? (
                    <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={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  ) : (
                    <svg className={`w-6 h-6 ${isDark ? 'text-red-300' : 'text-red-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  )}
                  <div>
                    <h3 className={`font-medium ${
                      pipelineResult.success
                        ? isDark ? 'text-green-300' : 'text-green-700'
                        : isDark ? 'text-red-300' : 'text-red-700'
                    }`}>
                      {pipelineResult.success ? 'Erfolgreich bereinigt' : 'Bereinigung fehlgeschlagen'}
                    </h3>
                    <p className={`text-sm ${labelStyle}`}>
                      {pipelineResult.handwriting_detected
                        ? pipelineResult.handwriting_removed
                          ? 'Handschrift wurde erkannt und entfernt'
                          : 'Handschrift erkannt, aber nicht entfernt'
                        : 'Keine Handschrift gefunden'}
                    </p>
                  </div>
                </div>
              </div>

              {/* Result Images */}
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <h3 className={`font-medium mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Original
                  </h3>
                  {previewUrl && (
                    <img
                      src={previewUrl}
                      alt="Original"
                      className="w-full rounded-xl shadow-lg"
                    />
                  )}
                </div>
                <div>
                  <h3 className={`font-medium mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Bereinigt
                  </h3>
                  {cleanedUrl ? (
                    <img
                      src={cleanedUrl}
                      alt="Cleaned"
                      className="w-full rounded-xl shadow-lg"
                    />
                  ) : (
                    <div className={`aspect-video rounded-xl flex items-center justify-center ${
                      isDark ? 'bg-white/5' : 'bg-slate-100'
                    }`}>
                      <span className={labelStyle}>Kein Bild</span>
                    </div>
                  )}
                </div>
              </div>

              {/* Layout Info */}
              {pipelineResult.layout_reconstructed && pipelineResult.metadata?.layout && (
                <div className={`p-4 rounded-xl border ${cardStyle}`}>
                  <h3 className={`font-medium mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Layout-Rekonstruktion
                  </h3>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <span className={labelStyle}>Elemente:</span>
                      <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                        {pipelineResult.metadata.layout.element_count}
                      </p>
                    </div>
                    <div>
                      <span className={labelStyle}>Tabellen:</span>
                      <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                        {pipelineResult.metadata.layout.table_count}
                      </p>
                    </div>
                    <div>
                      <span className={labelStyle}>Größe:</span>
                      <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                        {pipelineResult.metadata.layout.page_width} × {pipelineResult.metadata.layout.page_height}
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="mt-6 flex items-center justify-between">
          <div>
            {currentStep !== 'upload' && (
              <button
                onClick={() => setCurrentStep(currentStep === 'result' ? 'preview' : 'upload')}
                className={`px-4 py-2 rounded-xl font-medium transition-colors ${
                  isDark
                    ? 'bg-white/10 text-white hover:bg-white/20'
                    : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
                }`}
              >
                ← Zurück
              </button>
            )}
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={onClose}
              className={`px-5 py-2.5 rounded-xl font-medium transition-colors ${
                isDark
                  ? 'bg-white/10 text-white hover:bg-white/20'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              Abbrechen
            </button>

            {currentStep === 'upload' && file && (
              <button
                onClick={handlePreview}
                disabled={isPreviewing}
                className={`px-5 py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 ${
                  isDark
                    ? 'bg-purple-500/30 text-purple-300 hover:bg-purple-500/40'
                    : 'bg-purple-600 text-white hover:bg-purple-700'
                } disabled:opacity-50`}
              >
                {isPreviewing ? (
                  <>
                    <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
                    Analysiere...
                  </>
                ) : (
                  'Vorschau'
                )}
              </button>
            )}

            {currentStep === 'preview' && (
              <button
                onClick={handleCleanup}
                disabled={isProcessing}
                className={`px-5 py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 ${
                  isDark
                    ? 'bg-gradient-to-r from-orange-500 to-red-500 text-white hover:shadow-lg hover:shadow-orange-500/30'
                    : 'bg-gradient-to-r from-orange-600 to-red-600 text-white hover:shadow-lg hover:shadow-orange-600/30'
                } disabled:opacity-50`}
              >
                {isProcessing ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    Verarbeite...
                  </>
                ) : (
                  <>
                    <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
                  </>
                )}
              </button>
            )}

            {currentStep === 'result' && pipelineResult?.success && (
              <button
                onClick={handleImportToCanvas}
                className={`px-5 py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 ${
                  isDark
                    ? 'bg-gradient-to-r from-green-500 to-emerald-500 text-white hover:shadow-lg hover:shadow-green-500/30'
                    : 'bg-gradient-to-r from-green-600 to-emerald-600 text-white hover:shadow-lg hover:shadow-green-600/30'
                }`}
              >
                <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-8l-4-4m0 0L8 8m4-4v12" />
                </svg>
                In Editor übernehmen
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}