import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import Header from '../components/Header';
import BottomNav from '../components/BottomNav';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { uploadPhoto } from '../services/photosApi';
import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
import { useAppearance } from '../../hooks/use-appearance';
import { cn } from '@/lib/utils';
import {
  AlertTriangle,
  Camera,
  Grid3X3,
  ImagePlus,
  Info,
  Loader2,
  RotateCcw,
  Sparkles,
  Zap,
  ZapOff,
} from 'lucide-react';
import { getEventPackage, type EventPackage } from '../services/eventApi';

interface Task {
  id: number;
  title: string;
  description: string;
  instructions?: string;
  duration: number;
  emotion?: { slug: string; name: string };
  difficulty?: 'easy' | 'medium' | 'hard';
}

type PermissionState = 'idle' | 'prompt' | 'granted' | 'denied' | 'error' | 'unsupported';
type CameraMode = 'preview' | 'countdown' | 'review' | 'uploading';

type CameraPreferences = {
  facingMode: 'user' | 'environment';
  countdownSeconds: number;
  countdownEnabled: boolean;
  gridEnabled: boolean;
  mirrorFrontPreview: boolean;
  flashPreferred: boolean;
};

const DEFAULT_PREFS: CameraPreferences = {
  facingMode: 'environment',
  countdownSeconds: 3,
  countdownEnabled: true,
  gridEnabled: true,
  mirrorFrontPreview: true,
  flashPreferred: false,
};

export default function UploadPage() {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { appearance } = useAppearance();
  const isDarkMode = appearance === 'dark';
  const { markCompleted } = useGuestTaskProgress(slug);

  const taskIdParam = searchParams.get('task');
  const emotionSlug = searchParams.get('emotion') || '';

  const primerStorageKey = slug ? `guestCameraPrimerDismissed_${slug}` : 'guestCameraPrimerDismissed';
  const prefsStorageKey = slug ? `guestCameraPrefs_${slug}` : 'guestCameraPrefs';

  const supportsCamera = typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia;

  const [task, setTask] = useState<Task | null>(null);
  const [loadingTask, setLoadingTask] = useState(true);
  const [taskError, setTaskError] = useState<string | null>(null);

  const [permissionState, setPermissionState] = useState<PermissionState>('idle');
  const [permissionMessage, setPermissionMessage] = useState<string | null>(null);

  const [preferences, setPreferences] = useState<CameraPreferences>(DEFAULT_PREFS);
  const [mode, setMode] = useState<CameraMode>('preview');
  const [countdownValue, setCountdownValue] = useState(DEFAULT_PREFS.countdownSeconds);
  const [statusMessage, setStatusMessage] = useState<string>('');

  const [reviewPhoto, setReviewPhoto] = useState<{ dataUrl: string; file: File } | null>(null);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadError, setUploadError] = useState<string | null>(null);

  const [eventPackage, setEventPackage] = useState<EventPackage | null>(null);
  const [canUpload, setCanUpload] = useState(true);

  const [showPrimer, setShowPrimer] = useState<boolean>(() => {
    if (typeof window === 'undefined') return false;
    return window.localStorage.getItem(primerStorageKey) !== '1';
  });

  const videoRef = useRef<HTMLVideoElement | null>(null);
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const liveRegionRef = useRef<HTMLDivElement | null>(null);

  const streamRef = useRef<MediaStream | null>(null);
  const countdownTimerRef = useRef<number | null>(null);
  const uploadProgressTimerRef = useRef<number | null>(null);

  const taskId = useMemo(() => {
    if (!taskIdParam) return null;
    const parsed = parseInt(taskIdParam, 10);
    return Number.isFinite(parsed) ? parsed : null;
  }, [taskIdParam]);

  // Load preferences from storage
  useEffect(() => {
    if (typeof window === 'undefined') return;
    try {
      const stored = window.localStorage.getItem(prefsStorageKey);
      if (stored) {
        const parsed = JSON.parse(stored) as Partial<CameraPreferences>;
        setPreferences((prev) => ({ ...prev, ...parsed }));
      }
    } catch (error) {
      console.warn('Failed to parse camera preferences', error);
    }
  }, [prefsStorageKey]);

  // Persist preferences when they change
  useEffect(() => {
    if (typeof window === 'undefined') return;
    try {
      window.localStorage.setItem(prefsStorageKey, JSON.stringify(preferences));
    } catch (error) {
      console.warn('Failed to persist camera preferences', error);
    }
  }, [preferences, prefsStorageKey]);

  // Load task metadata
  useEffect(() => {
    if (!slug || !taskId) {
      setTaskError('Keine Aufgabeninformationen gefunden.');
      setLoadingTask(false);
      return;
    }

    let active = true;

    async function loadTask() {
      try {
        setLoadingTask(true);
        setTaskError(null);

        const res = await fetch(`/api/v1/events/${encodeURIComponent(slug!)}/tasks`);
        if (!res.ok) throw new Error('Tasks konnten nicht geladen werden');
        const tasks = await res.json();
        const found = Array.isArray(tasks) ? tasks.find((entry: any) => entry.id === taskId!) : null;

        if (!active) return;

        if (found) {
          setTask({
            id: found.id,
            title: found.title || `Aufgabe ${taskId!}`,
            description: found.description || 'Halte den Moment fest und teile ihn mit allen Gästen.',
            instructions: found.instructions,
            duration: found.duration || 2,
            emotion: found.emotion,
            difficulty: found.difficulty ?? 'medium',
          });
        } else {
          setTask({
            id: taskId!,
            title: `Aufgabe ${taskId!}`,
            description: 'Halte den Moment fest und teile ihn mit allen Gästen.',
            instructions: 'Positioniere alle im Bild, starte den Countdown und lass die Emotion wirken.',
            duration: 2,
            emotion: emotionSlug
              ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, (l) => l.toUpperCase()) }
              : undefined,
            difficulty: 'medium',
          });
        }
      } catch (error) {
        console.error('Failed to fetch task', error);
        if (active) {
          setTaskError('Aufgabe konnte nicht geladen werden. Du kannst trotzdem ein Foto machen.');
          setTask({
            id: taskId!,
            title: `Aufgabe ${taskId!}`,
            description: 'Halte den Moment fest und teile ihn mit allen Gästen.',
            instructions: 'Positioniere alle im Bild, starte den Countdown und lass die Emotion wirken.',
            duration: 2,
            emotion: emotionSlug
              ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, (l) => l.toUpperCase()) }
              : undefined,
            difficulty: 'medium',
          });
        }
      } finally {
        if (active) setLoadingTask(false);
      }
    }

    loadTask();
    return () => {
      active = false;
    };
  }, [slug, taskId, emotionSlug]);

  // Check upload limits
  useEffect(() => {
    if (!slug || !task) return;

    const checkLimits = async () => {
      try {
        const pkg = await getEventPackage(slug);
        setEventPackage(pkg);
        if (pkg && pkg.used_photos >= pkg.package.max_photos) {
          setCanUpload(false);
          setUploadError('Upload-Limit erreicht. Kontaktieren Sie den Organisator für ein Upgrade.');
        } else {
          setCanUpload(true);
        }
      } catch (err) {
        console.error('Failed to check package limits', err);
        setCanUpload(false);
        setUploadError('Fehler beim Prüfen des Limits. Upload deaktiviert.');
      }
    };

    checkLimits();
  }, [slug, task]);

  const stopStream = useCallback(() => {
    if (streamRef.current) {
      streamRef.current.getTracks().forEach((track) => track.stop());
      streamRef.current = null;
    }
  }, []);

  const attachStreamToVideo = useCallback((stream: MediaStream) => {
    if (!videoRef.current) return;
    videoRef.current.srcObject = stream;
    videoRef.current
      .play()
      .then(() => {
        if (videoRef.current) {
          videoRef.current.muted = true;
        }
      })
      .catch((error) => console.error('Video play error', error));
  }, []);

  const createConstraint = useCallback(
    (mode: 'user' | 'environment'): MediaStreamConstraints => ({
      video: {
        width: { ideal: 1920 },
        height: { ideal: 1080 },
        facingMode: { ideal: mode },
      },
      audio: false,
    }),
    []
  );

  const startCamera = useCallback(async () => {
    if (!supportsCamera) {
      setPermissionState('unsupported');
      setPermissionMessage('Dieses Gerät oder der Browser unterstützt keine Kamera-Zugriffe.');
      return;
    }

    if (!task || mode === 'uploading') return;

    try {
      setPermissionState('prompt');
      setPermissionMessage(null);

      const stream = await navigator.mediaDevices.getUserMedia(createConstraint(preferences.facingMode));
      stopStream();
      streamRef.current = stream;
      attachStreamToVideo(stream);
      setPermissionState('granted');
    } catch (error: any) {
      console.error('Camera access error', error);
      stopStream();

      if (error?.name === 'NotAllowedError') {
        setPermissionState('denied');
        setPermissionMessage(
          'Kamera-Zugriff wurde blockiert. Prüfe die Berechtigungen deines Browsers und versuche es erneut.'
        );
      } else if (error?.name === 'NotFoundError') {
        setPermissionState('error');
        setPermissionMessage('Keine Kamera gefunden. Du kannst stattdessen ein Foto aus deiner Galerie wählen.');
      } else {
        setPermissionState('error');
        setPermissionMessage(`Kamera konnte nicht gestartet werden: ${error?.message || 'Unbekannter Fehler'}`);
      }
    }
  }, [attachStreamToVideo, createConstraint, mode, preferences.facingMode, stopStream, supportsCamera, task]);

  useEffect(() => {
    if (!task || loadingTask) return;
    startCamera();
    return () => {
      stopStream();
    };
  }, [task, loadingTask, startCamera, stopStream, preferences.facingMode]);

  // Countdown live region updates
  useEffect(() => {
    if (!liveRegionRef.current) return;
    if (mode === 'countdown') {
      liveRegionRef.current.textContent = `Foto wird in ${countdownValue} Sekunden aufgenommen.`;
    } else if (mode === 'review') {
      liveRegionRef.current.textContent = 'Foto aufgenommen. �berpr�fe die Vorschau.';
    } else if (mode === 'uploading') {
      liveRegionRef.current.textContent = 'Foto wird hochgeladen.';
    } else {
      liveRegionRef.current.textContent = '';
    }
  }, [mode, countdownValue]);

  const dismissPrimer = useCallback(() => {
    setShowPrimer(false);
    if (typeof window !== 'undefined') {
      window.localStorage.setItem(primerStorageKey, '1');
    }
  }, [primerStorageKey]);

  const handleToggleGrid = useCallback(() => {
    setPreferences((prev) => ({ ...prev, gridEnabled: !prev.gridEnabled }));
  }, []);

  const handleToggleMirror = useCallback(() => {
    setPreferences((prev) => ({ ...prev, mirrorFrontPreview: !prev.mirrorFrontPreview }));
  }, []);

  const handleToggleCountdown = useCallback(() => {
    setPreferences((prev) => ({ ...prev, countdownEnabled: !prev.countdownEnabled }));
  }, []);

  const handleSwitchCamera = useCallback(() => {
    setPreferences((prev) => ({
      ...prev,
      facingMode: prev.facingMode === 'user' ? 'environment' : 'user',
    }));
  }, []);

  const handleToggleFlashPreference = useCallback(() => {
    setPreferences((prev) => ({ ...prev, flashPreferred: !prev.flashPreferred }));
  }, []);

  const resetCountdownTimer = useCallback(() => {
    if (countdownTimerRef.current) {
      window.clearInterval(countdownTimerRef.current);
      countdownTimerRef.current = null;
    }
  }, []);

  const performCapture = useCallback(() => {
    if (!videoRef.current || !canvasRef.current) {
      setUploadError('Kamera nicht bereit. Bitte versuche es erneut.');
      setMode('preview');
      return;
    }

    const video = videoRef.current;
    const canvas = canvasRef.current;
    const width = video.videoWidth;
    const height = video.videoHeight;

    if (!width || !height) {
      setUploadError('Kamera liefert kein Bild. Bitte starte die Kamera neu.');
      setMode('preview');
      startCamera();
      return;
    }

    canvas.width = width;
    canvas.height = height;
    const context = canvas.getContext('2d');
    if (!context) {
      setUploadError('Canvas konnte nicht initialisiert werden.');
      setMode('preview');
      return;
    }

    context.save();
    const shouldMirror = preferences.facingMode === 'user' && preferences.mirrorFrontPreview;
    if (shouldMirror) {
      context.scale(-1, 1);
      context.drawImage(video, -width, 0, width, height);
    } else {
      context.drawImage(video, 0, 0, width, height);
    }
    context.restore();

    canvas.toBlob(
      (blob) => {
        if (!blob) {
          setUploadError('Foto konnte nicht erstellt werden.');
          setMode('preview');
          return;
        }
        const timestamp = Date.now();
        const fileName = `photo-${timestamp}.jpg`;
        const file = new File([blob], fileName, { type: 'image/jpeg', lastModified: timestamp });
        const dataUrl = canvas.toDataURL('image/jpeg', 0.92);
        setReviewPhoto({ dataUrl, file });
        setMode('review');
      },
      'image/jpeg',
      0.92
    );
  }, [preferences.facingMode, preferences.mirrorFrontPreview, startCamera]);

  const beginCapture = useCallback(() => {
    setUploadError(null);
    if (preferences.countdownEnabled && preferences.countdownSeconds > 0) {
      setMode('countdown');
      setCountdownValue(preferences.countdownSeconds);
      resetCountdownTimer();
      countdownTimerRef.current = window.setInterval(() => {
        setCountdownValue((prev) => {
          if (prev <= 1) {
            resetCountdownTimer();
            performCapture();
            return preferences.countdownSeconds;
          }
          return prev - 1;
        });
      }, 1000);
    } else {
      performCapture();
    }
  }, [performCapture, preferences.countdownEnabled, preferences.countdownSeconds, resetCountdownTimer]);

  const handleRetake = useCallback(() => {
    setReviewPhoto(null);
    setUploadProgress(0);
    setUploadError(null);
    setMode('preview');
  }, []);

  const navigateAfterUpload = useCallback(
    (photoId: number | undefined) => {
      if (!slug || !task) return;
      const params = new URLSearchParams();
      params.set('uploaded', 'true');
      if (task.id) params.set('task', String(task.id));
      if (photoId) params.set('photo', String(photoId));
      if (emotionSlug) params.set('emotion', emotionSlug);
      navigate(`/e/${encodeURIComponent(slug!)}/gallery?${params.toString()}`);
    },
    [emotionSlug, navigate, slug, task]
  );

  const handleUsePhoto = useCallback(async () => {
    if (!slug || !reviewPhoto || !task || !canUpload) return;
    setMode('uploading');
    setUploadProgress(5);
    setUploadError(null);
    setStatusMessage('Foto wird vorbereitet...');

    if (uploadProgressTimerRef.current) {
      window.clearInterval(uploadProgressTimerRef.current);
    }
    uploadProgressTimerRef.current = window.setInterval(() => {
      setUploadProgress((prev) => (prev < 90 ? prev + 5 : prev));
    }, 400);

    try {
      const photoId = await uploadPhoto(slug, reviewPhoto.file, task.id, emotionSlug || undefined);
      setUploadProgress(100);
      setStatusMessage('Upload abgeschlossen.');
      markCompleted(task.id);
      stopStream();
      navigateAfterUpload(photoId);
    } catch (error: any) {
      console.error('Upload failed', error);
      setUploadError(error?.message || 'Upload fehlgeschlagen. Bitte versuche es erneut.');
      setMode('review');
    } finally {
      if (uploadProgressTimerRef.current) {
        window.clearInterval(uploadProgressTimerRef.current);
        uploadProgressTimerRef.current = null;
      }
      setStatusMessage('');
    }
  }, [emotionSlug, markCompleted, navigateAfterUpload, reviewPhoto, slug, stopStream, task, canUpload]);

  const handleGalleryPick = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    if (!canUpload) return;
    const file = event.target.files?.[0];
    if (!file) return;
    setUploadError(null);
    const reader = new FileReader();
    reader.onload = () => {
      setReviewPhoto({ dataUrl: reader.result as string, file });
      setMode('review');
    };
    reader.onerror = () => {
      setUploadError('Auswahl fehlgeschlagen. Bitte versuche es erneut.');
    };
    reader.readAsDataURL(file);
  }, [canUpload]);

  const difficultyBadgeClass = useMemo(() => {
    if (!task) return 'text-white';
    switch (task.difficulty) {
      case 'easy':
        return 'text-emerald-400';
      case 'hard':
        return 'text-rose-400';
      default:
        return 'text-amber-300';
    }
  }, [task]);

  const isCameraActive = permissionState === 'granted' && mode !== 'uploading';
  const showTaskOverlay = task && mode !== 'uploading';

  const isUploadDisabled = !canUpload || !task;

  useEffect(() => () => {
    resetCountdownTimer();
    if (uploadProgressTimerRef.current) {
      window.clearInterval(uploadProgressTimerRef.current);
    }
  }, [resetCountdownTimer]);

  if (!supportsCamera && !task) {
    return (
      <div className="pb-16">
        <Header slug={slug} title="Kamera" />
        <main className="px-4 py-6">
          <Alert>
            <AlertDescription>
              Dieses Gerät unterstützt keine Kamera-Zugriffe. Du kannst stattdessen Fotos aus deiner Galerie hochladen.
            </AlertDescription>
          </Alert>
        </main>
        <BottomNav />
      </div>
    );
  }

  if (loadingTask) {
    return (
      <div className="pb-16">
        <Header slug={slug} title="Kamera" />
        <main className="px-4 py-6 flex flex-col items-center justify-center text-center">
          <Loader2 className="h-10 w-10 animate-spin text-pink-500 mb-4" />
          <p className="text-sm text-muted-foreground">Aufgabe und Kamera werden vorbereitet ...</p>
        </main>
        <BottomNav />
      </div>
    );
  }

  if (!canUpload) {
    return (
      <div className="pb-16">
        <Header slug={slug} title="Kamera" />
        <main className="px-4 py-6">
          <Alert variant="destructive">
            <AlertTriangle className="h-4 w-4" />
            <AlertDescription>
              Upload-Limit erreicht ({eventPackage?.used_photos || 0} / {eventPackage?.package.max_photos || 0} Fotos).
              Kontaktieren Sie den Organisator für ein Package-Upgrade.
            </AlertDescription>
          </Alert>
        </main>
        <BottomNav />
      </div>
    );
  }

  const renderPrimer = () => (
    showPrimer && (
      <div className="mx-4 mt-3 rounded-xl border border-pink-200 bg-white/90 p-4 text-sm text-pink-900 shadow">
        <div className="flex items-start gap-3">
          <Info className="mt-0.5 h-5 w-5 flex-shrink-0" />
          <div className="text-left">
            <p className="font-semibold">Bereit für dein Shooting?</p>
            <p className="mt-1">
              Suche dir gutes Licht, halte die Stimmung der Aufgabe fest und nutze die Kontrollleiste für Countdown, Grid und Kamerawechsel.
            </p>
          </div>
          <Button variant="ghost" size="sm" onClick={dismissPrimer}>
            Alles klar
          </Button>
        </div>
      </div>
    )
  );

  const renderPermissionNotice = () => {
    if (permissionState === 'granted') return null;
    if (permissionState === 'unsupported') {
      return (
        <Alert className="mx-4">
          <AlertDescription>
            Dieses Gerät unterstützt keine Kamera. Nutze den Button `Foto aus Galerie wählen`, um dennoch teilzunehmen.
          </AlertDescription>
        </Alert>
      );
    }
    if (permissionState === 'denied' || permissionState === 'error') {
      return (
        <Alert variant="destructive" className="mx-4">
          <AlertDescription className="space-y-3">
            <div>{permissionMessage}</div>
            <Button size="sm" variant="outline" onClick={startCamera}>
              Erneut versuchen
            </Button>
          </AlertDescription>
        </Alert>
      );
    }
    return (
      <Alert className="mx-4">
        <AlertDescription>
          Wir benötigen Zugriff auf deine Kamera. Bestätige die Browser-Abfrage oder nutze alternativ ein Foto aus deiner Galerie.
        </AlertDescription>
      </Alert>
    );
  };

  return (
    <div className="pb-16">
      <Header slug={slug} title="Kamera" />
      <main className="relative flex flex-col gap-4 pb-4">
        <div className="absolute left-0 right-0 top-0" aria-hidden="true">
          {renderPrimer()}
        </div>
        <div className="pt-32" />
        {permissionState !== 'granted' && renderPermissionNotice()}

        <section className="relative mx-4 overflow-hidden rounded-2xl border border-white/10 bg-black text-white shadow-xl">
          <div className="relative aspect-[3/4] sm:aspect-video">
            <video
              ref={videoRef}
              className={cn(
                'absolute inset-0 h-full w-full object-cover transition-transform duration-200',
                preferences.facingMode === 'user' && preferences.mirrorFrontPreview ? '-scale-x-100' : 'scale-x-100',
                !isCameraActive && 'opacity-30'
              )}
              playsInline
              muted
            />

            {preferences.gridEnabled && (
              <div
                className="pointer-events-none absolute inset-0 z-10"
                style={{
                  backgroundImage:
                    'linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,0.25) 1px, transparent 1px)',
                  backgroundSize: '33.333% 100%, 100% 33.333%',
                }}
              />
            )}

            {!isCameraActive && (
              <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/70 text-center text-sm">
                <Camera className="mb-3 h-8 w-8 text-pink-400" />
                <p className="max-w-xs text-white/90">
                  Kamera ist nicht aktiv. {permissionMessage || 'Tippe auf `Kamera starten`, um loszulegen.'}
                </p>
                <div className="mt-4 flex flex-wrap gap-2">
                  <Button size="sm" onClick={startCamera}>
                    Kamera starten
                  </Button>
                  <Button size="sm" variant="secondary" onClick={() => fileInputRef.current?.click()}>
                    Foto aus Galerie wählen
                  </Button>
                </div>
              </div>
            )}

            {showTaskOverlay && task && (
              <div className="absolute left-3 right-3 top-3 z-30 flex flex-col gap-2 rounded-xl border border-white/15 bg-black/40 p-3 backdrop-blur-sm">
                <div className="flex items-center justify-between gap-2">
                  <Badge variant="secondary" className="flex items-center gap-2 text-xs">
                    <Sparkles className="h-3.5 w-3.5" />
                    Aufgabe #{task.id}
                  </Badge>
                  <span className={cn('text-xs font-medium uppercase tracking-wide', difficultyBadgeClass)}>
                    {task.difficulty === 'easy'
                      ? 'Leicht'
                      : task.difficulty === 'hard'
                      ? 'Herausfordernd'
                      : 'Medium'}
                  </span>
                </div>
                <div>
                  <h1 className="text-lg font-semibold leading-tight">{task.title}</h1>
                  <p className="mt-1 text-xs leading-relaxed text-white/80">{task.description}</p>
                </div>
                <div className="flex flex-wrap items-center gap-2 text-[11px] text-white/70">
                  {task.instructions && <span>Hinweis: {task.instructions}</span>}
                  {emotionSlug && (
                    <span className="rounded-full border border-white/20 px-2 py-0.5">Stimmung: {task.emotion?.name || emotionSlug}</span>
                  )}
                  {preferences.countdownEnabled && (
                    <span className="rounded-full border border-white/20 px-2 py-0.5">
                      Countdown: {preferences.countdownSeconds}s
                    </span>
                  )}
                </div>
              </div>
            )}

            {mode === 'countdown' && (
              <div className="absolute inset-0 z-40 flex flex-col items-center justify-center bg-black/60 text-white">
                <div className="text-6xl font-bold">{countdownValue}</div>
                <p className="mt-2 text-sm text-white/70">Bereit machen ...</p>
              </div>
            )}

            {mode === 'review' && reviewPhoto && (
              <div className="absolute inset-0 z-40 flex flex-col bg-black">
                <img src={reviewPhoto.dataUrl} alt="Aufgenommenes Foto" className="h-full w-full object-contain" />
              </div>
            )}

            {mode === 'uploading' && (
              <div className="absolute inset-0 z-40 flex flex-col items-center justify-center gap-4 bg-black/80 text-white">
                <Loader2 className="h-10 w-10 animate-spin" />
                <div className="w-1/2 min-w-[200px] max-w-sm">
                  <div className="h-2 rounded-full bg-white/20">
                    <div
                      className="h-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 transition-all"
                      style={{ width: `${uploadProgress}%` }}
                    />
                  </div>
                  {statusMessage && <p className="mt-2 text-center text-xs text-white/80">{statusMessage}</p>}
                </div>
              </div>
            )}
          </div>

          <div className="relative z-30 flex flex-col gap-3 bg-gradient-to-t from-black via-black/80 to-transparent p-4">
            {uploadError && (
              <Alert variant="destructive" className="bg-red-500/10 text-white">
                <AlertDescription className="flex items-center gap-2 text-xs">
                  <AlertTriangle className="h-4 w-4" />
                  {uploadError}
                </AlertDescription>
              </Alert>
            )}

            <div className="flex flex-wrap justify-between gap-3">
              <div className="flex flex-wrap gap-2">
                <Button
                  size="icon"
                  variant={preferences.gridEnabled ? 'default' : 'secondary'}
                  className="h-10 w-10 rounded-full bg-white/15 text-white"
                  onClick={handleToggleGrid}
                >
                  <Grid3X3 className="h-5 w-5" />
                  <span className="sr-only">Raster umschalten</span>
                </Button>
                <Button
                  size="icon"
                  variant={preferences.countdownEnabled ? 'default' : 'secondary'}
                  className="h-10 w-10 rounded-full bg-white/15 text-white"
                  onClick={handleToggleCountdown}
                >
                  <span className="text-sm font-semibold">{preferences.countdownSeconds}s</span>
                  <span className="sr-only">Countdown umschalten</span>
                </Button>
                {preferences.facingMode === 'user' && (
                  <Button
                    size="icon"
                    variant={preferences.mirrorFrontPreview ? 'default' : 'secondary'}
                    className="h-10 w-10 rounded-full bg-white/15 text-white"
                    onClick={handleToggleMirror}
                  >
                    <span className="text-sm font-semibold">?</span>
                    <span className="sr-only">Spiegelung für Frontkamera umschalten</span>
                  </Button>
                )}
                <Button
                  size="icon"
                  variant={preferences.flashPreferred ? 'default' : 'secondary'}
                  className="h-10 w-10 rounded-full bg-white/15 text-white"
                  onClick={handleToggleFlashPreference}
                  disabled={preferences.facingMode !== 'environment'}
                >
                  {preferences.flashPreferred ? <Zap className="h-5 w-5 text-yellow-300" /> : <ZapOff className="h-5 w-5" />}
                  <span className="sr-only">Blitzpräferenz umschalten</span>
                </Button>
              </div>

              <div className="flex flex-wrap gap-2">
                <Button
                  variant="secondary"
                  size="sm"
                  className="rounded-full border-white/30 bg-white/10 text-white"
                  onClick={handleSwitchCamera}
                >
                  <RotateCcw className="mr-1 h-4 w-4" />
                  Kamera wechseln
                </Button>
                <Button
                  variant="secondary"
                  size="sm"
                  className="rounded-full border-white/30 bg-white/10 text-white"
                  onClick={() => fileInputRef.current?.click()}
                >
                  <ImagePlus className="mr-1 h-4 w-4" />
                  Foto aus Galerie
                </Button>
              </div>
            </div>

            <div className="flex items-center justify-center">
              {mode === 'review' && reviewPhoto ? (
                <div className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
                  <Button variant="secondary" className="flex-1" onClick={handleRetake}>
                    Noch einmal
                  </Button>
                  <Button className="flex-1" onClick={handleUsePhoto}>
                    Foto verwenden
                  </Button>
                </div>
              ) : (
                <Button
                  size="lg"
                  className="h-16 w-16 rounded-full border-4 border-white/40 bg-white/90 text-black shadow-xl"
                  onClick={beginCapture}
                  disabled={!isCameraActive || mode === 'countdown'}
                >
                  <Camera className="h-7 w-7" />
                  <span className="sr-only">Foto aufnehmen</span>
                </Button>
              )}
            </div>
          </div>
        </section>

        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          className="hidden"
          onChange={handleGalleryPick}
        />

        <div ref={liveRegionRef} className="sr-only" aria-live="assertive" />
      </main>
      <BottomNav />
      <canvas ref={canvasRef} className="hidden" />
    </div>
  );
}