import { Box, Grid, GridItem, Heading, Image, Text, VStack, HStack, Button, Skeleton, Badge } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { getArticles, Article } from '../../services/articles';
import { Link as RouterLink } from 'react-router-dom';
import { assetUrl } from '../../utils/url';
import { useClubTheme } from '../../contexts/ClubThemeContext';
import { Eye, Clock } from 'lucide-react';

const FeaturedBlog: React.FC = () => {
  const { data, isLoading } = useQuery({
    queryKey: ['articles', { page: 1, page_size: 3, published: true }],
    queryFn: () => getArticles({ page: 1, page_size: 3, published: true }),
  });
  const theme = useClubTheme();
  const articles = data?.data || [];

  if (isLoading) return <Skeleton height="320px" />;

  const [main, side1, side2] = [articles[0], articles[1], articles[2]];

  return (
    <Box>
      <HStack justify="space-between" mb={3}>
        <Heading size="lg">Aktuality</Heading>
        <Button as={RouterLink} to="/blog" size="sm" variant="link">Všechny články</Button>
      </HStack>
      <Grid templateColumns={{ base: '1fr', md: '2fr 1fr' }} gap={4}>
        <GridItem>
          {main && (
            <Box as={RouterLink} to={main.slug ? `/news/${main.slug}` : `/articles/${main.id}`} position="relative" overflow="hidden" borderRadius="xl">
              <Image src={assetUrl(main.image_url) || '/logo192.png'} alt={main.title} w="100%" h={{ base: '220px', md: '320px' }} objectFit="cover" />
              <Box position="absolute" inset={0} bgGradient="linear(to-t, rgba(0,0,0,0.7), rgba(0,0,0,0.1))" />
              {/* Stats badges */}
              {((main.read_time || main.estimated_read_minutes) || (main.view_count && main.view_count > 0)) && (
                <HStack position="absolute" top={3} right={3} spacing={2}>
                  {(main.read_time || main.estimated_read_minutes) && (
                    <Badge display="flex" alignItems="center" gap={1} bg="rgba(0,0,0,0.7)" color="white" fontSize="xs" px={2} py={1}>
                      <Clock size={12} />
                      {main.read_time || main.estimated_read_minutes} min
                    </Badge>
                  )}
                  {main.view_count && main.view_count > 0 && (
                    <Badge display="flex" alignItems="center" gap={1} bg="rgba(0,0,0,0.7)" color="white" fontSize="xs" px={2} py={1}>
                      <Eye size={12} />
                      {main.view_count}
                    </Badge>
                  )}
                </HStack>
              )}
              <VStack align="stretch" spacing={2} position="absolute" bottom={0} p={4} color="white">
                <Text fontSize="xs" bg={theme.secondary} color="black" px={2} py={0.5} borderRadius="md" w="fit-content">Novinka</Text>
                <Heading size="md">{main.title}</Heading>
              </VStack>
            </Box>
          )}
        </GridItem>
        <GridItem>
          <VStack spacing={4} align="stretch">
            {[side1, side2].filter(Boolean).map((a) => (
              <HStack key={(a as Article).id} align="stretch" spacing={3} as={RouterLink} to={(a as Article).slug ? `/news/${(a as Article).slug}` : `/articles/${(a as Article).id}`}>
                <Image src={assetUrl((a as Article).image_url) || '/logo192.png'} alt={(a as Article).title} w="40%" h="120px" objectFit="cover" borderRadius="lg" />
                <VStack align="stretch" spacing={2} flex={1}>
                  <HStack spacing={2} flexWrap="wrap">
                    {((a as Article).read_time || (a as Article).estimated_read_minutes) && (
                      <HStack spacing={1}>
                        <Clock size={12} color="gray" />
                        <Text fontSize="xs" color="gray.500">
                          {(a as Article).read_time || (a as Article).estimated_read_minutes} min
                        </Text>
                      </HStack>
                    )}
                    {(a as Article).view_count && (a as Article).view_count! > 0 && (
                      <HStack spacing={1}>
                        <Eye size={12} color="gray" />
                        <Text fontSize="xs" color="gray.500">
                          {(a as Article).view_count}
                        </Text>
                      </HStack>
                    )}
                  </HStack>
                  <Heading size="sm" noOfLines={3}>{(a as Article).title}</Heading>
                </VStack>
              </HStack>
            ))}
          </VStack>
        </GridItem>
      </Grid>
    </Box>
  );
};

export default FeaturedBlog;
