import React from 'react';
import { useNavigate } from 'react-router-dom';
import { CalendarDays, MapPin, Plus, Search, Camera, Users, Sparkles } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { useTranslation } from 'react-i18next';
import { MobileShell, HeaderActionButton } from './components/MobileShell';
import { MobileCard, PillBadge, CTAButton, FloatingActionButton, SkeletonCard } from './components/Primitives';
import { MobileInput } from './components/FormControls';
import { getEvents, TenantEvent } from '../api';
import { adminPath } from '../constants';
import { isAuthError } from '../auth/tokens';
import { getApiErrorMessage } from '../lib/apiError';
import { useBackNavigation } from './hooks/useBackNavigation';
import { buildEventStatusCounts, filterEventsByStatus, resolveEventStatusKey, type EventStatusKey } from './lib/eventFilters';
import { buildEventListStats } from './lib/eventListStats';
import { useAdminTheme } from './theme';

export default function MobileEventsPage() {
  const { t } = useTranslation('management');
  const navigate = useNavigate();
  const [events, setEvents] = React.useState<TenantEvent[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [query, setQuery] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState<EventStatusKey>('all');
  const searchRef = React.useRef<HTMLInputElement>(null);
  const back = useBackNavigation();
  const { text, muted, subtle, border, primary, danger, surface, accentSoft, accent } = useAdminTheme();
  React.useEffect(() => {
    (async () => {
      try {
        setEvents(await getEvents());
      } catch (err) {
        if (!isAuthError(err)) {
          setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Event konnte nicht geladen werden.')));
        }
      } finally {
        setLoading(false);
      }
    })();
  }, [t]);

  return (
    <MobileShell
      activeTab="home"
      title={t('events.list.dashboardTitle', 'All Events Dashboard')}
      onBack={back}
      headerActions={
        <HeaderActionButton onPress={() => searchRef.current?.focus()} ariaLabel={t('events.list.search', 'Search events')}>
          <Search size={18} color={text} />
        </HeaderActionButton>
      }
    >
      {error ? (
        <MobileCard>
          <Text fontWeight="700" color={danger}>
            {error}
          </Text>
        </MobileCard>
      ) : null}

      <MobileInput
        ref={searchRef}
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder={t('events.list.search', 'Search events')}
        compact
        style={{ marginBottom: 12 }}
      />

      {loading ? (
        <YStack space="$2">
          {Array.from({ length: 3 }).map((_, idx) => (
            <SkeletonCard key={`sk-${idx}`} height={90} />
          ))}
        </YStack>
      ) : events.length === 0 ? (
        <MobileCard alignItems="center" justifyContent="center" space="$3">
          <Text fontSize="$md" fontWeight="700">
            {t('events.list.empty.title', 'Noch kein Event angelegt')}
          </Text>
          <Text fontSize="$sm" color={muted} textAlign="center">
            {t('events.list.empty.description', 'Starte jetzt mit deinem ersten Event.')}
          </Text>
          <CTAButton label={t('events.actions.create', 'Create New Event')} onPress={() => navigate(adminPath('/events/new'))} />
        </MobileCard>
      ) : (
        <EventsList
          events={events}
          query={query}
          statusFilter={statusFilter}
          onStatusChange={setStatusFilter}
          onOpen={(slug) => navigate(adminPath(`/mobile/events/${slug}`))}
          onEdit={(slug) => navigate(adminPath(`/mobile/events/${slug}/edit`))}
        />
      )}

      <FloatingActionButton
        label={t('events.actions.create', 'Create New Event')}
        icon={Plus}
        onPress={() => navigate(adminPath('/mobile/events/new'))}
      />
    </MobileShell>
  );
}

function EventsList({
  events,
  query,
  statusFilter,
  onStatusChange,
  onOpen,
  onEdit,
}: {
  events: TenantEvent[];
  query: string;
  statusFilter: EventStatusKey;
  onStatusChange: (value: EventStatusKey) => void;
  onOpen: (slug: string) => void;
  onEdit: (slug: string) => void;
}) {
  const { t } = useTranslation('management');
  const { text, muted, subtle, border, primary, surface, accentSoft, accent } = useAdminTheme();
  const activeBg = accentSoft;
  const activeBorder = accent;

  const statusCounts = React.useMemo(() => buildEventStatusCounts(events), [events]);
  const filteredByStatus = React.useMemo(
    () => filterEventsByStatus(events, statusFilter),
    [events, statusFilter]
  );
  const filteredEvents = React.useMemo(() => {
    if (!query.trim()) return filteredByStatus;
    const needle = query.toLowerCase();
    return filteredByStatus.filter((event) => {
      const hay = `${event.name ?? ''} ${event.location ?? ''}`.toLowerCase();
      return hay.includes(needle);
    });
  }, [filteredByStatus, query]);

  const filters: Array<{ key: EventStatusKey; label: string; count: number }> = [
    { key: 'all', label: t('events.list.filters.all', 'All'), count: statusCounts.all },
    { key: 'upcoming', label: t('events.list.filters.upcoming', 'Upcoming'), count: statusCounts.upcoming },
    { key: 'draft', label: t('events.list.filters.draft', 'Draft'), count: statusCounts.draft },
    { key: 'past', label: t('events.list.filters.past', 'Past'), count: statusCounts.past },
  ];

  return (
    <YStack space="$3">
      <XStack space="$2" flexWrap="wrap">
        {filters.map((filter) => {
          const active = filter.key === statusFilter;
          return (
            <Pressable key={filter.key} onPress={() => onStatusChange(filter.key)} style={{ flexGrow: 1 }}>
              <XStack
                alignItems="center"
                justifyContent="center"
                space="$1.5"
                paddingVertical="$2"
                paddingHorizontal="$3"
                borderRadius={14}
                backgroundColor={active ? activeBg : surface}
                borderWidth={1}
                borderColor={active ? activeBorder : border}
              >
                <Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
                  {filter.label}
                </Text>
                <PillBadge tone={active ? 'success' : 'muted'}>{filter.count}</PillBadge>
              </XStack>
            </Pressable>
          );
        })}
      </XStack>

      {filteredEvents.length === 0 ? (
        <MobileCard alignItems="center" justifyContent="center" space="$2">
          <Text fontSize="$sm" fontWeight="700" color={text}>
            {t('events.list.empty.filtered', 'No events match this filter.')}
          </Text>
          <Text fontSize="$xs" color={muted} textAlign="center">
            {t('events.list.empty.filteredHint', 'Try a different status or clear your search.')}
          </Text>
          <CTAButton
            label={t('events.list.filters.all', 'All')}
            tone="ghost"
            fullWidth={false}
            onPress={() => onStatusChange('all')}
          />
        </MobileCard>
      ) : (
        filteredEvents.map((event) => {
          const statusKey = resolveEventStatusKey(event);
          const statusLabel =
            statusKey === 'draft'
              ? t('events.list.filters.draft', 'Draft')
              : statusKey === 'past'
                ? t('events.list.filters.past', 'Past')
                : t('events.list.filters.upcoming', 'Upcoming');
          const statusTone = statusKey === 'draft' ? 'warning' : statusKey === 'past' ? 'muted' : 'success';
          return (
            <EventRow
              key={event.id}
              event={event}
              text={text}
              muted={muted}
              subtle={subtle}
              border={border}
              primary={primary}
              statusLabel={statusLabel}
              statusTone={statusTone}
              onOpen={onOpen}
              onEdit={onEdit}
            />
          );
        })
      )}
    </YStack>
  );
}

function EventRow({
  event,
  text,
  muted,
  subtle,
  border,
  primary,
  statusLabel,
  statusTone,
  onOpen,
  onEdit,
}: {
  event: TenantEvent;
  text: string;
  muted: string;
  subtle: string;
  border: string;
  primary: string;
  statusLabel: string;
  statusTone: 'success' | 'warning' | 'muted';
  onOpen: (slug: string) => void;
  onEdit: (slug: string) => void;
}) {
  const { t } = useTranslation('management');
  const stats = buildEventListStats(event);
  return (
    <MobileCard borderColor={border}>
      <XStack justifyContent="space-between" alignItems="flex-start" space="$2">
        <YStack space="$1">
          <Text fontSize="$md" fontWeight="800" color={text}>
            {renderName(event.name)}
          </Text>
          <XStack alignItems="center" space="$2">
            <CalendarDays size={14} color={subtle} />
            <Text fontSize="$sm" color={muted}>
              {formatDate(event.event_date)}
            </Text>
          </XStack>
          <XStack alignItems="center" space="$2">
            <MapPin size={14} color={subtle} />
            <Text fontSize="$sm" color={muted}>
              {resolveLocation(event)}
            </Text>
          </XStack>
          <PillBadge tone={statusTone}>{statusLabel}</PillBadge>
          <XStack alignItems="center" space="$2" flexWrap="wrap">
            <EventStatChip
              icon={Camera}
              label={t('events.list.stats.photos', 'Photos')}
              value={stats.photos}
              muted={subtle}
            />
            <EventStatChip
              icon={Users}
              label={t('events.list.stats.guests', 'Guests')}
              value={stats.guests}
              muted={subtle}
            />
            <EventStatChip
              icon={Sparkles}
              label={t('events.list.stats.tasks', 'Tasks')}
              value={stats.tasks}
              muted={subtle}
            />
          </XStack>
        </YStack>
        <Pressable onPress={() => onEdit(event.slug)}>
          <Text fontSize="$xl" color={muted}>
            ˅
          </Text>
        </Pressable>
      </XStack>

      <Pressable onPress={() => onOpen(event.slug)} style={{ marginTop: 8 }}>
        <XStack alignItems="center" justifyContent="flex-start" space="$2">
          <Plus size={16} color={primary} />
          <Text fontSize="$sm" color={primary} fontWeight="700">
            {t('events.list.actions.open', 'Open event')}
          </Text>
        </XStack>
      </Pressable>
    </MobileCard>
  );
}

function EventStatChip({
  icon: Icon,
  label,
  value,
  muted,
}: {
  icon: typeof Camera;
  label: string;
  value: number;
  muted: string;
}) {
  return (
    <XStack alignItems="center" space="$1">
      <Icon size={12} color={muted} />
      <Text fontSize="$xs" color={muted}>
        {value} {label}
      </Text>
    </XStack>
  );
}

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

function resolveLocation(event: TenantEvent): string {
  const settings = (event.settings ?? {}) as Record<string, unknown>;
  const candidate =
    (settings.location as string | undefined) ??
    (settings.address as string | undefined) ??
    (settings.city as string | undefined);
  if (candidate && candidate.trim()) {
    return candidate;
  }
  return 'Location';
}

function formatDate(iso: string | null): string {
  if (!iso) return 'Date tbd';
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) {
    return 'Date tbd';
  }
  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
}