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 { 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';

// --- 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');
  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 [eventSwitcherOpen, setEventSwitcherOpen] = React.useState(false);
  
  // --- RENDER ---
  
  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>
     );
  }

  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}
      />

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

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

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

      {/* 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.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 }: any) {
  const theme = useAdminTheme();
  const { completedSteps, totalSteps, nextStep } = useEventReadiness(event);
  
  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}>Happening Now</Text>
                  </XStack>
                  <Text color="white" fontSize="$lg" fontWeight="800">
                     {pendingPhotos > 0 ? `${pendingPhotos} Pending Photos` : '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}>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}>Event Completed</Text>
                    <Text fontSize="$xs" color={theme.muted}>Gallery is online for guests.</Text>
                 </YStack>
              </XStack>
              <ModernButton 
                 label="Download Photos" 
                 tone="primary" 
                 icon={<Download size={16} color="white" />}
                 onPress={() => navigate(adminPath(`/mobile/exports`))}
              />
           </ModernCard>
        </YStack>
     );
  }

  // SETUP
  const ctaLabel = nextStep ? nextStep.ctaLabel : '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">Countdown</Text>
                <Text fontSize="$2xl" fontWeight="900" color={theme.primary}>
                   {daysToGo} <Text fontSize="$sm" color={theme.muted} fontWeight="500">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} />
          
          <XStack alignItems="center" justifyContent="space-between">
             <Text fontSize="$sm" color={theme.textStrong} fontWeight="600">Setup Status</Text>
             <Text fontSize="$xs" color={theme.muted}>{completedSteps}/{totalSteps} Steps</Text>
          </XStack>
          
          <ModernButton 
             label={ctaLabel} 
             tone={nextStep ? 'primary' : 'ghost'}
             icon={nextStep ? <ArrowRight size={16} color="white" /> : <CheckCircle2 size={16} color={theme.primary} />}
             onPress={ctaAction}
             disabled={!nextStep}
          />
       </ModernCard>
    </YStack>
  );
}

function PulseStrip({ event, stats }: any) {
  const theme = useAdminTheme();
  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 (
    <XStack space="$3" paddingVertical="$1">
      <PulseItem icon={ImageIcon} value={uploadCount} label="Photos" />
      <YStack width={1} backgroundColor={theme.border} marginVertical={4} />
      <PulseItem icon={Users} value={guestCount} label="Guests" />
      <YStack width={1} backgroundColor={theme.border} marginVertical={4} />
      <PulseItem icon={Bell} value={pendingCount} label="Pending" tone={pendingCount > 0 ? 'warning' : 'neutral'} />
    </XStack>
  );
}

function PulseItem({ icon: Icon, value, label, tone = 'neutral' }: any) {
  const theme = useAdminTheme();
  const color = tone === 'warning' ? theme.warningText : theme.textStrong;
  return (
    <XStack alignItems="center" space="$2" flex={1} justifyContent="center">
      <Icon size={16} color={theme.muted} />
      <YStack>
         <Text fontSize="$md" fontWeight="800" color={color} lineHeight="$xs">{value}</Text>
         <Text fontSize={10} color={theme.muted} textTransform="uppercase" fontWeight="600">{label}</Text>
      </YStack>
    </XStack>
  );
}

function UnifiedToolGrid({ event, navigate, permissions, isMember }: any) {
  const theme = useAdminTheme();
  const slug = event?.slug;
  if (!slug) return null;

  const sections = [
    {
      title: 'Experience',
      items: [
        { label: 'Photos', icon: ImageIcon, path: `/mobile/events/${slug}/control-room`, color: theme.primary },
        { label: 'Slide Show', icon: Tv, path: `/mobile/events/${slug}/live-show/settings`, color: '#F59E0B' }, // Amber
        { label: 'Tasks', icon: ListTodo, path: `/mobile/events/${slug}/tasks`, color: theme.accent },
        { label: 'Photobooth', icon: Camera, path: `/mobile/events/${slug}/photobooth`, color: '#8B5CF6' }, // Violet
      ]
    },
    {
      title: 'Operations',
      items: [
        { label: 'QR Codes', icon: QrCode, path: `/mobile/events/${slug}/qr`, color: '#10B981' }, // Emerald
        { label: 'Guests', icon: Users, path: `/mobile/events/${slug}/members`, color: theme.text },
        { label: 'Messages', icon: Megaphone, path: `/mobile/events/${slug}/guest-notifications`, color: theme.text },
        { label: 'Branding', icon: Layout, path: `/mobile/events/${slug}/branding`, color: theme.text },
      ]
    },
    {
       title: 'Admin',
       items: [
          { label: 'Analytics', icon: TrendingUp, path: `/mobile/events/${slug}/analytics` },
          { label: 'Exports', icon: Download, path: `/mobile/exports` },
          { label: 'Settings', icon: Settings, path: `/mobile/events/${slug}/edit` },
       ]
    }
  ];

  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();
  
  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}>
           Latest Uploads
         </Text>
         <Pressable onPress={() => navigate(adminPath(`/mobile/events/${slug}/control-room`))}>
           <Text fontSize="$xs" color={theme.primary} fontWeight="600">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 }: any) {
   const theme = useAdminTheme();
   const limitWarnings = buildLimitWarnings(event?.limits ?? null, (k: string) => k); 
   
   if (!limitWarnings.length) return null;

   return (
      <YStack space="$2">
         {limitWarnings.map((w: any, idx: number) => (
            <XStack 
               key={idx} 
               backgroundColor={theme.warningBg} 
               padding="$3" 
               borderRadius={12} 
               borderWidth={1} 
               borderColor={theme.warningBorder}
            >
               <Text fontSize="$sm" color={theme.warningText}>
                  {w.message}
               </Text>
            </XStack>
         ))}
      </YStack>
   );
}

function EmptyState({ canManage, onCreate }: any) {
   const theme = useAdminTheme();
   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">
            Welcome to Fotospiel
         </Text>
         <Text fontSize="$sm" color={theme.muted} textAlign="center">
            Create your first event to get started.
         </Text>
         {canManage && <ModernButton label="Create Event" onPress={onCreate} />}
      </YStack>
   );
}