import React from 'react';
import { Navigate, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Card } from '@tamagui/card';
import { YStack, XStack } from '@tamagui/stacks';
import { YGroup } from '@tamagui/group';
import { ListItem } from '@tamagui/list-item';
import { SizableText as Text } from '@tamagui/text';
import { MobileShell } from './components/MobileShell';
import { CTAButton } from './components/Primitives';
import { useEventContext } from '../context/EventContext';
import { formatEventDate, resolveEventDisplayName } from '../lib/events';
import { adminPath } from '../constants';
import { useAdminTheme } from './theme';

export default function MobileUploadsTabPage() {
  const { events, activeEvent, hasEvents, selectEvent } = useEventContext();
  const { t, i18n } = useTranslation('management');
  const navigate = useNavigate();
  const { text, muted, border, primary, surface, surfaceMuted, shadow } = useAdminTheme();

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

  if (!hasEvents) {
    return (
      <MobileShell activeTab="uploads" title={t('mobileUploads.title', 'Uploads')}>
        <Card
          borderRadius={22}
          borderWidth={2}
          borderColor={border}
          backgroundColor={surface}
          padding="$3"
          shadowColor={shadow}
          shadowOpacity={0.16}
          shadowRadius={16}
          shadowOffset={{ width: 0, height: 10 }}
        >
          <YStack space="$2.5">
            <XStack
              alignItems="center"
              paddingHorizontal="$3"
              paddingVertical="$1.5"
              borderRadius={999}
              borderWidth={1}
              borderColor={border}
              backgroundColor={surfaceMuted}
            >
              <Text fontSize="$xs" fontWeight="800" color={text}>
                {t('mobileUploads.emptyBadge', 'No uploads yet')}
              </Text>
            </XStack>
            <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'))}
            />
          </YStack>
        </Card>
      </MobileShell>
    );
  }

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

  return (
    <MobileShell activeTab="uploads" title={t('mobileUploads.title', 'Uploads')}>
      <Card
        borderRadius={22}
        borderWidth={2}
        borderColor={border}
        backgroundColor={surface}
        padding="$3"
        shadowColor={shadow}
        shadowOpacity={0.16}
        shadowRadius={16}
        shadowOffset={{ width: 0, height: 10 }}
      >
        <YStack space="$2.5">
          <XStack
            alignItems="center"
            paddingHorizontal="$3"
            paddingVertical="$1.5"
            borderRadius={999}
            borderWidth={1}
            borderColor={border}
            backgroundColor={surfaceMuted}
          >
            <Text fontSize="$xs" fontWeight="800" color={text}>
              {t('mobileUploads.pickEvent', 'Pick an event to manage uploads')}
            </Text>
          </XStack>
          <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: border, overflow: "hidden" } as any)}>
            {events.map((event) => (
              <YGroup.Item key={event.slug}>
                <ListItem
                  hoverTheme
                  pressTheme
                  paddingVertical="$2"
                  paddingHorizontal="$3"
                  title={
                    <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>
                  }
                  iconAfter={
                    <Text fontSize="$sm" color={primary} fontWeight="700">
                      {t('mobileUploads.open', 'Open')}
                    </Text>
                  }
                  onPress={() => {
                    selectEvent(event.slug ?? null);
                    if (event.slug) {
                      navigate(adminPath(`/mobile/events/${event.slug}/control-room`));
                    }
                  }}
                />
              </YGroup.Item>
            ))}
          </YGroup>
        </YStack>
      </Card>
    </MobileShell>
  );
}