import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowLeft, Camera, Copy, Download, Heart, Loader2, RefreshCw, Share2, Sparkles } from 'lucide-react';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

import { AdminLayout } from '../components/AdminLayout';
import {
  createQrInvite,
  EventQrInvite,
  EventQrInviteLayout,
  EventStats as TenantEventStats,
  getEvent,
  getEventQrInvites,
  getEventStats,
  TenantEvent,
  toggleEvent,
  revokeEventQrInvite,
  updateEventQrInvite,
} from '../api';
import QrInviteCustomizationDialog, { QrLayoutCustomization } from './components/QrInviteCustomizationDialog';
import { isAuthError } from '../auth/tokens';
import {
  ADMIN_EVENTS_PATH,
  ADMIN_EVENT_EDIT_PATH,
  ADMIN_EVENT_PHOTOS_PATH,
  ADMIN_EVENT_MEMBERS_PATH,
  ADMIN_EVENT_TASKS_PATH,
  ADMIN_EVENT_TOOLKIT_PATH,
} from '../constants';

interface State {
  event: TenantEvent | null;
  stats: TenantEventStats | null;
  invites: EventQrInvite[];
  inviteLink: string | null;
  error: string | null;
  loading: boolean;
  busy: boolean;
}

export default function EventDetailPage() {
  const params = useParams<{ slug?: string }>();
  const [searchParams] = useSearchParams();
  const slug = params.slug ?? searchParams.get('slug') ?? null;
  const navigate = useNavigate();

  const [state, setState] = React.useState<State>({
    event: null,
    stats: null,
    invites: [],
    inviteLink: null,
    error: null,
    loading: true,
    busy: false,
  });
  const [creatingInvite, setCreatingInvite] = React.useState(false);
  const [revokingId, setRevokingId] = React.useState<number | null>(null);
  const [customizingInvite, setCustomizingInvite] = React.useState<EventQrInvite | null>(null);
  const [customizerSaving, setCustomizerSaving] = React.useState(false);

  const load = React.useCallback(async () => {
    if (!slug) {
      setState((prev) => ({ ...prev, loading: false, error: 'Kein Event-Slug angegeben.' }));
      return;
    }

    setState((prev) => ({ ...prev, loading: true, error: null }));
    try {
      const [eventData, statsData, qrInvites] = await Promise.all([
        getEvent(slug),
        getEventStats(slug),
        getEventQrInvites(slug),
      ]);
      setState((prev) => ({
        ...prev,
        event: eventData,
        stats: statsData,
        invites: qrInvites,
        loading: false,
        inviteLink: prev.inviteLink,
      }));
    } catch (err) {
      if (isAuthError(err)) return;
      setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false, invites: [] }));
    }
  }, [slug]);

  React.useEffect(() => {
    load();
  }, [load]);

  async function handleToggle() {
    if (!slug) return;
    setState((prev) => ({ ...prev, busy: true, error: null }));
    try {
      const updated = await toggleEvent(slug);
      setState((prev) => ({
        ...prev,
        event: updated,
        stats: prev.stats ? { ...prev.stats, status: updated.status, is_active: Boolean(updated.is_active) } : prev.stats,
        busy: false,
      }));
    } catch (err) {
      if (!isAuthError(err)) {
        setState((prev) => ({ ...prev, error: 'Status konnte nicht angepasst werden.', busy: false }));
      } else {
        setState((prev) => ({ ...prev, busy: false }));
      }
    }
  }

  async function handleInvite() {
    if (!slug || creatingInvite) return;
    setCreatingInvite(true);
    setState((prev) => ({ ...prev, error: null }));
    try {
      const invite = await createQrInvite(slug);
      setState((prev) => ({
        ...prev,
        inviteLink: invite.url,
        invites: [invite, ...prev.invites.filter((existing) => existing.id !== invite.id)],
      }));
      try {
        await navigator.clipboard.writeText(invite.url);
      } catch {
        // clipboard may be unavailable, ignore silently
      }
    } catch (err) {
      if (!isAuthError(err)) {
        setState((prev) => ({ ...prev, error: 'QR-Einladung konnte nicht erzeugt werden.' }));
      }
    }
    setCreatingInvite(false);
  }

  async function handleCopy(invite: EventQrInvite) {
    try {
      await navigator.clipboard.writeText(invite.url);
      setState((prev) => ({ ...prev, inviteLink: invite.url }));
    } catch (err) {
      console.warn('Clipboard copy failed', err);
    }
  }

  async function handleRevoke(invite: EventQrInvite) {
    if (!slug || invite.revoked_at) return;
    setRevokingId(invite.id);
    setState((prev) => ({ ...prev, error: null }));
    try {
      const updated = await revokeEventQrInvite(slug, invite.id);
      setState((prev) => ({
        ...prev,
        invites: prev.invites.map((existing) => (existing.id === updated.id ? updated : existing)),
      }));
    } catch (err) {
      if (!isAuthError(err)) {
        setState((prev) => ({ ...prev, error: 'QR-Einladung konnte nicht deaktiviert werden.' }));
      }
    } finally {
      setRevokingId(null);
    }
  }

  function openCustomizer(invite: EventQrInvite) {
    setState((prev) => ({ ...prev, error: null }));
    setCustomizingInvite(invite);
  }

  function closeCustomizer() {
    if (customizerSaving) {
      return;
    }
    setCustomizingInvite(null);
  }

  async function handleApplyCustomization(customization: QrLayoutCustomization) {
    if (!slug || !customizingInvite) {
      return;
    }
    setCustomizerSaving(true);
    setState((prev) => ({ ...prev, error: null }));
    try {
      const updated = await updateEventQrInvite(slug, customizingInvite.id, {
        metadata: {
          layout_customization: customization,
        },
      });
      setState((prev) => ({
        ...prev,
        invites: prev.invites.map((invite) => (invite.id === updated.id ? updated : invite)),
      }));
      setCustomizerSaving(false);
      setCustomizingInvite(null);
    } catch (err) {
      if (!isAuthError(err)) {
        setState((prev) => ({ ...prev, error: 'QR-Einladung konnte nicht gespeichert werden.' }));
      }
      setCustomizerSaving(false);
    }
  }

  async function handleResetCustomization() {
    if (!slug || !customizingInvite) {
      return;
    }
    setCustomizerSaving(true);
    setState((prev) => ({ ...prev, error: null }));
    try {
      const updated = await updateEventQrInvite(slug, customizingInvite.id, {
        metadata: {
          layout_customization: null,
        },
      });
      setState((prev) => ({
        ...prev,
        invites: prev.invites.map((invite) => (invite.id === updated.id ? updated : invite)),
      }));
      setCustomizerSaving(false);
      setCustomizingInvite(null);
    } catch (err) {
      if (!isAuthError(err)) {
        setState((prev) => ({ ...prev, error: 'Anpassungen konnten nicht zurückgesetzt werden.' }));
      }
      setCustomizerSaving(false);
    }
  }

  const { event, stats, invites, inviteLink, error, loading, busy } = state;
  const eventDisplayName = event ? renderName(event.name) : '';
  const currentCustomization = React.useMemo(() => {
    if (!customizingInvite) {
      return null;
    }
    const metadata = customizingInvite.metadata as Record<string, unknown> | undefined | null;
    const raw = metadata?.layout_customization;
    return raw && typeof raw === 'object' ? (raw as QrLayoutCustomization) : null;
  }, [customizingInvite]);

  const actions = (
    <>
      <Button
        variant="outline"
        onClick={() => navigate(ADMIN_EVENTS_PATH)}
        className="border-pink-200 text-pink-600 hover:bg-pink-50"
      >
        <ArrowLeft className="h-4 w-4" /> Zurueck zur Liste
      </Button>
      {event && (
        <>
          <Button
            variant="outline"
            onClick={() => navigate(ADMIN_EVENT_EDIT_PATH(event.slug))}
            className="border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50"
          >
            Bearbeiten
          </Button>
          <Button
            variant="outline"
            onClick={() => navigate(ADMIN_EVENT_MEMBERS_PATH(event.slug))}
            className="border-sky-200 text-sky-700 hover:bg-sky-50"
          >
            Mitglieder
          </Button>
          <Button
            variant="outline"
            onClick={() => navigate(ADMIN_EVENT_TASKS_PATH(event.slug))}
            className="border-amber-200 text-amber-600 hover:bg-amber-50"
          >
            Tasks
          </Button>
          <Button
            variant="outline"
            onClick={() => navigate(ADMIN_EVENT_TOOLKIT_PATH(event.slug))}
            className="border-emerald-200 text-emerald-600 hover:bg-emerald-50"
          >
            Event-Day Toolkit
          </Button>
        </>
      )}
    </>
  );

  if (!slug) {
    return (
      <AdminLayout title="Event nicht gefunden" subtitle="Bitte waehle ein Event aus der Uebersicht." actions={actions}>
        <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
          <CardContent className="p-6 text-sm text-slate-600">
            Ohne gueltigen Slug koennen wir keine Daten laden. Kehre zur Event-Liste zurueck und waehle dort ein Event aus.
          </CardContent>
        </Card>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout
      title={event ? renderName(event.name) : 'Event wird geladen'}
      subtitle="Verwalte Status, Einladungen und Statistiken deines Events."
      actions={actions}
    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>Aktion fehlgeschlagen</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {loading ? (
        <DetailSkeleton />
      ) : event ? (
        <div className="grid gap-6 lg:grid-cols-[2fr,1fr]">
          <Card className="border-0 bg-white/90 shadow-xl shadow-pink-100/60">
            <CardHeader className="space-y-2">
              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
                <Sparkles className="h-5 w-5 text-pink-500" /> Eventdaten
              </CardTitle>
              <CardDescription className="text-sm text-slate-600">
                Grundlegende Informationen fuer Gaeste und Moderation.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4 text-sm text-slate-700">
              <InfoRow label="Slug" value={event.slug} />
              <InfoRow label="Status" value={event.status === 'published' ? 'Veroeffentlicht' : event.status} />
              <InfoRow label="Datum" value={formatDate(event.event_date)} />
              <InfoRow label="Aktiv" value={event.is_active ? 'Aktiv' : 'Deaktiviert'} />
              <div className="flex flex-wrap gap-3 pt-2">
                <Button
                  onClick={handleToggle}
                  disabled={busy}
                  className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
                >
                  {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
                  {event.is_active ? 'Deaktivieren' : 'Aktivieren'}
                </Button>
                <Button
                  variant="outline"
                  onClick={() => navigate(ADMIN_EVENT_PHOTOS_PATH(event.slug))}
                  className="border-sky-200 text-sky-700 hover:bg-sky-50"
                >
                  <Camera className="h-4 w-4" /> Fotos moderieren
                </Button>
              </div>
            </CardContent>
          </Card>

          <Card id="qr-invites" className="border-0 bg-white/90 shadow-xl shadow-amber-100/60">
            <CardHeader className="space-y-2">
              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
                <Share2 className="h-5 w-5 text-amber-500" /> QR-Einladungen &amp; Drucklayouts
              </CardTitle>
              <CardDescription className="text-sm text-slate-600">
                Erzeuge QR-Codes für eure Gäste und ladet direkt passende A4-Vorlagen – inklusive Branding und Anleitungen –
                zum Ausdrucken herunter.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4 text-sm text-slate-700">
              <div className="space-y-2 rounded-xl border border-amber-100 bg-amber-50/70 p-3 text-xs text-amber-800">
                <p>
                  Drucke die Layouts aus, platziere sie am Eventort oder teile den QR-Link digital. Du kannst Einladungen
                  jederzeit erneuern oder deaktivieren.
                </p>
                {invites.length > 0 && (
                  <p className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-amber-600">
                    Aktive QR-Einladungen: {invites.filter((invite) => invite.is_active && !invite.revoked_at).length} · Gesamt:{' '}
                    {invites.length}
                  </p>
                )}
              </div>

              <Button onClick={handleInvite} disabled={creatingInvite} className="w-full">
                {creatingInvite ? <Loader2 className="h-4 w-4 animate-spin" /> : <Share2 className="h-4 w-4" />}
                QR-Einladung erstellen
              </Button>

              {inviteLink && (
                <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 font-mono text-xs text-amber-800">
                  {inviteLink}
                </p>
              )}

              <div className="space-y-3">
                {invites.length > 0 ? (
                  invites.map((invite) => (
                    <InvitationCard
                      key={invite.id}
                      invite={invite}
                      onCopy={() => handleCopy(invite)}
                      onRevoke={() => handleRevoke(invite)}
                      revoking={revokingId === invite.id}
                      onCustomize={() => openCustomizer(invite)}
                      eventName={eventDisplayName}
                    />
                  ))
                ) : (
                  <div className="rounded-lg border border-slate-200 bg-white/80 p-4 text-xs text-slate-500">
                    Es gibt noch keine QR-Einladungen. Erstelle jetzt eine Einladung, um Layouts mit QR-Code zu generieren
                    und zu teilen.
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

          <Card className="border-0 bg-white/90 shadow-xl shadow-sky-100/60 lg:col-span-2">
            <CardHeader className="space-y-2">
              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
                <Heart className="h-5 w-5 text-sky-500" /> Performance
              </CardTitle>
              <CardDescription className="text-sm text-slate-600">
                Kennzahlen zu Uploads, Highlights und Interaktion.
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-3 sm:grid-cols-2 md:grid-cols-4">
              <StatChip label="Fotos" value={stats?.total ?? 0} />
              <StatChip label="Featured" value={stats?.featured ?? 0} />
              <StatChip label="Likes" value={stats?.likes ?? 0} />
              <StatChip label="Uploads (7 Tage)" value={stats?.recent_uploads ?? 0} />
            </CardContent>
          </Card>
        </div>
      ) : (
        <Alert variant="destructive">
          <AlertTitle>Event nicht gefunden</AlertTitle>
          <AlertDescription>Bitte pruefe den Slug und versuche es erneut.</AlertDescription>
        </Alert>
      )}

      <QrInviteCustomizationDialog
        open={Boolean(customizingInvite)}
        onClose={closeCustomizer}
        onSubmit={handleApplyCustomization}
        onReset={handleResetCustomization}
        saving={customizerSaving}
        inviteUrl={customizingInvite?.url ?? ''}
        eventName={eventDisplayName}
        layouts={customizingInvite?.layouts ?? []}
        initialCustomization={currentCustomization}
      />
    </AdminLayout>
  );
}

function DetailSkeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 3 }).map((_, index) => (
        <div key={index} className="h-40 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
      ))}
    </div>
  );
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-1 rounded-xl border border-pink-100 bg-white/70 px-3 py-2">
      <span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
      <span className="text-sm font-medium text-slate-800">{value}</span>
    </div>
  );
}

function StatChip({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="rounded-2xl border border-sky-100 bg-white/80 px-4 py-3 text-center shadow-sm">
      <div className="text-xs uppercase tracking-wide text-slate-500">{label}</div>
      <div className="text-lg font-semibold text-slate-900">{value}</div>
    </div>
  );
}

function InvitationCard({
  invite,
  onCopy,
  onRevoke,
  revoking,
  onCustomize,
  eventName,
}: {
  invite: EventQrInvite;
  onCopy: () => void;
  onRevoke: () => void;
  revoking: boolean;
  onCustomize: () => void;
  eventName: string;
}) {
  const { t } = useTranslation('management');
  const status = getInviteStatus(invite);
  const layouts = Array.isArray(invite.layouts) ? invite.layouts : [];
  const usageLabel = invite.usage_limit ? `${invite.usage_count} / ${invite.usage_limit}` : `${invite.usage_count}`;
  const metadata = (invite.metadata ?? {}) as Record<string, unknown>;
  const isAutoGenerated = Boolean(metadata.auto_generated);
  const customization = (metadata.layout_customization ?? null) as QrLayoutCustomization | null;
  const preferredLayoutId = customization?.layout_id ?? (layouts[0]?.id ?? null);
  const hasCustomization = customization ? Object.keys(customization).length > 0 : false;

  const statusClassname =
    status === 'Aktiv'
      ? 'bg-emerald-100 text-emerald-700'
      : status === 'Abgelaufen'
        ? 'bg-orange-100 text-orange-700'
        : 'bg-slate-200 text-slate-700';

  return (
    <div className="flex flex-col gap-4 rounded-2xl border border-amber-100 bg-white/90 p-4 shadow-md shadow-amber-100/40">
      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
        <div className="space-y-3">
          <div className="flex flex-wrap items-center gap-2">
            <span className="text-sm font-semibold text-slate-900">{invite.label?.trim() || `Einladung #${invite.id}`}</span>
            <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusClassname}`}>{status}</span>
            {isAutoGenerated ? (
              <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-700">
                Standard
              </span>
            ) : null}
            {hasCustomization ? (
              <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium text-emerald-700">
                {t('tasks.customizer.badge', 'Angepasst')}
              </span>
            ) : null}
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <span className="break-all rounded-md border border-slate-200 bg-slate-50 px-2 py-1 font-mono text-xs text-slate-700">
              {invite.url}
            </span>
            <Button
              variant="outline"
              size="sm"
              onClick={onCopy}
              className="border-amber-200 text-amber-700 hover:bg-amber-100"
            >
              <Copy className="mr-1 h-3 w-3" />
              Link kopieren
            </Button>
          </div>
          <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
            <span>Nutzung: {usageLabel}</span>
            {invite.expires_at ? <span>Gültig bis {formatDateTime(invite.expires_at)}</span> : null}
            {invite.created_at ? <span>Erstellt am {formatDateTime(invite.created_at)}</span> : null}
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button
            variant={hasCustomization ? 'default' : 'outline'}
            size="sm"
            onClick={onCustomize}
            className={hasCustomization ? 'bg-amber-500 text-white hover:bg-amber-500/90 border-amber-200' : 'border-amber-200 text-amber-700 hover:bg-amber-100'}
          >
            <Sparkles className="mr-1 h-3 w-3" />
            {t('tasks.customizer.actionLabel', 'Layout anpassen')}
          </Button>
          {invite.layouts_url ? (
            <Button
              asChild
              size="sm"
              variant="outline"
              className="border-amber-200 text-amber-700 hover:bg-amber-100"
            >
              <a href={invite.layouts_url} target="_blank" rel="noreferrer">
                <Download className="mr-1 h-3 w-3" />
                Layout-Übersicht
              </a>
            </Button>
          ) : null}
          <Button
            variant="ghost"
            size="sm"
            onClick={onRevoke}
            disabled={revoking || invite.revoked_at !== null || !invite.is_active}
            className="text-slate-600 hover:bg-slate-100 disabled:opacity-50"
          >
            {revoking ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Deaktivieren'}
          </Button>
        </div>
      </div>

      {layouts.length > 0 ? (
        <div className="grid gap-3 sm:grid-cols-2">
          {layouts.map((layout) => (
            <LayoutPreviewCard
              key={layout.id}
              layout={layout}
              customization={layout.id === preferredLayoutId ? customization : null}
              selected={layout.id === preferredLayoutId}
              eventName={eventName}
            />
          ))}
        </div>
      ) : invite.layouts_url ? (
        <div className="rounded-xl border border-amber-100 bg-amber-50/60 p-3 text-xs text-amber-800">
          Für diese Einladung stehen Layouts bereit. Öffne die Übersicht, um PDF- oder SVG-Versionen zu laden.
        </div>
      ) : null}
    </div>
  );
}

function LayoutPreviewCard({
  layout,
  customization,
  selected,
  eventName,
}: {
  layout: EventQrInviteLayout;
  customization: QrLayoutCustomization | null;
  selected: boolean;
  eventName: string;
}) {
  const gradient = customization?.background_gradient ?? layout.preview?.background_gradient;
  const stops = Array.isArray(gradient?.stops) ? gradient?.stops ?? [] : [];
  const gradientStyle = stops.length
    ? {
        backgroundImage: `linear-gradient(${gradient?.angle ?? customization?.background_gradient?.angle ?? 135}deg, ${stops.join(', ')})`,
      }
    : {
        backgroundColor: customization?.background_color ?? layout.preview?.background ?? '#F8FAFC',
      };
  const textColor = customization?.text_color ?? layout.preview?.text ?? '#0F172A';
  const badgeColor = customization?.badge_color ?? customization?.accent_color ?? layout.preview?.accent ?? '#0EA5E9';

  const formats = Array.isArray(layout.formats) ? layout.formats : [];
  const headline = customization?.headline ?? layout.name ?? eventName;
  const subtitle = customization?.subtitle ?? layout.subtitle ?? '';
  const description = customization?.description ?? layout.description ?? '';
  const instructions = customization?.instructions ?? [];

  return (
    <div
      className={`overflow-hidden rounded-xl border bg-white shadow-sm ${selected ? 'border-amber-300 ring-2 ring-amber-200' : 'border-amber-100'}`}
    >
      <div className="relative h-28">
        <div className="absolute inset-0" style={gradientStyle} />
        <div className="absolute inset-0 flex flex-col justify-between p-3 text-xs" style={{ color: textColor }}>
          <span
            className="w-fit rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
            style={{ backgroundColor: badgeColor, color: '#ffffff' }}
          >
            QR-Layout
          </span>
          <div>
            <div className="text-sm font-semibold leading-tight">{headline}</div>
            {subtitle ? <div className="text-[11px] opacity-80">{subtitle}</div> : null}
          </div>
        </div>
      </div>
      <div className="space-y-3 p-3">
        {description ? <p className="text-xs text-slate-600">{description}</p> : null}
        {instructions.length > 0 ? (
          <ul className="space-y-1 text-[11px] text-slate-500">
            {instructions.slice(0, 3).map((item, index) => (
              <li key={`${layout.id}-instruction-${index}`}>• {item}</li>
            ))}
          </ul>
        ) : null}
        <div className="flex flex-wrap gap-2">
          {formats.map((format) => {
            const key = String(format ?? '').toLowerCase();
            const href = layout.download_urls?.[key] ?? layout.download_urls?.[String(format ?? '')] ?? null;
            if (!href) {
              return null;
            }

            const label = String(format ?? '').toUpperCase() || 'PDF';

            return (
              <Button
                asChild
                key={`${layout.id}-${label}`}
                size="sm"
                variant="outline"
                className="border-amber-200 text-amber-700 hover:bg-amber-100"
              >
                <a href={href} target="_blank" rel="noreferrer">
                  <Download className="mr-1 h-3 w-3" />
                  {label}
                </a>
              </Button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function formatDate(iso: string | null): string {
  if (!iso) return 'Noch kein Datum';
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) {
    return 'Unbekanntes Datum';
  }
  return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
}

function formatDateTime(iso: string | null): string {
  if (!iso) return 'unbekannt';
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) {
    return 'unbekannt';
  }
  return date.toLocaleString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function getInviteStatus(invite: EventQrInvite): 'Aktiv' | 'Deaktiviert' | 'Abgelaufen' {
  if (invite.revoked_at) return 'Deaktiviert';
  if (invite.expires_at) {
    const expiry = new Date(invite.expires_at);
    if (!Number.isNaN(expiry.getTime()) && expiry.getTime() < Date.now()) {
      return 'Abgelaufen';
    }
  }
  return invite.is_active ? 'Aktiv' : 'Deaktiviert';
}

function renderName(name: TenantEvent['name']): string {
  if (typeof name === 'string') {
    return name;
  }
  if (name && typeof name === 'object') {
    return name.de ?? name.en ?? Object.values(name)[0] ?? 'Unbenanntes Event';
  }
  return 'Unbenanntes Event';
}