fotospiel-app/resources/js/admin/pages/EventTasksPage.tsx

// @ts-nocheck
import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Layers, Loader2, PlusCircle, Search, Sparkles } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import toast from 'react-hot-toast';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Input } from '@/components/ui/input';

import { AdminLayout } from '../components/AdminLayout';
import {
  assignTasksToEvent,
  getEvent,
  getEventTasks,
  getTasks,
  getTaskCollections,
  importTaskCollection,
  getEmotions,
  updateEvent,
  TenantEvent,
  TenantTask,
  TenantTaskCollection,
  TenantEmotion,
} from '../api';
import { isAuthError } from '../auth/tokens';
import { ADMIN_EVENTS_PATH, ADMIN_EVENT_BRANDING_PATH, buildEngagementTabPath } from '../constants';
import { extractBrandingPalette } from '../lib/branding';
import { filterEmotionsByEventType } from '../lib/emotions';
import { buildEventTabs } from '../lib/eventTabs';

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

  const [event, setEvent] = React.useState<TenantEvent | null>(null);
  const [assignedTasks, setAssignedTasks] = React.useState<TenantTask[]>([]);
  const [availableTasks, setAvailableTasks] = React.useState<TenantTask[]>([]);
  const [selected, setSelected] = React.useState<number[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [modeSaving, setModeSaving] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [tab, setTab] = React.useState<'tasks' | 'packs'>('tasks');
  const [taskSearch, setTaskSearch] = React.useState('');
  const [collections, setCollections] = React.useState<TenantTaskCollection[]>([]);
  const [collectionsLoading, setCollectionsLoading] = React.useState(false);
  const [collectionsError, setCollectionsError] = React.useState<string | null>(null);
  const [importingCollectionId, setImportingCollectionId] = React.useState<number | null>(null);
  const [emotions, setEmotions] = React.useState<TenantEmotion[]>([]);
  const [emotionsLoading, setEmotionsLoading] = React.useState(false);
  const [emotionsError, setEmotionsError] = React.useState<string | null>(null);
  const hydrateTasks = React.useCallback(async (targetEvent: TenantEvent) => {
    try {
      const refreshed = await getEventTasks(targetEvent.id, 1);
      const assignedIds = new Set(refreshed.data.map((task) => task.id));
      setAssignedTasks(refreshed.data);
      setAvailableTasks((prev) => prev.filter((task) => !assignedIds.has(task.id)));
    } catch (err) {
      if (!isAuthError(err)) {
        setError(t('management.tasks.errors.assign', 'Tasks konnten nicht geladen werden.'));
      }
    }
  }, [t]);

  const statusLabels = React.useMemo(
    () => ({
      published: t('management.members.statuses.published', 'Veröffentlicht'),
      draft: t('management.members.statuses.draft', 'Entwurf'),
    }),
    [t]
  );

  const palette = React.useMemo(() => extractBrandingPalette(event?.settings), [event?.settings]);
  const relevantEmotions = React.useMemo(
    () => filterEmotionsByEventType(emotions, event?.event_type_id ?? event?.event_type?.id ?? null),
    [emotions, event?.event_type_id, event?.event_type?.id],
  );

  React.useEffect(() => {
    if (!slug) {
      setError(t('management.tasks.errors.missingSlug', 'Kein Event-Slug angegeben.'));
      setLoading(false);
      return;
    }

    let cancelled = false;
    (async () => {
      try {
        setLoading(true);
        const eventData = await getEvent(slug);
        const [eventTasksResponse, libraryTasks] = await Promise.all([
          getEventTasks(eventData.id, 1),
          getTasks({ per_page: 50 }),
        ]);
        if (cancelled) return;
        setEvent(eventData);
        const assignedIds = new Set(eventTasksResponse.data.map((task) => task.id));
        setAssignedTasks(eventTasksResponse.data);
        const eventTypeId = eventData.event_type_id ?? null;
        const filteredLibraryTasks = libraryTasks.data.filter((task) => {
          if (assignedIds.has(task.id)) {
            return false;
          }
          if (eventTypeId && task.event_type_id && task.event_type_id !== eventTypeId) {
            return false;
          }
          return true;
        });
        setAvailableTasks(filteredLibraryTasks);
        setError(null);
      } catch (err) {
        if (!isAuthError(err)) {
          setError(t('management.tasks.errors.load', 'Event-Tasks konnten nicht geladen werden.'));
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [slug, t]);

  async function handleAssign() {
    if (!event || selected.length === 0) return;
    setSaving(true);
    try {
      await assignTasksToEvent(event.id, selected);
      const refreshed = await getEventTasks(event.id, 1);
      const assignedIds = new Set(refreshed.data.map((task) => task.id));
      setAssignedTasks(refreshed.data);
      setAvailableTasks((prev) => prev.filter((task) => !assignedIds.has(task.id)));
      setSelected([]);
    } catch (err) {
      if (!isAuthError(err)) {
        setError(t('management.tasks.errors.assign', 'Tasks konnten nicht zugewiesen werden.'));
      }
    } finally {
      setSaving(false);
    }
  }

  React.useEffect(() => {
    setSelected((current) => current.filter((taskId) => availableTasks.some((task) => task.id === taskId)));
  }, [availableTasks]);

  const filteredAssignedTasks = React.useMemo(() => {
    if (!taskSearch.trim()) {
      return assignedTasks;
    }
    const term = taskSearch.toLowerCase();
    return assignedTasks.filter((task) => `${task.title ?? ''} ${task.description ?? ''}`.toLowerCase().includes(term));
  }, [assignedTasks, taskSearch]);

  const eventTabs = React.useMemo(() => {
    if (!event) {
      return [];
    }
    const translateMenu = (key: string, fallback: string) => t(key, { defaultValue: fallback });
    return buildEventTabs(event, translateMenu, {
      photos: event.photo_count ?? 0,
      tasks: assignedTasks.length,
      invites: event.active_invites_count ?? event.total_invites_count ?? 0,
    });
  }, [event, assignedTasks.length, t]);

  React.useEffect(() => {
    if (!event?.event_type?.slug) {
      return;
    }

    let cancelled = false;
    setCollectionsLoading(true);
    setCollectionsError(null);
    getTaskCollections({ per_page: 6, event_type: event.event_type.slug })
      .then((result) => {
        if (cancelled) return;
        setCollections(result.data);
      })
      .catch((err) => {
        if (cancelled) return;
        if (!isAuthError(err)) {
          setCollectionsError(t('management.tasks.collections.error', 'Kollektionen konnten nicht geladen werden.'));
        }
      })
      .finally(() => {
        if (!cancelled) {
          setCollectionsLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [event?.event_type?.slug, t]);

  React.useEffect(() => {
    let cancelled = false;
    setEmotionsLoading(true);
    setEmotionsError(null);
    getEmotions()
      .then((list) => {
        if (!cancelled) {
          setEmotions(list);
        }
      })
      .catch((err) => {
        if (cancelled) {
          return;
        }
        if (!isAuthError(err)) {
          setEmotionsError(t('tasks.emotions.error', 'Emotionen konnten nicht geladen werden.'));
        }
      })
      .finally(() => {
        if (!cancelled) {
          setEmotionsLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [t]);

  const handleImportCollection = React.useCallback(async (collection: TenantTaskCollection) => {
    if (!slug || !event) {
      return;
    }
    setImportingCollectionId(collection.id);
    try {
      await importTaskCollection(collection.id, slug);
      toast.success(
        t('management.tasks.collections.imported', {
          defaultValue: 'Mission Pack "{{name}}" importiert.',
          name: collection.name,
        }),
      );
      await hydrateTasks(event);
    } catch (err) {
      if (!isAuthError(err)) {
        toast.error(t('management.tasks.collections.importFailed', 'Mission Pack konnte nicht importiert werden.'));
      }
    } finally {
      setImportingCollectionId(null);
    }
  }, [event, hydrateTasks, slug, t]);

  const isPhotoOnlyMode = React.useMemo(() => {
    const mode = event?.engagement_mode ?? (event?.settings as any)?.engagement_mode;
    return mode === 'photo_only';
  }, [event?.engagement_mode, event?.settings]);

  async function handleModeChange(checked: boolean) {
    if (!event || !slug) return;

    setModeSaving(true);
    setError(null);

    try {
      const nextMode = checked ? 'photo_only' : 'tasks';
      const updated = await updateEvent(slug, {
        settings: {
          ...(event.settings ?? {}),
          engagement_mode: nextMode,
        },
      });
      setEvent((prev) => ({
        ...(prev ?? updated),
        ...(updated ?? {}),
        engagement_mode: updated?.engagement_mode ?? nextMode,
        settings: {
          ...(prev?.settings ?? {}),
          ...(updated?.settings ?? {}),
          engagement_mode: nextMode,
        },
      }));
    } catch (err) {
      if (!isAuthError(err)) {
        setError(
          checked
            ? t('management.tasks.errors.photoOnlyEnable', 'Foto-Modus konnte nicht aktiviert werden.')
            : t('management.tasks.errors.photoOnlyDisable', 'Foto-Modus konnte nicht deaktiviert werden.'),
        );
      }
    } finally {
      setModeSaving(false);
    }
  }

  const actions = (
    <Button variant="outline" onClick={() => navigate(ADMIN_EVENTS_PATH)} className="border-pink-200 text-pink-600">
      <ArrowLeft className="h-4 w-4" />
      {t('management.tasks.actions.back', 'Zurück zur Übersicht')}
    </Button>
  );

  return (
    <AdminLayout
      title={t('management.tasks.title', 'Aufgaben & Missionen')}
      subtitle={t('management.tasks.subtitle', 'Stelle Mission Cards und Aufgaben für dieses Event zusammen.')}
      actions={actions}
      tabs={eventTabs}
      currentTabKey="tasks"
    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {loading ? (
        <TaskSkeleton />
      ) : !event ? (
        <Alert variant="destructive">
          <AlertTitle>{t('management.tasks.alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
          <AlertDescription>{t('management.tasks.alerts.notFoundDescription', 'Bitte kehre zur Eventliste zurück.')}</AlertDescription>
        </Alert>
      ) : (
        <>
          <Tabs value={tab} onValueChange={(value) => setTab(value as 'tasks' | 'packs')} className="space-y-6">
            <TabsList className="grid gap-2 rounded-2xl bg-slate-100/80 p-1 sm:grid-cols-2">
              <TabsTrigger value="tasks">{t('management.tasks.tabs.tasks', 'Aufgaben')}</TabsTrigger>
              <TabsTrigger value="packs">{t('management.tasks.tabs.packs', 'Mission Packs')}</TabsTrigger>
            </TabsList>
            <TabsContent value="tasks" className="space-y-6">
              <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
                <CardHeader>
                  <CardTitle className="text-xl text-slate-900">{renderName(event.name, t)}</CardTitle>
                  <CardDescription className="text-sm text-slate-600">
                    {t('management.tasks.eventStatus', {
                      status: statusLabels[event.status as keyof typeof statusLabels] ?? event.status,
                    })}
                  </CardDescription>
                  <div className="mt-4 flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white/70 p-4 text-sm text-slate-700">
                    <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                      <div>
                        <p className="text-sm font-semibold text-slate-900">
                          {t('management.tasks.modes.title', 'Aufgaben & Foto-Modus')}
                        </p>
                        <p className="text-xs text-slate-600">
                          {isPhotoOnlyMode
                            ? t(
                                'management.tasks.modes.photoOnlyHint',
                                'Der Foto-Modus ist aktiv. Gäste können Fotos hochladen, sehen aber keine Aufgaben.',
                              )
                            : t(
                                'management.tasks.modes.tasksHint',
                                'Aufgaben sind aktiv. Gäste sehen Mission Cards in der App.',
                              )}
                        </p>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="text-xs uppercase tracking-wide text-slate-500">
                          {isPhotoOnlyMode
                            ? t('management.tasks.modes.photoOnly', 'Foto-Modus')
                            : t('management.tasks.modes.tasks', 'Aufgaben aktiv')}
                        </span>
                        <Switch
                          checked={isPhotoOnlyMode}
                          onCheckedChange={handleModeChange}
                          disabled={modeSaving}
                          aria-label={t('management.tasks.modes.switchLabel', 'Foto-Modus aktivieren')}
                        />
                      </div>
                    </div>
                    {modeSaving ? (
                      <div className="flex items-center gap-2 text-xs text-slate-500">
                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
                        {t('management.tasks.modes.updating', 'Einstellung wird gespeichert ...')}
                      </div>
                    ) : null}
                    <div className="grid gap-3 text-xs sm:grid-cols-3">
                      <SummaryPill
                        label={t('management.tasks.summary.assigned', 'Zugeordnete Tasks')}
                        value={assignedTasks.length}
                      />
                      <SummaryPill
                        label={t('management.tasks.summary.library', 'Bibliothek')}
                        value={availableTasks.length}
                      />
                      <SummaryPill
                        label={t('management.tasks.summary.mode', 'Aktiver Modus')}
                        value={isPhotoOnlyMode ? t('management.tasks.summary.photoOnly', 'Nur Fotos') : t('management.tasks.summary.tasksMode', 'Mission Cards')}
                      />
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="pb-0">
                  <Alert variant="default" className="rounded-2xl border border-dashed border-emerald-200 bg-emerald-50/60 text-xs text-slate-700">
                    <AlertTitle className="text-sm font-semibold text-slate-900">
                      {t('management.tasks.library.hintTitle', 'Weitere Vorlagen in der Aufgaben-Bibliothek')}
                    </AlertTitle>
                    <AlertDescription className="mt-1 flex flex-wrap items-center gap-2">
                      <span>
                        {t(
                          'management.tasks.library.hintCopy',
                          'Lege eigene Aufgaben, Emotionen oder Mission Packs zentral an und nutze sie in mehreren Events.',
                        )}
                      </span>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        className="mt-1 rounded-full border-emerald-300 text-emerald-700 hover:bg-emerald-100"
                        onClick={() => navigate(buildEngagementTabPath('tasks'))}
                      >
                        {t('management.tasks.library.open', 'Aufgaben-Bibliothek öffnen')}
                      </Button>
                    </AlertDescription>
                  </Alert>
                </CardContent>
                <CardContent className="grid gap-4 lg:grid-cols-2">
                  <section className="space-y-3">
                    <div className="flex flex-wrap items-center justify-between gap-2">
                      <h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
                        <Sparkles className="h-4 w-4 text-pink-500" />
                        {t('management.tasks.sections.assigned.title', 'Zugeordnete Tasks')}
                      </h3>
                      <div className="flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1">
                        <Search className="h-4 w-4 text-slate-500" />
                        <Input
                          value={taskSearch}
                          onChange={(event) => setTaskSearch(event.target.value)}
                          placeholder={t('management.tasks.sections.assigned.search', 'Aufgaben suchen...')}
                          className="h-8 border-0 bg-transparent text-sm focus-visible:ring-0"
                        />
                      </div>
                    </div>
 
                    {filteredAssignedTasks.length === 0 ? (
                      <EmptyState
                        message={
                          taskSearch.trim()
                            ? t('management.tasks.sections.assigned.noResults', 'Keine Aufgaben zum Suchbegriff.')
                            : t('management.tasks.sections.assigned.empty', 'Noch keine Tasks zugewiesen.')
                        }
                      />
                    ) : (
                      <div className="space-y-2">
                        {filteredAssignedTasks.map((task) => (
                          <AssignedTaskRow key={task.id} task={task} />
                        ))}
                      </div>
                    )}
                  </section>

                  <section className="space-y-3">
                    <h3 className="flex items-center gap-2 text-sm font-semibold text-slate-900">
                      <PlusCircle className="h-4 w-4 text-emerald-500" />
                      {t('management.tasks.sections.library.title', 'Tasks aus Bibliothek hinzufügen')}
                    </h3>
                    <div className="space-y-2 rounded-2xl border border-emerald-100 bg-white/90 p-3 shadow-sm max-h-72 overflow-y-auto">
                      {availableTasks.length === 0 ? (
                        <EmptyState message={t('management.tasks.sections.library.empty', 'Keine Tasks in der Bibliothek gefunden.')} />
                      ) : (
                        availableTasks.map((task) => (
                          <label key={task.id} className="flex items-start gap-3 rounded-xl border border-transparent p-2 transition hover:border-emerald-200">
                            <Checkbox
                              checked={selected.includes(task.id)}
                              onCheckedChange={(checked) =>
                                setSelected((prev) =>
                                  checked ? [...prev, task.id] : prev.filter((id) => id !== task.id)
                                )
                              }
                              disabled={isPhotoOnlyMode}
                            />
                            <div>
                              <p className="text-sm font-medium text-slate-900">{task.title}</p>
                              {task.description && <p className="text-xs text-slate-600">{task.description}</p>}
                            </div>
                          </label>
                        ))
                      )}
                    </div>
                    <Button
                      onClick={() => void handleAssign()}
                      disabled={saving || selected.length === 0 || isPhotoOnlyMode}
                    >
                      {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : t('management.tasks.actions.assign', 'Ausgewählte Tasks zuweisen')}
                    </Button>
                  </section>
                </CardContent>
              </Card>

              <BrandingStoryPanel
                event={event}
                palette={palette}
                emotions={relevantEmotions}
                emotionsLoading={emotionsLoading}
                emotionsError={emotionsError}
                collections={collections}
                onOpenBranding={() => {
                  if (!slug) return;
                  navigate(ADMIN_EVENT_BRANDING_PATH(slug));
                }}
                onOpenEmotions={() => navigate(buildEngagementTabPath('emotions'))}
                onOpenCollections={() => navigate(buildEngagementTabPath('collections'))}
              />
            </TabsContent>
            <TabsContent value="packs">
              <MissionPackGrid
                collections={collections}
                loading={collectionsLoading}
                error={collectionsError}
                onImport={handleImportCollection}
                importingId={importingCollectionId}
                onViewAll={() => navigate(buildEngagementTabPath('collections'))}
              />
            </TabsContent>
          </Tabs>
        </>
      )}
    </AdminLayout>
  );
}

function EmptyState({ message }: { message: string }) {
  return (
    <div className="flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-6 text-center">
      <p className="text-xs text-slate-600">{message}</p>
    </div>
  );
}

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

function AssignedTaskRow({ task }: { task: TenantTask }) {
  const { t } = useTranslation('management');
  return (
    <div className="rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-sm">
      <div className="flex items-center justify-between">
        <p className="text-sm font-medium text-slate-900">{task.title}</p>
        <Badge variant="outline" className="border-pink-200 text-pink-600">
          {mapPriority(task.priority, (key, fallback) => t(key, { defaultValue: fallback }))}
        </Badge>
      </div>
      {task.description && <p className="mt-1 text-xs text-slate-600">{task.description}</p>}
    </div>
  );
}

function MissionPackGrid({
  collections,
  loading,
  error,
  onImport,
  importingId,
  onViewAll,
}: {
  collections: TenantTaskCollection[];
  loading: boolean;
  error: string | null;
  onImport: (collection: TenantTaskCollection) => void;
  importingId: number | null;
  onViewAll: () => void;
}) {
  const { t } = useTranslation('management');

  return (
    <Card className="border border-slate-200 bg-white/90">
      <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <CardTitle className="flex items-center gap-2 text-base text-slate-900">
            <Layers className="h-5 w-5 text-pink-500" />
            {t('management.tasks.collections.title', 'Mission Packs')}
          </CardTitle>
          <CardDescription className="text-sm text-slate-600">
            {t('management.tasks.collections.subtitle', 'Importiere Aufgaben-Kollektionen, die zu deinem Event passen.')}
          </CardDescription>
        </div>
        <Button variant="outline" onClick={onViewAll}>
          {t('management.tasks.collections.viewAll', 'Alle Kollektionen ansehen')}
        </Button>
      </CardHeader>
      <CardContent className="space-y-4">
        {error ? (
          <Alert variant="destructive">
            <AlertTitle>{t('management.tasks.collections.errorTitle', 'Kollektionen nicht verfügbar')}</AlertTitle>
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        ) : null}

        {loading ? (
          <div className="space-y-3">
            {Array.from({ length: 3 }).map((_, index) => (
              <div key={index} className="h-24 animate-pulse rounded-2xl bg-slate-100/60" />
            ))}
          </div>
        ) : collections.length === 0 ? (
          <EmptyState message={t('management.tasks.collections.empty', 'Keine empfohlenen Kollektionen gefunden.')} />
        ) : (
          <div className="grid gap-4 md:grid-cols-2">
            {collections.map((collection) => (
              <div key={collection.id} className="flex flex-col rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm">
                <div className="flex flex-1 flex-col gap-1">
                  <p className="text-sm font-semibold text-slate-900">{collection.name}</p>
                  {collection.description ? (
                    <p className="text-xs text-slate-500">{collection.description}</p>
                  ) : null}
                  <Badge variant="outline" className="w-fit border-slate-200 text-slate-600">
                    {t('management.tasks.collections.tasksCount', {
                      defaultValue: '{{count}} Aufgaben',
                      count: collection.tasks_count,
                    })}
                  </Badge>
                </div>
                <div className="mt-4 flex justify-between text-xs text-slate-500">
                  <span>{collection.event_type?.name ?? t('management.tasks.collections.genericType', 'Allgemein')}</span>
                  <span>{collection.is_global ? t('management.tasks.collections.global', 'Global') : t('management.tasks.collections.custom', 'Custom')}</span>
                </div>
                <Button
                  className="mt-4 rounded-full bg-brand-rose text-white"
                  disabled={importingId === collection.id}
                  onClick={() => onImport(collection)}
                >
                  {importingId === collection.id ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    t('management.tasks.collections.importCta', 'Mission Pack importieren')
                  )}
                </Button>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

type BrandingStoryPanelProps = {
  event: TenantEvent;
  palette: ReturnType<typeof extractBrandingPalette>;
  emotions: TenantEmotion[];
  emotionsLoading: boolean;
  emotionsError: string | null;
  collections: TenantTaskCollection[];
  onOpenBranding: () => void;
  onOpenEmotions: () => void;
  onOpenCollections: () => void;
};

function BrandingStoryPanel({
  event,
  palette,
  emotions,
  emotionsLoading,
  emotionsError,
  collections,
  onOpenBranding,
  onOpenEmotions,
  onOpenCollections,
}: BrandingStoryPanelProps) {
  const { t } = useTranslation('management');
  const fallbackColors = palette.colors.length ? palette.colors : ['#f472b6', '#fde68a', '#312e81'];
  const spotlightEmotions = emotions.slice(0, 4);
  const recommendedCollections = React.useMemo(() => collections.slice(0, 2), [collections]);

  return (
    <Card className="border-0 bg-white/90 shadow-xl shadow-indigo-100/50">
      <CardHeader>
          <CardTitle className="text-xl text-slate-900">
            {t('tasks.story.title', 'Branding & Story')}
          </CardTitle>
          <CardDescription className="text-sm text-slate-600">
            {t('tasks.story.description', 'Verbinde Farben, Emotionen und Mission Packs für ein stimmiges Gäste-Erlebnis.')}
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4 md:grid-cols-2">
        <div className="rounded-2xl border border-indigo-100 bg-indigo-50/80 p-4 text-sm text-indigo-900 shadow-inner shadow-indigo-100">
          <p className="text-xs uppercase tracking-[0.3em]">
            {t('events.branding.brandingTitle', 'Branding')}
          </p>
          <p className="mt-1 text-base font-semibold">{palette.font ?? t('events.branding.brandingFallback', 'Aktuelle Auswahl')}</p>
          <p className="text-xs text-indigo-900/70">
            {t('events.branding.brandingCopy', 'Passe Farben & Schriftarten im Layout-Editor an.')}
          </p>
          <div className="mt-3 flex gap-2">
            {fallbackColors.slice(0, 4).map((color) => (
              <span key={color} className="h-10 w-10 rounded-xl border border-white/70 shadow" style={{ backgroundColor: color }} />
            ))}
          </div>
          <Button size="sm" variant="secondary" className="mt-4 rounded-full bg-white/80 text-indigo-900 hover:bg-white" onClick={onOpenBranding}>
            {t('events.branding.brandingCta', 'Branding anpassen')}
          </Button>
        </div>
        <div className="space-y-4 rounded-2xl border border-rose-100 bg-rose-50/70 p-4 text-sm text-rose-900 shadow-inner shadow-rose-100">
          <div>
            <div className="flex items-center justify-between">
              <p className="text-xs uppercase tracking-[0.3em] text-rose-400">
                {t('tasks.story.emotionsTitle', 'Emotionen')}
              </p>
              <Badge variant="outline" className="border-rose-200 text-rose-600">
                {t('tasks.story.emotionsCount', { defaultValue: '{{count}} aktiviert', count: emotions.length })}
              </Badge>
            </div>
            {emotionsLoading ? (
              <div className="mt-3 h-10 animate-pulse rounded-xl bg-white/70" />
            ) : emotionsError ? (
              <p className="mt-3 text-xs text-rose-900/70">{emotionsError}</p>
            ) : spotlightEmotions.length ? (
              <div className="mt-3 flex flex-wrap gap-2">
                {spotlightEmotions.map((emotion) => (
                  <span
                    key={emotion.id}
                    className="flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold shadow-sm"
                    style={{
                      backgroundColor: `${emotion.color ?? '#fecdd3'}33`,
                      color: emotion.color ?? '#be123c',
                    }}
                  >
                    {emotion.icon ? <span>{emotion.icon}</span> : null}
                    {emotion.name}
                  </span>
                ))}
              </div>
            ) : (
              <p className="mt-3 text-xs text-rose-900/70">
                {t('tasks.story.emotionsEmpty', 'Aktiviere Emotionen, um Aufgaben zu kategorisieren.')}
              </p>
            )}
            <Button size="sm" variant="ghost" className="mt-3 h-8 px-0 text-rose-700 hover:bg-rose-100/80" onClick={onOpenEmotions}>
              {t('tasks.story.emotionsCta', 'Emotionen verwalten')}
            </Button>
          </div>
          <div className="rounded-xl border border-white/60 bg-white/80 p-3 text-sm text-slate-700">
            <p className="text-xs uppercase tracking-[0.3em] text-slate-500">
              {t('tasks.story.collectionsTitle', 'Mission Packs')}
            </p>
            {recommendedCollections.length ? (
              <div className="mt-3 space-y-2">
                {recommendedCollections.map((collection) => (
                  <div key={collection.id} className="flex items-center justify-between rounded-xl border border-slate-200 bg-white/90 px-3 py-2 text-xs">
                    <div>
                      <p className="text-sm font-semibold text-slate-900">{collection.name}</p>
                      {collection.event_type?.name ? (
                        <p className="text-[11px] text-slate-500">{collection.event_type.name}</p>
                      ) : null}
                    </div>
                    <Badge variant="outline" className="border-slate-200 text-slate-600">
                      {t('tasks.story.collectionsCount', { defaultValue: '{{count}} Aufgaben', count: collection.tasks_count })}
                    </Badge>
                  </div>
                ))}
              </div>
            ) : (
              <p className="mt-3 text-xs text-slate-500">
                {t('tasks.story.collectionsEmpty', 'Noch keine empfohlenen Mission Packs.')}
              </p>
            )}
            <Button size="sm" variant="outline" className="mt-3 border-rose-200 text-rose-700 hover:bg-rose-50" onClick={onOpenCollections}>
              {t('tasks.story.collectionsCta', 'Mission Packs anzeigen')}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function SummaryPill({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="rounded-2xl border border-slate-200 bg-white/80 p-3 text-center">
      <p className="text-xs uppercase tracking-wide text-slate-500">{label}</p>
      <p className="mt-1 text-lg font-semibold text-slate-900">{value}</p>
    </div>
  );
}

function mapPriority(priority: TenantTask['priority'], translate: (key: string, defaultValue: string) => string): string {
  switch (priority) {
    case 'low':
      return translate('management.tasks.priorities.low', 'Niedrig');
    case 'high':
      return translate('management.tasks.priorities.high', 'Hoch');
    case 'urgent':
      return translate('management.tasks.priorities.urgent', 'Dringend');
    default:
      return translate('management.tasks.priorities.medium', 'Mittel');
  }
}

function renderName(name: TenantEvent['name'], translate: (key: string, defaultValue: string) => string): string {
  if (typeof name === 'string') {
    return name;
  }
  return name?.de ?? name?.en ?? Object.values(name ?? {})[0] ?? translate('management.members.events.untitled', 'Unbenanntes Event');
}