// @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 { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Input } from '@/components/ui/input';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import {
  DndContext,
  closestCenter,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
  DragOverlay,
  useDraggable,
  useDroppable,
} from '@dnd-kit/core';
import {
  CSS,
} from '@dnd-kit/utilities';

import { AdminLayout } from '../components/AdminLayout';
import {
  assignTasksToEvent,
  detachTasksFromEvent,
  getEvent,
  getEventTasks,
  createTask,
  getTasks,
  getTaskCollections,
  importTaskCollection,
  getEmotions,
  updateEvent,
  TenantEvent,
  TenantTask,
  TenantTaskCollection,
  TenantEmotion,
} from '../api';
import { EmotionsSection } from './EmotionsPage';
import { isAuthError } from '../auth/tokens';
import { ADMIN_EVENTS_PATH, ADMIN_EVENT_BRANDING_PATH, buildEngagementTabPath } from '../constants';
import { filterEmotionsByEventType } from '../lib/emotions';
import { buildEventTabs } from '../lib/eventTabs';
import { Trash2 } from 'lucide-react';

export default function EventTasksPage() {
  const { t } = useTranslation('management', { keyPrefix: 'eventTasks' });
  const { t: tDashboard } = useTranslation('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 [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 [emotionFilter, setEmotionFilter] = React.useState<number[]>([]);
  const [emotionsModalOpen, setEmotionsModalOpen] = React.useState(false);
  const [newTaskTitle, setNewTaskTitle] = React.useState('');
  const [newTaskDescription, setNewTaskDescription] = React.useState('');
  const [newTaskEmotionId, setNewTaskEmotionId] = React.useState<number | null>(null);
  const [newTaskDifficulty, setNewTaskDifficulty] = React.useState<TenantTask['difficulty'] | ''>('');
  const [creatingTask, setCreatingTask] = React.useState(false);
  const [draggingId, setDraggingId] = React.useState<number | null>(null);
  const hydrateTasks = React.useCallback(async (targetEvent: TenantEvent) => {
    try {
      const [refreshed, libraryTasks] = await Promise.all([
        getEventTasks(targetEvent.id, 1),
        getTasks({ per_page: 200 }),
      ]);
      const assignedIds = new Set(refreshed.data.map((task) => task.id));
      setAssignedTasks(refreshed.data);
      const eventTypeId = targetEvent.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);
    } catch (err) {
      if (!isAuthError(err)) {
        setError(t('errors.assign', 'Tasks konnten nicht geladen werden.'));
      }
    }
  }, [t]);

  const relevantEmotions = React.useMemo(() => {
    const filtered = filterEmotionsByEventType(emotions, event?.event_type_id ?? event?.event_type?.id ?? null);
    return filtered.length > 0 ? filtered : emotions;
  }, [emotions, event?.event_type_id, event?.event_type?.id]);
  const emotionChips = React.useMemo(() => {
    const map: Record<number, TenantEmotion> = {};
    assignedTasks.forEach((task) => {
      if (task.emotion) {
        map[task.emotion.id] = {
          ...task.emotion,
          name_translations: task.emotion.name_translations ?? {},
          description: null,
          description_translations: {},
          sort_order: 0,
          is_active: true,
          tenant_id: null,
          is_global: false,
          event_types: [],
          created_at: null,
          updated_at: null,
        } as TenantEmotion;
      }
    });
    return Object.values(map);
  }, [assignedTasks]);

  React.useEffect(() => {
    if (!slug) {
      setError(t('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: 200 }),
        ]);
        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('errors.load', 'Event-Tasks konnten nicht geladen werden.'));
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    })();

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

  const filteredAssignedTasks = React.useMemo(() => {
    let list = assignedTasks;
    if (emotionFilter.length > 0) {
      const set = new Set(emotionFilter);
      list = list.filter((task) => (task.emotion_id ? set.has(task.emotion_id) : false));
    }
    if (!taskSearch.trim()) {
      return list;
    }
    const term = taskSearch.toLowerCase();
    return list.filter((task) => `${task.title ?? ''} ${task.description ?? ''}`.toLowerCase().includes(term));
  }, [assignedTasks, taskSearch, emotionFilter]);

  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }));

  const handleAssignSingle = React.useCallback(
    async (taskId: number) => {
      if (!event) return;
      const task = availableTasks.find((t) => t.id === taskId);
      if (task) {
        setAvailableTasks((prev) => prev.filter((t) => t.id !== taskId));
        setAssignedTasks((prev) => [...prev, task]);
      }
      setSaving(true);
      try {
        await assignTasksToEvent(event.id, [taskId]);
        toast.success(t('actions.assignedToast', 'Tasks wurden zugewiesen.'));
      } catch (err) {
        if (!isAuthError(err)) {
          toast.error(t('errors.assign', 'Tasks konnten nicht zugewiesen werden.'));
        }
        // revert optimistic change
        if (task) {
          setAssignedTasks((prev) => prev.filter((t) => t.id !== taskId));
          setAvailableTasks((prev) => [...prev, task]);
        }
      } finally {
        setSaving(false);
      }
    },
    [availableTasks, event, hydrateTasks, t],
  );

  const handleDetachSingle = React.useCallback(
    async (taskId: number) => {
      if (!event) return;
      const task = assignedTasks.find((t) => t.id === taskId);
      if (task) {
        setAssignedTasks((prev) => prev.filter((t) => t.id !== taskId));
        setAvailableTasks((prev) => [...prev, task]);
      }
      setSaving(true);
      try {
        await detachTasksFromEvent(event.id, [taskId]);
        toast.success(t('actions.removedToast', 'Tasks wurden entfernt.'));
      } catch (err) {
        if (!isAuthError(err)) {
          toast.error(t('errors.remove', 'Tasks konnten nicht entfernt werden.'));
        }
        // revert optimistic change
        if (task) {
          setAvailableTasks((prev) => prev.filter((t) => t.id !== taskId));
          setAssignedTasks((prev) => [...prev, task]);
        }
      } finally {
        setSaving(false);
      }
    },
    [assignedTasks, event, hydrateTasks, t],
  );

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || !active?.data?.current) {
      setDraggingId(null);
      return;
    }

    const originList = active.data.current.list as 'assigned' | 'library';
    const overList = (over.data?.current?.list as 'assigned' | 'library' | undefined) ?? null;
    const targetList =
      overList ??
      (over.id === 'assigned-dropzone'
        ? 'assigned'
        : over.id === 'library-dropzone'
          ? 'library'
          : null);

    setDraggingId(null);
    if (!targetList || targetList === originList) {
      return;
    }

    const taskId = Number(active.id);
    if (Number.isNaN(taskId)) {
      return;
    }

    if (targetList === 'assigned') {
      void handleAssignSingle(taskId);
    } else {
      void handleDetachSingle(taskId);
    }
  };

  const handleCreateQuickTask = React.useCallback(async () => {
    if (!event || !newTaskTitle.trim()) return;
    setCreatingTask(true);
    const emotion = emotions.find((e) => e.id === newTaskEmotionId) ?? null;
    try {
      const created = await createTask({
        title: newTaskTitle.trim(),
        description: newTaskDescription.trim() || null,
        emotion_id: newTaskEmotionId ?? undefined,
        event_type_id: event.event_type_id ?? undefined,
        difficulty: newTaskDifficulty || undefined,
      });
      setAssignedTasks((prev) => [...prev, { ...created, emotion: emotion ?? created.emotion ?? null }]);
      setAvailableTasks((prev) => prev.filter((task) => task.id !== created.id));
      await assignTasksToEvent(event.id, [created.id]);
      toast.success(t('actions.created', 'Aufgabe erstellt und zugewiesen.'));
      setNewTaskTitle('');
      setNewTaskDescription('');
      setNewTaskEmotionId(null);
      setNewTaskDifficulty('');
      await hydrateTasks(event);
    } catch (err) {
      if (!isAuthError(err)) {
        toast.error(t('errors.create', 'Aufgabe konnte nicht erstellt werden.'));
      }
    } finally {
      setCreatingTask(false);
    }
  }, [event, newTaskDescription, newTaskEmotionId, newTaskTitle, hydrateTasks, t]);

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

  React.useEffect(() => {
    let cancelled = false;
    setCollectionsLoading(true);
    setCollectionsError(null);
    const eventTypeSlug = event?.event_type?.slug ?? null;
    const query = eventTypeSlug
      ? { top_picks: true, limit: 6, event_type: eventTypeSlug }
      : { top_picks: true, limit: 6 };

    getTaskCollections(query)
      .then((result) => {
        if (cancelled) return;
        setCollections(result.data);
      })
      .catch((err) => {
        if (cancelled) return;
        if (!isAuthError(err)) {
          setCollectionsError(t('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('collections.imported', {
          defaultValue: 'Mission Pack "{{name}}" importiert.',
          name: collection.name,
        }),
      );
      await hydrateTasks(event);
    } catch (err) {
      if (!isAuthError(err)) {
        toast.error(t('collections.importFailed', 'Mission Pack konnte nicht importiert werden.'));
      }
    } finally {
      setImportingCollectionId(null);
    }
  }, [event, hydrateTasks, slug, t]);

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

  const summaryBadges = !loading && event ? (
    <div className="mb-4 flex flex-wrap gap-2">
      <Badge className="flex items-center gap-2 rounded-full bg-slate-900 text-white">
        <span className="text-xs uppercase tracking-wide text-white/80">
          {t('summary.assigned', 'Zugeordnete Tasks')}
        </span>
        <span className="text-sm font-semibold">{assignedTasks.length}</span>
      </Badge>
      <Badge className="flex items-center gap-2 rounded-full bg-emerald-600/90 text-white">
        <span className="text-xs uppercase tracking-wide text-white/80">
          {t('summary.library', 'Bibliothek')}
        </span>
        <span className="text-sm font-semibold">{availableTasks.length}</span>
      </Badge>
      <Badge className="flex items-center gap-2 rounded-full bg-pink-500/90 text-white">
        <span className="text-xs uppercase tracking-wide text-white/80">
          {t('summary.mode', 'Aktiver Modus')}
        </span>
        <span className="text-sm font-semibold">
          {tasksEnabled ? t('summary.tasksMode', 'Mission Cards') : t('summary.photoOnly', 'Nur Fotos')}
        </span>
      </Badge>
    </div>
  ) : null;

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

    setModeSaving(true);
    setError(null);

    try {
      const nextMode = checked ? 'tasks' : 'photo_only';
      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('errors.photoOnlyEnable', 'Foto-Modus konnte nicht aktiviert werden.')
            : t('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('actions.back', 'Zurück zur Übersicht')}
    </Button>
  );

  return (
    <AdminLayout
      title={t('title', 'Aufgaben & Missionen')}
      subtitle={t('subtitle', 'Stelle Mission Cards und Aufgaben für dieses Event zusammen.')}
      actions={actions}
      tabs={eventTabs}
      currentTabKey="tasks"
    >
      {summaryBadges}

      {error && (
        <Alert variant="destructive">
          <AlertTitle>{tDashboard('alerts.errorTitle', 'Fehler')}</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {loading ? (
        <TaskSkeleton />
      ) : !event ? (
        <Alert variant="destructive">
          <AlertTitle>{t('alerts.notFoundTitle', 'Event nicht gefunden')}</AlertTitle>
          <AlertDescription>{t('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('tabs.tasks', 'Aufgaben')}</TabsTrigger>
              <TabsTrigger value="packs">{t('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>
                  <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('modes.title', 'Aufgaben & Foto-Modus')}
                        </p>
                        <p className="text-xs text-slate-600">
                          {tasksEnabled
                            ? t('modes.tasksHint', 'Aufgaben sind aktiv. Gäste sehen Mission Cards in der App.')
                            : t('modes.photoOnlyHint', 'Der Foto-Modus ist aktiv. Gäste können Fotos hochladen, sehen aber keine Aufgaben.')}
                        </p>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="text-xs uppercase tracking-wide text-slate-500">
                          {tasksEnabled ? t('modes.tasks', 'Aufgaben aktiv') : t('modes.photoOnly', 'Foto-Modus')}
                        </span>
                        <Switch
                          checked={tasksEnabled}
                          onCheckedChange={handleModeChange}
                          disabled={modeSaving}
                          aria-label={t('modes.switchLabel', 'Aufgaben aktivieren/deaktivieren')}
                        />
                      </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('modes.updating', 'Einstellung wird gespeichert ...')}
                      </div>
                    ) : null}
                  </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('library.hintTitle', 'Weitere Vorlagen in der Aufgaben-Bibliothek')}
                    </AlertTitle>
                    <AlertDescription className="mt-1 flex flex-wrap items-center gap-2">
                      <span>
                        {t('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('library.open', 'Aufgaben-Bibliothek öffnen')}
                      </Button>
                    </AlertDescription>
                  </Alert>
                </CardContent>
                <DndContext
                  sensors={sensors}
                  collisionDetection={closestCenter}
                  onDragStart={(event) => setDraggingId(Number(event.active.id))}
                  onDragEnd={handleDragEnd}
                >
                  <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('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('sections.assigned.search', 'Aufgaben suchen...')}
                          className="h-8 border-0 bg-transparent text-sm focus-visible:ring-0"
                        />
                      </div>
                    </div>
 
                    {emotionChips.length > 0 ? (
                      <div className="flex flex-wrap gap-2">
                        <Button
                          size="sm"
                          variant={emotionFilter.length === 0 ? 'default' : 'outline'}
                          onClick={() => setEmotionFilter([])}
                          className="rounded-full"
                        >
                          {t('filters.allEmotions', 'Alle Emotionen')}
                        </Button>
                        {emotionChips.map((emotion) => {
                          const active = emotionFilter.includes(emotion.id);
                          return (
                            <Button
                              key={emotion.id}
                              size="sm"
                              variant={active ? 'default' : 'outline'}
                              onClick={() =>
                                setEmotionFilter((prev) =>
                                  active ? prev.filter((id) => id !== emotion.id) : [...prev, emotion.id]
                                )
                              }
                              className="rounded-full"
                              style={
                                active
                                  ? { backgroundColor: emotion.color ?? '#e0f2fe', color: '#0f172a' }
                                  : { borderColor: emotion.color ?? undefined, color: '#0f172a' }
                              }
                            >
                              {emotion.icon ? <span className="mr-1">{emotion.icon}</span> : null}
                              {emotion.name}
                            </Button>
                          );
                        })}
                      </div>
                    ) : null}

                    <DropZone id="assigned-dropzone">
                      {filteredAssignedTasks.length === 0 ? (
                        <EmptyState
                          message={
                            taskSearch.trim()
                              ? t('sections.assigned.noResults', 'Keine Aufgaben zum Suchbegriff.')
                              : t('sections.assigned.empty', 'Noch keine Tasks zugewiesen.')
                          }
                        />
                      ) : (
                        <div className="space-y-2">
                          {filteredAssignedTasks.map((task) => (
                            <DraggableTaskCard
                              key={task.id}
                              task={task}
                              origin="assigned"
                              onRemove={() => void handleDetachSingle(task.id)}
                            />
                          ))}
                        </div>
                      )}
                    </DropZone>
                  </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('sections.library.title', 'Tasks aus Bibliothek hinzufügen')}
                    </h3>
                    <div className="rounded-2xl border border-emerald-100 bg-emerald-50/60 p-3 shadow-inner">
                      <p className="text-xs font-semibold text-emerald-700">{t('sections.library.quickCreate', 'Schnell neue Aufgabe anlegen')}</p>
                      <div className="mt-2 grid gap-2">
                        <Input
                          value={newTaskTitle}
                          onChange={(e) => setNewTaskTitle(e.target.value)}
                          placeholder={t('sections.library.quickTitle', 'Titel der Aufgabe')}
                          disabled={!tasksEnabled || creatingTask}
                        />
                        <Textarea
                          value={newTaskDescription}
                          onChange={(e) => setNewTaskDescription(e.target.value)}
                          placeholder={t('sections.library.quickDescription', 'Beschreibung (optional)')}
                          disabled={!tasksEnabled || creatingTask}
                          className="min-h-[70px]"
                        />
                        <div className="flex items-center gap-2">
                          <label className="text-xs text-slate-700">{t('sections.library.quickEmotion', 'Emotion')}</label>
                          <select
                            className="h-9 rounded-lg border border-slate-200 bg-white px-2 text-sm"
                            value={newTaskEmotionId ?? ''}
                            onChange={(e) => setNewTaskEmotionId(e.target.value ? Number(e.target.value) : null)}
                            disabled={!tasksEnabled || creatingTask}
                          >
                            <option value="">{t('sections.library.quickEmotionNone', 'Keine')}</option>
                            {relevantEmotions.map((emotion) => (
                              <option key={emotion.id} value={emotion.id}>
                                {emotion.name}
                              </option>
                            ))}
                          </select>
                        </div>
                        <div className="flex items-center gap-2">
                          <label className="text-xs text-slate-700">{t('sections.library.quickDifficulty', 'Schwierigkeit')}</label>
                          <select
                            className="h-9 rounded-lg border border-slate-200 bg-white px-2 text-sm"
                            disabled={!tasksEnabled || creatingTask}
                            value={newTaskDifficulty}
                            onChange={(e) => setNewTaskDifficulty(e.target.value as TenantTask['difficulty'] | '')}
                          >
                            <option value="">{t('sections.library.quickDifficultyNone', 'Keine')}</option>
                            <option value="easy">{t('sections.library.difficulty.easy', 'Leicht')}</option>
                            <option value="medium">{t('sections.library.difficulty.medium', 'Mittel')}</option>
                            <option value="hard">{t('sections.library.difficulty.hard', 'Schwer')}</option>
                          </select>
                        </div>
                        <div className="flex justify-end">
                          <Button
                            size="sm"
                            onClick={() => void handleCreateQuickTask()}
                            disabled={!newTaskTitle.trim() || creatingTask || !tasksEnabled}
                          >
                            {creatingTask ? (
                              <Loader2 className="h-4 w-4 animate-spin" />
                            ) : (
                              t('sections.library.quickCreateCta', 'Erstellen & zuweisen')
                            )}
                          </Button>
                        </div>
                      </div>
                    </div>
                    <DropZone id="library-dropzone">
                      <div className="space-y-2 max-h-72 overflow-y-auto">
                        {availableTasks.length === 0 ? (
                          <EmptyState message={t('sections.library.empty', 'Keine Tasks in der Bibliothek gefunden.')} />
                        ) : (
                          availableTasks.map((task) => (
                            <DraggableTaskCard
                              key={task.id}
                              task={task}
                              origin="library"
                              onAdd={() => void handleAssignSingle(task.id)}
                              disabled={!tasksEnabled}
                            />
                          ))
                        )}
                      </div>
                    </DropZone>
                  </section>
                  </CardContent>
                  <DragOverlay>
                    {draggingId ? (
                      <div className="rounded-2xl border border-dashed border-slate-200 bg-white/90 px-4 py-3 shadow-sm opacity-80">
                        {filteredAssignedTasks.find((t) => t.id === draggingId)?.title ??
                          availableTasks.find((t) => t.id === draggingId)?.title}
                      </div>
                    ) : null}
                  </DragOverlay>
                </DndContext>
              </Card>

              <EmotionsCard
                emotions={relevantEmotions}
                emotionsLoading={emotionsLoading}
                emotionsError={emotionsError}
                onOpenEmotions={() => setEmotionsModalOpen(true)}
              />
            </TabsContent>
            <TabsContent value="packs">
              <MissionPackGrid
                collections={collections}
                loading={collectionsLoading}
                error={collectionsError}
                onImport={handleImportCollection}
                importingId={importingCollectionId}
                onViewAll={() => navigate(buildEngagementTabPath('collections'))}
              />
            </TabsContent>
          </Tabs>
        </>
      )}

      <Dialog open={emotionsModalOpen} onOpenChange={setEmotionsModalOpen}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{t('tasks.emotions.manage', 'Emotionen verwalten')}</DialogTitle>
          </DialogHeader>
          <EmotionsSection embedded />
        </DialogContent>
      </Dialog>
    </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 DropZone({ id, children }: { id: string; children: React.ReactNode }) {
  const zone = id === 'assigned-dropzone' ? 'assigned' : 'library';
  const { setNodeRef, isOver } = useDroppable({ id, data: { list: zone } });

  return (
    <div
      ref={setNodeRef}
      className={`rounded-2xl border border-dashed p-2 ${isOver ? 'border-pink-200 bg-pink-50/70' : 'border-slate-200/70'}`}
    >
      {children}
    </div>
  );
}

function DraggableTaskCard({
  task,
  origin,
  onRemove,
  onAdd,
  disabled,
}: {
  task: TenantTask;
  origin: 'assigned' | 'library';
  onRemove?: () => void;
  onAdd?: () => void;
  disabled?: boolean;
}) {
  const { t } = useTranslation('management');
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useDraggable({
    id: task.id,
    data: { list: origin },
  });

  const style = {
    transform: transform ? CSS.Translate.toString(transform) : undefined,
    transition: transition || undefined,
    opacity: isDragging ? 0.8 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className="rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-sm"
    >
      <div className="flex items-start justify-between gap-2">
        <div className="flex items-start gap-3">
          <button
            className="mt-1 h-7 w-7 rounded-md border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-50 disabled:opacity-50"
            {...listeners}
            {...attributes}
            disabled={disabled}
            aria-label={t('library.dragHandle', 'Task verschieben')}
          >
            ⋮⋮
          </button>
          <div className="space-y-1">
            <p className="text-sm font-medium text-slate-900">{task.title}</p>
            {task.description ? <p className="text-xs text-slate-600">{task.description}</p> : null}
          </div>
        </div>
        <div className="flex items-center gap-2">
          {task.emotion ? (
            <Badge
              variant="outline"
              className="border-transparent text-[11px]"
              style={{
                backgroundColor: `${task.emotion.color ?? '#eef2ff'}20`,
                color: task.emotion.color ?? '#4338ca',
              }}
            >
              {task.emotion.icon ? <span className="mr-1">{task.emotion.icon}</span> : null}
              {task.emotion.name}
            </Badge>
          ) : null}
          <Badge variant="outline" className="border-pink-200 text-pink-600">
            {mapPriority(task.priority, (key, fallback) => t(key, { defaultValue: fallback }))}
          </Badge>
          {origin === 'assigned' ? (
            <Button
              size="icon"
              variant="ghost"
              onClick={onRemove}
              disabled={disabled}
              aria-label={t('actions.remove', 'Vom Event entfernen')}
            >
              <Trash2 className="h-4 w-4 text-slate-500" />
            </Button>
          ) : (
            <Button
              size="icon"
              variant="ghost"
              onClick={onAdd}
              disabled={disabled}
              aria-label={t('actions.assign', 'Zum Event hinzufügen')}
            >
              <PlusCircle className="h-4 w-4 text-emerald-600" />
            </Button>
          )}
        </div>
      </div>
    </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', { keyPrefix: 'eventTasks.collections' });

  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('title', 'Mission Packs')}
          </CardTitle>
          <CardDescription className="text-sm text-slate-600">
            {t('subtitle', 'Importiere Aufgaben-Kollektionen, die zu deinem Event passen.')}
          </CardDescription>
        </div>
        <Button variant="outline" onClick={onViewAll}>
          {t('viewAll', 'Alle Kollektionen ansehen')}
        </Button>
      </CardHeader>
      <CardContent className="space-y-4">
        {error ? (
          <Alert variant="destructive">
            <AlertTitle>{t('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('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('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('genericType', 'Allgemein')}</span>
                  <span>{collection.is_global ? t('global', 'Global') : t('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('importCta', 'Mission Pack importieren')
                  )}
                </Button>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

type EmotionsCardProps = {
  emotions: TenantEmotion[];
  emotionsLoading: boolean;
  emotionsError: string | null;
  onOpenEmotions: () => void;
};

function EmotionsCard({ emotions, emotionsLoading, emotionsError, onOpenEmotions }: EmotionsCardProps) {
  const { t } = useTranslation('management');
  const spotlightEmotions = emotions.slice(0, 6);

  return (
    <Card className="border border-rose-100 bg-rose-50/70 shadow-sm">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base text-rose-900">
          <Sparkles className="h-5 w-5 text-rose-500" />
          {t('tasks.story.emotionsTitle', 'Emotionen')}
        </CardTitle>
        <CardDescription className="text-sm text-rose-800">
          {t('tasks.story.description', 'Aktiviere Emotionen, um Aufgaben zu kategorisieren.')}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="flex items-center justify-between">
          <Badge variant="outline" className="border-rose-200 text-rose-700">
            {t('tasks.story.emotionsCount', { defaultValue: '{{count}} aktiv', count: emotions.length })}
          </Badge>
          <Button
            size="sm"
            className="bg-rose-600 text-white hover:bg-rose-700"
            onClick={onOpenEmotions}
          >
            {t('tasks.story.emotionsCta', 'Emotionen verwalten')}
          </Button>
        </div>
        {emotionsLoading ? (
          <div className="h-10 animate-pulse rounded-xl bg-white/70" />
        ) : emotionsError ? (
          <p className="text-xs text-rose-900/70">{emotionsError}</p>
        ) : spotlightEmotions.length ? (
          <div className="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="text-xs text-rose-900/70">
            {t('tasks.story.emotionsEmpty', 'Aktiviere Emotionen, um Aufgaben zu kategorisieren.')}
          </p>
        )}
      </CardContent>
    </Card>
  );
}

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