import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { CalendarDays, UserRound } from "lucide-react";
import { notFound, redirect } from "next/navigation";
import { CommentsPanel } from "@/components/entity-comments";
import {
  blogUrl,
  formatPersianDate,
  getBlogById,
  getBlogs,
  getComments,
  plainText,
  sanitizeCmsContent,
  slugifyFa,
} from "@/lib/meshkee";

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

export async function generateStaticParams() {
  const data = await getBlogs({ pageSize: 50 }).catch(() => ({ items: [] }));
  return data.items.map((blog) => ({ id: blog.id, slug: slugifyFa(blog.title) }));
}

export async function generateMetadata({ params }: BlogDetailProps): Promise<Metadata> {
  const { id } = await params;
  const data = await getBlogById(id).catch(() => null);
  if (!data) return { title: "مقاله یافت نشد", robots: { index: false } };

  const { blog } = data;
  const description =
    plainText(blog.abstract || blog.mainTextHtml).slice(0, 155) ||
    `مطالعه مقاله ${blog.title} در مجله گلسموند.`;
  const canonical = blogUrl(blog);

  return {
    title: blog.title,
    description,
    alternates: { canonical },
    openGraph: {
      title: blog.title,
      description,
      type: "article",
      publishedTime: blog.publishedAt,
      url: canonical,
      images: blog.titleImageUrl ? [blog.titleImageUrl] : [],
    },
  };
}

export default async function BlogDetailPage({ params }: BlogDetailProps) {
  const { id, slug } = await params;
  const data = await getBlogById(id).catch(() => null);
  if (!data) notFound();

  const { blog } = data;
  const canonical = blogUrl(blog);
  const expectedSlug = canonical.split("/").at(-1) || "";
  let currentSlug = slug;
  try {
    currentSlug = decodeURIComponent(slug);
  } catch {
    currentSlug = slug;
  }
  if (currentSlug !== expectedSlug) redirect(encodeURI(canonical));

  const comments = await getComments("blog", blog.id);
  const content = sanitizeCmsContent(blog.mainTextHtml, blog.title);
  const authorName = [blog.author?.firstName, blog.author?.lastName].filter(Boolean).join(" ");

  return (
    <article className="blog-detail">
      <header className="blog-detail-header">
        <div className="container">
          <nav className="detail-breadcrumbs light" aria-label="مسیر صفحه">
            <Link href="/">صفحه اصلی</Link>
            <span>/</span>
            <Link href="/blog">مجله</Link>
            <span>/</span>
            <b>{blog.title}</b>
          </nav>
          <span className="page-hero-label">GLASSMOND JOURNAL</span>
          <h1>{blog.title}</h1>
          <div className="blog-meta">
            <span><CalendarDays />{formatPersianDate(blog.publishedAt)}</span>
            {authorName && <span><UserRound />{authorName}</span>}
          </div>
        </div>
      </header>

      <div className="container blog-detail-image">
        <Image
          src={blog.titleImageUrl || "/images/articles/decorative-mirrors.jpg"}
          alt={blog.title}
          fill
          sizes="(max-width: 900px) 100vw, 1100px"
          priority
        />
      </div>

      <div className="container blog-content-wrap">
        {blog.abstract && <p className="blog-lead">{blog.abstract}</p>}
        <div className="cms-content" dangerouslySetInnerHTML={{ __html: content }} />
      </div>

      <section className="blog-comments">
        <div className="container">
          <div className="section-heading align-start">
            <span className="english-title">COMMENTS</span>
            <h2>دیدگاه‌ها</h2>
          </div>
          <CommentsPanel entityType="blog" entityId={blog.id} comments={comments.items} />
        </div>
      </section>
    </article>
  );
}