import type { Metadata } from "next";
import Link from "next/link";
import { Container } from "@/components/Container";
import { PageHero } from "@/components/layout/PageHero";
import { Placeholder } from "@/components/Placeholder";
import { blogHref, blogImage, fetchBlogs } from "@/lib/blog";
import { blogPosts } from "@/lib/data";
import { faDigits, formatFaDate } from "@/lib/format";

export const revalidate = 60;

export const metadata: Metadata = {
  title: "مقالات",
  description: "نکته‌هایی از تعمیرگاه و بورس قطعات لوازم خانگی برادران برقعی.",
};

export default async function BlogPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page: pageParam } = await searchParams;
  const page = Math.max(1, Number(pageParam) || 1);
  const result = await fetchBlogs({ page, pageSize: 12 });
  const usingApi = result.items.length > 0;
  const pageCount = usingApi
    ? Math.max(1, Math.ceil((result.total || result.items.length) / (result.pageSize || 12)))
    : 1;

  return (
    <>
      <PageHero kicker="Blog" title="مقالات" image="/images/slides/slide-2.jpg" />
      <section className="py-16 sm:py-24">
        <Container>
          {usingApi ? (
            <>
              <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
                {result.items.map((post) => (
                  <Link key={post.id} href={blogHref(post)} className="group block">
                    <div className="overflow-hidden rounded-2xl">
                      <Placeholder
                        src={blogImage(post)}
                        alt={post.title}
                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
                      />
                    </div>
                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">
                      {formatFaDate(post.publishedAt || post.createdAt)}
                    </p>
                    <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
                    {post.abstract ? (
                      <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.abstract}</p>
                    ) : null}
                  </Link>
                ))}
              </div>
              {pageCount > 1 ? (
                <div className="mt-10 flex justify-center gap-2">
                  {Array.from({ length: pageCount }, (_, index) => {
                    const number = index + 1;
                    return (
                      <Link
                        key={number}
                        href={`/blog?page=${number}`}
                        className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
                      >
                        {faDigits(number)}
                      </Link>
                    );
                  })}
                </div>
              ) : null}
            </>
          ) : (
            <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
              {blogPosts.map((post) => (
                <Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
                  <div className="overflow-hidden rounded-2xl">
                    <Placeholder
                      src={post.image}
                      alt={post.title}
                      className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                  </div>
                  <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
                  <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
                  <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
                </Link>
              ))}
            </div>
          )}
        </Container>
      </section>
    </>
  );
}