import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } 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 { useTranslation } from 'react-i18next';
import { useEventContext } from '../../context/EventContext';
import { BottomNav, NavKey } from './BottomNav';
import { useMobileNav } from '../hooks/useMobileNav';
import { ADMIN_EVENTS_PATH, adminPath } from '../../constants';
import { MobileCard, CTAButton } from './Primitives';
import { useNotificationsBadge } from '../hooks/useNotificationsBadge';
import { useOnlineStatus } from '../hooks/useOnlineStatus';
import { resolveEventDisplayName } from '../../lib/events';
import { TenantEvent, getEvents } from '../../api';
import { setTabHistory } from '../lib/tabHistory';
import { loadPhotoQueue } from '../lib/photoModerationQueue';
import { countQueuedPhotoActions } from '../lib/queueStatus';
import { useAdminTheme } from '../theme';
import { useAuth } from '../../auth/context';
import { EventSwitcherSheet } from './EventSwitcherSheet';

type MobileShellProps = {
  title?: string;
  children: React.ReactNode;
  activeTab: NavKey;
  onBack?: () => void;
  headerActions?: React.ReactNode;
};

export function MobileShell({ title, children, activeTab, onBack, headerActions }: MobileShellProps) {
  const { events, activeEvent, selectEvent } = useEventContext();
  const { user } = useAuth();
  const { go } = useMobileNav(activeEvent?.slug, activeTab);
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation('mobile');
  const { count: notificationCount } = useNotificationsBadge();
  const online = useOnlineStatus();
  
  const theme = useAdminTheme();
  
  const backgroundColor = theme.background;
  const [isCompactHeader, setIsCompactHeader] = React.useState(false);
  
  // --- DARK HEADER ---
  const headerSurface = '#0F172A'; // Slate 900
  const actionSurface = theme.primary;
  const actionBorder = 'rgba(255, 255, 255, 0.1)';
  
  const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
  const [loadingEvents, setLoadingEvents] = React.useState(false);
  const [attemptedFetch, setAttemptedFetch] = React.useState(false);
  const [queuedPhotoCount, setQueuedPhotoCount] = React.useState(0);
  const [switcherOpen, setSwitcherOpen] = React.useState(false);

  const effectiveEvents = events.length ? events : fallbackEvents;
  const effectiveActive = activeEvent ?? (effectiveEvents.length === 1 ? effectiveEvents[0] : null);

  React.useEffect(() => {
    if (events.length || loadingEvents || attemptedFetch) {
      return;
    }
    setAttemptedFetch(true);
    setLoadingEvents(true);
    getEvents({ force: true })
      .then((list) => {
        setFallbackEvents(list ?? []);
        if (!activeEvent && list?.length === 1) {
          selectEvent(list[0]?.slug ?? null);
        }
      })
      .catch(() => setFallbackEvents([]))
      .finally(() => setLoadingEvents(false));
  }, [events.length, loadingEvents, attemptedFetch, activeEvent, selectEvent]);

  React.useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) {
      return;
    }

    const mediaQuery = window.matchMedia('(max-width: 320px)');
    const handleChange = (event: MediaQueryListEvent | MediaQueryList) => {
      setIsCompactHeader(event.matches);
    };

    handleChange(mediaQuery);

    if (typeof mediaQuery.addEventListener === 'function') {
      mediaQuery.addEventListener('change', handleChange);
      return () => mediaQuery.removeEventListener('change', handleChange);
    }

    mediaQuery.addListener?.(handleChange);
    return () => mediaQuery.removeListener?.(handleChange);
  }, []);

  React.useEffect(() => {
    const path = `${location.pathname}${location.search}${location.hash}`;
    if (!location.pathname.includes('/billing/shop') && !location.pathname.includes('/welcome')) {
      setTabHistory(activeTab, path);
    }
  }, [activeTab, location.hash, location.pathname, location.search]);

  const refreshQueuedActions = React.useCallback(() => {
    const queue = loadPhotoQueue();
    setQueuedPhotoCount(countQueuedPhotoActions(queue, effectiveActive?.slug ?? null));
  }, [effectiveActive?.slug]);

  React.useEffect(() => {
    refreshQueuedActions();
  }, [refreshQueuedActions, location.pathname]);

  React.useEffect(() => {
    const handleFocus = () => refreshQueuedActions();
    window.addEventListener('focus', handleFocus);
    return () => window.removeEventListener('focus', handleFocus);
  }, [refreshQueuedActions]);

  const pageTitle = title ?? t('header.appName', 'Event Admin');
  const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
  const canSwitchEvents = effectiveEvents.length > 1 && !isEventsIndex;
  const isMember = user?.role === 'member';
  const memberPermissions = Array.isArray(effectiveActive?.member_permissions) ? effectiveActive?.member_permissions ?? [] : [];
  
  const allowPermission = (permission: string) => {
    if (!isMember) return true;
    if (memberPermissions.includes('*') || memberPermissions.includes(permission)) return true;
    if (permission.includes(':')) {
      const [prefix] = permission.split(':');
      return memberPermissions.includes(`${prefix}:*`);
    }
    return false;
  };
  const showQr = Boolean(effectiveActive?.slug) && allowPermission('join-tokens:manage');

  // --- CONTEXT PILL ---
  const EventContextPill = () => {
    if (!effectiveActive || isEventsIndex || isCompactHeader) {
       return (
         <Text fontSize="$md" fontWeight="700" fontFamily="$display" color="white">
            {pageTitle}
         </Text>
       );
    }

    const displayName = resolveEventDisplayName(effectiveActive);

    if (!canSwitchEvents) {
       return (
         <Text 
            fontSize="$lg" 
            fontWeight="700" 
            fontFamily="$display" 
            color="white" 
            numberOfLines={1} 
            ellipsizeMode="tail"
         >
            {displayName}
         </Text>
       );
    }

    return (
      <Pressable onPress={() => setSwitcherOpen(true)} aria-label={t('header.eventSwitcher', 'Switch event')}>
        <XStack 
           backgroundColor="rgba(255, 255, 255, 0.12)" 
           paddingHorizontal="$3" 
           paddingVertical="$1.5" 
           borderRadius={999}
           alignItems="center"
           space="$1.5"
           maxWidth={220}
           borderWidth={1}
           borderColor="rgba(255, 255, 255, 0.08)"
           pressStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
        >
           <Text 
              fontSize="$sm" 
              fontWeight="700" 
              color="white" 
              numberOfLines={1} 
              ellipsizeMode="tail"
              flexShrink={1}
           >
              {displayName}
           </Text>
           <ChevronsUpDown size={14} color="rgba(255,255,255,0.6)" />
        </XStack>
      </Pressable>
    );
  };

  const headerBackButton = onBack ? (
    <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
      <XStack alignItems="center" space="$1.5">
        <ChevronLeft size={28} color="white" strokeWidth={2.5} />
      </XStack>
    </HeaderActionButton>
  ) : (
    <HeaderActionButton onPress={() => {}} ariaLabel="Search">
       <XStack width={36} height={36} borderRadius={10} backgroundColor={actionSurface} alignItems="center" justifyContent="center">
          <Search size={22} color="rgba(255,255,255,0.8)" strokeWidth={2.5} />
       </XStack>
    </HeaderActionButton>
  );
  
  const headerActionsRow = (
    <XStack alignItems="center" space="$2.5">
      {showQr ? (
        <HeaderActionButton
          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
          ariaLabel={t('header.quickQr', 'Quick QR')}
        >
          <XStack
            width={36}
            height={36}
            borderRadius={10}
            backgroundColor={actionSurface}
            alignItems="center"
            justifyContent="center"
          >
            <QrCode size={18} color="white" />
          </XStack>
        </HeaderActionButton>
      ) : null}

      <HeaderActionButton
        onPress={() => navigate(adminPath('/mobile/notifications'))}
        ariaLabel={t('mobile.notifications', 'Notifications')}
      >
        <XStack
          width={36}
          height={36}
          borderRadius={10}
          backgroundColor={actionSurface}
          borderWidth={1}
          borderColor={actionBorder}
          alignItems="center"
          justifyContent="center"
          position="relative"
        >
          <Bell size={18} color="white" />
          {notificationCount > 0 ? (
            <YStack
              position="absolute"
              top={-4}
              right={-4}
              minWidth={18}
              height={18}
              paddingHorizontal={6}
              borderRadius={999}
              backgroundColor={theme.accent}
              alignItems="center"
              justifyContent="center"
              borderWidth={2}
              borderColor={headerSurface} 
            >
              <Text fontSize={10} color="white" fontWeight="700">
                {notificationCount > 9 ? '9+' : notificationCount}
              </Text>
            </YStack>
          ) : null}
        </XStack>
      </HeaderActionButton>

      {/* User Avatar */}
      <Pressable onPress={() => navigate(adminPath('/mobile/profile'))}>
        <XStack 
           width={36} height={36} borderRadius={18} 
           backgroundColor={actionSurface} 
           overflow="hidden" 
           alignItems="center" justifyContent="center"
           borderWidth={1} borderColor={actionBorder}
        >
           {user?.avatar_url ? (
              <Image source={{ uri: user.avatar_url }} width={36} height={36} resizeMode="cover" />
           ) : (
              <Text fontSize="$xs" fontWeight="700" color="white">
                 {user?.name?.charAt(0).toUpperCase() ?? 'U'}
              </Text>
           )}
        </XStack>
      </Pressable>

      {headerActions ?? null}
    </XStack>
  );

  return (
    <YStack
      backgroundColor={backgroundColor}
      minHeight="100vh"
      alignItems="center"
    >
      <YStack
        backgroundColor={headerSurface}
        paddingHorizontal="$4"
        paddingTop="$4"
        paddingBottom="$3"
        width="100%"
        maxWidth={800}
        position="sticky"
        top={0}
        zIndex={60}
        style={{
          paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
        }}
      >
        <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$2">
            {headerBackButton}
            
            <XStack flex={1} justifyContent="center" alignItems="center">
               <EventContextPill />
            </XStack>

            <XStack justifyContent="flex-end" minWidth={28}>
              {headerActionsRow}
            </XStack>
        </XStack>
      </YStack>

      <YStack
        flex={1}
        padding="$4"
        paddingBottom="$10"
        space="$3"
        width="100%"
        maxWidth={800}
        style={{ paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)' }}
      >
        {!online ? (
          <XStack alignItems="center" justifyContent="center" borderRadius={12} backgroundColor={theme.warningBg} paddingVertical="$2" paddingHorizontal="$3">
            <Text fontSize="$xs" fontWeight="700" color={theme.warningText}>
              {t('status.offline', 'Offline mode: changes will sync when you are back online.')}
            </Text>
          </XStack>
        ) : null}
        {queuedPhotoCount > 0 ? (
          <MobileCard space="$2">
            <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
              {t('status.queueTitle', 'Photo actions pending')}
            </Text>
            <Text fontSize="$xs" color={theme.muted}>
              {online
                ? t('status.queueBodyOnline', '{{count}} actions ready to sync.', { count: queuedPhotoCount })
                : t('status.queueBodyOffline', '{{count}} actions saved offline.', { count: queuedPhotoCount })}
            </Text>
            {effectiveActive?.slug ? (
              <CTAButton
                label={t('status.queueAction', 'Open moderation')}
                tone="ghost"
                fullWidth={false}
                onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive.slug}/control-room`))}
              />
            ) : null}
          </MobileCard>
        ) : null}
        {children}
      </YStack>

      <BottomNav active={activeTab} onNavigate={go} />
      
      <EventSwitcherSheet
         open={switcherOpen}
         onClose={() => setSwitcherOpen(false)}
         events={effectiveEvents}
         activeSlug={effectiveActive?.slug ?? null}
      />
    </YStack>
  );
}

export function HeaderActionButton({
  onPress,
  children,
  ariaLabel,
}: {
  onPress: () => void;
  children: React.ReactNode;
  ariaLabel?: string;
}) {
  const [pressed, setPressed] = React.useState(false);
  return (
    <Pressable
      onPress={onPress}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
      onPointerLeave={() => setPressed(false)}
      aria-label={ariaLabel}
      style={{
        transform: pressed ? 'scale(0.96)' : 'scale(1)',
        opacity: pressed ? 0.86 : 1,
        transition: 'transform 120ms ease, opacity 120ms ease',
      }}
    >
      {children}
    </Pressable>
  );
}