import type { Metadata } from "next";
import Image from "next/image";
import { notFound } from "next/navigation";
import { getBlogById } from "@/lib/meshkee/api";
import { formatDate } from "@/lib/meshkee/format";

type PageProps = {
  params: Promise<{ id: string; slug: string }>;
};

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { id } = await params;
  try {
    const post = await getBlogById(id);
    return {
      title: `${post.title} | مبلمان هومت`,
      description: post.abstract || post.title,
    };
  } catch {
    return { title: "مقاله | مبلمان هومت" };
  }
}

export default async function BlogDetailPage({ params }: PageProps) {
  const { id } = await params;
  let post;
  try {
    post = await getBlogById(id);
  } catch {
    notFound();
  }

  return (
    <main className="container">
      <article className="blog-detail">
        <section className="page-hero">
          <p className="eyebrow">{post.categoryName || "Article"}</p>
          <h1>{post.title}</h1>
          <time>{formatDate(post.publishedAt || post.createdAt)}</time>
        </section>

        {post.titleImageUrl ? (
          <div className="blog-detail-cover">
            <Image
              src={post.titleImageUrl}
              alt={post.title}
              width={1200}
              height={720}
              priority
            />
          </div>
        ) : null}

        {post.abstract ? <p className="blog-abstract">{post.abstract}</p> : null}

        {post.mainTextHtml ? (
          <div
            className="rich-html blog-content"
            dangerouslySetInnerHTML={{ __html: post.mainTextHtml }}
          />
        ) : (
          <p className="empty-note">متن مقاله در دسترس نیست.</p>
        )}
      </article>
    </main>
  );
}