import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { BarChart2, TrendingUp, Users, ListTodo, Lock, Trophy, Calendar } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { format, parseISO } from 'date-fns';
import { de, enGB } from 'date-fns/locale';

import { MobileShell } from './components/MobileShell';
import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
import { getEventAnalytics, EventAnalytics } from '../api';
import { ApiError } from '../lib/apiError';
import { useAdminTheme } from './theme';
import { adminPath } from '../constants';
import { useEventContext } from '../context/EventContext';

export default function MobileEventAnalyticsPage() {
  const { slug } = useParams<{ slug: string }>();
  const { t, i18n } = useTranslation('management');
  const navigate = useNavigate();
  const { activeEvent } = useEventContext();
  const { textStrong, muted, border, surface, primary, accentSoft } = useAdminTheme();
  
  const dateLocale = i18n.language.startsWith('de') ? de : enGB;

  const { data, isLoading, error } = useQuery<EventAnalytics, ApiError>({
    queryKey: ['event-analytics', slug],
    queryFn: () => getEventAnalytics(slug!),
    enabled: Boolean(slug),
    retry: false, // Don't retry if 403
  });

  const isFeatureLocked = error?.status === 403 || error?.code === 'feature_locked';

  if (isFeatureLocked) {
    return (
      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="events">
        <MobileCard
          space="$4"
          padding="$6"
          alignItems="center"
          justifyContent="center"
          borderColor={border}
          backgroundColor={surface}
        >
          <YStack
            width={64}
            height={64}
            borderRadius={32}
            backgroundColor={accentSoft}
            alignItems="center"
            justifyContent="center"
            marginBottom="$2"
          >
            <Lock size={32} color={primary} />
          </YStack>
          <YStack space="$2" alignItems="center">
            <Text fontSize="$xl" fontWeight="900" color={textStrong} textAlign="center">
              {t('analytics.lockedTitle', 'Unlock Analytics')}
            </Text>
            <Text fontSize="$sm" color={muted} textAlign="center">
              {t('analytics.lockedBody', 'Get deep insights into your event engagement with the Premium package.')}
            </Text>
          </YStack>
          <CTAButton
            label={t('analytics.upgradeAction', 'Upgrade to Premium')}
            onPress={() => navigate(adminPath('/mobile/billing/shop'))}
          />
        </MobileCard>
      </MobileShell>
    );
  }

  if (isLoading) {
    return (
      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="events">
        <YStack space="$3">
          <SkeletonCard height={200} />
          <SkeletonCard height={150} />
          <SkeletonCard height={150} />
        </YStack>
      </MobileShell>
    );
  }

  if (error || !data) {
    return (
      <MobileShell title={t('analytics.title', 'Analytics')} activeTab="events">
        <MobileCard borderColor={border} padding="$4">
          <Text color={muted}>{t('common.error', 'Something went wrong')}</Text>
        </MobileCard>
      </MobileShell>
    );
  }

  const { timeline, contributors, tasks } = data;
  const hasTimeline = timeline.length > 0;
  const hasContributors = contributors.length > 0;
  const hasTasks = tasks.length > 0;

  // Prepare chart data
  const maxCount = Math.max(...timeline.map((p) => p.count), 1);

  return (
    <MobileShell
      title={t('analytics.title', 'Analytics')}
      subtitle={activeEvent?.name as string}
      activeTab="events"
      showBack
    >
      <YStack space="$4">
        {/* Activity Timeline */}
        <MobileCard space="$3" borderColor={border} backgroundColor={surface}>
          <XStack alignItems="center" space="$2">
            <TrendingUp size={18} color={primary} />
            <Text fontSize="$md" fontWeight="800" color={textStrong}>
              {t('analytics.activityTitle', 'Activity Timeline')}
            </Text>
          </XStack>
          
          {hasTimeline ? (
            <YStack height={180} justifyContent="flex-end" space="$2">
              <XStack alignItems="flex-end" justifyContent="space-between" height={150} gap="$1">
                {timeline.map((point, index) => {
                  const heightPercent = (point.count / maxCount) * 100;
                  const date = parseISO(point.timestamp);
                  // Show label every 3rd point or if few points
                  const showLabel = timeline.length < 8 || index % 3 === 0;
                  
                  return (
                    <YStack key={point.timestamp} flex={1} alignItems="center" space="$1">
                      <YStack
                        width="100%"
                        height={`${Math.max(heightPercent, 4)}%`}
                        backgroundColor={primary}
                        opacity={0.8}
                        borderTopLeftRadius={4}
                        borderTopRightRadius={4}
                      />
                      {showLabel && (
                        <Text fontSize={10} color={muted} numberOfLines={1}>
                          {format(date, 'HH:mm')}
                        </Text>
                      )}
                    </YStack>
                  );
                })}
              </XStack>
              <Text fontSize="$xs" color={muted} textAlign="center">
                 {t('analytics.uploadsPerHour', 'Uploads per hour')}
              </Text>
            </YStack>
          ) : (
            <EmptyState message={t('analytics.noActivity', 'No uploads yet')} />
          )}
        </MobileCard>

        {/* Top Contributors */}
        <MobileCard space="$3" borderColor={border} backgroundColor={surface}>
          <XStack alignItems="center" space="$2">
            <Trophy size={18} color={primary} />
            <Text fontSize="$md" fontWeight="800" color={textStrong}>
              {t('analytics.contributorsTitle', 'Top Contributors')}
            </Text>
          </XStack>

          {hasContributors ? (
            <YStack space="$3">
              {contributors.map((contributor, idx) => (
                <XStack key={idx} alignItems="center" justifyContent="space-between" paddingVertical="$1">
                  <XStack alignItems="center" space="$3">
                    <YStack
                      width={28}
                      height={28}
                      borderRadius={14}
                      backgroundColor={idx < 3 ? accentSoft : '$gray5'}
                      alignItems="center"
                      justifyContent="center"
                    >
                      <Text fontSize="$xs" fontWeight="700" color={idx < 3 ? primary : muted}>
                        {idx + 1}
                      </Text>
                    </YStack>
                    <YStack>
                      <Text fontSize="$sm" fontWeight="600" color={textStrong}>
                        {contributor.name || t('common.anonymous', 'Anonymous')}
                      </Text>
                      <Text fontSize="$xs" color={muted}>
                        {t('analytics.likesCount', { count: contributor.likes, defaultValue: '{{count}} likes' })}
                      </Text>
                    </YStack>
                  </XStack>
                  <Text fontSize="$sm" fontWeight="700" color={primary}>
                    {contributor.count}
                  </Text>
                </XStack>
              ))}
            </YStack>
          ) : (
            <EmptyState message={t('analytics.noContributors', 'No contributors yet')} />
          )}
        </MobileCard>

        {/* Task Stats */}
        <MobileCard space="$3" borderColor={border} backgroundColor={surface}>
          <XStack alignItems="center" space="$2">
            <ListTodo size={18} color={primary} />
            <Text fontSize="$md" fontWeight="800" color={textStrong}>
              {t('analytics.tasksTitle', 'Popular Tasks')}
            </Text>
          </XStack>

          {hasTasks ? (
            <YStack space="$3">
              {tasks.map((task) => {
                 const maxTaskCount = Math.max(...tasks.map(t => t.count), 1);
                 const percent = (task.count / maxTaskCount) * 100;
                 return (
                  <YStack key={task.task_id} space="$1">
                    <XStack justifyContent="space-between">
                      <Text fontSize="$sm" color={textStrong} numberOfLines={1} flex={1}>
                        {task.task_name}
                      </Text>
                      <Text fontSize="$xs" fontWeight="700" color={textStrong}>
                        {task.count}
                      </Text>
                    </XStack>
                    <XStack height={6} backgroundColor="$gray4" borderRadius={3} overflow="hidden">
                      <YStack
                        height="100%"
                        width={`${percent}%`}
                        backgroundColor={primary}
                        borderRadius={3}
                      />
                    </XStack>
                  </YStack>
                 );
              })}
            </YStack>
          ) : (
            <EmptyState message={t('analytics.noTasks', 'No task activity yet')} />
          )}
        </MobileCard>
      </YStack>
    </MobileShell>
  );
}

function EmptyState({ message }: { message: string }) {
  const { muted } = useAdminTheme();
  return (
    <YStack padding="$4" alignItems="center" justifyContent="center">
      <Text fontSize="$sm" color={muted}>
        {message}
      </Text>
    </YStack>
  );
}