import React, { useState, useEffect } from 'react';
import {
  Box,
  Container,
  Heading,
  SimpleGrid,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  Card,
  CardHeader,
  CardBody,
  Select,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  Spinner,
  Text,
  useColorModeValue,
  VStack,
  HStack,
  Badge,
  Divider,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Button,
  Flex,
  Progress,
  Tooltip,
  Icon,
} from '@chakra-ui/react';
import AdminLayout from '../../layouts/AdminLayout';
import api from '../../services/api';
import { Bar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip as ChartTooltip,
  Legend,
} from 'chart.js';
import { 
  FiEye, 
  FiUsers, 
  FiActivity, 
  FiPercent, 
  FiClock,
  FiFile,
  FiLink,
  FiMonitor,
  FiCpu,
  FiGlobe,
  FiSmartphone,
  FiZap,
  FiTrendingUp,
  FiCalendar,
  FiSearch
} from 'react-icons/fi';

// Register ChartJS components
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  ChartTooltip,
  Legend
);

interface Stats {
  pageviews?: { value: number };
  visitors?: { value: number };
  visits?: { value: number };
  bounces?: { value: number };
  totaltime?: { value: number };
}

interface MetricItem {
  x: string;
  y: number;
}

interface PageviewsData {
  date: string;
  value: number;
}

// 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 AnalyticsAdminPage: React.FC = () => {
  const [stats, setStats] = useState<Stats | null>(null);
  const [pageMetrics, setPageMetrics] = useState<MetricItem[]>([]);
  const [referrerMetrics, setReferrerMetrics] = useState<MetricItem[]>([]);
  const [browserMetrics, setBrowserMetrics] = useState<MetricItem[]>([]);
  const [osMetrics, setOsMetrics] = useState<MetricItem[]>([]);
  const [countryMetrics, setCountryMetrics] = useState<MetricItem[]>([]);
  const [deviceMetrics, setDeviceMetrics] = useState<MetricItem[]>([]);
  const [eventMetrics, setEventMetrics] = useState<MetricItem[]>([]);
  const [queryMetrics, setQueryMetrics] = useState<MetricItem[]>([]);
  const [pageviewsData, setPageviewsData] = useState<PageviewsData[]>([]);
  const [loading, setLoading] = useState(true);
  const [timeRange, setTimeRange] = useState('0'); // Default to "today"
  const [hasData, setHasData] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [selectedCountry, setSelectedCountry] = useState<{
    code: string;
    name: string;
    value: number;
  } | null>(null);
  const [countryDetails, setCountryDetails] = useState<any>(null);
  const [loadingCountryDetails, setLoadingCountryDetails] = useState(false);
  const [umamiConfig, setUmamiConfig] = useState<any>(null);
  const [showDiagnostics, setShowDiagnostics] = useState(false);
  const { isOpen, onOpen, onClose } = useDisclosure();

  const bgColor = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');

  const fetchAnalytics = async (days: string) => {
    setLoading(true);
    setErrorMessage(null);
    try {
      const daysNum = parseInt(days);
      
      // Fetch stats with calculated time range
      const statsResponse = await api.get(`/admin/umami/stats?days=${days}`);
      setStats(statsResponse.data);
      
      // Check if we have any data
      const hasAnyStats = statsResponse.data && (
        (statsResponse.data.pageviews?.value && statsResponse.data.pageviews.value > 0) ||
        (statsResponse.data.visitors?.value && statsResponse.data.visitors.value > 0)
      );

      // Fetch metrics
      const [pages, browsers, os, countries, devices, events, queries, pageviews] = await Promise.all([
        api.get(`/admin/umami/metrics/url?days=${days}`),
        api.get(`/admin/umami/metrics/browser?days=${days}`),
        api.get(`/admin/umami/metrics/os?days=${days}`),
        api.get(`/admin/umami/metrics/country?days=${days}`),
        api.get(`/admin/umami/metrics/device?days=${days}`),
        api.get(`/admin/umami/metrics/event?days=${days}`),
        api.get(`/admin/umami/metrics/query?days=${days}`).catch(() => ({ data: [] })),
        api.get(`/admin/umami/pageviews?days=${days}`),
      ]);

      setPageMetrics(pages.data || []);
      setReferrerMetrics([]); // Removed - no longer fetching referrers
      setBrowserMetrics(browsers.data || []);
      setOsMetrics(os.data || []);
      setCountryMetrics(countries.data || []);
      setDeviceMetrics(devices.data || []);
      setEventMetrics(events.data || []);
      setQueryMetrics(queries.data || []);

      // Process real pageviews data from Umami
      const pageviewsDataArray: PageviewsData[] = [];
      const pageviewsResponse = pageviews.data || [];
      
      if (pageviewsResponse.length > 0) {
        for (const item of pageviewsResponse) {
          let label = '';
          const timestamp = item.t || item.time || item.date;
          
          if (daysNum === 0 || daysNum === 1) {
            // Hourly data - format as "HH:00"
            const date = new Date(timestamp);
            label = `${date.getHours().toString().padStart(2, '0')}:00`;
          } else {
            // Daily data - format as "d. M."
            const date = new Date(timestamp);
            label = `${date.getDate()}. ${date.getMonth() + 1}.`;
          }
          
          pageviewsDataArray.push({
            date: label,
            value: item.y || item.value || 0
          });
        }
      }
      
      setPageviewsData(pageviewsDataArray);
      
      // Determine if we have data
      const hasPageviews = pageviewsDataArray.length > 0 && pageviewsDataArray.some(d => d.value > 0);
      const hasMetrics = pages.data?.length > 0 || countries.data?.length > 0;
      setHasData(hasAnyStats || hasPageviews || hasMetrics);
      
      // Set error message if no data
      if (!hasAnyStats && !hasPageviews && !hasMetrics) {
        setErrorMessage('Umami není správně nakonfigurováno nebo ještě nebyly zaznamenány žádné návštěvy. Zkontrolujte UMAMI_WEBSITE_ID v .env souboru.');
      }
    } catch (error) {
      console.error('Failed to fetch analytics:', error);
      setErrorMessage('Chyba při načítání analytiky. Zkontrolujte připojení k Umami.');
      setHasData(false);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchAnalytics(timeRange);
    fetchUmamiConfig();
  }, [timeRange]);

  const fetchUmamiConfig = async () => {
    try {
      const response = await api.get('/umami/config');
      setUmamiConfig(response.data);
    } catch (error) {
      console.error('Failed to fetch Umami config:', error);
    }
  };

  const handleCountryClick = async (countryCode: string, countryName: string, value: number) => {
    setSelectedCountry({ code: countryCode, name: countryName, value });
    setLoadingCountryDetails(true);
    onOpen();
    
    try {
      // Fetch detailed analytics for the selected country
      const [pages, browsers, os, devices, events] = await Promise.all([
        api.get(`/admin/umami/metrics/url?days=${timeRange}&country=${countryCode}`),
        api.get(`/admin/umami/metrics/browser?days=${timeRange}&country=${countryCode}`),
        api.get(`/admin/umami/metrics/os?days=${timeRange}&country=${countryCode}`),
        api.get(`/admin/umami/metrics/device?days=${timeRange}&country=${countryCode}`),
        api.get(`/admin/umami/metrics/event?days=${timeRange}&country=${countryCode}`),
      ]);

      setCountryDetails({
        pages: pages.data || [],
        browsers: browsers.data || [],
        os: os.data || [],
        devices: devices.data || [],
        events: events.data || [],
      });
    } catch (error) {
      console.error('Failed to fetch country details:', error);
      setCountryDetails(null);
    } finally {
      setLoadingCountryDetails(false);
    }
  };

  const handleModalClose = () => {
    onClose();
    setSelectedCountry(null);
    setCountryDetails(null);
  };

  const formatNumber = (num: number | undefined) => {
    if (!num) return '0';
    return new Intl.NumberFormat('cs-CZ').format(num);
  };

  const formatDuration = (ms: number | undefined) => {
    if (!ms || ms === 0) return '0s';
    
    // Handle both milliseconds and seconds (Umami might return either)
    let totalSeconds = ms > 10000 ? Math.floor(ms / 1000) : Math.floor(ms);
    
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;
    
    if (hours > 0) {
      return `${hours}h ${minutes}m ${seconds}s`;
    } else if (minutes > 0) {
      return `${minutes}m ${seconds}s`;
    }
    return `${seconds}s`;
  };

  const renderMetricTable = (metrics: MetricItem[], title: string, isEventMetrics: boolean = false) => (
    <Card bg={bgColor} borderColor={borderColor}>
      <CardHeader>
        <Heading size="sm">{title}</Heading>
      </CardHeader>
      <CardBody>
        <Table variant="simple" size="sm">
          <Thead>
            <Tr>
              <Th>Název</Th>
              <Th isNumeric>Návštěvy</Th>
            </Tr>
          </Thead>
          <Tbody>
            {metrics.slice(0, 10).map((item, index) => {
              const eventInfo = isEventMetrics ? getEventTranslation(item.x) : null;
              return (
                <Tr key={index}>
                  <Td>
                    {isEventMetrics && eventInfo ? (
                      <Tooltip label={eventInfo.description} placement="top" hasArrow>
                        <Box>
                          <Text noOfLines={1} maxW="300px" fontWeight="medium">
                            {eventInfo.name}
                          </Text>
                          <Text fontSize="xs" color="gray.500">
                            {eventInfo.source}
                          </Text>
                        </Box>
                      </Tooltip>
                    ) : (
                      <Text noOfLines={1} maxW="300px">
                        {item.x || '(prázdné)'}
                      </Text>
                    )}
                  </Td>
                  <Td isNumeric>
                    <Badge colorScheme="blue">{formatNumber(item.y)}</Badge>
                  </Td>
                </Tr>
              );
            })}
            {metrics.length === 0 && (
              <Tr>
                <Td colSpan={2} textAlign="center">
                  <Text color="gray.500">Žádná data</Text>
                </Td>
              </Tr>
            )}
          </Tbody>
        </Table>
      </CardBody>
    </Card>
  );

  if (loading && !stats) {
    return (
      <AdminLayout>
        <Container maxW="container.xl" py={8}>
          <VStack spacing={4}>
            <Spinner size="xl" />
            <Text>Načítání analytiky...</Text>
          </VStack>
        </Container>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout>
      <Container maxW="container.xl" py={8}>
        <VStack spacing={6} align="stretch">
          {/* Header */}
          <HStack justify="space-between" align="center">
            <HStack spacing={3}>
              <Icon as={FiCalendar} color="blue.500" boxSize={6} />
              <Heading size="lg">Analytika webu</Heading>
            </HStack>
            <HStack>
              <Icon as={FiCalendar} color="gray.500" boxSize={4} />
              <Select
                value={timeRange}
                onChange={(e) => setTimeRange(e.target.value)}
                maxW="200px"
              >
                <option value="0">Dnes (dnešní den)</option>
                <option value="1">Včera</option>
                <option value="7">Posledních 7 dní</option>
                <option value="30">Posledních 30 dní</option>
                <option value="90">Posledních 90 dní</option>
                <option value="365">Poslední rok</option>
              </Select>
            </HStack>
          </HStack>

          {/* Stats Overview */}
          <SimpleGrid columns={{ base: 1, md: 2, lg: 5 }} spacing={4}>
            <Card bg={bgColor} borderColor={borderColor}>
              <CardBody>
                <Stat>
                  <HStack spacing={2} mb={2}>
                    <Icon as={FiEye} color="blue.500" boxSize={5} />
                    <StatLabel>Zobrazení stránek</StatLabel>
                  </HStack>
                  <StatNumber>{formatNumber(stats?.pageviews?.value)}</StatNumber>
                  <StatHelpText>Celkový počet zobrazení</StatHelpText>
                </Stat>
              </CardBody>
            </Card>

            <Card bg={bgColor} borderColor={borderColor}>
              <CardBody>
                <Stat>
                  <HStack spacing={2} mb={2}>
                    <Icon as={FiUsers} color="green.500" boxSize={5} />
                    <StatLabel>Návštěvníci</StatLabel>
                  </HStack>
                  <StatNumber>{formatNumber(stats?.visitors?.value)}</StatNumber>
                  <StatHelpText>Unikátní návštěvníci</StatHelpText>
                </Stat>
              </CardBody>
            </Card>

            <Card bg={bgColor} borderColor={borderColor}>
              <CardBody>
                <Stat>
                  <HStack spacing={2} mb={2}>
                    <Icon as={FiActivity} color="purple.500" boxSize={5} />
                    <StatLabel>Návštěvy</StatLabel>
                  </HStack>
                  <StatNumber>{formatNumber(stats?.visits?.value)}</StatNumber>
                  <StatHelpText>Celkový počet relací</StatHelpText>
                </Stat>
              </CardBody>
            </Card>

            <Card bg={bgColor} borderColor={borderColor}>
              <CardBody>
                <Stat>
                  <HStack spacing={2} mb={2}>
                    <Icon as={FiPercent} color="orange.500" boxSize={5} />
                    <StatLabel>Míra opuštění</StatLabel>
                  </HStack>
                  <StatNumber>
                    {stats?.bounces?.value && stats?.visits?.value
                      ? `${Math.round((stats.bounces.value / stats.visits.value) * 100)}%`
                      : '0%'}
                  </StatNumber>
                  <StatHelpText>Odchody po 1 stránce</StatHelpText>
                </Stat>
              </CardBody>
            </Card>

            <Card bg={bgColor} borderColor={borderColor}>
              <CardBody>
                <Stat>
                  <HStack spacing={2} mb={2}>
                    <Icon as={FiClock} color="teal.500" boxSize={5} />
                    <StatLabel>Průměrný čas</StatLabel>
                  </HStack>
                  <StatNumber>
                    {formatDuration(
                      stats?.totaltime?.value && stats?.visits?.value
                        ? stats.totaltime.value / stats.visits.value
                        : 0
                    )}
                  </StatNumber>
                  <StatHelpText>Průměrná délka návštěvy</StatHelpText>
                </Stat>
              </CardBody>
            </Card>
          </SimpleGrid>

          {/* Diagnostics Panel */}
          {(!hasData || showDiagnostics) && (
            <Card bg="blue.50" borderColor="blue.300" borderWidth={2}>
              <CardBody>
                <HStack spacing={3} align="start">
                  <Icon as={FiActivity} color="blue.500" boxSize={6} mt={1} />
                  <VStack align="start" spacing={3} flex={1}>
                    <HStack justify="space-between" w="full">
                      <Text fontWeight="bold" color="blue.800" fontSize="lg">Diagnostika analytiky</Text>
                      <Button
                        size="xs"
                        variant="ghost"
                        onClick={() => setShowDiagnostics(!showDiagnostics)}
                      >
                        {showDiagnostics ? 'Skrýt' : 'Zobrazit detaily'}
                      </Button>
                    </HStack>

                    {/* Umami Connection Status */}
                    <Box w="full">
                      <HStack spacing={2} mb={2}>
                        <Badge colorScheme={umamiConfig?.enabled ? 'green' : 'red'}>
                          {umamiConfig?.enabled ? 'Připojeno' : 'Nepřipojeno'}
                        </Badge>
                        <Text fontSize="sm" fontWeight="semibold" color="blue.800">
                          Stav Umami
                        </Text>
                      </HStack>
                      {umamiConfig && (
                        <VStack align="start" spacing={1} pl={4}>
                          <Text fontSize="xs" color="blue.700">
                            <strong>Aktivováno:</strong> {umamiConfig.enabled ? 'Ano' : 'Ne'}
                          </Text>
                          {umamiConfig.website_id && (
                            <Text fontSize="xs" color="blue.700">
                              <strong>Website ID:</strong> {umamiConfig.website_id}
                            </Text>
                          )}
                          {umamiConfig.reason && (
                            <Text fontSize="xs" color="red.600">
                              <strong>Důvod:</strong> {umamiConfig.reason}
                            </Text>
                          )}
                        </VStack>
                      )}
                    </Box>

                    <Divider borderColor="blue.200" />

                    {/* Why No Data */}
                    {!hasData && (
                      <>
                        <Text fontSize="sm" color="blue.800" fontWeight="semibold">
                          Proč nejsou k dispozici žádná data?
                        </Text>
                        <VStack align="start" spacing={1} pl={4}>
                          <Text fontSize="xs" color="blue.700">
                            • Umami tracking ještě nezaznamenal žádné návštěvy
                          </Text>
                          <Text fontSize="xs" color="blue.700">
                            • Tracking script se načítá pouze na veřejných stránkách (ne na /admin)
                          </Text>
                          <Text fontSize="xs" color="blue.700">
                            • Data se aktualizují v reálném čase po návštěvě veřejných stránek
                          </Text>
                        </VStack>

                        <Divider borderColor="blue.200" />

                        <Text fontSize="sm" color="blue.800" fontWeight="semibold">
                          Jak vygenerovat testovací data:
                        </Text>
                        <VStack align="start" spacing={1} pl={4}>
                          <Text fontSize="xs" color="blue.700">
                            1. Otevřete hlavní stránku webu v novém okně inkognito
                          </Text>
                          <Text fontSize="xs" color="blue.700">
                            2. Procházejte několik veřejných stránek (Blog, O klubu, Kontakt...)
                          </Text>
                          <Text fontSize="xs" color="blue.700">
                            3. Počkejte 1-2 minuty a obnovte tuto stránku analytiky
                          </Text>
                        </VStack>

                        <HStack spacing={2} mt={2}>
                          <Button
                            size="sm"
                            colorScheme="blue"
                            leftIcon={<Icon as={FiGlobe} />}
                            onClick={() => window.open('/', '_blank')}
                          >
                            Otevřít hlavní stránku
                          </Button>
                          <Button
                            size="sm"
                            colorScheme="blue"
                            variant="outline"
                            leftIcon={<Icon as={FiZap} />}
                            onClick={() => window.location.reload()}
                          >
                            Obnovit analytiku
                          </Button>
                        </HStack>
                      </>
                    )}
                  </VStack>
                </HStack>
              </CardBody>
            </Card>
          )}

          {/* Error Message */}
          {errorMessage && (
            <Card bg="orange.50" borderColor="orange.300" borderWidth={2}>
              <CardBody>
                <HStack spacing={3} align="start">
                  <Icon as={FiZap} color="orange.500" boxSize={6} mt={1} />
                  <VStack align="start" spacing={2} flex={1}>
                    <Text fontWeight="bold" color="orange.800" fontSize="lg">Analytika není k dispozici</Text>
                    <Text fontSize="sm" color="orange.700">{errorMessage}</Text>
                    <Divider borderColor="orange.200" />
                    <Text fontSize="sm" color="orange.800" fontWeight="semibold">Možné příčiny:</Text>
                    <VStack align="start" spacing={1} pl={4}>
                      <Text fontSize="xs" color="orange.700">• Umami není spuštěno nebo není dostupné</Text>
                      <Text fontSize="xs" color="orange.700">• V Umami instanci neexistuje žádný web</Text>
                      <Text fontSize="xs" color="orange.700">• Nebyly ještě zaznamenány žádné návštěvy</Text>
                      <Text fontSize="xs" color="orange.700">• Chybné přihlašovací údaje v .env souboru</Text>
                    </VStack>
                    <Divider borderColor="orange.200" />
                    <Text fontSize="sm" color="orange.800" fontWeight="semibold">Řešení:</Text>
                    <VStack align="start" spacing={1} pl={4}>
                      <Text fontSize="xs" color="orange.700">
                        1. Zkontrolujte, že Umami běží na <strong>{process.env.REACT_APP_UMAMI_URL || 'nakonfigurované URL'}</strong>
                      </Text>
                      <Text fontSize="xs" color="orange.700">
                        2. Přihlaste se do Umami a vytvořte nový web, pokud žádný neexistuje
                      </Text>
                      <Text fontSize="xs" color="orange.700">
                        3. Restartujte backend server pro opětovné připojení
                      </Text>
                      <Text fontSize="xs" color="orange.700">
                        4. Zkontrolujte backend logy pro detailní chybové zprávy
                      </Text>
                    </VStack>
                    <Button
                      size="sm"
                      colorScheme="orange"
                      variant="outline"
                      leftIcon={<Icon as={FiZap} />}
                      onClick={() => window.location.reload()}
                      mt={2}
                    >
                      Znovu načíst stránku
                    </Button>
                  </VStack>
                </HStack>
              </CardBody>
            </Card>
          )}

          <Divider />

          {/* Country Flags Section */}
          <Card bg={bgColor} borderColor={borderColor}>
            <CardHeader>
              <HStack spacing={2}>
                <Icon as={FiGlobe} color="green.500" boxSize={5} />
                <Heading size="md">Návštěvníci podle zemí</Heading>
              </HStack>
            </CardHeader>
            <CardBody>
              {loading && countryMetrics.length === 0 ? (
                <Flex justify="center" py={8}>
                  <Spinner size="lg" />
                </Flex>
              ) : countryMetrics.length === 0 ? (
                <Text textAlign="center" color="gray.500" py={8}>
                  Žádná data o zemích
                </Text>
              ) : (
                <SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={4}>
                  {countryMetrics.slice(0, 12).map((country, index) => {
                    const countryCode = country.x?.toUpperCase() || '';
                    const countryName = new Intl.DisplayNames(['cs', 'en'], { type: 'region' }).of(countryCode) || countryCode;
                    const flagEmoji = countryCode.length === 2 
                      ? String.fromCodePoint(...[...countryCode].map(c => 0x1F1E6 - 65 + c.charCodeAt(0)))
                      : '🏳️';
                    
                    return (
                      <Card 
                        key={index}
                        variant="outline"
                        cursor="pointer"
                        transition="all 0.2s"
                        _hover={{ 
                          transform: 'translateY(-2px)', 
                          boxShadow: 'md',
                          borderColor: 'blue.400'
                        }}
                        onClick={() => handleCountryClick(countryCode, countryName, country.y)}
                      >
                        <CardBody p={4}>
                          <VStack spacing={2}>
                            <Text fontSize="4xl">{flagEmoji}</Text>
                            <Text fontWeight="semibold" fontSize="sm" noOfLines={1}>
                              {countryName}
                            </Text>
                            <Badge colorScheme="blue" fontSize="sm">
                              {formatNumber(country.y)} návštěv
                            </Badge>
                          </VStack>
                        </CardBody>
                      </Card>
                    );
                  })}
                </SimpleGrid>
              )}
            </CardBody>
          </Card>

          {/* Detailed Metrics */}
          <Tabs colorScheme="blue">
            <TabList flexWrap="wrap">
              <Tab><HStack spacing={2}><Icon as={FiFile} /><Text>Stránky</Text></HStack></Tab>
              <Tab><HStack spacing={2}><Icon as={FiMonitor} /><Text>Prohlížeče</Text></HStack></Tab>
              <Tab><HStack spacing={2}><Icon as={FiCpu} /><Text>Operační systémy</Text></HStack></Tab>
              <Tab><HStack spacing={2}><Icon as={FiGlobe} /><Text>Země</Text></HStack></Tab>
              <Tab><HStack spacing={2}><Icon as={FiSmartphone} /><Text>Zařízení</Text></HStack></Tab>
              <Tab><HStack spacing={2}><Icon as={FiZap} /><Text>Události</Text></HStack></Tab>
              <Tab><HStack spacing={2}><Icon as={FiSearch} /><Text>Query parametry</Text></HStack></Tab>
            </TabList>

            <TabPanels>
              <TabPanel>
                {renderMetricTable(pageMetrics, 'Nejnavštěvovanější stránky')}
              </TabPanel>

              <TabPanel>
                {renderMetricTable(browserMetrics, 'Používané prohlížeče')}
              </TabPanel>

              <TabPanel>{renderMetricTable(osMetrics, 'Operační systémy')}</TabPanel>

              <TabPanel>{renderMetricTable(countryMetrics, 'Země návštěvníků')}</TabPanel>

              <TabPanel>{renderMetricTable(deviceMetrics, 'Typy zařízení')}</TabPanel>

              <TabPanel>
                {renderMetricTable(eventMetrics, 'Události uživatelů', true)}
              </TabPanel>

              <TabPanel>
                {renderMetricTable(queryMetrics, 'Query parametry URL')}
              </TabPanel>
            </TabPanels>
          </Tabs>
        </VStack>
      </Container>

      {/* Country Details Modal */}
      <Modal isOpen={isOpen} onClose={handleModalClose} size="6xl">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>
            <Flex align="center" gap={3}>
              <Text>Analytika pro zemi: {selectedCountry?.name}</Text>
              <Badge colorScheme="blue" fontSize="sm">
                {formatNumber(selectedCountry?.value)} návštěv
              </Badge>
            </Flex>
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}>
            {loadingCountryDetails ? (
              <Flex justify="center" align="center" py={8}>
                <Spinner size="lg" />
                <Text ml={3}>Načítání detailů...</Text>
              </Flex>
            ) : countryDetails ? (
              <Tabs colorScheme="blue">
                <TabList>
                  <Tab>Stránky</Tab>
                  <Tab>Prohlížeče</Tab>
                  <Tab>Operační systémy</Tab>
                  <Tab>Zařízení</Tab>
                  <Tab>Události</Tab>
                </TabList>

                <TabPanels>
                  <TabPanel>
                    {renderMetricTable(countryDetails.pages, `Nejnavštěvovanější stránky v ${selectedCountry?.name}`)}
                  </TabPanel>

                  <TabPanel>
                    {renderMetricTable(countryDetails.browsers, `Používané prohlížeče v ${selectedCountry?.name}`)}
                  </TabPanel>

                  <TabPanel>
                    {renderMetricTable(countryDetails.os, `Operační systémy v ${selectedCountry?.name}`)}
                  </TabPanel>

                  <TabPanel>
                    {renderMetricTable(countryDetails.devices, `Typy zařízení v ${selectedCountry?.name}`)}
                  </TabPanel>

                  <TabPanel>
                    {renderMetricTable(countryDetails.events, `Události uživatelů z ${selectedCountry?.name}`, true)}
                  </TabPanel>
                </TabPanels>
              </Tabs>
            ) : (
              <Box textAlign="center" py={8}>
                <Text color="gray.500">
                  Pro vybranou zemi nejsou k dispozici detailní data.
                </Text>
              </Box>
            )}
          </ModalBody>
        </ModalContent>
      </Modal>
    </AdminLayout>
  );
};

export default AnalyticsAdminPage;
