import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Container } from "@/components/Container";
import { PageHero } from "@/components/layout/PageHero";
import { ProductTabs } from "@/components/product/ProductTabs";
import { Placeholder } from "@/components/Placeholder";
import { blogImage, fetchBlog } from "@/lib/blog";
import { fetchComments } from "@/lib/comments";
import { getBlogPost } from "@/lib/data";
import { formatFaDate } from "@/lib/format";

export const revalidate = 60;

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const apiPost = await fetchBlog(slug);
  if (apiPost) return { title: apiPost.title, description: apiPost.abstract ?? undefined };
  const local = getBlogPost(slug);
  if (!local) return { title: "مقاله" };
  return { title: local.title, description: local.excerpt };
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const apiPost = await fetchBlog(slug);

  if (apiPost) {
    const comments = await fetchComments("blog", apiPost.id);
    return (
      <>
        <PageHero kicker="Blog" title={apiPost.title} image={blogImage(apiPost)} />
        <section className="py-16 sm:py-24">
          <Container className="max-w-3xl">
            <p className="font-latin text-[12px] tracking-[0.18em] text-muted">
              {formatFaDate(apiPost.publishedAt || apiPost.createdAt)}
            </p>
            {apiPost.abstract ? <p className="mt-6 text-[16px] leading-9 text-muted">{apiPost.abstract}</p> : null}
            {apiPost.mainTextHtml ? (
              <div
                className="rich-text mt-8 text-[16px] leading-9 text-muted"
                dangerouslySetInnerHTML={{ __html: apiPost.mainTextHtml }}
              />
            ) : null}
            <ProductTabs showDescription={false} comments={comments} />
            <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
              بازگشت به مقالات
              <span className="h-px w-10 bg-brand" />
            </Link>
          </Container>
        </section>
      </>
    );
  }

  const post = getBlogPost(slug);
  if (!post) notFound();

  return (
    <>
      <PageHero kicker="Blog" title={post.title} image={post.image} />
      <section className="py-16 sm:py-24">
        <Container className="max-w-3xl">
          <p className="font-latin text-[12px] tracking-[0.18em] text-muted">{post.date}</p>
          <div className="mt-8 space-y-5 text-[16px] leading-9 text-muted">
            {post.body.map((paragraph) => (
              <p key={paragraph}>{paragraph}</p>
            ))}
          </div>
          <div className="mt-8 overflow-hidden rounded-2xl">
            <Placeholder src={post.image} alt={post.title} className="aspect-[16/9] w-full object-cover" />
          </div>
          <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
            بازگشت به مقالات
            <span className="h-px w-10 bg-brand" />
          </Link>
        </Container>
      </section>
    </>
  );
}