import { Box, Heading, SimpleGrid, useBreakpointValue } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import api from '../services/api';
import { ClubSearch } from '../components/facr/ClubSearch';
import { MatchesWidget } from '../components/widgets/MatchesWidget';
import { TeamsWidget } from '../components/widgets/TeamsWidget';
import { ArticlesWidget } from '../components/widgets/ArticlesWidget';
import { SponsorsWidget } from '../components/widgets/SponsorsWidget';
import { VisitorsWidget } from '../components/widgets/VisitorsWidget';

const DashboardPage = () => {
  const { data: stats, isLoading } = useQuery({
    queryKey: ['dashboardStats'],
    queryFn: async () => {
      const response = await api.get('/dashboard/stats');
      return response.data;
    },
  });

  const templateColumns = useBreakpointValue({
    base: '1fr',
    md: 'repeat(2, 1fr)',
    lg: 'repeat(3, 1fr)',
    xl: 'repeat(12, 1fr)',
  });

  return (
    <Box p={{ base: 4, lg: 6 }}>
      <Heading as="h1" size="xl" mb={6}>
        Nástěnka
      </Heading>
      
      {/* Stats Overview */}
      <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={4} mb={6}>
        <Box 
          bg="white" 
          p={4} 
          borderRadius="lg" 
          borderWidth="1px"
          boxShadow="sm"
          _hover={{ boxShadow: 'md' }}
          transition="all 0.2s"
        >
          <Box fontSize="sm" color="gray.500" mb={1}>Návštěvníci dnes</Box>
          <Box fontSize="2xl" fontWeight="bold">
            {isLoading ? '...' : stats?.visitorsToday?.toLocaleString() || '0'}
          </Box>
          <Box fontSize="xs" color="green.500" mt={1}>
            +12% oproti včerejšku
          </Box>
        </Box>
        
        <Box 
          bg="white" 
          p={4} 
          borderRadius="lg" 
          borderWidth="1px"
          boxShadow="sm"
          _hover={{ boxShadow: 'md' }}
          transition="all 0.2s"
        >
          <Box fontSize="sm" color="gray.500" mb={1}>Nové zprávy</Box>
          <Box fontSize="2xl" fontWeight="bold">
            {isLoading ? '...' : stats?.newMessages || '0'}
          </Box>
          <Box fontSize="xs" color="gray.500" mt={1}>
            Zatím nevyřízeno
          </Box>
        </Box>
        
        <Box 
          bg="white" 
          p={4} 
          borderRadius="lg" 
          borderWidth="1px"
          boxShadow="sm"
          _hover={{ boxShadow: 'md' }}
          transition="all 0.2s"
        >
          <Box fontSize="sm" color="gray.500" mb={1}>Nedávné články</Box>
          <Box fontSize="2xl" fontWeight="bold">
            {isLoading ? '...' : stats?.recentArticles || '0'}
          </Box>
          <Box fontSize="xs" color="gray.500" mt={1}>
            Za posledních 7 dní
          </Box>
        </Box>
        
        <Box 
          bg="white" 
          p={4} 
          borderRadius="lg" 
          borderWidth="1px"
          boxShadow="sm"
          _hover={{ boxShadow: 'md' }}
          transition="all 0.2s"
        >
          <Box fontSize="sm" color="gray.500" mb={1}>Aktivní uživatelé</Box>
          <Box fontSize="2xl" fontWeight="bold">
            {isLoading ? '...' : stats?.activeUsers || '0'}
          </Box>
          <Box fontSize="xs" color="gray.500" mt={1}>
            Právě online
          </Box>
        </Box>
      </SimpleGrid>

      {/* Main Content */}
      <Box 
        display="grid" 
        gap={6} 
        gridTemplateColumns={templateColumns}
        gridTemplateAreas={{
          base: `
            "visitors"
            "matches"
            "teams"
            "articles"
            "sponsors"
          `,
          lg: `
            "visitors visitors matches matches matches"
            "teams teams teams articles articles"
            "sponsors sponsors sponsors sponsors sponsors"
          `,
          xl: `
            "visitors visitors visitors matches matches matches matches matches"
            "teams teams teams teams articles articles articles articles"
            "sponsors sponsors sponsors sponsors sponsors sponsors sponsors sponsors"
          `,
        }}
      >
        <Box gridArea="visitors">
          <VisitorsWidget />
        </Box>
        
        <Box gridArea="matches">
          <MatchesWidget />
        </Box>
        
        <Box gridArea="teams">
          <TeamsWidget />
        </Box>
        
        <Box gridArea="articles">
          <ArticlesWidget />
        </Box>
        
        <Box gridArea="sponsors" mt={{ base: 0, lg: 4 }}>
          <SponsorsWidget />
        </Box>
      </Box>
      
      {/* Club Search */}
      <Box mt={8}>
        <Heading size="md" mb={4}>Vyhledat klub FACR</Heading>
        <ClubSearch />
      </Box>
    </Box>
  );
};

export default DashboardPage;
