import React from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Bell, Check, ChevronRight, RefreshCcw } 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 { motion, useAnimationControls, type PanInfo } from 'framer-motion';
import { MobileShell, HeaderActionButton } from './components/MobileShell';
import { MobileCard, PillBadge, SkeletonCard, CTAButton } from './components/Primitives';
import { MobileSelect } from './components/FormControls';
import { listNotificationLogs, markNotificationLogs, NotificationLogEntry } from '../api';
import { isAuthError } from '../auth/tokens';
import { getApiErrorMessage } from '../lib/apiError';
import toast from 'react-hot-toast';
import { MobileSheet } from './components/Sheet';
import { getEvents, TenantEvent } from '../api';
import { triggerHaptic } from './lib/haptics';
import { adminPath } from '../constants';
import { useBackNavigation } from './hooks/useBackNavigation';
import { groupNotificationsByScope, type NotificationScope, type NotificationGroup } from './lib/notificationGrouping';
import { collectUnreadIds } from './lib/notificationUnread';
import { formatRelativeTime } from './lib/relativeTime';
import { useAdminTheme } from './theme';

type NotificationItem = {
  id: string;
  title: string;
  body: string;
  time: string;
  tone: 'info' | 'warning';
  eventId?: number | null;
  eventName?: string | null;
  is_read?: boolean;
  scope: NotificationScope;
};

type NotificationSwipeRowProps = {
  item: NotificationItem;
  onOpen: (item: NotificationItem) => void;
  onMarkRead: (item: NotificationItem) => void;
  children: React.ReactNode;
};

function NotificationSwipeRow({ item, onOpen, onMarkRead, children }: NotificationSwipeRowProps) {
  const { t } = useTranslation('management');
  const { successBg, successText, infoBg, infoText } = useAdminTheme();
  const controls = useAnimationControls();
  const dragged = React.useRef(false);
  const markBg = successBg;
  const markText = successText;
  const detailBg = infoBg;
  const detailText = infoText;

  const handleDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
    dragged.current = Math.abs(info.offset.x) > 6;
  };

  const handleDragEnd = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
    const swipeThreshold = 64;
    const offsetX = info.offset.x;
    if (offsetX > swipeThreshold && !item.is_read) {
      void onMarkRead(item);
    } else if (offsetX < -swipeThreshold) {
      onOpen(item);
    }
    dragged.current = false;
    void controls.start({ x: 0, transition: { type: 'spring', stiffness: 320, damping: 26 } });
  };

  const handlePress = () => {
    if (dragged.current) {
      dragged.current = false;
      return;
    }
    onOpen(item);
  };

  return (
    <div style={{ position: 'relative' }}>
      <XStack
        alignItems="center"
        justifyContent="space-between"
        paddingHorizontal="$3"
        borderRadius="$4"
        pointerEvents="none"
        style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
      >
        <XStack alignItems="center" space="$2">
          <Check size={16} color={markText} />
          <Text fontSize="$xs" fontWeight="700" color={markText}>
            {item.is_read ? t('notificationLogs.read', 'Read') : t('notificationLogs.markRead', 'Mark read')}
          </Text>
        </XStack>
        <XStack alignItems="center" space="$2">
          <Text fontSize="$xs" fontWeight="700" color={detailText}>
            Details
          </Text>
          <ChevronRight size={16} color={detailText} />
        </XStack>
      </XStack>
      <XStack
        borderRadius="$4"
        overflow="hidden"
        pointerEvents="none"
        backgroundColor={item.is_read ? detailBg : markBg}
        opacity={0.5}
        style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
      />
      <motion.div
        drag="x"
        dragElastic={0.2}
        dragConstraints={{ left: -96, right: 96 }}
        onDrag={handleDrag}
        onDragEnd={handleDragEnd}
        animate={controls}
        initial={{ x: 0 }}
        style={{ touchAction: 'pan-y', position: 'relative', zIndex: 1 }}
      >
        <Pressable onPress={handlePress}>{children}</Pressable>
      </motion.div>
    </div>
  );
}

function formatLog(
  log: NotificationLogEntry,
  t: (key: string, defaultValue?: string, options?: Record<string, unknown>) => string,
  eventName?: string | null
): NotificationItem {
  const ctx = log.context ?? {};
  const limit = typeof ctx.limit === 'number' ? ctx.limit : null;
  const used = typeof ctx.used === 'number' ? ctx.used : null;
  const remaining = typeof ctx.remaining === 'number' ? ctx.remaining : null;
  const days = typeof ctx.day === 'number' ? ctx.day : null;
  const ctxEventId = ctx.event_id ?? ctx.eventId;
  const eventId = typeof ctxEventId === 'string' ? Number(ctxEventId) : (typeof ctxEventId === 'number' ? ctxEventId : null);
  const name = eventName ?? t('mobileNotifications.unknownEvent', 'Event');
  const isRead = log.is_read === true;
  const scope = (() => {
    switch (log.type) {
      case 'photo_limit':
      case 'photo_threshold':
        return 'photos';
      case 'guest_limit':
      case 'guest_threshold':
        return 'guests';
      case 'gallery_warning':
      case 'gallery_expired':
        return 'gallery';
      case 'event_limit':
      case 'event_threshold':
        return 'events';
      case 'package_expiring':
      case 'package_expired':
        return 'package';
      default:
        return 'general';
    }
  })();

  switch (log.type) {
    case 'photo_limit':
      return {
        id: String(log.id),
        title: t('notificationLogs.photoLimit.title', 'Photo limit reached'),
        body: t('notificationLogs.photoLimit.body', '{{event}} reached its photo limit of {{limit}}.', {
          event: name,
          limit: limit ?? '—',
        }),
        time: log.sent_at ?? log.failed_at ?? '',
        tone: 'warning',
        eventId,
        eventName,
        is_read: isRead,
        scope,
      };
    case 'guest_limit':
      return {
        id: String(log.id),
        title: t('notificationLogs.guestLimit.title', 'Guest limit reached'),
        body: t('notificationLogs.guestLimit.body', '{{event}} reached its guest limit of {{limit}}.', {
          event: name,
          limit: limit ?? '—',
        }),
        time: log.sent_at ?? log.failed_at ?? '',
        tone: 'warning',
        eventId,
        eventName,
        is_read: isRead,
        scope,
      };
    case 'event_limit':
      return {
        id: String(log.id),
        title: t('notificationLogs.eventLimit.title', 'Event quota reached'),
        body: t('notificationLogs.eventLimit.body', 'Your package allows no more events. Limit: {{limit}}.', {
          limit: limit ?? '—',
        }),
        time: log.sent_at ?? log.failed_at ?? '',
        tone: 'warning',
        eventId,
        eventName,
        is_read: isRead,
        scope,
      };
    case 'gallery_warning':
      return {
        id: String(log.id),
        title: t('notificationLogs.galleryWarning.title', 'Gallery expiring soon'),
        body: t('notificationLogs.galleryWarning.body', '{{event}} expires in {{days}} days.', {
          event: name,
          days: days ?? ctx.threshold ?? '—',
        }),
        time: log.sent_at ?? log.failed_at ?? '',
        tone: 'warning',
        eventId,
        eventName,
        is_read: isRead,
        scope,
      };
    case 'gallery_expired':
      return {
        id: String(log.id),
        title: t('notificationLogs.galleryExpired.title', 'Gallery expired'),
        body: t('notificationLogs.galleryExpired.body', '{{event}} gallery is offline. Extend to reactivate.', {
          event: name,
        }),
        time: log.sent_at ?? log.failed_at ?? '',
        tone: 'warning',
        eventId,
        eventName,
        is_read: isRead,
        scope,
      };
    case 'photo_threshold':
      return {
        id: String(log.id),
        title: t('notificationLogs.photoThreshold.title', 'Photo usage warning'),
        body: t('notificationLogs.photoThreshold.body', '{{event}} is at {{used}} / {{limit}} photos.', {
          event: name,
          used: used ?? '—',
          limit: limit ?? '—',
        }),
        time: log.sent_at ?? log.failed_at ?? '',
        tone: 'info',
        eventId,
        eventName,
        is_read: isRead,
        scope,
      };
    case 'guest_threshold':
      return {
        id: String(log.id),
        title: t('notificationLogs.guestThreshold.title', 'Guest usage warning'),
        body: t('notificationLogs.guestThreshold.body', '{{event}} is at {{used}} / {{limit}} guests.', {
          event: name,
          used: used ?? '—',
          limit: limit ?? '—',
        }),
        time: log.sent_at ?? log.failed_at ?? '',
        tone: 'info',
        eventId,
        eventName,
        is_read: isRead,
        scope,
      };
    default:
      return {
        id: String(log.id),
        title: log.type,
        body: t('notificationLogs.generic.body', 'Notification sent via {{channel}}.', { channel: log.channel }),
        time: log.sent_at ?? log.failed_at ?? '',
        tone: 'info',
        eventId,
        eventName,
        is_read: isRead,
        scope,
      };
  }
}

async function loadNotifications(
  t: (key: string, defaultValue?: string, options?: Record<string, unknown>) => string,
  events?: TenantEvent[],
  filters?: { scope?: string; status?: string; eventSlug?: string }
): Promise<NotificationItem[]> {
  try {
    const eventId = filters?.eventSlug ? (events ?? []).find((ev) => ev.slug === filters.eventSlug)?.id ?? undefined : undefined;
    const response = await listNotificationLogs({
      perPage: 50,
      scope: filters?.scope && filters.scope !== 'all' ? filters.scope : undefined,
      status: filters?.status === 'all' ? undefined : filters?.status,
      eventId: eventId,
    });
    const lookup = new Map<number, string>();
    (events ?? []).forEach((event) => {
      lookup.set(event.id, typeof event.name === 'string' ? event.name : (event.name as Record<string, string>)?.en ?? '');
    });

    return (response.data ?? [])
      .map((log) => {
        const ctxEventId = log.context?.event_id ?? log.context?.eventId;
        const parsed = typeof ctxEventId === 'string' ? Number(ctxEventId) : ctxEventId;
        return formatLog(log, t, lookup.get(parsed as number));
      });
  } catch (err) {
    throw err;
  }
}

export default function MobileNotificationsPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const { notificationId } = useParams<{ notificationId?: string }>();
  const { t } = useTranslation('management');
  const search = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
  const slug = search.get('event') ?? undefined;
  const scopeParam = search.get('scope') ?? 'all';
  const statusParam = search.get('status') ?? 'unread';
  const [notifications, setNotifications] = React.useState<NotificationItem[]>([]);
  const [selectedNotification, setSelectedNotification] = React.useState<NotificationItem | null>(null);
  const [detailOpen, setDetailOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [events, setEvents] = React.useState<TenantEvent[]>([]);
  const [showEventPicker, setShowEventPicker] = React.useState(false);
  const back = useBackNavigation(adminPath('/mobile/dashboard'));
  const { text, muted, border, warningBg, warningText, infoBg, primary, danger, accentSoft, subtle } = useAdminTheme();
  const warningIcon = warningText;
  const infoIcon = primary;
  const errorText = danger;

  const reload = React.useCallback(async () => {
    setLoading(true);
    try {
      const data = await loadNotifications(t as any, events, { scope: scopeParam, status: statusParam, eventSlug: slug });
      setNotifications(data);
      setError(null);
    } catch (err) {
      if (!isAuthError(err)) {
        const message = getApiErrorMessage(err, t('events.errors.loadFailed', 'Benachrichtigungen konnten nicht geladen werden.'));
        setError(message);
        toast.error(message);
      }
    } finally {
      setLoading(false);
    }
  }, [slug, t, events]);

  React.useEffect(() => {
    void reload();
  }, [reload]);

  React.useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (event.data?.type === 'admin-notification-refresh') {
        void reload();
      }
    };

    navigator.serviceWorker?.addEventListener('message', handleMessage);

    return () => {
      navigator.serviceWorker?.removeEventListener('message', handleMessage);
    };
  }, [reload]);

  React.useEffect(() => {
    (async () => {
      try {
        const list = await getEvents();
        setEvents(list);
      } catch {
        // non-fatal
      }
    })();
  }, []);

  const filtered = React.useMemo(() => {
    if (!slug) return notifications;
    const target = events.find((ev) => ev.slug === slug);
    if (!target) return notifications;
    return notifications.filter((item) => item.eventId === target.id || item.body.includes(String(target.name)) || item.title.includes(String(target.name)));
  }, [notifications, slug, events]);

  const scoped = React.useMemo(() => {
    if (scopeParam === 'all') return filtered;
    return filtered.filter((item) => item.scope === scopeParam);
  }, [filtered, scopeParam]);

  const statusFiltered = React.useMemo(() => {
    if (statusParam === 'all') return scoped;
    if (statusParam === 'read') return scoped.filter((item) => item.is_read);
    return scoped.filter((item) => !item.is_read);
  }, [scoped, statusParam]);

  const grouped = React.useMemo(() => groupNotificationsByScope(statusFiltered), [statusFiltered]);

  const unreadIds = React.useMemo(() => collectUnreadIds(scoped), [scoped]);

  const showFilterNotice = Boolean(slug) && filtered.length === 0 && notifications.length > 0;

  const markNotificationRead = React.useCallback(
    async (item: NotificationItem, options?: { close?: boolean }) => {
      const id = Number(item.id);
      if (!Number.isFinite(id)) return;
      try {
        await markNotificationLogs([id], 'read');
        await reload();
        triggerHaptic('success');
        if (options?.close) {
          setDetailOpen(false);
          setSelectedNotification(null);
        }
      } catch {
        toast.error(t('notificationLogs.markFailed', 'Could not update notifications.'));
      }
    },
    [reload, t],
  );

  const markSelectedRead = React.useCallback(async () => {
    if (!selectedNotification) return;
    await markNotificationRead(selectedNotification, { close: true });
  }, [markNotificationRead, selectedNotification]);

  const notificationListPath = adminPath('/mobile/notifications');
  const updateFilters = React.useCallback(
    (params: { scope?: string; status?: string; event?: string | null }) => {
      const next = new URLSearchParams({
        status: params.status ?? statusParam,
        scope: params.scope ?? scopeParam,
        event: params.event ?? slug ?? '',
      });
      navigate(`${notificationListPath}?${next.toString()}`, { replace: false });
    },
    [navigate, notificationListPath, scopeParam, slug, statusParam],
  );

  const markGroupRead = React.useCallback(
    async (group: NotificationGroup<NotificationItem>) => {
      const ids = collectUnreadIds(group.items);
      if (!ids.length) {
        return;
      }
      try {
        await markNotificationLogs(ids, 'read');
        void reload();
        triggerHaptic('success');
      } catch {
        toast.error(t('notificationLogs.markFailed', 'Could not update notifications.'));
      }
    },
    [reload, t],
  );

  const openNotification = React.useCallback(
    (item: NotificationItem) => {
      setSelectedNotification(item);
      setDetailOpen(true);
      if (notificationId !== String(item.id)) {
        navigate(`${notificationListPath}/${item.id}${location.search}`, { replace: false });
      }
      triggerHaptic('light');
    },
    [location.search, navigate, notificationId, notificationListPath],
  );

  React.useEffect(() => {
    if (!notificationId || loading) {
      return;
    }
    const targetId = Number(notificationId);
    if (!Number.isFinite(targetId)) {
      return;
    }
    const target = notifications.find((item) => Number(item.id) === targetId);
    if (target) {
      setSelectedNotification(target);
      setDetailOpen(true);
    }
  }, [notificationId, notifications, loading]);

  return (
    <MobileShell
      activeTab="home"
      title={t('mobileNotifications.title', 'Notifications')}
      onBack={back}
      headerActions={
        <HeaderActionButton onPress={() => reload()} ariaLabel={t('common.refresh', 'Refresh')}>
          <RefreshCcw size={18} color={text} />
        </HeaderActionButton>
      }
    >
      {error ? (
        <MobileCard>
          <Text fontWeight="700" color={errorText}>
            {error}
          </Text>
          <CTAButton
            label={t('common.retry', 'Retry')}
            tone="ghost"
            fullWidth={false}
            onPress={() => reload()}
          />
        </MobileCard>
      ) : null}

      {showFilterNotice ? (
        <MobileCard space="$2">
          <Text fontSize="$sm" fontWeight="700" color={text}>
            {t('notificationLogs.filterEmpty', 'No notifications for this event.')}
          </Text>
          <Pressable
            onPress={() => {
              updateFilters({ event: '' });
            }}
          >
            <Text fontSize="$sm" color={primary} fontWeight="700">
              {t('notificationLogs.clearFilter', 'Show all notifications')}
            </Text>
          </Pressable>
        </MobileCard>
      ) : null}

      <XStack space="$2" marginBottom="$2">
        <MobileSelect
          value={statusParam}
          onChange={(e) => updateFilters({ status: e.target.value })}
          compact
          style={{ minWidth: 120 }}
        >
          <option value="unread">{t('notificationLogs.filter.unread', 'Unread')}</option>
          <option value="read">{t('notificationLogs.filter.read', 'Read')}</option>
          <option value="all">{t('notificationLogs.filter.all', 'All')}</option>
        </MobileSelect>
        {unreadIds.length ? (
          <CTAButton
            label={t('notificationLogs.markAllRead', 'Mark all read')}
            onPress={async () => {
              try {
                await markNotificationLogs(unreadIds, 'read');
                void reload();
                triggerHaptic('success');
              } catch {
                toast.error(t('notificationLogs.markFailed', 'Could not update notifications.'));
              }
            }}
            tone="ghost"
          />
        ) : null}
      </XStack>

      <XStack space="$2" flexWrap="wrap" marginBottom="$2">
        {([
          { key: 'all', label: t('notificationLogs.scope.all', 'All scopes') },
          { key: 'photos', label: t('notificationLogs.scope.photos', 'Photos') },
          { key: 'guests', label: t('notificationLogs.scope.guests', 'Guests') },
          { key: 'gallery', label: t('notificationLogs.scope.gallery', 'Gallery') },
          { key: 'events', label: t('notificationLogs.scope.events', 'Events') },
          { key: 'package', label: t('notificationLogs.scope.package', 'Package') },
          { key: 'general', label: t('notificationLogs.scope.general', 'General') },
        ] as Array<{ key: NotificationScope | 'all'; label: string }>).map((filter) => {
          const active = scopeParam === filter.key;
          return (
            <Pressable key={filter.key} onPress={() => updateFilters({ scope: filter.key })} style={{ flexGrow: 1 }}>
              <XStack
                alignItems="center"
                justifyContent="center"
                paddingVertical="$2"
                paddingHorizontal="$3"
                borderRadius={14}
                borderWidth={1}
                borderColor={active ? primary : border}
                backgroundColor={active ? accentSoft : 'transparent'}
              >
                <Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
                  {filter.label}
                </Text>
              </XStack>
            </Pressable>
          );
        })}
      </XStack>

      {loading ? (
        <YStack space="$2">
          {Array.from({ length: 4 }).map((_, idx) => (
            <SkeletonCard key={`al-${idx}`} height={70} />
          ))}
        </YStack>
      ) : statusFiltered.length === 0 ? (
        <MobileCard alignItems="center" justifyContent="center" space="$2">
          <Bell size={24} color={subtle} />
          <Text fontSize="$sm" fontWeight="700" color={text}>
            {t('mobileNotifications.emptyTitle', 'All caught up')}
          </Text>
          <Text fontSize="$xs" color={muted} textAlign="center">
            {t('mobileNotifications.emptyBody', 'Enable push to receive alerts about uploads, guests, and expiring galleries.')}
          </Text>
          <CTAButton
            label={t('mobileNotifications.emptyAction', 'Check notification settings')}
            tone="ghost"
            fullWidth={false}
            onPress={() => navigate(adminPath('/mobile/settings'))}
          />
        </MobileCard>
      ) : (
        <YStack space="$2">
          {events.length ? (
            <Pressable onPress={() => setShowEventPicker(true)}>
              <Text fontSize="$sm" color={primary} fontWeight="700">
                {t('mobileNotifications.filterByEvent', 'Nach Event filtern')}
              </Text>
            </Pressable>
          ) : null}
          {grouped.map((group) => (
            <YStack key={group.scope} space="$2">
              <XStack alignItems="center" justifyContent="space-between">
                <Text fontSize="$xs" fontWeight="700" color={muted}>
                  {t(`notificationLogs.scope.${group.scope}`, group.scope)}
                </Text>
                <XStack space="$2" alignItems="center">
                  {group.unread > 0 ? (
                    <Pressable onPress={() => markGroupRead(group)}>
                      <Text fontSize="$xs" color={primary} fontWeight="700">
                        {t('notificationLogs.markScopeRead', 'Mark read')}
                      </Text>
                    </Pressable>
                  ) : null}
                  {group.unread > 0 ? (
                    <PillBadge tone="warning">
                      {t('notificationLogs.unread', 'Unread')} {group.unread}
                    </PillBadge>
                  ) : null}
                  <PillBadge tone="muted">{group.items.length}</PillBadge>
                </XStack>
              </XStack>
              {group.items.map((item) => {
                const formattedTime = formatRelativeTime(item.time) || item.time || '—';
                return (
                <NotificationSwipeRow
                  key={item.id}
                  item={item}
                  onOpen={openNotification}
                  onMarkRead={markNotificationRead}
                >
                  <MobileCard space="$2" borderColor={item.is_read ? border : primary}>
                    <XStack alignItems="center" space="$2">
                      <XStack
                        width={36}
                        height={36}
                        borderRadius={12}
                        alignItems="center"
                        justifyContent="center"
                        backgroundColor={item.tone === 'warning' ? warningBg : infoBg}
                      >
                        <Bell size={18} color={item.tone === 'warning' ? warningIcon : infoIcon} />
                      </XStack>
                      <YStack space="$0.5" flex={1}>
                        <Text fontSize="$sm" fontWeight="700" color={text}>
                          {item.title}
                        </Text>
                        <Text fontSize="$xs" color={muted}>
                          {item.body}
                        </Text>
                        {item.eventName ? (
                          <PillBadge tone="muted">{item.eventName}</PillBadge>
                        ) : null}
                      </YStack>
                      {!item.is_read ? <PillBadge tone="warning">{t('notificationLogs.unread', 'Unread')}</PillBadge> : null}
                      <PillBadge tone={item.tone === 'warning' ? 'warning' : 'muted'}>{formattedTime}</PillBadge>
                    </XStack>
                  </MobileCard>
                </NotificationSwipeRow>
              );
              })}
            </YStack>
          ))}
        </YStack>
      )}

      <MobileSheet
        open={detailOpen && Boolean(selectedNotification)}
        onClose={() => {
          setDetailOpen(false);
          setSelectedNotification(null);
          if (notificationId) {
            navigate(`${notificationListPath}${location.search}`, { replace: true });
          }
        }}
        title={selectedNotification?.title ?? t('mobileNotifications.title', 'Notifications')}
        footer={
          selectedNotification && !selectedNotification.is_read ? (
            <CTAButton label={t('notificationLogs.markRead', 'Mark as read')} onPress={() => markSelectedRead()} />
          ) : null
        }
      >
        {selectedNotification ? (
          <YStack space="$2">
            <Text fontSize="$sm" color={text} fontWeight="700">
              {selectedNotification.title}
            </Text>
            <Text fontSize="$sm" color={muted}>
              {selectedNotification.body}
            </Text>
            <XStack space="$2">
              <PillBadge tone={selectedNotification.tone === 'warning' ? 'warning' : 'muted'}>
                {selectedNotification.scope}
              </PillBadge>
              {!selectedNotification.is_read ? <PillBadge tone="warning">{t('notificationLogs.unread', 'Unread')}</PillBadge> : null}
            </XStack>
            <Text fontSize="$xs" color={muted}>
              {formatRelativeTime(selectedNotification.time) || selectedNotification.time || '—'}
            </Text>
          </YStack>
        ) : null}
      </MobileSheet>

      <MobileSheet
        open={showEventPicker}
        onClose={() => setShowEventPicker(false)}
        title={t('mobileNotifications.filterByEvent', 'Nach Event filtern')}
        footer={null}
      >
        <YStack space="$2">
          {events.length === 0 ? (
            <Text fontSize="$sm" color={muted}>
              {t('events.list.empty.description', 'Starte jetzt mit deinem ersten Event.')}
            </Text>
          ) : (
            events.map((ev) => (
              <Pressable
                key={ev.slug}
                onPress={() => {
                  setShowEventPicker(false);
                  if (ev.slug) {
                    updateFilters({ event: ev.slug });
                  }
                }}
              >
                <XStack alignItems="center" justifyContent="space-between" paddingVertical="$2">
                  <YStack>
                    <Text fontSize="$sm" fontWeight="700" color={text}>
                      {ev.name}
                    </Text>
                    <Text fontSize="$xs" color={muted}>
                      {ev.slug}
                    </Text>
                  </YStack>
                  <PillBadge tone="muted">{ev.status ?? '—'}</PillBadge>
                </XStack>
              </Pressable>
            ))
          )}
        </YStack>
      </MobileSheet>
    </MobileShell>
  );
}