import React, { Suspense } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { ChevronLeft, Bell, QrCode } 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 { useTranslation } from 'react-i18next';
import { useEventContext } from '../../context/EventContext';
import { BottomNav, NavKey } from './BottomNav';
import { useMobileNav } from '../hooks/useMobileNav';
import { 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 { withAlpha } from './colors';
import { setTabHistory } from '../lib/tabHistory';
import { loadPhotoQueue } from '../lib/photoModerationQueue';
import { countQueuedPhotoActions } from '../lib/queueStatus';
import { useAdminTheme } from '../theme';

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

export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
  const { events, activeEvent, selectEvent } = useEventContext();
  const { go } = useMobileNav(activeEvent?.slug, activeTab);
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation('mobile');
  const { count: notificationCount } = useNotificationsBadge();
  const online = useOnlineStatus();
  const { background, surface, border, text, muted, warningBg, warningText, primary, danger, shadow } = useAdminTheme();
  const backgroundColor = background;
  const surfaceColor = surface;
  const borderColor = border;
  const textColor = text;
  const mutedText = muted;
  const headerSurface = withAlpha(surfaceColor, 0.94);
  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 [isCompactHeader, setIsCompactHeader] = 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(() => {
    const path = `${location.pathname}${location.search}${location.hash}`;
    
    // Blacklist transient paths from being saved in tab history
    const isBlacklisted = 
      location.pathname.includes('/billing/shop') || 
      location.pathname.includes('/welcome');

    if (!isBlacklisted) {
      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]);

  React.useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) {
      return;
    }
    const query = window.matchMedia('(max-width: 520px)');
    const handleChange = (event: MediaQueryListEvent) => {
      setIsCompactHeader(event.matches);
    };
    setIsCompactHeader(query.matches);
    query.addEventListener?.('change', handleChange);
    return () => {
      query.removeEventListener?.('change', handleChange);
    };
  }, []);

  const pageTitle = title ?? t('header.appName', 'Event Admin');
  const eventContext = !isCompactHeader && effectiveActive ? resolveEventDisplayName(effectiveActive) : null;
  const subtitleText = subtitle ?? eventContext ?? '';
  const showQr = Boolean(effectiveActive?.slug);
  const headerBackButton = onBack ? (
    <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
      <XStack alignItems="center" space="$1.5">
        <ChevronLeft size={28} color={primary} strokeWidth={2.5} />
      </XStack>
    </HeaderActionButton>
  ) : (
    <XStack width={28} />
  );
  const headerTitle = (
    <XStack alignItems="center" space="$1" flex={1} minWidth={0} justifyContent="flex-end">
      <YStack alignItems="flex-end" maxWidth="100%">
        <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
          {pageTitle}
        </Text>
        {subtitleText ? (
          <Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
            {subtitleText}
          </Text>
        ) : null}
      </YStack>
    </XStack>
  );
  const headerActionsRow = (
    <XStack alignItems="center" space="$2">
      <HeaderActionButton
        onPress={() => navigate(adminPath('/mobile/notifications'))}
        ariaLabel={t('mobile.notifications', 'Notifications')}
      >
        <XStack
          width={34}
          height={34}
          borderRadius={12}
          backgroundColor={surfaceColor}
          alignItems="center"
          justifyContent="center"
          position="relative"
        >
          <Bell size={16} color={textColor} />
          {notificationCount > 0 ? (
            <YStack
              position="absolute"
              top={-4}
              right={-4}
              minWidth={18}
              height={18}
              paddingHorizontal={6}
              borderRadius={999}
              backgroundColor={danger}
              alignItems="center"
              justifyContent="center"
            >
              <Text fontSize={10} color="white" fontWeight="700">
                {notificationCount > 9 ? '9+' : notificationCount}
              </Text>
            </YStack>
          ) : null}
        </XStack>
      </HeaderActionButton>
      {showQr ? (
        <HeaderActionButton
          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
          ariaLabel={t('header.quickQr', 'Quick QR')}
        >
          <XStack
            width={34}
            height={34}
            borderRadius={12}
            backgroundColor={primary}
            alignItems="center"
            justifyContent="center"
          >
            <QrCode size={16} color="white" />
          </XStack>
        </HeaderActionButton>
      ) : null}
      {headerActions ?? null}
    </XStack>
  );

  return (
    <YStack backgroundColor={backgroundColor} minHeight="100vh" alignItems="center">
      <YStack
        backgroundColor={headerSurface}
        borderBottomWidth={1}
        borderColor={borderColor}
        paddingHorizontal="$4"
        paddingTop="$4"
        paddingBottom="$3"
        shadowColor={shadow}
        shadowOpacity={0.06}
        shadowRadius={10}
        shadowOffset={{ width: 0, height: 4 }}
        width="100%"
        maxWidth={800}
        position="sticky"
        top={0}
        zIndex={60}
        style={{
          paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
          backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
        }}
      >
        {isCompactHeader ? (
          <YStack space="$2">
            <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
              {headerBackButton}
              <XStack flex={1} minWidth={0} justifyContent="flex-end">
                {headerTitle}
              </XStack>
            </XStack>
            <XStack alignItems="center" justifyContent="flex-end">
              {headerActionsRow}
            </XStack>
          </YStack>
        ) : (
          <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
            {headerBackButton}
            <XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end" minWidth={0}>
              {headerTitle}
              {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={warningBg}
            paddingVertical="$2"
            paddingHorizontal="$3"
          >
            <Text fontSize="$xs" fontWeight="700" color={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={textColor}>
              {t('status.queueTitle', 'Photo actions pending')}
            </Text>
            <Text fontSize="$xs" color={mutedText}>
              {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 Photos')}
                tone="ghost"
                fullWidth={false}
                onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive.slug}/photos`))}
              />
            ) : null}
          </MobileCard>
        ) : null}
        {children}
      </YStack>

      <BottomNav active={activeTab} onNavigate={go} />

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

export function renderEventLocation(event?: TenantEvent | null): string {
  if (!event) return 'Location';
  const settings = (event.settings ?? {}) as Record<string, unknown>;
  const candidate =
    (settings.location as string | undefined) ??
    (settings.address as string | undefined) ??
    (settings.city as string | undefined);
  if (candidate && candidate.trim()) {
    return candidate;
  }
  return 'Location';
}