import React, { useEffect, useMemo, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ArrowLeft, Moon, RotateCcw, Save, Sparkles, Sun, UploadCloud } from 'lucide-react';
import toast from 'react-hot-toast';

import { AdminLayout } from '../components/AdminLayout';
import { SectionCard, SectionHeader } from '../components/tenant';
import { FloatingActionBar, type FloatingAction } from '../components/FloatingActionBar';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { ADMIN_EVENT_VIEW_PATH } from '../constants';
import { getEvent, getTenantSettings, updateEvent, type TenantEvent } from '../api';
import { cn } from '@/lib/utils';
import { getContrastingTextColor } from '../../guest/lib/color';
import { buildEventTabs } from '../lib/eventTabs';
import { ensureFontLoaded, useTenantFonts } from '../lib/fonts';

const DEFAULT_FONT_VALUE = '__default';
const CUSTOM_FONT_VALUE = '__custom';
const MAX_LOGO_UPLOAD_BYTES = 1024 * 1024;

const EMOTICON_GRID: string[] = [
  '✨', '🎉', '🎊', '🥳', '🎈', '🎁', '🎂', '🍾', '🥂', '🍻',
  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
  '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
  '😎', '🤩', '🤗', '🤝', '👍', '🙌', '👏', '👐', '🤲', '🙏',
  '🤍', '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤎', '🤍',
  '⭐', '🌟', '💫', '🔥', '⚡', '🌈', '☀️', '🌅', '🌠', '🌌',
  '🎵', '🎶', '🎤', '🎧', '🎸', '🥁', '🎺', '🎹', '🎻', '🪩',
  '🍕', '🍔', '🌮', '🌯', '🍣', '🍱', '🍰', '🍪', '🍫', '🍩',
  '☕', '🍵', '🥤', '🍹', '🍸', '🍷', '🍺', '🍻', '🥂', '🍾',
  '📸', '🎥', '📹', '📱', '💡', '🛎️', '🪄', '🎯', '🏆', '🥇',
];

type BrandingForm = {
  useDefault: boolean;
  palette: {
    primary: string;
    secondary: string;
    background: string;
    surface: string;
  };
  typography: {
    heading: string;
    body: string;
    size: 's' | 'm' | 'l';
  };
  logo: {
    mode: 'emoticon' | 'upload';
    value: string;
    position: 'left' | 'right' | 'center';
    size: 's' | 'm' | 'l';
  };
  buttons: {
    style: 'filled' | 'outline';
    radius: number;
    primary: string;
    secondary: string;
    linkColor: string;
  };
  mode: 'light' | 'dark' | 'auto';
};

type BrandingSource = Record<string, unknown> | null | undefined;

const DEFAULT_BRANDING_FORM: BrandingForm = {
  useDefault: false,
  palette: {
    primary: '#f43f5e',
    secondary: '#fb7185',
    background: '#ffffff',
    surface: '#ffffff',
  },
  typography: {
    heading: '',
    body: '',
    size: 'm',
  },
  logo: {
    mode: 'emoticon',
    value: '✨',
    position: 'left',
    size: 'm',
  },
  buttons: {
    style: 'filled',
    radius: 12,
    primary: '#f43f5e',
    secondary: '#fb7185',
    linkColor: '#fb7185',
  },
  mode: 'auto',
};

function asString(value: unknown, fallback = ''): string {
  return typeof value === 'string' ? value : fallback;
}

function asHex(value: unknown, fallback: string): string {
  if (typeof value !== 'string') return fallback;
  const trimmed = value.trim();
  return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(trimmed) ? trimmed : fallback;
}

function asNumber(value: unknown, fallback: number): number {
  if (typeof value === 'number' && Number.isFinite(value)) {
    return value;
  }
  if (typeof value === 'string' && value.trim() !== '') {
    const parsed = Number(value);
    return Number.isFinite(parsed) ? parsed : fallback;
  }
  return fallback;
}

function coerceSize(value: unknown, fallback: 's' | 'm' | 'l'): 's' | 'm' | 'l' {
  return value === 's' || value === 'm' || value === 'l' ? value : fallback;
}

function coerceLogoMode(value: unknown, fallback: 'emoticon' | 'upload'): 'emoticon' | 'upload' {
  return value === 'upload' || value === 'emoticon' ? value : fallback;
}

function coercePosition(value: unknown, fallback: 'left' | 'right' | 'center'): 'left' | 'right' | 'center' {
  return value === 'left' || value === 'right' || value === 'center' ? value : fallback;
}

function coerceButtonStyle(value: unknown, fallback: 'filled' | 'outline'): 'filled' | 'outline' {
  return value === 'outline' || value === 'filled' ? value : fallback;
}

function mapBranding(source: BrandingSource, fallback: BrandingForm = DEFAULT_BRANDING_FORM): BrandingForm {
  const paletteSource = (source?.palette as Record<string, unknown> | undefined) ?? {};
  const typographySource = (source?.typography as Record<string, unknown> | undefined) ?? {};
  const logoSource = (source?.logo as Record<string, unknown> | undefined) ?? {};
  const buttonSource = (source?.buttons as Record<string, unknown> | undefined) ?? {};

  const palette = {
    primary: asHex(paletteSource.primary ?? source?.primary_color, fallback.palette.primary),
    secondary: asHex(paletteSource.secondary ?? source?.secondary_color, fallback.palette.secondary),
    background: asHex(paletteSource.background ?? source?.background_color, fallback.palette.background),
    surface: asHex(paletteSource.surface ?? source?.surface_color ?? paletteSource.background ?? source?.background_color, fallback.palette.surface ?? fallback.palette.background),
  };

  const typography = {
    heading: asString(typographySource.heading ?? source?.heading_font ?? source?.font_family, fallback.typography.heading),
    body: asString(typographySource.body ?? source?.body_font ?? source?.font_family, fallback.typography.body),
    size: coerceSize(typographySource.size ?? source?.font_size, fallback.typography.size),
  };

  const logoMode = coerceLogoMode(logoSource.mode ?? source?.logo_mode, fallback.logo.mode);
  const logoValue = asString(logoSource.value ?? source?.logo_value ?? source?.logo_url ?? fallback.logo.value, fallback.logo.value);

  const logo = {
    mode: logoMode,
    value: logoValue,
    position: coercePosition(logoSource.position ?? source?.logo_position, fallback.logo.position),
    size: coerceSize(logoSource.size ?? source?.logo_size, fallback.logo.size),
  };

  const buttons = {
    style: coerceButtonStyle(buttonSource.style ?? source?.button_style, fallback.buttons.style),
    radius: asNumber(buttonSource.radius ?? source?.button_radius, fallback.buttons.radius),
    primary: asHex(buttonSource.primary ?? source?.button_primary_color, fallback.buttons.primary ?? palette.primary),
    secondary: asHex(buttonSource.secondary ?? source?.button_secondary_color, fallback.buttons.secondary ?? palette.secondary),
    linkColor: asHex(buttonSource.link_color ?? source?.link_color, fallback.buttons.linkColor ?? palette.secondary),
  };

  return {
    useDefault: Boolean(source?.use_default_branding ?? source?.use_default ?? fallback.useDefault),
    palette,
    typography,
    logo,
    buttons,
    mode: (source?.mode as BrandingForm['mode']) ?? fallback.mode,
  };
}

function buildPayload(form: BrandingForm) {
  return {
    use_default_branding: form.useDefault,
    primary_color: form.palette.primary,
    secondary_color: form.palette.secondary,
    background_color: form.palette.background,
    surface_color: form.palette.surface,
    heading_font: form.typography.heading || null,
    body_font: form.typography.body || null,
    font_size: form.typography.size,
    logo_mode: form.logo.mode,
    logo_value: form.logo.value || null,
    logo_position: form.logo.position,
    logo_size: form.logo.size,
    button_style: form.buttons.style,
    button_radius: form.buttons.radius,
    button_primary_color: form.buttons.primary || null,
    button_secondary_color: form.buttons.secondary || null,
    link_color: form.buttons.linkColor || null,
    mode: form.mode,
    palette: {
      primary: form.palette.primary,
      secondary: form.palette.secondary,
      background: form.palette.background,
      surface: form.palette.surface,
    },
    typography: {
      heading: form.typography.heading || null,
      body: form.typography.body || null,
      size: form.typography.size,
    },
    logo: {
      mode: form.logo.mode,
      value: form.logo.value || null,
      position: form.logo.position,
      size: form.logo.size,
    },
    buttons: {
      style: form.buttons.style,
      radius: form.buttons.radius,
      primary: form.buttons.primary || null,
      secondary: form.buttons.secondary || null,
      link_color: form.buttons.linkColor || null,
    },
  };
}

function resolvePreviewBranding(form: BrandingForm, tenantBranding: BrandingForm | null): BrandingForm {
  if (form.useDefault && tenantBranding) {
    return { ...tenantBranding, useDefault: true };
  }
  if (form.useDefault) {
    return { ...DEFAULT_BRANDING_FORM, useDefault: true };
  }
  return form;
}

function coerceEventName(value: unknown): string {
  if (typeof value === 'string') {
    return value;
  }

  if (value && typeof value === 'object') {
    const record = value as Record<string, unknown>;
    const preferred = record.de ?? record.en ?? Object.values(record)[0];
    if (typeof preferred === 'string') {
      return preferred;
    }
  }

  return '';
}

function coerceEventDate(value: unknown): string | null {
  if (typeof value === 'string' && value.trim()) {
    const raw = value.trim();

    // If ISO with timezone, convert to local date (validation uses server local date)
    const parsed = new Date(raw);
    if (!Number.isNaN(parsed.valueOf())) {
      const year = parsed.getFullYear();
      const month = String(parsed.getMonth() + 1).padStart(2, '0');
      const day = String(parsed.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }

    if (raw.length >= 10) {
      return raw.slice(0, 10);
    }
    return raw;
  }
  return null;
}

export default function EventBrandingPage(): React.ReactElement {
  const { slug } = useParams<{ slug?: string }>();
  const navigate = useNavigate();
  const { t } = useTranslation('management');
  const queryClient = useQueryClient();
  const [form, setForm] = useState<BrandingForm>(DEFAULT_BRANDING_FORM);
  const [previewTheme, setPreviewTheme] = useState<'light' | 'dark'>('light');
  const [emoticonDialogOpen, setEmoticonDialogOpen] = useState(false);
  const { fonts: availableFonts, isLoading: fontsLoading } = useTenantFonts();

  const title = t('branding.title', 'Branding & Fonts');
  const subtitle = t('branding.subtitle', 'Farben, Typografie, Logo/Emoticon und Schaltflächen für die Gäste-App anpassen.');

  const { data: tenantSettings } = useQuery({
    queryKey: ['tenant', 'settings', 'branding'],
    queryFn: getTenantSettings,
    staleTime: 60_000,
  });

  const tenantBranding = useMemo(
    () => mapBranding((tenantSettings?.settings as Record<string, unknown> | undefined)?.branding as BrandingSource, DEFAULT_BRANDING_FORM),
    [tenantSettings],
  );

  const {
    data: loadedEvent,
    isLoading: eventLoading,
  } = useQuery<TenantEvent>({
    queryKey: ['tenant', 'events', slug],
    queryFn: () => getEvent(slug!),
    enabled: Boolean(slug),
    staleTime: 30_000,
  });

  const eventTabs = useMemo(() => {
    if (!loadedEvent) return [];
    const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
    return buildEventTabs(loadedEvent, translateMenu);
  }, [loadedEvent, t]);

  useEffect(() => {
    if (!loadedEvent) return;

    const brandingSource = (loadedEvent.settings as Record<string, unknown> | undefined)?.branding as BrandingSource;
    const mapped = mapBranding(brandingSource, tenantBranding ?? DEFAULT_BRANDING_FORM);
    setForm(mapped);
    setPreviewTheme(mapped.mode === 'dark' ? 'dark' : 'light');
  }, [loadedEvent, tenantBranding]);

  useEffect(() => {
    const resolved = resolvePreviewBranding(form, tenantBranding);
    setPreviewTheme(resolved.mode === 'dark' ? 'dark' : 'light');
  }, [form.mode, form.useDefault, tenantBranding]);

  useEffect(() => {
    const families = [form.typography.heading, form.typography.body].filter(Boolean) as string[];
    families.forEach((family) => {
      const font = availableFonts.find((entry) => entry.family === family);
      if (font) {
        void ensureFontLoaded(font);
      }
    });
  }, [availableFonts, form.typography.body, form.typography.heading]);

  const mutation = useMutation({
    mutationFn: async (payload: BrandingForm) => {
      if (!slug) throw new Error('Missing event context');

      // Fetch a fresh snapshot to ensure required fields are sent and settings are merged instead of overwritten.
      const latest = await getEvent(slug);
      const eventTypeId = latest.event_type_id ?? latest.event_type?.id;
      const eventDate = coerceEventDate(latest.event_date ?? loadedEvent?.event_date);
      const eventName = coerceEventName(latest.name ?? loadedEvent?.name);

      if (!eventTypeId || !eventName || !eventDate) {
        throw new Error('Missing required event fields');
      }

      const mergedSettings = {
        ...(latest.settings ?? {}),
        branding: buildPayload(payload),
      } as Record<string, unknown>;

      const response = await updateEvent(slug, {
        name: eventName,
        slug: latest.slug,
        event_type_id: eventTypeId,
        event_date: eventDate,
        status: latest.status,
        is_active: latest.is_active,
        package_id: latest.package?.id,
        settings: mergedSettings,
      });
      return response;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['tenant', 'events', slug] });
      toast.success(t('branding.saved', 'Branding gespeichert.'));
    },
    onError: (error: unknown) => {
      console.error('[branding] save failed', error);
      if ((error as { meta?: { errors?: Record<string, string[]> } })?.meta?.errors) {
        const errors = (error as { meta?: { errors?: Record<string, string[]> } }).meta?.errors ?? {};
        const flat = Object.entries(errors)
          .map(([key, messages]) => `${key}: ${Array.isArray(messages) ? messages.join(', ') : String(messages)}`)
          .join('\n');
        toast.error(flat || t('branding.saveError', 'Branding konnte nicht gespeichert werden.'));
        return;
      }
      toast.error(t('branding.saveError', 'Branding konnte nicht gespeichert werden.'));
    },
  });

  const { mutate, isPending } = mutation;

  if (!slug) {
    return (
      <AdminLayout title={title} subtitle={subtitle} tabs={[]} currentTabKey="branding">
        <SectionCard>
          <p className="text-sm text-slate-600 dark:text-slate-300">
            {t('branding.errors.missingSlug', 'Kein Event ausgewählt – bitte über die Eventliste öffnen.')}
          </p>
        </SectionCard>
      </AdminLayout>
    );
  }

  const resolveFontSelectValue = (current: string): string => {
    if (!current) return DEFAULT_FONT_VALUE;
    return availableFonts.some((font) => font.family === current) ? current : CUSTOM_FONT_VALUE;
  };

  const handleFontSelect = (key: 'heading' | 'body', value: string) => {
    const resolved = value === CUSTOM_FONT_VALUE || value === DEFAULT_FONT_VALUE ? '' : value;
    setForm((prev) => ({ ...prev, typography: { ...prev.typography, [key]: resolved } }));
    const font = availableFonts.find((entry) => entry.family === resolved);
    if (font) {
      void ensureFontLoaded(font);
    }
  };

  const handleFontPreview = (family: string) => {
    const font = availableFonts.find((entry) => entry.family === family);
    if (font) {
      void ensureFontLoaded(font);
    }
  };

  const handleLogoUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    if (file.size > MAX_LOGO_UPLOAD_BYTES) {
      toast.error(t('branding.logoTooLarge', 'Das Logo darf maximal 1 MB groß sein.'));
      event.target.value = '';
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      const dataUrl = typeof reader.result === 'string' ? reader.result : '';
      setForm((prev) => ({ ...prev, logo: { ...prev.logo, mode: 'upload', value: dataUrl } }));
    };
    reader.readAsDataURL(file);
  };

  const handleEmoticonSelect = (value: string) => {
    setForm((prev) => ({ ...prev, logo: { ...prev.logo, mode: 'emoticon', value } }));
  };

  const previewBranding = resolvePreviewBranding(form, tenantBranding);

  const fabActions = React.useMemo<FloatingAction[]>(() => {
    if (!slug) return [];

    return [
      {
        key: 'save',
        label: isPending ? t('branding.saving', 'Speichern...') : t('branding.save', 'Branding speichern'),
        icon: Save,
        onClick: () => mutate(form),
        loading: isPending,
        disabled: isPending || eventLoading,
        tone: 'primary',
      },
      {
        key: 'reset',
        label: t('branding.reset', 'Auf Standard zurücksetzen'),
        icon: RotateCcw,
        onClick: () => setForm({ ...(tenantBranding ?? DEFAULT_BRANDING_FORM), useDefault: true }),
        disabled: isPending,
        tone: 'secondary',
      },
    ];
  }, [slug, mutate, form, isPending, eventLoading, t, tenantBranding]);

  return (
    <AdminLayout
      title={title}
      subtitle={subtitle}
      tabs={eventTabs}
      currentTabKey="branding"
      actions={(
        <Button variant="outline" size="sm" onClick={() => navigate(ADMIN_EVENT_VIEW_PATH(slug))}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          {t('branding.actions.back', 'Zurück zum Event')}
        </Button>
      )}
    >
      <div className="space-y-4 pb-28">
        <SectionCard className="space-y-3">
          <SectionHeader
            eyebrow={t('branding.sections.mode', 'Standard vs. Event-spezifisch')}
            title={t('branding.sections.toggleTitle', 'Branding-Quelle wählen')}
            description={t('branding.sections.toggleDescription', 'Nutze das Standard-Branding oder überschreibe es nur für dieses Event.')}
          />
          <div className="flex items-center justify-between rounded-2xl border border-slate-200 bg-white/80 p-4 dark:border-white/10 dark:bg-slate-900/40">
            <div>
              <p className="text-sm font-semibold text-slate-900 dark:text-white">
                {form.useDefault
                  ? t('branding.useDefault', 'Standard nutzen')
                  : t('branding.useCustom', 'Event-spezifisch')}
              </p>
              <p className="text-xs text-slate-600 dark:text-slate-300">
                {t('branding.toggleHint', 'Standard übernimmt die Tenant-Farben, Event-spezifisch überschreibt sie.')}
              </p>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs text-slate-500 dark:text-slate-300">{t('branding.standard', 'Standard')}</span>
              <Switch
                checked={!form.useDefault}
                onCheckedChange={(checked) => setForm((prev) => ({ ...prev, useDefault: !checked ? true : false }))}
                aria-label={t('branding.toggleAria', 'Event-spezifisches Branding aktivieren')}
              />
              <span className="text-xs text-slate-500 dark:text-slate-300">{t('branding.custom', 'Event')}</span>
            </div>
          </div>
        </SectionCard>

        <div className="grid gap-4 lg:grid-cols-2">
          <SectionCard className="space-y-4">
            <SectionHeader
              eyebrow={t('branding.sections.palette', 'Palette & Modus')}
              title={t('branding.sections.colorsTitle', 'Farben & Light/Dark')}
              description={t('branding.sections.colorsDescription', 'Primär-, Sekundär-, Hintergrund- und Surface-Farbe festlegen.')}
            />
            <div className="grid grid-cols-2 gap-3">
              {(['primary', 'secondary', 'background', 'surface'] as const).map((key) => (
                <div key={key} className="space-y-2">
                  <Label htmlFor={`color-${key}`}>{key === 'primary' ? 'Primary' : key === 'secondary' ? 'Secondary' : key === 'background' ? 'Background' : 'Surface'}</Label>
                  <div className="flex items-center gap-3">
                    <Input
                      id={`color-${key}`}
                      type="color"
                      value={form.palette[key]}
                      onChange={(e) => setForm((prev) => ({ ...prev, palette: { ...prev.palette, [key]: e.target.value } }))}
                      disabled={form.useDefault}
                      className="h-10 w-16 p-1"
                    />
                    <Input
                      type="text"
                      value={form.palette[key]}
                      onChange={(e) => setForm((prev) => ({ ...prev, palette: { ...prev.palette, [key]: e.target.value } }))}
                      disabled={form.useDefault}
                    />
                  </div>
                </div>
              ))}
              <div className="space-y-2">
                <Label>{t('branding.mode', 'Modus')}</Label>
                <Select
                  value={form.mode}
                  onValueChange={(value) => {
                    setForm((prev) => ({ ...prev, mode: value as BrandingForm['mode'] }));
                    setPreviewTheme(value === 'dark' ? 'dark' : 'light');
                  }}
                  disabled={form.useDefault}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="auto" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="auto">{t('branding.modeAuto', 'Auto')}</SelectItem>
                    <SelectItem value="light">{t('branding.modeLight', 'Hell')}</SelectItem>
                    <SelectItem value="dark">{t('branding.modeDark', 'Dunkel')}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </SectionCard>

          <SectionCard className="space-y-4">
            <SectionHeader
              eyebrow={t('branding.sections.typography', 'Typografie & Logo')}
              title={t('branding.sections.fonts', 'Schriften & Logo/Emoticon')}
              description={t('branding.sections.fontDescription', 'Heading- und Body-Font sowie Logo/Emoji und Ausrichtung festlegen.')}
            />
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label>{t('branding.headingFont', 'Heading Font')}</Label>
                <Select
                  value={resolveFontSelectValue(form.typography.heading)}
                  onValueChange={(value) => handleFontSelect('heading', value)}
                  disabled={form.useDefault || fontsLoading}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={t('branding.fontDefault', 'Standard (Tenant)')} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value={DEFAULT_FONT_VALUE}>{t('branding.fontDefault', 'Standard (Tenant)')}</SelectItem>
                    {availableFonts.map((font) => (
                      <SelectItem
                        key={font.family}
                        value={font.family}
                        onMouseEnter={() => handleFontPreview(font.family)}
                        onFocus={() => handleFontPreview(font.family)}
                      >
                        <span className="flex items-center justify-between gap-3">
                          <span className="truncate" style={{ fontFamily: font.family }}>{font.family}</span>
                          <span className="text-xs text-muted-foreground" style={{ fontFamily: font.family }}>AaBb</span>
                        </span>
                      </SelectItem>
                    ))}
                    <SelectItem value={CUSTOM_FONT_VALUE}>{t('branding.fontCustom', 'Eigene Schrift eingeben')}</SelectItem>
                  </SelectContent>
                </Select>
                <Input
                  value={form.typography.heading}
                  onChange={(e) => setForm((prev) => ({ ...prev, typography: { ...prev.typography, heading: e.target.value } }))}
                  disabled={form.useDefault}
                  placeholder="z. B. Playfair Display"
                  style={form.typography.heading ? { fontFamily: form.typography.heading } : undefined}
                />
              </div>
              <div className="space-y-2">
                <Label>{t('branding.bodyFont', 'Body Font')}</Label>
                <Select
                  value={resolveFontSelectValue(form.typography.body)}
                  onValueChange={(value) => handleFontSelect('body', value)}
                  disabled={form.useDefault || fontsLoading}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={t('branding.fontDefault', 'Standard (Tenant)')} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value={DEFAULT_FONT_VALUE}>{t('branding.fontDefault', 'Standard (Tenant)')}</SelectItem>
                    {availableFonts.map((font) => (
                      <SelectItem
                        key={font.family}
                        value={font.family}
                        onMouseEnter={() => handleFontPreview(font.family)}
                        onFocus={() => handleFontPreview(font.family)}
                      >
                        <span className="flex items-center justify-between gap-3">
                          <span className="truncate" style={{ fontFamily: font.family }}>{font.family}</span>
                          <span className="text-xs text-muted-foreground" style={{ fontFamily: font.family }}>AaBb</span>
                        </span>
                      </SelectItem>
                    ))}
                    <SelectItem value={CUSTOM_FONT_VALUE}>{t('branding.fontCustom', 'Eigene Schrift eingeben')}</SelectItem>
                  </SelectContent>
                </Select>
                <Input
                  value={form.typography.body}
                  onChange={(e) => setForm((prev) => ({ ...prev, typography: { ...prev.typography, body: e.target.value } }))}
                  disabled={form.useDefault}
                  placeholder="z. B. Inter, sans-serif"
                  style={form.typography.body ? { fontFamily: form.typography.body } : undefined}
                />
              </div>
              <div className="space-y-2">
                <Label>{t('branding.size', 'Schriftgröße')}</Label>
                <Select
                  value={form.typography.size}
                  onValueChange={(value) => setForm((prev) => ({ ...prev, typography: { ...prev.typography, size: value as BrandingForm['typography']['size'] } }))}
                  disabled={form.useDefault}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="s">S</SelectItem>
                    <SelectItem value="m">M</SelectItem>
                    <SelectItem value="l">L</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>{t('branding.logoValue', 'Emoticon/Logo-URL')}</Label>
                <Input
                  value={form.logo.value}
                  onChange={(e) => setForm((prev) => ({ ...prev, logo: { ...prev.logo, value: e.target.value } }))}
                  disabled={form.useDefault}
                  placeholder="✨ oder https://..."
                />
              </div>
              <div className="space-y-2">
                <Label>{t('branding.logoMode', 'Logo-Modus')}</Label>
                <Select
                  value={form.logo.mode}
                  onValueChange={(value) => setForm((prev) => ({ ...prev, logo: { ...prev.logo, mode: value as BrandingForm['logo']['mode'] } }))}
                  disabled={form.useDefault}
                >
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="emoticon">{t('branding.emoticon', 'Emoticon/Text')}</SelectItem>
                    <SelectItem value="upload">{t('branding.upload', 'Upload/URL')}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              {form.logo.mode === 'emoticon' && (
                <div className="space-y-2">
                  <Label>{t('branding.logoEmoticonGrid', 'Schnellauswahl (Emoticons)')}</Label>
                  <Dialog open={emoticonDialogOpen} onOpenChange={setEmoticonDialogOpen}>
                    <DialogTrigger asChild>
                      <Button type="button" variant="outline" size="sm" disabled={form.useDefault}>
                        {t('branding.openEmoticons', 'Emoticon-Gitter öffnen')}
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="max-w-xl bg-white/95 p-4 text-left dark:bg-slate-950">
                      <DialogHeader>
                        <DialogTitle className="text-base font-semibold">
                          {t('branding.logoEmoticonGrid', 'Schnellauswahl (Emoticons)')}
                        </DialogTitle>
                      </DialogHeader>
                      <div className="mt-3 grid grid-cols-8 gap-2 sm:grid-cols-10">
                        {EMOTICON_GRID.map((emoji) => {
                          const isActive = form.logo.value === emoji;
                          return (
                            <button
                              key={emoji}
                              type="button"
                              className={cn(
                                'flex h-12 w-full items-center justify-center rounded-lg text-3xl leading-none transition sm:h-12',
                                isActive
                                  ? 'bg-slate-900 text-white shadow-sm ring-2 ring-slate-900 dark:bg-white/90 dark:text-slate-900 dark:ring-white/90'
                                  : 'bg-white text-slate-900 hover:bg-slate-100 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700',
                              )}
                              onClick={() => {
                                handleEmoticonSelect(emoji);
                                setEmoticonDialogOpen(false);
                              }}
                              disabled={form.useDefault}
                              title={emoji}
                            >
                              <span aria-hidden>{emoji}</span>
                            </button>
                          );
                        })}
                      </div>
                    </DialogContent>
                  </Dialog>
                </div>
              )}
              {form.logo.mode === 'upload' && (
                <div className="space-y-2">
                  <Label>{t('branding.logoUpload', 'Logo hochladen')}</Label>
                  <div className="flex flex-wrap items-center gap-3">
                      <Button type="button" variant="outline" size="sm" disabled={form.useDefault} onClick={() => document.getElementById('branding-logo-upload')?.click()}>
                        <UploadCloud className="mr-2 h-4 w-4" />
                        {t('branding.logoUploadButton', 'Datei auswählen')}
                      </Button>
                    <input
                      id="branding-logo-upload"
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={handleLogoUpload}
                      disabled={form.useDefault}
                    />
                    <span className="text-xs text-slate-600 dark:text-slate-300">
                      {t('branding.logoUploadHint', 'Max. 1 MB, PNG/SVG/JPG. Aktueller Wert wird ersetzt.')}
                    </span>
                  </div>
                </div>
              )}
              <div className="space-y-2">
                <Label>{t('branding.logoPosition', 'Position')}</Label>
                <Select
                  value={form.logo.position}
                  onValueChange={(value) => setForm((prev) => ({ ...prev, logo: { ...prev.logo, position: value as BrandingForm['logo']['position'] } }))}
                  disabled={form.useDefault}
                >
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="left">{t('branding.left', 'Links')}</SelectItem>
                    <SelectItem value="center">{t('branding.center', 'Zentriert')}</SelectItem>
                    <SelectItem value="right">{t('branding.right', 'Rechts')}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </SectionCard>
        </div>

        <SectionCard className="space-y-4">
          <SectionHeader
            eyebrow={t('branding.sections.buttons', 'Buttons & Links')}
            title={t('branding.sections.buttonsTitle', 'Buttons, Links & Radius')}
            description={t('branding.sections.buttonsDescription', 'Stil, Radius und optionale Link-Farbe festlegen.')}
          />
          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <Label>{t('branding.buttonStyle', 'Stil')}</Label>
              <Select
                value={form.buttons.style}
                onValueChange={(value) => setForm((prev) => ({ ...prev, buttons: { ...prev.buttons, style: value as BrandingForm['buttons']['style'] } }))}
                disabled={form.useDefault}
              >
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="filled">{t('branding.filled', 'Filled')}</SelectItem>
                  <SelectItem value="outline">{t('branding.outline', 'Outline')}</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>{t('branding.radius', 'Radius')}</Label>
              <div className="flex items-center gap-3">
                <input
                  type="range"
                  min={0}
                  max={32}
                  value={form.buttons.radius}
                  onChange={(e) => setForm((prev) => ({ ...prev, buttons: { ...prev.buttons, radius: Number(e.target.value) } }))}
                  disabled={form.useDefault}
                  className="w-full"
                />
                <span className="w-10 text-right text-sm text-slate-600 dark:text-slate-200">{form.buttons.radius}px</span>
              </div>
            </div>
            <div className="space-y-2">
              <Label>{t('branding.linkColor', 'Link-Farbe')}</Label>
              <Input
                value={form.buttons.linkColor}
                onChange={(e) => setForm((prev) => ({ ...prev, buttons: { ...prev.buttons, linkColor: e.target.value } }))}
                disabled={form.useDefault}
                placeholder="#fb7185"
              />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <Label>{t('branding.buttonPrimary', 'Button Primary')}</Label>
              <Input
                value={form.buttons.primary}
                onChange={(e) => setForm((prev) => ({ ...prev, buttons: { ...prev.buttons, primary: e.target.value } }))}
                disabled={form.useDefault}
                placeholder={form.palette.primary}
              />
            </div>
            <div className="space-y-2">
              <Label>{t('branding.buttonSecondary', 'Button Secondary')}</Label>
              <Input
                value={form.buttons.secondary}
                onChange={(e) => setForm((prev) => ({ ...prev, buttons: { ...prev.buttons, secondary: e.target.value } }))}
                disabled={form.useDefault}
                placeholder={form.palette.secondary}
              />
            </div>
          </div>
        </SectionCard>

        <SectionCard className="space-y-4">
          <SectionHeader
            eyebrow={t('branding.sections.preview', 'Preview')}
            title={t('branding.sections.previewTitle', 'Mini-Gastansicht')}
            description={t('branding.sections.previewCopy', 'Header, CTA und Bottom-Navigation nach Branding visualisiert.')}
          />
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-200">
              <Sparkles className="h-4 w-4" />
              <span>{form.useDefault ? t('branding.usingDefault', 'Standard-Branding aktiv') : t('branding.usingCustom', 'Event-Branding aktiv')}</span>
            </div>
            <div className="flex items-center gap-2">
              <Button
                size="icon"
                variant={previewTheme === 'light' ? 'secondary' : 'ghost'}
                onClick={() => setPreviewTheme('light')}
                aria-label="Light Preview"
              >
                <Sun className="h-4 w-4" />
              </Button>
              <Button
                size="icon"
                variant={previewTheme === 'dark' ? 'secondary' : 'ghost'}
                onClick={() => setPreviewTheme('dark')}
                aria-label="Dark Preview"
              >
                <Moon className="h-4 w-4" />
              </Button>
            </div>
          </div>
          <BrandingPreview branding={previewBranding} theme={previewTheme} />
        </SectionCard>
      </div>

      <FloatingActionBar actions={fabActions} />
    </AdminLayout>
  );
}

function BrandingPreview({ branding, theme }: { branding: BrandingForm; theme: 'light' | 'dark' }) {
  const { t } = useTranslation('management');
  const textColor = getContrastingTextColor(branding.palette.primary, '#0f172a', '#ffffff');
  const headerStyle: React.CSSProperties = {
    background: `linear-gradient(135deg, ${branding.palette.primary}, ${branding.palette.secondary})`,
    color: textColor,
  };

  const logoVisual = useMemo(() => {
    const looksLikeImage = branding.logo.mode === 'upload' && branding.logo.value && /^(data:|https?:)/i.test(branding.logo.value);
    if (looksLikeImage) {
      return <img src={branding.logo.value} alt="Logo" className="h-10 w-10 rounded-full object-cover" />;
    }
    return <span className="text-xl">{branding.logo.value || '✨'}</span>;
  }, [branding.logo.mode, branding.logo.value]);

  const buttonStyle: React.CSSProperties = branding.buttons.style === 'outline'
    ? {
        border: `2px solid ${branding.buttons.primary || branding.palette.primary}`,
        color: branding.buttons.primary || branding.palette.primary,
        background: 'transparent',
      }
    : {
        background: branding.buttons.primary || branding.palette.primary,
        color: getContrastingTextColor(branding.buttons.primary || branding.palette.primary, '#0f172a', '#ffffff'),
        border: 'none',
      };

  return (
    <Card className={cn('overflow-hidden', theme === 'dark' ? 'bg-slate-900 text-white' : 'bg-white text-slate-900')}>
      <CardHeader className="p-0">
        <div className="px-4 py-3" style={headerStyle}>
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-white/90 text-xl">
              {logoVisual}
            </div>
            <div className="flex flex-col">
              <CardTitle className="text-base font-semibold" style={{ fontFamily: branding.typography.heading || undefined }}>
                {t('branding.preview.demoTitle', 'Demo Event')}
              </CardTitle>
              <span className="text-xs opacity-80">
                {t('branding.preview.guestView', { mode: branding.mode, defaultValue: 'Guest view · {{mode}}' })}
              </span>
            </div>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4 bg-[var(--surface)] px-4 py-5" style={{ ['--surface' as string]: branding.palette.surface }}>
        <div className="space-y-2">
          <p className="text-sm text-slate-600 dark:text-slate-200" style={{ fontFamily: branding.typography.body || undefined }}>
            {t('branding.preview.ctaCopy', 'CTA & buttons reflect the chosen style.')}
          </p>
          <Button
            className="shadow-md transition"
            style={{
              ...buttonStyle,
              borderRadius: branding.buttons.radius,
              paddingInline: '18px',
              paddingBlock: '10px',
            }}
          >
            {t('branding.preview.cta', 'Upload photos now')}
          </Button>
        </div>
        <Separator />
        <div className="flex items-center justify-between rounded-2xl border border-dashed border-slate-200 p-3 text-sm dark:border-slate-700" style={{ borderRadius: branding.buttons.radius }}>
          <span style={{ color: branding.buttons.linkColor || branding.palette.secondary }}>
            {t('branding.preview.bottomNav', 'Bottom navigation')}
          </span>
          <div className="flex items-center gap-2">
            <div className="h-1.5 w-10 rounded-full" style={{ background: branding.palette.primary }} />
            <div className="h-1.5 w-10 rounded-full" style={{ background: branding.palette.secondary }} />
            <div className="h-1.5 w-10 rounded-full" style={{ background: branding.palette.surface }} />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}