import { Box, Text, SimpleGrid, Stat, StatLabel, StatNumber, StatHelpText, Icon, HStack, Skeleton, Alert, AlertIcon, AlertTitle, AlertDescription, Button, Link, VStack, Badge, Heading, useColorModeValue, Divider, Table, Thead, Tbody, Tr, Th, Td, Tooltip } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import AdminLayout from '../../layouts/AdminLayout';
import { getAnalytics, AnalyticsData, getAnalyticsOverview, getTopPages, AnalyticsOverview, PageStats } from '../../services/analyticsService';
import { MatchesWidget } from '../../components/widgets/MatchesWidget';
import { ArticlesWidget } from '../../components/widgets/ArticlesWidget';
import { FaUsers, FaCalendarAlt, FaNewspaper, FaTrophy, FaChartLine, FaCog, FaBook, FaRocket, FaEye, FaMousePointer } from 'react-icons/fa';
import AdminHelp from '../../components/admin/AdminHelp';
import { getFacrTablesCache } from '../../services/facr/cache';
import ScoreboardPreview from '../../components/scoreboard/ScoreboardPreview';
import { getScoreboardState, ScoreboardState } from '../../services/scoreboard';
import { Link as RouterLink } from 'react-router-dom';
import api from '../../services/api';

const StatCard = ({ label, value, help, icon, color = 'blue' }: { label: string; value: number | string; help?: string; icon?: any; color?: string }) => {
  const bgCard = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const iconBg = useColorModeValue(`${color}.50`, `${color}.900`);
  const iconColor = useColorModeValue(`${color}.600`, `${color}.300`);
  
  return (
    <Box 
      bg={bgCard} 
      p={6} 
      borderRadius="xl" 
      boxShadow="md" 
      borderWidth="1px"
      borderColor={borderColor}
      _hover={{ shadow: 'lg', transform: 'translateY(-2px)' }}
      transition="all 0.2s"
    >
      <HStack justify="space-between" align="start" mb={3}>
        <Stat>
          <StatLabel fontSize="sm" fontWeight="medium" color="gray.500">{label}</StatLabel>
          <StatNumber fontSize="3xl" fontWeight="bold" mt={2}>{value}</StatNumber>
          {help && <StatHelpText fontSize="xs" mt={1}>{help}</StatHelpText>}
        </Stat>
        {icon && (
          <Box p={3} bg={iconBg} borderRadius="xl">
            <Icon as={icon} boxSize={6} color={iconColor} />
          </Box>
        )}
      </HStack>
    </Box>
  );
};

// Event translation and description mapping
const getEventTranslation = (eventName: string): { name: string; source: string; description: string } => {
  const eventMap: Record<string, { name: string; source: string; description: string }> = {
    'Contact Form Submit': {
      name: 'Odeslání kontaktního formuláře',
      source: 'Kontaktní stránka',
      description: 'Uživatel odeslal kontaktní formulář na stránce Kontakt'
    },
    'Contact Form': {
      name: 'Zobrazení kontaktního formuláře',
      source: 'Kontaktní stránka',
      description: 'Uživatel zobrazil kontaktní formulář'
    },
    'Form Submit': {
      name: 'Odeslání formuláře',
      source: 'Různé stránky',
      description: 'Obecné odeslání formuláře na webu'
    },
    'Newsletter Subscribe': {
      name: 'Odběr newsletteru',
      source: 'Newsletter formulář',
      description: 'Uživatel se přihlásil k odběru newsletteru'
    },
    'Newsletter Submit': {
      name: 'Potvrzení newsletteru',
      source: 'Newsletter formulář',
      description: 'Uživatel potvrdil přihlášení k newsletteru'
    },
    'Newsletter Unsubscribe': {
      name: 'Odhlášení z newsletteru',
      source: 'Nastavení newsletteru',
      description: 'Uživatel se odhlásil z odběru newsletteru'
    },
    'Newsletter Preferences Saved': {
      name: 'Uložení předvoleb newsletteru',
      source: 'Nastavení newsletteru',
      description: 'Uživatel uložil své předvolby pro newsletter'
    },
    'Unsubscribe': {
      name: 'Odhlášení z odběru',
      source: 'Nastavení',
      description: 'Uživatel se odhlásil z odběru'
    },
    'Save Preferences': {
      name: 'Uložení předvoleb',
      source: 'Nastavení',
      description: 'Uživatel uložil své předvolby (souhlas s cookies apod.)'
    },
    'Refresh Preferences': {
      name: 'Obnovení předvoleb',
      source: 'Nastavení',
      description: 'Uživatel obnovil nebo změnil své předvolby'
    },
    'Article View': {
      name: 'Zobrazení článku',
      source: 'Blog',
      description: 'Uživatel si zobrazil článek na blogu'
    },
    'Match View': {
      name: 'Zobrazení zápasu',
      source: 'Stránka zápasů',
      description: 'Uživatel si zobrazil detail zápasu'
    },
    'Gallery View': {
      name: 'Zobrazení galerie',
      source: 'Galerie',
      description: 'Uživatel si otevřel galerii fotografií'
    },
    'Video Play': {
      name: 'Přehrání videa',
      source: 'Video sekce',
      description: 'Uživatel spustil přehrávání videa'
    },
    'Social Share': {
      name: 'Sdílení na sociálních sítích',
      source: 'Sdílecí tlačítka',
      description: 'Uživatel sdílel obsah na sociální síť'
    },
    'Download': {
      name: 'Stažení souboru',
      source: 'Různé stránky',
      description: 'Uživatel stáhl soubor'
    },
    'External Link Click': {
      name: 'Kliknutí na externí odkaz',
      source: 'Různé stránky',
      description: 'Uživatel klikl na odkaz vedoucí mimo web'
    }
  };

  return eventMap[eventName] || {
    name: eventName,
    source: 'Neznámý zdroj',
    description: `Událost: ${eventName}`
  };
};

const AdminDashboardPage = () => {
  const { data, isLoading, error, refetch, isFetching } = useQuery<AnalyticsData>({
    queryKey: ['admin', 'analytics'],
    queryFn: getAnalytics,
    staleTime: 5 * 60 * 1000,
  });

  // Fetch analytics overview (page views, visitors, etc.)
  const { data: analyticsOverview, isLoading: isLoadingOverview } = useQuery<AnalyticsOverview>({
    queryKey: ['admin', 'analytics', 'overview'],
    queryFn: getAnalyticsOverview,
    staleTime: 5 * 60 * 1000,
  });

  // Fetch top pages
  const { data: topPages } = useQuery<PageStats[]>({
    queryKey: ['admin', 'analytics', 'top-pages'],
    queryFn: () => getTopPages(5),
    staleTime: 10 * 60 * 1000,
  });

  // Fetch top events from Umami
  const { data: topEvents } = useQuery<Array<{ x: string; y: number }>>({
    queryKey: ['admin', 'analytics', 'umami-events'],
    queryFn: async () => {
      const response = await api.get('/admin/umami/metrics/event?days=7');
      return response.data || [];
    },
    staleTime: 10 * 60 * 1000,
  });

  // Club stats from FACR tables cache
  const { data: facrTables } = useQuery<any>({
    queryKey: ['facr-tables-cache'],
    queryFn: getFacrTablesCache,
    staleTime: 5 * 60 * 1000,
  });

  const competitionsCount = Array.isArray(facrTables?.competitions) ? facrTables.competitions.length : 0;
  const uniqueTeamsCount = (() => {
    try {
      const comps = Array.isArray(facrTables?.competitions) ? facrTables.competitions : [];
      const set = new Set<string>();
      for (const c of comps) {
        const rows = Array.isArray(c?.table?.overall) ? c.table.overall : [];
        for (const r of rows) {
          const name = String(r?.team || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, ' ').trim().toLowerCase();
          if (name) set.add(name);
        }
      }
      return set.size;
    } catch {
      return 0;
    }
  })();

  // Scoreboard state for compact preview
  const { data: scoreboardState } = useQuery<ScoreboardState>({
    queryKey: ['scoreboard-state'],
    queryFn: getScoreboardState,
    staleTime: 60 * 1000,
  });

  return (
    <AdminLayout>
      <Box maxW="1600px" mx="auto">
        {/* Welcome Header */}
        <Box mb={8}>
          <HStack spacing={3} mb={2}>
            <Text fontSize="3xl">👋</Text>
            <Heading size="xl">Vítejte v administraci</Heading>
          </HStack>
          <Text color="gray.500" fontSize="lg">
            Přehled klíčových statistik a rychlý přístup k nejdůležitějším funkcím
          </Text>
        </Box>

        {!!error && (
          <Alert status="error" mb={4} borderRadius="md">
            <AlertIcon />
            <Box>
              <AlertTitle>Nelze načíst statistiky</AlertTitle>
              <AlertDescription>
                Zkontrolujte připojení nebo přihlášení správce a zkuste to znovu.
              </AlertDescription>
            </Box>
            <Button onClick={() => refetch()} ml="auto" size="sm" isLoading={isFetching}>
              Zkusit znovu
            </Button>
          </Alert>
        )}

        {/* Top stats */}
        <SimpleGrid columns={{ base: 1, sm: 2, lg: 3 }} spacing={4} mb={6}>
          {isLoading ? (
            <>
              {[1,2,3].map((i) => (
                <Box key={i} bg="white" p={4} borderRadius="lg" boxShadow="sm" borderWidth="1px">
                  <Skeleton height="20px" width="40%" mb={2} />
                  <Skeleton height="28px" width="50%" mb={2} />
                  <Skeleton height="16px" width="35%" />
                </Box>
              ))}
            </>
          ) : (
            <>
              <StatCard
                label="Uživatelé (admin)"
                value={data?.users?.total ?? '—'}
                help={data?.users ? `Nových tento týden: ${data.users.new_this_week ?? 0}` : undefined}
                icon={FaUsers}
                color="blue"
              />
              <StatCard
                label="Události"
                value={data?.events?.total ?? '—'}
                help={data?.events ? `Nadcházející: ${data.events.upcoming ?? 0}` : undefined}
                icon={FaCalendarAlt}
                color="green"
              />
              <StatCard
                label="Články"
                value={data?.articles?.total ?? '—'}
                help={data?.articles ? `Publikovaných: ${data.articles.published ?? 0}` : undefined}
                icon={FaNewspaper}
                color="purple"
              />
              <StatCard
                label="Zobrazení stránek"
                value={analyticsOverview?.total_page_views?.toLocaleString('cs-CZ') ?? '—'}
                help={analyticsOverview ? `Dnes: ${analyticsOverview.page_views_today ?? 0}` : undefined}
                icon={FaEye}
                color="cyan"
              />
              <StatCard
                label="Unikátní návštěvníci"
                value={analyticsOverview?.unique_visitors?.toLocaleString('cs-CZ') ?? '—'}
                help={analyticsOverview ? `Tento týden: ${analyticsOverview.unique_visitors_week ?? 0}` : undefined}
                icon={FaChartLine}
                color="teal"
              />
              <StatCard
                label="Zobrazení (týden)"
                value={analyticsOverview?.page_views_week?.toLocaleString('cs-CZ') ?? '—'}
                help="Za posledních 7 dní"
                icon={FaMousePointer}
                color="orange"
              />
            </>
          )}
        </SimpleGrid>

        {/* Quick Actions */}
        <Box mb={8}>
          <Heading size="md" mb={4}>Rychlé akce</Heading>
          <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
            {[
              { label: 'Nastavení', icon: FaCog, to: '/admin/nastaveni', color: 'blue' },
              { label: 'Dokumentace', icon: FaBook, to: '/admin/docs', color: 'purple' },
              { label: 'Nový článek', icon: FaRocket, to: '/admin/clanky', color: 'green' },
              { label: 'Prefetch', icon: FaChartLine, to: '/admin/prefetch', color: 'orange' },
            ].map((action, idx) => (
              <Link 
                key={idx} 
                as={RouterLink} 
                to={action.to}
                _hover={{ textDecoration: 'none' }}
              >
                <Box
                  bg={useColorModeValue('white', 'gray.800')}
                  p={4}
                  borderRadius="lg"
                  borderWidth="1px"
                  borderColor={useColorModeValue('gray.200', 'gray.700')}
                  textAlign="center"
                  cursor="pointer"
                  _hover={{ 
                    shadow: 'lg', 
                    transform: 'translateY(-2px)',
                    borderColor: `${action.color}.400`
                  }}
                  transition="all 0.2s"
                >
                  <VStack spacing={2}>
                    <Box 
                      p={3} 
                      bg={useColorModeValue(`${action.color}.50`, `${action.color}.900`)} 
                      borderRadius="lg"
                    >
                      <Icon 
                        as={action.icon} 
                        boxSize={6} 
                        color={useColorModeValue(`${action.color}.600`, `${action.color}.300`)} 
                      />
                    </Box>
                    <Text fontWeight="semibold" fontSize="sm">{action.label}</Text>
                  </VStack>
                </Box>
              </Link>
            ))}
          </SimpleGrid>
        </Box>

        <Divider my={8} />

        {/* Analytics Tables */}
        <Heading size="md" mb={4}>Analytika návštěvnosti</Heading>
        <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6} mb={8}>
          {/* Top Pages */}
          <Box 
            bg={useColorModeValue('white', 'gray.800')} 
            p={5} 
            borderRadius="xl" 
            boxShadow="md" 
            borderWidth="1px"
            borderColor={useColorModeValue('gray.200', 'gray.700')}
          >
            <HStack justify="space-between" mb={4}>
              <Text fontWeight="bold" fontSize="lg">Nejnavštěvovanější stránky</Text>
              <Link as={RouterLink} to="/admin/analytika" color="blue.500" fontSize="sm" fontWeight="semibold">
                Více →
              </Link>
            </HStack>
            {topPages && topPages.length > 0 ? (
              <Table size="sm" variant="simple">
                <Thead>
                  <Tr>
                    <Th>Stránka</Th>
                    <Th isNumeric>Zobrazení</Th>
                    <Th isNumeric>Návštěvníci</Th>
                  </Tr>
                </Thead>
                <Tbody>
                  {topPages.map((page, idx) => (
                    <Tr key={idx}>
                      <Td fontSize="sm">
                        <Text isTruncated maxW="200px" title={page.page_name || page.page_path}>
                          {page.page_name || page.page_path}
                        </Text>
                      </Td>
                      <Td isNumeric fontWeight="semibold">{page.view_count}</Td>
                      <Td isNumeric>{page.unique_visitors}</Td>
                    </Tr>
                  ))}
                </Tbody>
              </Table>
            ) : (
              <Text color="gray.500" fontSize="sm">Zatím žádná data</Text>
            )}
          </Box>

          {/* Top User Events */}
          <Box 
            bg={useColorModeValue('white', 'gray.800')} 
            p={5} 
            borderRadius="xl" 
            boxShadow="md" 
            borderWidth="1px"
            borderColor={useColorModeValue('gray.200', 'gray.700')}
          >
            <HStack justify="space-between" mb={4}>
              <Text fontWeight="bold" fontSize="lg">Nejčastější interakce</Text>
              <Badge colorScheme="blue">7 dní</Badge>
            </HStack>
            {topEvents && topEvents.length > 0 ? (
              <Table size="sm" variant="simple">
                <Thead>
                  <Tr>
                    <Th>Akce</Th>
                    <Th isNumeric>Počet</Th>
                  </Tr>
                </Thead>
                <Tbody>
                  {topEvents.slice(0, 10).map((event, idx) => {
                    const eventName = event.x || '';
                    const eventInfo = getEventTranslation(eventName);
                    return (
                      <Tr key={idx}>
                        <Td fontSize="sm">
                          <Tooltip label={eventInfo.description} placement="top" hasArrow>
                            <Box>
                              <Text fontWeight="medium">{eventInfo.name}</Text>
                              <Text fontSize="xs" color="gray.500">{eventInfo.source}</Text>
                            </Box>
                          </Tooltip>
                        </Td>
                        <Td isNumeric>
                          <Badge colorScheme="blue" fontWeight="semibold">{event.y}</Badge>
                        </Td>
                      </Tr>
                    );
                  })}
                </Tbody>
              </Table>
            ) : (
              <Text color="gray.500" fontSize="sm">Zatím žádná data</Text>
            )}
          </Box>
        </SimpleGrid>

        <Divider my={8} />

        {/* Widgets grid */}
        <Heading size="md" mb={4}>Přehled aktivit</Heading>
        <SimpleGrid columns={{ base: 1, md: 2, xl: 3 }} spacing={6} mb={8}>
          <MatchesWidget />
          <ArticlesWidget />
          {/* Compact Scoreboard card */}
          <Box 
            bg={useColorModeValue('white', 'gray.800')} 
            p={5} 
            borderRadius="xl" 
            boxShadow="md" 
            borderWidth="1px"
            borderColor={useColorModeValue('gray.200', 'gray.700')}
          >
            <HStack justify="space-between" mb={4}>
              <Text fontWeight="bold" fontSize="lg">Aktuální tabule</Text>
              <Link as={RouterLink} to="/admin/scoreboard" color="blue.500" fontSize="sm" fontWeight="semibold">
                Upravit →
              </Link>
            </HStack>
            {scoreboardState ? (
              <Box display="flex" justifyContent="center">
                <ScoreboardPreview state={scoreboardState} />
              </Box>
            ) : (
              <Skeleton height="40px" />
            )}
          </Box>
        </SimpleGrid>

        {/* Admin guidance */}
        <AdminHelp />
      </Box>
    </AdminLayout>
  );
};

export default AdminDashboardPage;
