import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { format } from 'date-fns';
import { de, enGB } from 'date-fns/locale';
import { Layers, Library, Loader2, Plus } from 'lucide-react';

import { AdminLayout } from '../components/AdminLayout';
import {
  getTaskCollections,
  importTaskCollection,
  getEvents,
  PaginationMeta,
  TenantEvent,
  TenantTaskCollection,
} from '../api';
import { ADMIN_TASKS_PATH } from '../constants';
import { isAuthError } from '../auth/tokens';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

const DEFAULT_PAGE_SIZE = 12;

type ScopeFilter = 'all' | 'global' | 'tenant';

type CollectionsState = {
  items: TenantTaskCollection[];
  meta: PaginationMeta | null;
};

export default function TaskCollectionsPage(): JSX.Element {
  const navigate = useNavigate();
  const { t, i18n } = useTranslation('management');

  const [collectionsState, setCollectionsState] = React.useState<CollectionsState>({ items: [], meta: null });
  const [page, setPage] = React.useState(1);
  const [search, setSearch] = React.useState('');
  const [scope, setScope] = React.useState<ScopeFilter>('all');
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [successMessage, setSuccessMessage] = React.useState<string | null>(null);

  const [dialogOpen, setDialogOpen] = React.useState(false);
  const [selectedCollection, setSelectedCollection] = React.useState<TenantTaskCollection | null>(null);
  const [events, setEvents] = React.useState<TenantEvent[]>([]);
  const [selectedEventSlug, setSelectedEventSlug] = React.useState('');
  const [importing, setImporting] = React.useState(false);
  const [eventsLoading, setEventsLoading] = React.useState(false);
  const [eventError, setEventError] = React.useState<string | null>(null);
  const [reloadToken, setReloadToken] = React.useState(0);

  const scopeParam = React.useMemo(() => {
    if (scope === 'global') return 'global';
    if (scope === 'tenant') return 'tenant';
    return undefined;
  }, [scope]);

  React.useEffect(() => {
    let cancelled = false;
    async function loadCollections() {
      setLoading(true);
      setError(null);
      try {
        const result = await getTaskCollections({
          page,
          per_page: DEFAULT_PAGE_SIZE,
          search: search.trim() || undefined,
          scope: scopeParam,
        });
        if (cancelled) return;
        setCollectionsState({ items: result.data, meta: result.meta });
      } catch (err) {
        if (cancelled) return;
        if (!isAuthError(err)) {
          setError(t('collections.notifications.error'));
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    void loadCollections();

    return () => {
      cancelled = true;
    };
  }, [page, search, scopeParam, reloadToken, t]);

  React.useEffect(() => {
    if (successMessage) {
      const timeout = setTimeout(() => setSuccessMessage(null), 4000);
      return () => clearTimeout(timeout);
    }
    return undefined;
  }, [successMessage]);

  async function ensureEventsLoaded() {
    if (events.length > 0 || eventsLoading) {
      return;
    }
    setEventsLoading(true);
    setEventError(null);
    try {
      const result = await getEvents();
      setEvents(result);
    } catch (err) {
      if (!isAuthError(err)) {
        setEventError(t('collections.errors.eventsLoad'));
      }
    } finally {
      setEventsLoading(false);
    }
  }

  function openImportDialog(collection: TenantTaskCollection) {
    setSelectedCollection(collection);
    setSelectedEventSlug('');
    setDialogOpen(true);
    void ensureEventsLoaded();
  }

  async function handleImport(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!selectedCollection || !selectedEventSlug) {
      setEventError(t('collections.errors.selectEvent'));
      return;
    }
    setImporting(true);
    setEventError(null);
    try {
      await importTaskCollection(selectedCollection.id, selectedEventSlug);
      setSuccessMessage(t('collections.notifications.imported'));
      setDialogOpen(false);
      setReloadToken((token) => token + 1);
    } catch (err) {
      if (!isAuthError(err)) {
        setEventError(t('collections.notifications.error'));
      }
    } finally {
      setImporting(false);
    }
  }

  const showEmpty = !loading && collectionsState.items.length === 0;

  return (
    <AdminLayout
      title={t('collections.title') ?? 'Task Collections'}
      subtitle={t('collections.subtitle') ?? ''}
      actions={
        <div className="flex flex-wrap gap-2">
          <Button variant="outline" onClick={() => navigate(ADMIN_TASKS_PATH)}>
            <Library className="mr-2 h-4 w-4" />
            {t('collections.actions.openTasks')}
          </Button>
          <Button
            className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
            onClick={() => navigate(ADMIN_TASKS_PATH)}
          >
            <Plus className="mr-2 h-4 w-4" />
            {t('collections.actions.create')}
          </Button>
        </div>
      }
    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('collections.notifications.error')}</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {successMessage && (
        <Alert className="border-l-4 border-green-500 bg-green-50 text-sm text-green-900">
          <AlertTitle>{t('collections.notifications.imported')}</AlertTitle>
          <AlertDescription>{successMessage}</AlertDescription>
        </Alert>
      )}

      <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
        <CardHeader>
          <CardTitle className="text-xl text-slate-900">{t('collections.title')}</CardTitle>
          <CardDescription className="text-sm text-slate-600">{t('collections.subtitle')}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <Input
              value={search}
              onChange={(event) => {
                setPage(1);
                setSearch(event.target.value);
              }}
              placeholder={t('collections.filters.search') ?? 'Search collections'}
              className="w-full lg:max-w-md"
            />
            <div className="flex flex-wrap gap-3">
              <Select
                value={scope}
                onValueChange={(value) => {
                  setScope(value as ScopeFilter);
                  setPage(1);
                }}
              >
                <SelectTrigger className="w-[220px]">
                  <SelectValue placeholder={t('collections.filters.scope')} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">{t('collections.filters.allScopes')}</SelectItem>
                  <SelectItem value="global">{t('collections.filters.globalOnly')}</SelectItem>
                  <SelectItem value="tenant">{t('collections.filters.tenantOnly')}</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          {loading ? (
            <CollectionSkeleton />
          ) : showEmpty ? (
            <EmptyCollectionsState onCreate={() => navigate(ADMIN_TASKS_PATH)} />
          ) : (
            <div className="grid gap-4 sm:grid-cols-2">
              {collectionsState.items.map((collection) => (
                <CollectionCard
                  key={collection.id}
                  collection={collection}
                  onImport={() => openImportDialog(collection)}
                />
              ))}
            </div>
          )}

          {collectionsState.meta && collectionsState.meta.last_page > 1 && (
            <div className="flex items-center justify-between">
              <Button
                variant="outline"
                disabled={page <= 1}
                onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
              >
                {t('collections.pagination.prev')}
              </Button>
              <span className="text-xs text-slate-500">
                {t('collections.pagination.page', {
                  current: collectionsState.meta.current_page,
                  total: collectionsState.meta.last_page,
                })}
              </span>
              <Button
                variant="outline"
                disabled={page >= collectionsState.meta.last_page}
                onClick={() => setPage((prev) => Math.min(prev + 1, collectionsState.meta!.last_page))}
              >
                {t('collections.pagination.next')}
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      <ImportDialog
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        collection={selectedCollection}
        events={events}
        eventError={eventError}
        eventsLoading={eventsLoading}
        selectedEventSlug={selectedEventSlug}
        onEventChange={setSelectedEventSlug}
        onSubmit={handleImport}
        importing={importing}
      />
    </AdminLayout>
  );
}

function CollectionCard({
  collection,
  onImport,
}: {
  collection: TenantTaskCollection;
  onImport: () => void;
}) {
  const { t, i18n } = useTranslation('management');
  const locale = i18n.language.startsWith('en') ? enGB : de;
  const updatedLabel = collection.updated_at
    ? format(new Date(collection.updated_at), 'PP', { locale })
    : null;
  const scopeLabel = collection.is_global ? t('collections.scope.global') : t('collections.scope.tenant');
  const eventTypeLabel = collection.event_type?.name ?? t('collections.filters.allEventTypes');

  return (
    <Card className="border border-slate-100 bg-white/90 shadow-sm">
      <CardHeader className="space-y-3">
        <div className="flex items-center gap-2">
          <Badge
            variant="outline"
            className={collection.is_global ? 'border-indigo-200 text-indigo-600' : 'border-pink-200 text-pink-600'}
          >
            {scopeLabel}
          </Badge>
          {eventTypeLabel && (
            <Badge variant="secondary" className="bg-slate-100 text-slate-700">
              {eventTypeLabel}
            </Badge>
          )}
        </div>
        <CardTitle className="text-lg text-slate-900">{collection.name}</CardTitle>
        {collection.description && (
          <CardDescription className="text-sm text-slate-600">
            {collection.description}
          </CardDescription>
        )}
      </CardHeader>
      <CardContent className="flex items-center justify-between text-sm text-slate-500">
        <div className="flex items-center gap-2">
          <Layers className="h-4 w-4" />
          <span>{t('collections.labels.taskCount', { count: collection.tasks_count })}</span>
        </div>
        {updatedLabel && <span>{t('collections.labels.updated', { date: updatedLabel })}</span>}
      </CardContent>
      <CardFooter className="flex justify-end">
        <Button variant="outline" onClick={onImport}>
          {t('collections.actions.import')}
        </Button>
      </CardFooter>
    </Card>
  );
}

function EmptyCollectionsState({ onCreate }: { onCreate: () => void }) {
  const { t } = useTranslation('management');
  return (
    <div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-pink-200 bg-pink-50/40 p-12 text-center">
      <div className="rounded-full bg-white p-4 shadow-inner">
        <Layers className="h-8 w-8 text-pink-500" />
      </div>
      <div className="space-y-1">
        <h3 className="text-lg font-semibold text-slate-800">{t('collections.empty.title')}</h3>
        <p className="text-sm text-slate-600">{t('collections.empty.description')}</p>
      </div>
      <div className="flex gap-2">
        <Button onClick={onCreate}>
          <Plus className="mr-2 h-4 w-4" />
          {t('collections.actions.create')}
        </Button>
      </div>
    </div>
  );
}

function CollectionSkeleton() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {Array.from({ length: 4 }).map((_, index) => (
        <div key={index} className="animate-pulse rounded-2xl border border-slate-100 bg-white/80 p-6 shadow-sm">
          <div className="mb-3 h-4 w-24 rounded bg-slate-200" />
          <div className="mb-2 h-5 w-40 rounded bg-slate-200" />
          <div className="h-16 rounded bg-slate-100" />
        </div>
      ))}
    </div>
  );
}

function ImportDialog({
  open,
  onOpenChange,
  collection,
  events,
  eventsLoading,
  eventError,
  selectedEventSlug,
  onEventChange,
  onSubmit,
  importing,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  collection: TenantTaskCollection | null;
  events: TenantEvent[];
  eventsLoading: boolean;
  eventError: string | null;
  selectedEventSlug: string;
  onEventChange: (value: string) => void;
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
  importing: boolean;
}) {
  const { t, i18n } = useTranslation('management');
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>{t('collections.dialogs.importTitle')}</DialogTitle>
        </DialogHeader>

        <form className="space-y-4" onSubmit={onSubmit}>
          <div className="space-y-2">
            <Label htmlFor="collection-name">{t('collections.dialogs.collectionLabel')}</Label>
            <Input id="collection-name" value={collection?.name ?? ''} readOnly disabled className="bg-slate-100" />
          </div>

          <div className="space-y-2">
            <Label htmlFor="collection-event">{t('collections.dialogs.selectEvent')}</Label>
            <Select
              value={selectedEventSlug}
              onValueChange={onEventChange}
              disabled={eventsLoading || events.length === 0}
            >
              <SelectTrigger id="collection-event">
                <SelectValue placeholder={t('collections.dialogs.selectEvent') ?? 'Event auswählen'} />
              </SelectTrigger>
              <SelectContent>
                {events.map((event) => (
                  <SelectItem key={event.slug} value={event.slug}>
                    {formatEventLabel(event, i18n.language)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {events.length === 0 && !eventsLoading && (
              <p className="text-xs text-slate-500">
                {t('collections.errors.noEvents') ?? 'Noch keine Events vorhanden.'}
              </p>
            )}
            {eventError && <p className="text-xs text-red-500">{eventError}</p>}
          </div>

          <DialogFooter className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              {t('collections.dialogs.cancel')}
            </Button>
            <Button type="submit" disabled={importing || !selectedEventSlug}>
              {importing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
              {t('collections.dialogs.submit')}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

function formatEventLabel(event: TenantEvent, language: string): string {
  const locales = [language, language?.split('-')[0], 'de', 'en'].filter(Boolean) as string[];

  let name: string | undefined;
  if (typeof event.name === 'string') {
    name = event.name;
  } else if (event.name && typeof event.name === 'object') {
    for (const locale of locales) {
      const value = (event.name as Record<string, string>)[locale!];
      if (value) {
        name = value;
        break;
      }
    }
    if (!name) {
      const first = Object.values(event.name as Record<string, string>)[0];
      if (first) {
        name = first;
      }
    }
  }

  const eventDate = event.event_date ? new Date(event.event_date) : null;
  if (!eventDate) {
    return name ?? event.slug;
  }

  const locale = language.startsWith('en') ? enGB : de;
  return `${name ?? event.slug} (${format(eventDate, 'PP', { locale })})`;
}