import React from 'react';
import { Box, Container, Grid, GridItem, VStack, HStack, Image, Heading, Text, Icon, Button } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import BlogSwiper from './BlogSwiper';
import { getArticles, Article } from '../../services/articles';
import { Link as RouterLink } from 'react-router-dom';
import { useClubTheme } from '../../contexts/ClubThemeContext';
import UpcomingSwitch from './UpcomingSwitch';
import { ChevronRightIcon } from '@chakra-ui/icons';

const RailItem: React.FC<{ a: Article }>=({ a })=>{
  return (
    <HStack
      as={RouterLink}
      to={`/articles/${a.id}`}
      spacing={3}
      align="center"
      px={3}
      py={2}
      borderRadius="md"
      _hover={{ bg: 'whiteAlpha.200' }}
      transition="background 0.2s"
    >
      <Box position="relative" flexShrink={0}>
        <Image src={a.image_url || '/stadium-placeholder.jpg'} alt={a.title} boxSize="64px" objectFit="cover" borderRadius="md" />
      </Box>
      <VStack spacing={0} align="start" minW={0}>
        <Text fontSize="xs" color="whiteAlpha.700">{new Date(a.created_at || '').toLocaleDateString()}</Text>
        <Text fontWeight={600} noOfLines={2} color="white">{a.title}</Text>
      </VStack>
      <ChevronRightIcon color="whiteAlpha.700" ml="auto" />
    </HStack>
  );
}

const HeroWithRail: React.FC = () => {
  const theme = useClubTheme();

  const { data, isLoading } = useQuery({
    queryKey: ['hero-rail-articles', { page: 1, page_size: 8, published: true }],
    queryFn: () => getArticles({ page: 1, page_size: 8, published: true }),
  });

  const articles = data?.data || [];

  return (
    <Box position="relative">
      {/* Hero */}
      <Grid templateColumns={{ base: '1fr', lg: '2fr 1fr' }} gap={6}>
        <GridItem>
          <BlogSwiper />
        </GridItem>
        {/* Right rail */}
        <GridItem display={{ base: 'none', lg: 'block' }}>
          <Box
            h={{ base: 'auto', lg: '600px' }}
            bg="blackAlpha.600"
            borderRadius="xl"
            overflow="hidden"
            backdropFilter="auto"
            backdropBlur="8px"
            border="1px solid"
            borderColor="whiteAlpha.200"
          >
            <VStack align="stretch" spacing={0} h="100%">
              <HStack justify="space-between" px={4} py={3} borderBottom="1px solid" borderColor="whiteAlpha.200">
                <Text fontWeight="700" color="white">Novinky</Text>
                <Button as={RouterLink} to="/blog" size="sm" variant="ghost" color="whiteAlpha.800" _hover={{ bg: 'whiteAlpha.200' }}>Vše</Button>
              </HStack>
              <VStack spacing={1} align="stretch" px={2} py={2} overflowY="auto">
                {isLoading && Array.from({length:5}).map((_,i)=> (
                  <Box key={i} h="72px" borderRadius="md" bg="whiteAlpha.200" />
                ))}
                {!isLoading && articles.map((a) => (
                  <RailItem key={a.id} a={a} />
                ))}
              </VStack>
            </VStack>
          </Box>
        </GridItem>
      </Grid>

      {/* Glasmorphic upcoming panel */}
      <Box
        position="absolute"
        left="50%"
        bottom={{ base: 2, md: 4 }}
        transform="translateX(-50%)"
        w={{ base: '95%', md: '80%' }}
        bg="whiteAlpha.200"
        backdropFilter="auto"
        backdropBlur="10px"
        border="1px solid"
        borderColor="whiteAlpha.300"
        borderRadius="xl"
        px={{ base: 3, md: 6 }}
        py={{ base: 3, md: 4 }}
        boxShadow="lg"
      >
        <UpcomingSwitch />
      </Box>
    </Box>
  );
};

export default HeroWithRail;
