'use client'

console.log('BlogList.tsx file loaded')

import { useEffect } from 'react'
import {
  SimpleGrid,
  Spinner,
  Alert,
  AlertIcon,
  VStack,
  Container,
  Heading,
  Text,
  useColorModeValue,
  Button,
} from '@chakra-ui/react'
import { useDispatch, useSelector } from 'react-redux'
import { AppDispatch, RootState } from '@/store'
import { fetchPosts } from '@/store/slices/blogSlice'
import BlogCard from './BlogCard'

export default function BlogList() {
  const dispatch = useDispatch<AppDispatch>()
  const { posts, loading, error } = useSelector((state: RootState) => state.blog)

  useEffect(() => {
    console.log('BlogList mounted, dispatching fetchPosts...')
    dispatch(fetchPosts())
  }, [dispatch])

  console.log('BlogList render - loading:', loading, 'error:', error, 'posts:', posts.length)

  if (loading) {
    return (
      <Container maxW="6xl" py={20}>
        <VStack spacing={8}>
          <Spinner size="xl" color="brand.500" thickness="4px" />
          <Text>Učitavanje članaka...</Text>
        </VStack>
      </Container>
    )
  }

  if (error) {
    return (
      <Container maxW="6xl" py={20}>
        <Alert status="error" borderRadius="lg">
          <AlertIcon />
          Greška pri učitavanju članaka: {error}
        </Alert>
      </Container>
    )
  }

  return (
    <Container maxW="6xl" py={20}>
      <VStack spacing={12} mb={12}>
        <VStack spacing={4} textAlign="center">
          <Heading
            fontSize={{ base: '2xl', sm: '4xl' }}
            fontWeight="bold"
            color={useColorModeValue('gray.700', 'white')}
          >
            AKTIV Blog
          </Heading>
          <Text
            fontSize="xl"
            color={useColorModeValue('gray.600', 'gray.400')}
            maxW="2xl"
          >
            Najnovije vesti, saveti i insights iz sveta knjigovodstva i poslovnih rešenja
          </Text>
        </VStack>
      </VStack>

      {posts.length === 0 ? (
        <VStack spacing={4} py={20}>
          <Text fontSize="lg" color={useColorModeValue('gray.600', 'gray.400')}>
            Trenutno nema dostupnih članaka.
          </Text>
        </VStack>
      ) : (
        <SimpleGrid
          columns={{ base: 1, md: 2, lg: 3 }}
          spacing={8}
        >
          {posts.map((post) => (
            <BlogCard key={post.id} post={post} />
          ))}
        </SimpleGrid>
      )}
    </Container>
  )
}