import React from 'react';
import { Navigate, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { MobileShell } from './components/MobileShell';
import { MobileCard, CTAButton } from './components/Primitives';
import { useEventContext } from '../context/EventContext';
import { formatEventDate, resolveEventDisplayName } from '../lib/events';
import { adminPath } from '../constants';
import { useTheme } from '@tamagui/core';

export default function MobileUploadsTabPage() {
  const { events, activeEvent, hasEvents, selectEvent } = useEventContext();
  const { t, i18n } = useTranslation('management');
  const navigate = useNavigate();
  const theme = useTheme();
  const text = String(theme.color?.val ?? '#111827');
  const muted = String(theme.gray?.val ?? '#4b5563');
  const border = String(theme.borderColor?.val ?? '#e5e7eb');
  const primary = String(theme.primary?.val ?? '#007AFF');

  if (activeEvent?.slug) {
    return <Navigate to={adminPath(`/mobile/events/${activeEvent.slug}/photos`)} replace />;
  }

  if (!hasEvents) {
    return (
      <MobileShell activeTab="uploads" title={t('mobileUploads.title', 'Uploads')}>
        <MobileCard alignItems="flex-start" space="$3">
          <Text fontSize="$lg" fontWeight="800" color={text}>
            {t('mobileUploads.emptyTitle', 'Create an event first')}
          </Text>
          <Text fontSize="$sm" color={muted}>
            {t('mobileUploads.emptyBody', 'Add your first event to review uploads and manage QR sharing.')}
          </Text>
          <CTAButton
            label={t('mobileDashboard.ctaCreate', 'Create event')}
            onPress={() => navigate(adminPath('/mobile/events/new'))}
          />
        </MobileCard>
      </MobileShell>
    );
  }

  const locale = i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE';

  return (
    <MobileShell activeTab="uploads" title={t('mobileUploads.title', 'Uploads')}>
      <YStack space="$2">
        <Text fontSize="$sm" color={text} fontWeight="700">
          {t('mobileUploads.pickEvent', 'Pick an event to manage uploads')}
        </Text>
        {events.map((event) => (
          <Pressable
            key={event.slug}
            onPress={() => {
              selectEvent(event.slug ?? null);
              if (event.slug) {
                navigate(adminPath(`/mobile/events/${event.slug}/photos`));
              }
            }}
          >
            <MobileCard borderColor={border} space="$2">
              <XStack alignItems="center" justifyContent="space-between">
                <YStack space="$1">
                <Text fontSize="$md" fontWeight="800" color={text}>
                  {resolveEventDisplayName(event)}
                </Text>
                <Text fontSize="$xs" color={muted}>
                  {formatEventDate(event.event_date, locale) ?? t('mobileDashboard.status.draft', 'Draft')}
                </Text>
              </YStack>
              <Text fontSize="$sm" color={primary} fontWeight="700">
                {t('mobileUploads.open', 'Open')}
              </Text>
            </XStack>
          </MobileCard>
          </Pressable>
        ))}
      </YStack>
    </MobileShell>
  );
}