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

export const revalidate = 60;

export const metadata: Metadata = {
  title: "مجله سلامت | داروخانه دکتر ارجمند",
};

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 pageCount = Math.max(1, Math.ceil((result.total || result.items.length) / (result.pageSize || 12)));

  return (
    <section className="pt-8">
      <Container>
        <p className="text-[13px] text-muted">
          <Link href="/" className="hover:text-primary">خانه</Link>
          <span className="mx-2">/</span>
          مجله سلامت
        </p>
        <h1 className="mt-2 text-[22px] font-bold text-navy">مجله سلامت</h1>

        {result.items.length === 0 ? (
          <div className="mt-8 rounded-2xl bg-white px-6 py-16 text-center">
            <p className="text-[15px] font-bold text-navy">مطلبی منتشر نشده است</p>
            <p className="mt-2 text-[13px] text-muted">پس از انتشار مقاله در پنل Meshkee، اینجا نمایش داده می‌شود.</p>
          </div>
        ) : (
          <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {result.items.map((post) => (
              <article key={post.id} className="overflow-hidden rounded-2xl bg-white">
                <Link href={blogHref(post)} className="block overflow-hidden bg-sky">
                  <Placeholder src={blogImage(post)} className="aspect-[16/10] w-full object-cover" />
                </Link>
                <div className="p-4">
                  <p className="text-[12px] text-muted">{formatFaDate(post.publishedAt || post.createdAt)}</p>
                  <h2 className="mt-2 text-[15px] font-bold leading-7 text-navy">
                    <Link href={blogHref(post)}>{post.title}</Link>
                  </h2>
                  {post.abstract ? <p className="mt-2 line-clamp-3 text-[13px] leading-6 text-muted">{post.abstract}</p> : null}
                </div>
              </article>
            ))}
          </div>
        )}

        {pageCount > 1 && result.items.length > 0 ? (
          <div className="mt-8 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-primary text-white" : "bg-white text-navy"}`}
                >
                  {faDigits(number)}
                </Link>
              );
            })}
          </div>
        ) : null}
      </Container>
    </section>
  );
}