import { Box, Container, Grid, HStack, Heading, Image, Stack, Text } from "@chakra-ui/react";
import { ArrowRight, CalendarDays } from "lucide-react";
import type { Settings } from "../../data/content";
import { Footer } from "./Footer";
import { Header } from "./Header";
import { Provider } from "./Provider";
import { WhatsAppFab } from "./WhatsAppFab";

export type BlogListItem = {
  slug: string;
  title: string;
  excerpt: string | null;
  coverImage: string | null;
  dateLabel: string;
};

export function BlogIndex({ posts, settings }: { posts: BlogListItem[]; settings: Settings }) {
  const [featured, ...rest] = posts;

  return (
    <Provider>
      <Header settings={settings} />
      <Box as="main" py={{ base: 14, md: 20 }} minH="60vh">
        <Container maxW="1200px" px={{ base: 5, md: 8 }}>
          <Stack gap="5" mb={{ base: 10, md: 14 }} pb={{ base: 8, md: 10 }} borderBottomWidth="2px" borderColor="ink">
            <HStack gap="3" color="brand.700">
              <Box w="8" h="2px" bg="brand.500" />
              <Text fontSize="xs" fontWeight="700" letterSpacing="0.2em">
                BLOG
              </Text>
            </HStack>
            <Heading as="h1" fontSize={{ base: "4xl", md: "6xl" }} fontWeight="900" letterSpacing="-0.01em" color="ink">
              太陽能知識庫
            </Heading>
            <Text fontSize={{ base: "md", md: "lg" }} color="fg.muted" maxW="2xl">
              村屋太陽能嘅實用資訊、安裝心得同回本分析，幫你更了解點樣善用天台。
            </Text>
          </Stack>

          {posts.length === 0 ? (
            <Text color="fg.muted">暫時未有文章，敬請期待。</Text>
          ) : (
            <Stack gap={{ base: 10, md: 14 }}>
              {/* 最新文章 featured */}
              <Grid
                asChild
                templateColumns={{ base: "1fr", md: "1fr 1fr" }}
                gap={{ base: 5, md: 10 }}
                alignItems="center"
                role="group"
                cursor="pointer"
              >
                <a href={`/blog/${featured.slug}`}>
                  {featured.coverImage && (
                    <Box overflow="hidden">
                      <Image
                        src={featured.coverImage}
                        alt={featured.title}
                        w="full"
                        aspectRatio="16 / 10"
                        objectFit="cover"
                        loading="eager"
                        decoding="async"
                        transition="transform .5s"
                        _groupHover={{ transform: "scale(1.03)" }}
                      />
                    </Box>
                  )}
                  <Stack gap="3">
                    <HStack gap="2" fontSize="xs" letterSpacing="0.1em" color="fg.muted" fontWeight="medium">
                      <CalendarDays size={13} />
                      {featured.dateLabel}
                    </HStack>
                    <Heading as="h2" fontSize={{ base: "xl", md: "3xl" }} fontWeight="900" color="ink" lineHeight="1.3" _groupHover={{ color: "brand.700" }} transition="color .2s">
                      {featured.title}
                    </Heading>
                    {featured.excerpt && (
                      <Text fontSize="sm" color="fg.muted" lineHeight="1.9">
                        {featured.excerpt}
                      </Text>
                    )}
                    <Text color="brand.700" fontWeight="600" fontSize="sm">
                      閱讀更多 <ArrowRight size={14} style={{ display: "inline", verticalAlign: "-2px" }} />
                    </Text>
                  </Stack>
                </a>
              </Grid>

              {/* 其餘文章：髮絲線清單 */}
              {rest.length > 0 && (
                <Stack gap="0" borderTopWidth="1px" borderColor="border.subtle">
                  {rest.map((post) => (
                    <Grid
                      key={post.slug}
                      asChild
                      templateColumns={{ base: "1fr", md: "140px 1fr auto" }}
                      gap={{ base: 2, md: 8 }}
                      alignItems={{ md: "center" }}
                      py={{ base: 5, md: 6 }}
                      borderBottomWidth="1px"
                      borderColor="border.subtle"
                      role="group"
                      cursor="pointer"
                    >
                      <a href={`/blog/${post.slug}`}>
                        <HStack gap="2" fontSize="xs" letterSpacing="0.08em" color="fg.muted" fontWeight="medium">
                          <CalendarDays size={13} />
                          {post.dateLabel}
                        </HStack>
                        <Stack gap="1">
                          <Heading as="h2" fontSize={{ base: "lg", md: "xl" }} fontWeight="700" color="ink" lineHeight="1.4" _groupHover={{ color: "brand.700" }} transition="color .2s">
                            {post.title}
                          </Heading>
                          {post.excerpt && (
                            <Text fontSize="sm" color="fg.muted" lineHeight="1.7" lineClamp={2}>
                              {post.excerpt}
                            </Text>
                          )}
                        </Stack>
                        <Box
                          color="brand.700"
                          opacity={{ base: 1, md: 0 }}
                          transform={{ md: "translateX(-6px)" }}
                          transition="all .2s"
                          _groupHover={{ opacity: 1, transform: "translateX(0)" }}
                        >
                          <ArrowRight size={20} />
                        </Box>
                      </a>
                    </Grid>
                  ))}
                </Stack>
              )}
            </Stack>
          )}
        </Container>
      </Box>
      <Footer settings={settings} />
      <WhatsAppFab settings={settings} />
    </Provider>
  );
}