'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useState } from 'react';

import { Banner } from '@/components/Banner/Banner';

import bannerImage from './assets/banner.svg';

import styles from './page.module.scss';

interface BlogPost {
  title: string;
  date: string;
  permalink: string;
  excerpt: string;
  tag: string[];
  category: string[];
  profile: string[];
}

export default function BlogPage() {
  const [posts, setPosts] = useState<BlogPost[]>([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [totalPosts, setTotalPosts] = useState(0);

  const limit = 12;

  const fetchPosts = async (page: number) => {
    setLoading(true);

    try {
      const res = await fetch(`/api-next/blog?page=${page}&limit=${limit}`);
      const data = await res.json();
      setPosts((prev) => [...prev, ...data.posts]);
      setTotalPosts(data.total);
    } catch (error) {
      console.error('Failed to load posts:', error);
    }

    setLoading(false);
  };

  useEffect(() => {
    fetchPosts(1);
  }, []);

  const handleLoadMore = () => {
    setPage((prev) => prev + 1);
  };

  useEffect(() => {
    if (page > 1) fetchPosts(page);
  }, [page]);

  return (
    <div>
      <div className={styles.banner}>
        <Banner
          title="博客"
          image={
            <Image
              className={styles.banner_image}
              src={bannerImage}
              alt={''}
              height={200}
            />
          }
        />
      </div>
      <div className={styles.container}>
        <div className={styles.cards}>
          {posts.map((post) => (
            <div key={post.permalink} className={styles.card}>
              <div className={styles.category}>{post.category[0]}</div>
              <Link href={post.permalink}>
                <h4>{post.title}</h4>
              </Link>
              <p>{post.excerpt}</p>
              <div className={styles.info}>
                <div>{post.profile.join(' ')}</div>
                <div>{post.date}</div>
                <div>{post.tag.join(' | ')}</div>
              </div>
            </div>
          ))}
        </div>
        {(posts.length < totalPosts) && !loading && (
          <div className={styles.load}>
            <button onClick={handleLoadMore}>Load More</button>
          </div>
        )}
        {loading && <p className={styles.load}>Loading...</p>}
      </div>
    </div>
  );
}