'use client'

import { useState } from 'react'
import {
  Box,
  Image,
  Badge,
  Text,
  Stack,
  Heading,
  useColorModeValue,
  Button,
  HStack,
  VStack,
  IconButton,
  Flex,
} from '@chakra-ui/react'
import { BlogPost } from '@/types/blog'
import Link from 'next/link'
import { FiCalendar, FiUser, FiChevronLeft, FiChevronRight } from 'react-icons/fi'
import { renderHtmlContent } from '@/lib/blogUtils'

interface BlogCardProps {
  post: BlogPost;
}

const ImageSlider = ({ images, alt }: { images: string[], alt: string }) => {
  const [currentIndex, setCurrentIndex] = useState(0)

  if (!images || images.length === 0) {
    return (
      <Image
        src="https://via.placeholder.com/800x400?text=Blog+Post"
        alt={alt}
        height="200px"
        width="100%"
        objectFit="cover"
      />
    )
  }

  if (images.length === 1) {
    return (
      <Image
        src={images[0]}
        alt={alt}
        height="200px"
        width="100%"
        objectFit="cover"
        fallbackSrc="https://via.placeholder.com/800x400?text=Blog+Post"
      />
    )
  }

  const nextImage = () => {
    setCurrentIndex((prev) => (prev + 1) % images.length)
  }

  const prevImage = () => {
    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length)
  }

  return (
    <Box position="relative" height="200px" overflow="hidden">
      <Image
        src={images[currentIndex]}
        alt={`${alt} - Image ${currentIndex + 1}`}
        height="200px"
        width="100%"
        objectFit="cover"
        fallbackSrc="https://via.placeholder.com/800x400?text=Blog+Post"
      />

      {/* Navigation arrows */}
      <IconButton
        aria-label="Previous image"
        icon={<FiChevronLeft />}
        position="absolute"
        left={2}
        top="50%"
        transform="translateY(-50%)"
        bg="blackAlpha.600"
        color="white"
        size="sm"
        _hover={{ bg: "blackAlpha.800" }}
        onClick={(e) => {
          e.preventDefault()
          e.stopPropagation()
          prevImage()
        }}
      />
      <IconButton
        aria-label="Next image"
        icon={<FiChevronRight />}
        position="absolute"
        right={2}
        top="50%"
        transform="translateY(-50%)"
        bg="blackAlpha.600"
        color="white"
        size="sm"
        _hover={{ bg: "blackAlpha.800" }}
        onClick={(e) => {
          e.preventDefault()
          e.stopPropagation()
          nextImage()
        }}
      />

      {/* Dots indicator */}
      <Flex
        position="absolute"
        bottom={2}
        left="50%"
        transform="translateX(-50%)"
        gap={1}
      >
        {images.map((_, index) => (
          <Box
            key={index}
            w={2}
            h={2}
            bg={index === currentIndex ? "white" : "whiteAlpha.600"}
            borderRadius="full"
            cursor="pointer"
            onClick={(e) => {
              e.preventDefault()
              e.stopPropagation()
              setCurrentIndex(index)
            }}
          />
        ))}
      </Flex>
    </Box>
  )
}

export default function BlogCard({ post }: BlogCardProps) {
  const cardBg = useColorModeValue('white', 'gray.800')
  const textColor = useColorModeValue('gray.600', 'gray.300')
  const accentColor = '#043F51'

  // Use slug if available, otherwise fall back to ID
  const postUrl = post.slug ? `/${post.slug}` : `/${post.id}`

  return (
    <Link href={postUrl} passHref>
      <Box
        as="a"
        bg={cardBg}
        boxShadow="lg"
        borderRadius="xl"
        overflow="hidden"
        transition="all 0.3s"
        cursor="pointer"
        _hover={{
          transform: 'translateY(-4px)',
          boxShadow: '2xl'
        }}
        display="block"
        textDecoration="none"
        _focus={{
          outline: '2px solid',
          outlineColor: accentColor,
          outlineOffset: '2px'
        }}
      >
        <ImageSlider
          images={post.imageUrls || (post.imageUrl ? [post.imageUrl] : [])}
          alt={post.title}
        />

        <VStack p={6} spacing={4} align="start">
          <Badge bg={accentColor} color="white" variant="solid">
            Članak
          </Badge>

          <Heading
            size="md"
            color={useColorModeValue('gray.700', 'white')}
            lineHeight="tall"
            noOfLines={2}
          >
            {post.title}
          </Heading>

          <Text
            color={textColor}
            noOfLines={3}
            lineHeight="tall"
            dangerouslySetInnerHTML={renderHtmlContent(post.excerpt)}
          />

          <HStack spacing={4} fontSize="sm" color={textColor}>
            <HStack spacing={1}>
              <FiUser />
              <Text>
                {post.creator?.firstName && post.creator?.lastName
                  ? `${post.creator.firstName} ${post.creator.lastName}`
                  : post.author || 'AKTIV'}
              </Text>
            </HStack>
            <HStack spacing={1}>
              <FiCalendar />
              <Text>
                {(() => {
                  const dateStr = post.createdAt || post.publishedAt || post.creator?.createdAt
                  return dateStr ? new Date(dateStr).toLocaleDateString('sr-RS') : 'N/A'
                })()}
              </Text>
            </HStack>
          </HStack>

          <Text
            color={accentColor}
            fontSize="sm"
            fontWeight="medium"
            _hover={{ textDecoration: 'underline' }}
          >
            Pročitaj više →
          </Text>
        </VStack>
      </Box>
    </Link>
  )
}