import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { AlertCircle, Bell, CalendarDays, Camera, CheckCircle2, ChevronRight, Circle, Download, Heart, Image as ImageIcon, Layout, ListTodo, Megaphone, QrCode, Settings, ShieldCheck, Sparkles, TrendingUp, Tv, Users } from 'lucide-react';
import { Button } from '@tamagui/button';
import { Card } from '@tamagui/card';
import { YGroup } from '@tamagui/group';
import { ListItem } from '@tamagui/list-item';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { Image } from '@tamagui/image';
import { Switch } from '@tamagui/switch';
import { Separator } from 'tamagui';
import { isSameDay, isPast, parseISO, differenceInDays, startOfDay } from 'date-fns';
import toast from 'react-hot-toast';

import { MobileShell } from './components/MobileShell';
import { ADMIN_EVENTS_PATH, adminPath } from '../constants';
import { useEventContext } from '../context/EventContext';
import { getEventStats, EventStats, TenantEvent, getEventPhotos, TenantPhoto, updateEvent, getLiveShowQueue } from '../api';
import { formatEventDate } from '../lib/events';
import { useAuth } from '../auth/context';
import { ADMIN_ACTION_COLORS, useAdminTheme } from './theme';
import { buildLimitWarnings } from '../lib/limitWarnings';
import { withAlpha } from './components/colors';
import { useEventReadiness } from './hooks/useEventReadiness';
import { SetupChecklist } from './components/SetupChecklist';
import { KpiStrip, PillBadge } from './components/Primitives';
import { getApiErrorMessage } from '../lib/apiError';
import { ContextHelpLink } from './components/ContextHelpLink';

// --- HELPERS ---

function translateLimits(t: any) {
  return (key: string, options?: any) => t(`management:limits.${key}`, key, options);
}

// --- TAMAGUI-ALIGNED PRIMITIVES ---

function DashboardCard({
  children,
  style,
  variant = 'default',
  ...rest
}: React.ComponentProps<typeof Card> & { variant?: 'default' | 'embedded' }) {
  const theme = useAdminTheme();
  const isEmbedded = variant === 'embedded';
  const cardSurface = isEmbedded
    ? (theme.surfaceMuted ?? theme.glassSurface ?? theme.surface)
    : (theme.glassSurfaceStrong ?? theme.surface);
  const cardBorder = theme.glassBorder ?? theme.border;
  const cardShadow = theme.glassShadow ?? theme.shadow;
  return (
    <Card
      backgroundColor={cardSurface}
      borderRadius={isEmbedded ? 16 : 20}
      borderWidth={1}
      borderColor={cardBorder}
      padding="$3.5"
      shadowColor={cardShadow}
      shadowOpacity={isEmbedded ? 0 : 0.16}
      shadowRadius={isEmbedded ? 0 : 16}
      shadowOffset={isEmbedded ? { width: 0, height: 0 } : { width: 0, height: 10 }}
      style={style}
      {...rest}
    >
      {children}
    </Card>
  );
}

function SectionHeader({
  title,
  subtitle,
  action,
  showSeparator = true,
  compact = false,
}: {
  title: string;
  subtitle?: string;
  action?: React.ReactNode;
  showSeparator?: boolean;
  compact?: boolean;
}) {
  const theme = useAdminTheme();
  const titleSize = compact ? '$md' : '$lg';
  const subtitleSize = compact ? '$xs' : '$sm';
  const spacing = compact ? '$1' : '$1.5';
  return (
    <YStack space={spacing}>
      <XStack alignItems="center" justifyContent="space-between">
        <Text fontSize={titleSize} fontWeight="800" color={theme.textStrong}>
          {title}
        </Text>
        {action ?? null}
      </XStack>
      {subtitle ? (
        <Text fontSize={subtitleSize} color={theme.muted}>
          {subtitle}
        </Text>
      ) : null}
      {showSeparator ? <Separator backgroundColor={theme.border} opacity={0.6} /> : null}
    </YStack>
  );
}

function StatusBadge({ status }: { status: string }) {
  const { t } = useTranslation('management');
  type StatusTone = 'success' | 'warning' | 'danger' | 'muted';
  const statuses: Record<string, { tone: StatusTone; label: string }> = {
    published: { tone: 'success', label: t('events.status.published', 'Live') },
    draft: { tone: 'warning', label: t('events.status.draft', 'Draft') },
    archived: { tone: 'muted', label: t('events.status.archived', 'Archived') },
  };
  const config = statuses[status] ?? { tone: 'muted', label: status };

  return <PillBadge tone={config.tone}>{config.label}</PillBadge>;
}

// --- MAIN PAGE COMPONENT ---

export default function MobileDashboardPage() {
  const navigate = useNavigate();
  const { slug: slugParam } = useParams<{ slug?: string }>();
  const { t, i18n } = useTranslation(['management', 'dashboard', 'mobile']);
  const { events, activeEvent, hasEvents, isLoading, selectEvent, refetch } = useEventContext();
  const { user } = useAuth();
  const theme = useAdminTheme();
  const isMember = user?.role === 'member';

  // --- LOGIC ---
  const memberPermissions = React.useMemo(() => {
    if (!isMember) return ['*'];
    return Array.isArray(activeEvent?.member_permissions) ? activeEvent?.member_permissions ?? [] : [];
  }, [activeEvent?.member_permissions, isMember]);
  
  function allowPermission(permissions: string[], permission: string): boolean {
    if (permissions.includes('*') || permissions.includes(permission)) return true;
    if (permission.includes(':')) {
      const [prefix] = permission.split(':');
      return permissions.includes(`${prefix}:*`);
    }
    return false;
  }
  
  const canManageEvents = React.useMemo(() => allowPermission(memberPermissions, 'events:manage'), [memberPermissions]);
  
  const { data: stats } = useQuery<EventStats | null>({
    queryKey: ['mobile', 'dashboard', 'stats', activeEvent?.slug],
    enabled: Boolean(activeEvent?.slug),
    queryFn: async () => {
      if (!activeEvent?.slug) return null;
      return await getEventStats(activeEvent.slug);
    },
  });

  const { data: photoData } = useQuery({
    queryKey: ['mobile', 'dashboard', 'recent-photos', activeEvent?.slug],
    enabled: Boolean(activeEvent?.slug),
    queryFn: async () => {
      if (!activeEvent?.slug) return { photos: [] };
      return await getEventPhotos(activeEvent.slug, { perPage: 6, sort: 'desc' });
    },
  });

  const { data: liveShowApprovedCount = 0 } = useQuery({
    queryKey: ['mobile', 'dashboard', 'live-show-approved', activeEvent?.slug],
    enabled: Boolean(activeEvent?.slug),
    queryFn: async () => {
      if (!activeEvent?.slug) return 0;
      const result = await getLiveShowQueue(activeEvent.slug, { liveStatus: 'approved', perPage: 1 });
      if (result.photos.length === 0) {
        return 0;
      }
      return result.meta.total ?? result.photos.length;
    },
  });

  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';
  
  React.useEffect(() => {
    if (!slugParam || slugParam === activeEvent?.slug) return;
    selectEvent(slugParam);
  }, [activeEvent?.slug, selectEvent, slugParam]);

  const shouldRedirectToSelector = !isLoading && !activeEvent && !slugParam;

  React.useEffect(() => {
    if (!shouldRedirectToSelector) return;
    navigate(ADMIN_EVENTS_PATH, { replace: true });
  }, [navigate, shouldRedirectToSelector]);

  // --- RENDER ---
  
  if (shouldRedirectToSelector) {
    return null;
  }

  if (isLoading) {
    return (
      <MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
        <DashboardCard height={120} />
      </MobileShell>
    );
  }

  if (!hasEvents && !events.length) {
     return (
        <MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
           <EmptyState canManage={canManageEvents} onCreate={() => navigate(adminPath('/mobile/events/new'))} />
        </MobileShell>
     );
  }

  // Calculate Readiness
  const readiness = useEventReadiness(activeEvent, t as any);
  const phase = activeEvent ? getEventPhase(activeEvent) : 'setup';
  const isCompleted = phase === 'post';

  return (
    <MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
      <DashboardCard padding="$0">
        <YStack padding="$3" space="$2">
          <SectionHeader
            title={t('dashboard:overview.title', 'At a glance')}
            showSeparator={false}
            compact
            action={<ContextHelpLink slug="tenant-dashboard-overview" />}
          />
        </YStack>
        <Separator backgroundColor={theme.border} opacity={0.6} />
        <YStack padding="$3" space="$2.5">
          {/* 1. LIFECYCLE HERO */}
          <LifecycleHero
            event={activeEvent}
            stats={stats}
            locale={locale}
            navigate={navigate}
            readiness={readiness}
            variant="embedded"
            canManage={canManageEvents}
            onUpdated={refetch}
          />

          {/* 2. PULSE STRIP */}
          <Separator backgroundColor={theme.border} opacity={0.6} />
          <PulseStrip event={activeEvent} stats={stats} liveShowApprovedCount={liveShowApprovedCount} />
        </YStack>
      </DashboardCard>

      {/* 3. ALERTS */}
      <AlertsSection event={activeEvent} stats={stats} t={t} />

      {/* 4. UNIFIED COMMAND GRID */}
      <UnifiedToolGrid 
         event={activeEvent} 
         navigate={navigate}
         permissions={memberPermissions}
         isMember={isMember}
         isCompleted={isCompleted}
      />

      {/* 5. RECENT PHOTOS */}
      <RecentPhotosSection 
         photos={photoData?.photos ?? []} 
         navigate={navigate} 
         slug={activeEvent?.slug} 
      />

    </MobileShell>
  );
}

// --- SUB COMPONENTS ---

type EventPhase = 'setup' | 'live' | 'post';

function getEventPhase(event: TenantEvent): EventPhase {
  if (event.status === 'archived') return 'post';
  if (!event.event_date) return 'setup';
  const today = startOfDay(new Date());
  const eventDate = parseISO(event.event_date);
  if (isSameDay(today, eventDate)) return 'live';
  if (isPast(eventDate)) return 'post';
  return 'setup';
}

function LifecycleHero({
  event,
  stats,
  locale,
  navigate,
  readiness,
  variant = 'default',
  canManage = false,
  onUpdated,
}: any) {
  const theme = useAdminTheme();
  const { t } = useTranslation(['management', 'dashboard']);
  const isEmbedded = variant === 'embedded';
  const cardVariant = isEmbedded ? 'embedded' : 'default';
  const cardPadding = isEmbedded ? '$3' : '$3.5';
  const [isPublishing, setIsPublishing] = React.useState(false);
  const [published, setPublished] = React.useState(() => event?.status === 'published');
  
  if (!event) return null;
  const phase = getEventPhase(event);
  const pendingPhotos = stats?.pending_photos ?? event.pending_photo_count ?? 0;
  const isPostEvent = phase === 'post';
  const showQuickControls = canManage && !isPostEvent;
  const displayStatus = event.status === 'archived' ? 'archived' : published ? 'published' : 'draft';
  
  // Header Row
  const Header = () => (
    <XStack alignItems="center" justifyContent="space-between">
      <YStack>
        <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase" letterSpacing={1}>
          {formatEventDate(event.event_date, locale)}
        </Text>
      </YStack>
      <StatusBadge status={displayStatus} />
    </XStack>
  );

  if (phase === 'live') {
    return (
      <YStack space="$2">
        <Header />
        <DashboardCard
          variant={cardVariant}
          padding={cardPadding}
          backgroundColor={theme.primary}
          borderColor="transparent"
          style={{ backgroundImage: 'linear-gradient(135deg, #4F46E5 0%, #4338CA 100%)' }}
        >
          <YStack space={isEmbedded ? '$2.5' : '$3'}>
            <XStack alignItems="center" justifyContent="space-between">
              <YStack space="$1">
                <XStack alignItems="center" space="$2">
                  <YStack width={8} height={8} borderRadius={4} backgroundColor="#22C55E" />
                  <Text color="white" fontWeight="700" fontSize="$xs" textTransform="uppercase" letterSpacing={1}>
                    {t('dashboard:liveNow.status', 'Happening Now')}
                  </Text>
                </XStack>
                <Text color="white" fontSize="$lg" fontWeight="800">
                  {pendingPhotos > 0
                    ? `${pendingPhotos} ${t('management:photos.filters.pending', 'Pending')}`
                    : t('dashboard:liveNow.description', 'Event is Running')}
                </Text>
              </YStack>
              {pendingPhotos > 0 ? (
                <Button
                  onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/control-room`))}
                  backgroundColor="white"
                  borderColor="transparent"
                  height={36}
                  borderRadius={999}
                  paddingHorizontal="$3"
                >
                  <Text fontSize="$xs" fontWeight="800" color={theme.primary}>
                    {t('management:photos.openModeration', 'Review')}
                  </Text>
                </Button>
              ) : null}
            </XStack>
          </YStack>
        </DashboardCard>
      </YStack>
    );
  }

  const daysToGo = event.event_date ? differenceInDays(parseISO(event.event_date), new Date()) : 0;
  const isSetupPhase = phase === 'setup';
  const nextStep = readiness.nextStep;
  const showNextStep = isSetupPhase && Boolean(nextStep);
  const showChecklist = isSetupPhase;

  React.useEffect(() => {
    setPublished(event.status === 'published');
  }, [event.settings?.guest_upload_visibility, event.status]);

  const handlePublishChange = React.useCallback(
    async (checked: boolean) => {
      if (!event.slug) return;
      const previous = published;
      setPublished(checked);
      setIsPublishing(true);
      try {
        await updateEvent(event.slug, { status: checked ? 'published' : 'draft' });
        onUpdated?.();
      } catch (err) {
        setPublished(previous);
        toast.error(
          getApiErrorMessage(err, t('eventForm.errors.saveFailed', 'Event could not be saved.'))
        );
      } finally {
        setIsPublishing(false);
      }
    },
    [event.slug, onUpdated, published, t],
  );

  if (phase === 'post') {
     return (
        <YStack space="$2">
          <Header />
          <DashboardCard variant={cardVariant} padding={cardPadding}>
            <YStack space={isEmbedded ? '$2.5' : '$3'}>
              <XStack alignItems="center" space="$2.5">
                <YStack width={40} height={40} borderRadius={20} backgroundColor={theme.successText} alignItems="center" justifyContent="center">
                  <CheckCircle2 size={20} color="white" />
                </YStack>
                <YStack>
                  <Text fontSize="$md" fontWeight="800" color={theme.textStrong}>
                    {t('events.recap.completedTitle', 'Event completed')}
                  </Text>
                  <Text fontSize="$xs" color={theme.muted}>{t('events.recap.galleryOpen', 'Gallery online')}</Text>
                </YStack>
              </XStack>

              <Button
                onPress={() => navigate(adminPath(`/mobile/exports`))}
                backgroundColor={theme.primary}
                borderColor="transparent"
                height={48}
                borderRadius={16}
              >
                <XStack alignItems="center" space="$2">
                  <Download size={16} color="white" />
                  <Text fontSize="$sm" fontWeight="800" color="white">
                    {t('events.recap.downloadAll', 'Download photos')}
                  </Text>
                </XStack>
              </Button>

              <Button
                onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/recap`))}
                backgroundColor="transparent"
                borderColor={theme.border}
                borderWidth={1}
                height={48}
                borderRadius={16}
              >
                <XStack alignItems="center" space="$2">
                  <Text fontSize="$sm" fontWeight="800" color={theme.textStrong}>
                    {t('events.recap.openRecap', 'Open recap')}
                  </Text>
                  <ChevronRight size={16} color={theme.muted} />
                </XStack>
              </Button>
            </YStack>
          </DashboardCard>
        </YStack>
     );
  }

  // SETUP
  return (
    <YStack space="$2">
      <Header />
      {showQuickControls ? (
        <XStack
          alignItems="center"
          justifyContent="space-between"
          borderWidth={1}
          borderColor={theme.glassBorder ?? theme.border}
          backgroundColor={theme.surfaceMuted}
          borderRadius={12}
          paddingHorizontal="$2.5"
          paddingVertical="$2"
        >
          <Pressable onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/edit`))}>
            <XStack alignItems="center" space="$1.5">
              <Settings size={16} color={theme.primary} />
              <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
                {t('dashboard:readiness.quickSettings', 'Event settings')}
              </Text>
            </XStack>
          </Pressable>

          <XStack alignItems="center" space="$3">
            <YStack alignItems="center" space="$1">
              <Text fontSize="$xs" color={theme.muted} textTransform="uppercase" letterSpacing={0.8}>
                {t('dashboard:readiness.publishToggle', 'Live')}
              </Text>
              <Switch
                checked={published}
                onCheckedChange={(checked: boolean) => handlePublishChange(Boolean(checked))}
                size="$2"
                disabled={isPublishing}
                aria-label={t('eventForm.fields.publish.label', 'Publish immediately')}
              >
                <Switch.Thumb />
              </Switch>
            </YStack>
          </XStack>
        </XStack>
      ) : null}
      <DashboardCard variant={cardVariant} padding={cardPadding}>
        <YStack space={isEmbedded ? '$2.5' : '$3'}>
          <XStack alignItems="center" justifyContent="space-between">
            <YStack>
              <Text fontSize="$xs" color={theme.muted} fontWeight="700" textTransform="uppercase">
                {t('dashboard:upcoming.status.planning', 'Countdown')}
              </Text>
              <Text fontSize="$2xl" fontWeight="900" color={theme.primary}>
                {daysToGo}{' '}
                <Text fontSize="$sm" color={theme.muted} fontWeight="500">
                  {t('management:galleryStatus.daysLabel', 'days')}
                </Text>
              </Text>
            </YStack>
            <YStack width={48} height={48} borderRadius={24} backgroundColor={theme.surfaceMuted} alignItems="center" justifyContent="center">
              <CalendarDays size={24} color={theme.primary} />
            </YStack>
          </XStack>

          {showNextStep && nextStep ? (
            <YStack space="$2">
              <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
                {t('dashboard:readiness.nextStepTitle', 'Next step')}
              </Text>
              <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: theme.border, overflow: "hidden" } as any)}>
                <YGroup.Item>
                  <ListItem
                    hoverTheme
                    pressTheme
                    paddingVertical="$2"
                    paddingHorizontal="$3"
                    onPress={() => navigate(adminPath(nextStep.targetPath))}
                    title={
                      <XStack alignItems="center" space="$2">
                        <Circle size={18} color={theme.primary} strokeWidth={2.5} />
                        <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
                          {nextStep.label}
                        </Text>
                      </XStack>
                    }
                    subTitle={
                      nextStep.description ? (
                        <Text fontSize="$xs" color={theme.muted}>
                          {nextStep.description}
                        </Text>
                      ) : undefined
                    }
                    iconAfter={
                      <XStack alignItems="center" space="$1">
                        <PillBadge tone="success">{nextStep.ctaLabel}</PillBadge>
                        <ChevronRight size={16} color={theme.muted} />
                      </XStack>
                    }
                  />
                </YGroup.Item>
              </YGroup>
            </YStack>
          ) : null}

          {showChecklist ? (
            <>
              <Separator backgroundColor={theme.border} opacity={0.6} />
              <SetupChecklist
                steps={readiness.steps}
                title={t('dashboard:readiness.title', 'Bereit für den Eventstart')}
                variant="inline"
              />
            </>
          ) : null}
        </YStack>
      </DashboardCard>
    </YStack>
  );
}

function PulseStrip({ event, stats, liveShowApprovedCount }: any) {
  const theme = useAdminTheme();
  const { t } = useTranslation(['management', 'dashboard']);
  const uploadCount = stats?.uploads_total ?? event?.photo_count ?? 0;
  const guestCount = event?.active_invites_count ?? event?.total_invites_count ?? 0;
  const pendingCount = stats?.pending_photos ?? event?.pending_photo_count ?? 0;
  const likesTotal = stats?.likes_total ?? stats?.likes ?? 0;
  const showPending = (event?.settings?.guest_upload_visibility ?? 'review') !== 'immediate';
  const approvedCount = typeof liveShowApprovedCount === 'number' ? liveShowApprovedCount : 0;

  const items = [
    {
      icon: ImageIcon,
      value: uploadCount,
      label: t('management:events.list.stats.photos', 'Photos'),
      color: theme.primary,
    },
    {
      icon: Users,
      value: guestCount,
      label: t('management:events.list.stats.guests', 'Guests'),
      tone: 'neutral' as const,
    },
    {
      icon: Tv,
      value: approvedCount,
      label: t('dashboard:kpis.liveShowApproved', 'Live Show approved'),
      color: ADMIN_ACTION_COLORS.liveShow,
    },
    showPending
      ? {
          icon: ShieldCheck,
          value: pendingCount,
          label: t('management:photos.filters.pending', 'Pending'),
          note: pendingCount > 0 ? t('management:common.actionNeeded', 'Review') : undefined,
          color: pendingCount > 0 ? '#8B5CF6' : theme.textMuted,
        }
      : {
          icon: Heart,
          value: likesTotal,
          label: t('dashboard:kpis.likesTotal', 'Likes total'),
          color: ADMIN_ACTION_COLORS.images,
        },
  ];

  return <KpiStrip items={items} />;
}

function UnifiedToolGrid({ event, navigate, permissions, isMember, isCompleted }: any) {
  const theme = useAdminTheme();
  const { t } = useTranslation(['management', 'dashboard']);
  const slug = event?.slug;
  if (!slug) return null;
  type ToolItem = { label: string; icon: any; path: string; color?: string };

  const experienceItems: ToolItem[] = [
    { label: t('management:photos.gallery.title', 'Photos'), icon: ImageIcon, path: `/mobile/events/${slug}/control-room`, color: theme.primary },
    !isCompleted ? { label: t('management:events.quick.liveShowSettings', 'Slide Show'), icon: Tv, path: `/mobile/events/${slug}/live-show/settings`, color: '#F59E0B' } : null,
    !isCompleted ? { label: t('events.tasks.badge', 'Photo tasks'), icon: ListTodo, path: `/mobile/events/${slug}/tasks`, color: theme.accent } : null,
    !isCompleted ? { label: t('management:events.quick.photobooth', 'Photobooth'), icon: Camera, path: `/mobile/events/${slug}/photobooth`, color: '#8B5CF6' } : null,
  ].filter(Boolean) as ToolItem[];

  const operationsItems: ToolItem[] = [
    !isCompleted ? { label: t('management:invites.badge', 'QR Codes'), icon: QrCode, path: `/mobile/events/${slug}/qr`, color: '#10B981' } : null,
    { label: t('management:events.quick.guests', 'Guests'), icon: Users, path: `/mobile/events/${slug}/members`, color: ADMIN_ACTION_COLORS.guests },
    !isCompleted ? { label: t('management:events.quick.guestMessages', 'Messages'), icon: Megaphone, path: `/mobile/events/${slug}/guest-notifications`, color: ADMIN_ACTION_COLORS.guestMessages } : null,
    !isCompleted ? { label: t('events.branding.titleShort', 'Branding'), icon: Layout, path: `/mobile/events/${slug}/branding`, color: ADMIN_ACTION_COLORS.branding } : null,
  ].filter(Boolean) as ToolItem[];

  const adminItems: ToolItem[] = [
    { label: t('management:mobileDashboard.shortcutAnalytics', 'Analytics'), icon: TrendingUp, path: `/mobile/events/${slug}/analytics`, color: ADMIN_ACTION_COLORS.analytics },
    !isCompleted ? { label: t('events.recap.exportTitleShort', 'Exports'), icon: Download, path: `/mobile/exports`, color: ADMIN_ACTION_COLORS.recap } : null,
    { label: t('management:mobileProfile.settings', 'Settings'), icon: Settings, path: `/mobile/events/${slug}/edit`, color: ADMIN_ACTION_COLORS.settings },
  ].filter(Boolean) as ToolItem[];

  const sections = [
    {
      title: t('management:mobileDashboard.quickActionsTitle', 'Experience'), 
      items: experienceItems,
    },
    {
      title: t('management:events.quickActions.title', 'Operations'), 
      items: operationsItems,
    },
    {
       title: t('management:settings.hero.badge', 'Admin'),
       items: adminItems,
    }
  ].filter((section) => section.items.length > 0);

  return (
    <DashboardCard padding="$0">
      <YStack padding="$3.5" space="$2">
        <SectionHeader
          title={t('dashboard:quickActions.title', 'Quick actions')}
          subtitle={t('dashboard:quickActions.description', 'Jump straight to the most important actions.')}
          showSeparator={false}
          compact
        />
      </YStack>
      <Separator backgroundColor={theme.border} opacity={0.6} />
      <YStack padding="$3.5" space="$3">
        {sections.map((section) => (
          <YStack key={section.title} space="$2">
            <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
              {section.title}
            </Text>
            <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: theme.border, overflow: "hidden" } as any)}>
              {section.items.map((item) => {
                const iconColor = item.color || theme.textStrong;
                return (
                  <YGroup.Item key={item.label}>
                    <ListItem
                      hoverTheme
                      pressTheme
                      paddingVertical="$2"
                      paddingHorizontal="$3"
                      onPress={() => navigate(adminPath(item.path))}
                      title={
                        <XStack alignItems="center" space="$2.5">
                          <XStack
                            width={32}
                            height={32}
                            borderRadius={10}
                            backgroundColor={withAlpha(iconColor, 0.12)}
                            alignItems="center"
                            justifyContent="center"
                          >
                            <item.icon size={18} color={iconColor} />
                          </XStack>
                          <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
                            {item.label}
                          </Text>
                        </XStack>
                      }
                      iconAfter={<ChevronRight size={16} color={theme.muted} />}
                    />
                  </YGroup.Item>
                );
              })}
            </YGroup>
          </YStack>
        ))}
      </YStack>
    </DashboardCard>
  );
}

function RecentPhotosSection({ photos, navigate, slug }: { photos: TenantPhoto[]; navigate: any; slug?: string }) {
  const theme = useAdminTheme();
  const { t } = useTranslation('management');
  
  if (!photos.length || !slug) return null;

  return (
    <DashboardCard>
      <YStack space="$2">
        <XStack alignItems="center" justifyContent="space-between">
          <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
            {t('photos.recentTitle', 'Latest Uploads')}
          </Text>
          <Button
            onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}
            backgroundColor="transparent"
            borderColor="transparent"
            height={28}
            paddingHorizontal={0}
          >
            <Text fontSize="$xs" color={theme.primary} fontWeight="700">
              {t('common.all', 'See all')}
            </Text>
          </Button>
        </XStack>

        <Separator backgroundColor={theme.border} opacity={0.6} />

        <XStack space="$2" overflow="scroll" paddingVertical="$1">
          {photos.map((photo) => (
            <Pressable key={photo.id} onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}>
              <YStack
                width={80}
                height={80}
                borderRadius={12}
                overflow="hidden"
                backgroundColor={theme.surfaceMuted}
                borderWidth={1}
                borderColor={theme.border}
              >
                {photo.thumbnail_url ? (
                  <Image source={{ uri: photo.thumbnail_url }} width={80} height={80} resizeMode="cover" />
                ) : (
                  <YStack flex={1} alignItems="center" justifyContent="center">
                    <ImageIcon size={20} color={theme.muted} />
                  </YStack>
                )}
              </YStack>
            </Pressable>
          ))}
        </XStack>
      </YStack>
    </DashboardCard>
  );
}

function AlertsSection({ event, stats, t }: any) {
   const theme = useAdminTheme();
   const limitWarnings = buildLimitWarnings(event?.limits ?? null, translateLimits(t)); 
   
   if (!limitWarnings.length) return null;

   return (
      <DashboardCard>
        <YStack space="$2">
          <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
            {t('management:alertsTitle', 'Alerts')}
          </Text>
          <Separator backgroundColor={theme.border} opacity={0.6} />
          <YStack space="$2">
            {limitWarnings.map((w: any, idx: number) => {
              const isDanger = w.tone === 'danger';
              const bg = isDanger ? theme.dangerBg : theme.warningBg;
              const border = isDanger ? theme.dangerText : theme.warningBorder;
              const text = isDanger ? theme.dangerText : theme.warningText;
              const Icon = isDanger ? AlertCircle : Bell;

              return (
                <XStack
                  key={idx}
                  backgroundColor={bg}
                  padding="$3"
                  borderRadius={12}
                  borderWidth={1}
                  borderColor={border}
                  alignItems="center"
                  space="$2"
                >
                  <Icon size={16} color={text} />
                  <Text fontSize="$sm" color={text} fontWeight="600">
                    {w.message}
                  </Text>
                </XStack>
              );
            })}
          </YStack>
        </YStack>
      </DashboardCard>
   );
}

function EmptyState({ canManage, onCreate }: any) {
   const theme = useAdminTheme();
   const { t } = useTranslation(['management', 'mobile']);
   return (
      <YStack flex={1} alignItems="center" justifyContent="center" space="$4">
         <Sparkles size={48} color={theme.primary} />
         <Text fontSize="$lg" fontWeight="800" color={theme.textStrong} textAlign="center">
            {t('mobile:header.appName', 'Event Admin')}
         </Text>
         <Text fontSize="$sm" color={theme.muted} textAlign="center">
            {t('mobile:header.noEventsBody', 'Create your first event.')}
         </Text>
         {canManage ? (
           <Button
             onPress={onCreate}
             backgroundColor={theme.primary}
             borderColor="transparent"
             height={48}
             borderRadius={16}
             paddingHorizontal="$4"
           >
             <Text fontSize="$sm" fontWeight="800" color="white">
               {t('management:events.list.actions.create', 'Create Event')}
             </Text>
           </Button>
         ) : null}
      </YStack>
   );
}