import React from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { Activity, Bell, CalendarDays, Camera, CheckCircle2, ChevronDown, Download, Image as ImageIcon, Layout, ListTodo, MapPin, Megaphone, MessageCircle, Pencil, QrCode, Settings, ShieldCheck, Smartphone, Sparkles, TrendingUp, Tv, Users, ArrowRight, Play, Clock, AlertCircle } 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 { Image } from '@tamagui/image';
import { isSameDay, isPast, isFuture, parseISO, differenceInDays, startOfDay } from 'date-fns';

import { MobileShell } from './components/MobileShell';
import { ADMIN_EVENTS_PATH, adminPath } from '../constants';
import { useEventContext } from '../context/EventContext';
import { getEventStats, EventStats, TenantEvent, getEventPhotos, TenantPhoto } from '../api';
import { formatEventDate, resolveEventDisplayName } from '../lib/events';
import { useAuth } from '../auth/context';
import { 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 } from './components/Primitives';

// --- HELPERS ---

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

// --- MODERN PRIMITIVES ---

function ModernCard({ children, style, ...rest }: any) {
  const theme = useAdminTheme();
  return (
    <YStack
      backgroundColor={theme.surface}
      borderRadius={theme.cardRadius || 16}
      borderWidth={1}
      borderColor={theme.border}
      padding="$3.5"
      space="$2"
      style={{
        boxShadow: `0 2px 8px ${theme.shadow}`,
        ...style
      }}
      {...rest}
    >
      {children}
    </YStack>
  );
}

function ModernButton({ label, onPress, tone = 'primary', fullWidth = true, icon, style }: any) {
  const theme = useAdminTheme();
  const isPrimary = tone === 'primary';
  const isGhost = tone === 'ghost';
  const isAccent = tone === 'accent';
  
  const bg = isPrimary ? theme.primary : isAccent ? theme.accent : isGhost ? 'transparent' : theme.surface;
  const text = isPrimary || isAccent ? 'white' : isGhost ? theme.text : theme.textStrong;
  const border = isPrimary || isAccent || isGhost ? 'transparent' : theme.border;

  return (
    <Pressable
      onPress={onPress}
      style={{
        width: fullWidth ? '100%' : undefined,
        flex: fullWidth ? undefined : 1,
        ...style
      }}
    >
      <XStack
        height={48}
        borderRadius={12}
        alignItems="center"
        justifyContent="center"
        backgroundColor={bg}
        borderWidth={1}
        borderColor={border}
        space="$2"
      >
        {icon}
        <Text fontSize="$sm" fontWeight="700" color={text}>
          {label}
        </Text>
      </XStack>
    </Pressable>
  );
}

function StatusBadge({ status }: { status: string }) {
  const theme = useAdminTheme();
  const { t } = useTranslation('management');
  
  const config = {
    published: { bg: '#DCFCE7', text: '#166534', label: t('events.status.published', 'Live') }, 
    draft: { bg: '#FEF3C7', text: '#92400E', label: t('events.status.draft', 'Draft') }, 
    archived: { bg: '#F1F5F9', text: '#475569', label: t('events.status.archived', 'Archived') },
  }[status] || { bg: theme.surfaceMuted, text: theme.muted, label: status };

  return (
    <XStack
      paddingHorizontal="$2"
      paddingVertical="$1"
      borderRadius={6}
      backgroundColor={config.bg}
    >
      <Text fontSize="$xs" fontWeight="700" color={config.text}>
        {config.label}
      </Text>
    </XStack>
  );
}

// --- 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, hasMultipleEvents, isLoading, selectEvent } = useEventContext();
  const { user } = useAuth();
  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 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]);

  const [eventSwitcherOpen, setEventSwitcherOpen] = React.useState(false);
  
  // --- RENDER ---
  
  if (shouldRedirectToSelector) {
    return null;
  }

  if (isLoading) {
    return (
      <MobileShell activeTab="home" title={t('mobileDashboard.title', 'Dashboard')}>
        <ModernCard 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')}>
      
      {/* 1. LIFECYCLE HERO */}
      <LifecycleHero
        event={activeEvent}
        stats={stats}
        locale={locale}
        navigate={navigate}
        onSwitch={() => setEventSwitcherOpen(true)}
        canSwitch={hasMultipleEvents}
        readiness={readiness}
      />

      {/* 1b. SETUP CHECKLIST */}
      {phase === 'setup' && (
         <SetupChecklist 
            steps={readiness.steps} 
            title={t('management:photobooth.checklist.title', 'Checklist')} 
         />
      )}

      {/* 2. PULSE STRIP */}
      <PulseStrip event={activeEvent} stats={stats} />

      {/* 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, onSwitch, canSwitch, readiness }: any) {
  const theme = useAdminTheme();
  const { t } = useTranslation(['management', 'dashboard']);
  
  if (!event) return null;
  const phase = getEventPhase(event);
  const pendingPhotos = stats?.pending_photos ?? event.pending_photo_count ?? 0;
  
  // Header Row
  const Header = () => (
     <XStack alignItems="center" justifyContent="space-between" marginBottom="$3">
        <YStack>
           <Text fontSize="$xs" color={theme.muted} fontWeight="600" textTransform="uppercase" letterSpacing={1}>
              {formatEventDate(event.event_date, locale)}
           </Text>
        </YStack>
        <StatusBadge status={event.status} />
     </XStack>
  );

  if (phase === 'live') {
    return (
      <YStack>
         <Header />
         <ModernCard 
            backgroundColor={theme.primary} 
            borderWidth={0} 
            style={{ backgroundImage: 'linear-gradient(135deg, #4F46E5 0%, #4338CA 100%)' }}
         >
            <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 && (
                 <Pressable onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/control-room`))}>
                    <YStack backgroundColor="white" borderRadius={999} paddingHorizontal="$3" paddingVertical="$2">
                       <Text fontSize="$xs" fontWeight="800" color={theme.primary}>
                         {t('management:photos.openModeration', 'Review')}
                       </Text>
                    </YStack>
                 </Pressable>
               )}
            </XStack>
         </ModernCard>
      </YStack>
    );
  }

  const daysToGo = event.event_date ? differenceInDays(parseISO(event.event_date), new Date()) : 0;
  
  if (phase === 'post') {
     return (
        <YStack>
           <Header />
           <ModernCard space="$3">
              <XStack alignItems="center" space="$2.5">
                 <YStack width={40} height={40} borderRadius={20} backgroundColor={theme.success} 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>
              <ModernButton 
                 label={t('events.recap.downloadAll', 'Download photos')}
                 tone="primary" 
                 icon={<Download size={16} color="white" />}
                 onPress={() => navigate(adminPath(`/mobile/exports`))}
              />
              <ModernButton
                label={t('events.recap.openRecap', 'Open recap')}
                tone="ghost"
                icon={<ArrowRight size={16} color={theme.text} />}
                onPress={() => navigate(adminPath(`/mobile/events/${event.slug}/recap`))}
              />
           </ModernCard>
        </YStack>
     );
  }

  // SETUP
  const nextStep = readiness.nextStep;
  const ctaLabel = nextStep ? nextStep.ctaLabel : t('dashboard:onboarding.hero.cta', 'Setup Complete');
  const ctaAction = nextStep ? () => navigate(adminPath(nextStep.targetPath)) : undefined;
  
  return (
    <YStack>
       <Header />
       <ModernCard space="$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>
          
          <YStack height={1} backgroundColor={theme.border} />
          
          {/* Main CTA if not ready */}
          {!readiness.isReady && (
             <ModernButton 
                label={ctaLabel} 
                tone='primary'
                icon={<ArrowRight size={16} color="white" />}
                onPress={ctaAction}
             />
          )}
          {readiness.isReady && (
             <XStack alignItems="center" space="$2">
                <CheckCircle2 size={18} color={theme.successText} />
                <Text fontSize="$sm" color={theme.successText} fontWeight="700">Ready for Liftoff</Text>
             </XStack>
          )}
       </ModernCard>
    </YStack>
  );
}

function PulseStrip({ event, stats }: any) {
  const theme = useAdminTheme();
  const { t } = useTranslation('management');
  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;

  return (
    <YStack paddingVertical="$1">
       <KpiStrip 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'),
            color: theme.textStrong
         },
         {
            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
         }
       ]} />
    </YStack>
  );
}

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

  const experienceItems = [
    { 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((item): item is { label: string; icon: any; path: string; color?: string } => Boolean(item));

  const operationsItems = [
    !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: theme.text },
    !isCompleted ? { label: t('management:events.quick.guestMessages', 'Messages'), icon: Megaphone, path: `/mobile/events/${slug}/guest-notifications`, color: theme.text } : null,
    !isCompleted ? { label: t('events.branding.titleShort', 'Branding'), icon: Layout, path: `/mobile/events/${slug}/branding`, color: theme.text } : null,
  ].filter((item): item is { label: string; icon: any; path: string; color?: string } => Boolean(item));

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

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

  return (
    <YStack space="$4">
      {sections.map((section) => (
        <YStack key={section.title} space="$2">
          <Text fontSize="$xs" fontWeight="700" color={theme.muted} textTransform="uppercase" letterSpacing={1}>
            {section.title}
          </Text>
          <XStack flexWrap="wrap" gap="$2.5">
             {section.items.map((item) => (
                <Pressable 
                   key={item.label} 
                   onPress={() => navigate(adminPath(item.path))}
                   style={{ width: '48%', flexGrow: 1 }}
                >
                   <YStack 
                      backgroundColor={theme.surface} 
                      borderRadius={14} 
                      padding="$3" 
                      space="$2.5" 
                      borderWidth={1}
                      borderColor={theme.border}
                      height={90}
                      justifyContent="space-between"
                   >
                      <XStack justifyContent="space-between" alignItems="flex-start">
                         <YStack 
                            width={32} height={32} 
                            borderRadius={10} 
                            backgroundColor={item.color ? withAlpha(item.color, 0.1) : theme.surfaceMuted} 
                            alignItems="center" justifyContent="center"
                         >
                            <item.icon size={18} color={item.color || theme.textStrong} />
                         </YStack>
                      </XStack>
                      <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
                         {item.label}
                      </Text>
                   </YStack>
                </Pressable>
             ))}
          </XStack>
        </YStack>
      ))}
    </YStack>
  );
}

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

  return (
    <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>
         <Pressable onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}>
           <Text fontSize="$xs" color={theme.primary} fontWeight="600">{t('common.all', 'See all')}</Text>
         </Pressable>
       </XStack>
       
       <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>
  );
}

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

   return (
      <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>
   );
}

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 && <ModernButton label={t('management:events.list.actions.create', 'Create Event')} onPress={onCreate} />}
      </YStack>
   );
}