import React from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Loader2, PlusCircle, Sparkles } from 'lucide-react';
import { useTranslation } from 'react-i18next';

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 { AdminLayout } from '../components/AdminLayout';
import {
  assignTasksToEvent,
  getEvent,
  getEventTasks,
  getTasks,
  updateEvent,
  TenantEvent,
  TenantTask,
} from '../api';
import { isAuthError } from '../auth/tokens';
import { ADMIN_EVENTS_PATH } from '../constants';

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 statusLabels = React.useMemo(
    () => ({
      published: t('management.members.statuses.published', 'Veröffentlicht'),
      draft: t('management.members.statuses.draft', 'Entwurf'),
    }),
    [t]
  );

  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 isPhotoOnlyMode = event?.engagement_mode === 'photo_only';

  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: {
          engagement_mode: nextMode,
        },
      });
      setEvent(updated);
    } 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', 'Event-Tasks')}
      subtitle={t('management.tasks.subtitle', 'Verwalte Aufgaben, die diesem Event zugeordnet sind.')}
      actions={actions}
    >
      {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>
      ) : (
        <>
          <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 sm:flex-row sm:items-center sm: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 werden in der Gäste-App angezeigt. Deaktiviere sie für einen reinen Foto-Modus.',
                          )}
                    </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>
            </CardHeader>
            <CardContent className="grid gap-4 lg:grid-cols-2">
              <section className="space-y-3">
                <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>
                {assignedTasks.length === 0 ? (
                  <EmptyState message={t('management.tasks.sections.assigned.empty', 'Noch keine Tasks zugewiesen.')} />
                ) : (
                  <div className="space-y-2">
                    {assignedTasks.map((task) => (
                      <div key={task.id} className="rounded-2xl border border-slate-100 bg-white/90 p-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, t)}
                          </Badge>
                        </div>
                        {task.description && <p className="mt-1 text-xs text-slate-600">{task.description}</p>}
                      </div>
                    ))}
                  </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>
        </>
      )}
    </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 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');
}