import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { SectionHeading } from "@/components/ui/section";
import { JsonLd } from "@/components/seo/json-ld";
import { articleJsonLd, breadcrumbJsonLd, buildMetadata } from "@/lib/seo";
import { formatDate } from "@/lib/utils";
import { articleService } from "@/services/catalog.service";
import { articleRepository } from "@/repositories/article.repository";

export const dynamic = "force-dynamic";

type Params = Promise<{ slug: string }>;

export async function generateMetadata({ params }: { params: Params }) {
  const { slug } = await params;
  const article = await articleRepository.findBySlug(slug);
  if (!article || article.status !== "PUBLISHED") {
    return buildMetadata({ title: "Artikel tidak ditemukan", path: `/blog/${slug}`, noIndex: true });
  }
  return buildMetadata({
    title: article.metaTitle || article.title,
    description: article.metaDescription || article.excerpt,
    path: `/blog/${article.slug}`,
    image: article.thumbnail,
    type: "article",
  });
}

export default async function BlogDetailPage({ params }: { params: Params }) {
  const { slug } = await params;
  const article = await articleService.getBySlug(slug);
  if (!article) notFound();

  return (
    <article className="container-shell pt-28 pb-16">
      <JsonLd
        data={[
          articleJsonLd({
            title: article.title,
            excerpt: article.excerpt,
            slug: article.slug,
            thumbnail: article.thumbnail,
            publishedAt: article.publishedAt,
            updatedAt: article.updatedAt,
            authorName: article.author.name,
          }),
          breadcrumbJsonLd([
            { name: "Beranda", path: "/" },
            { name: "Artikel", path: "/blog" },
            { name: article.title, path: `/blog/${article.slug}` },
          ]),
        ]}
      />

      <nav className="mb-8 text-sm text-muted">
        <Link href="/" className="hover:text-text">
          Beranda
        </Link>
        <span className="mx-2">/</span>
        <Link href="/blog" className="hover:text-text">
          Artikel
        </Link>
        <span className="mx-2">/</span>
        <span className="text-text line-clamp-1">{article.title}</span>
      </nav>

      <header className="mx-auto max-w-3xl">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-accent">
          {article.category?.name || "Artikel"}
        </p>
        <h1 className="mt-3 font-[family-name:var(--font-space)] text-3xl font-bold tracking-tight md:text-5xl">
          {article.title}
        </h1>
        <p className="mt-4 text-sm text-muted">
          {article.author.name}
          {article.publishedAt ? ` · ${formatDate(article.publishedAt)}` : ""} · {article.readingTime} menit baca ·{" "}
          {article.views} views
        </p>
        {article.excerpt ? <p className="mt-5 text-lg text-muted leading-relaxed">{article.excerpt}</p> : null}
      </header>

      {article.thumbnail ? (
        <div className="relative mx-auto mt-10 aspect-[21/9] max-w-4xl overflow-hidden rounded-[1.5rem] border border-border">
          <Image
            src={article.thumbnail}
            alt={article.title}
            fill
            className="object-cover"
            sizes="(max-width:1024px) 100vw, 900px"
            priority
          />
        </div>
      ) : null}

      <div
        className="prose-store mx-auto mt-10 max-w-3xl space-y-4 text-base leading-relaxed text-muted [&_h2]:mt-8 [&_h2]:font-[family-name:var(--font-space)] [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:text-text [&_li]:ml-5 [&_li]:list-disc [&_p]:leading-relaxed [&_ul]:space-y-2"
        dangerouslySetInnerHTML={{ __html: article.content }}
      />

      {article.tags?.length ? (
        <div className="mx-auto mt-10 flex max-w-3xl flex-wrap gap-2">
          {article.tags.map(({ tag }) => (
            <span key={tag.id} className="rounded-full border border-border bg-surface px-3 py-1 text-xs text-muted">
              #{tag.name}
            </span>
          ))}
        </div>
      ) : null}

      {article.related?.length ? (
        <section className="mt-16">
          <SectionHeading title="Artikel terkait" />
          <div className="mt-6 grid gap-4 md:grid-cols-3">
            {article.related.map((item) => (
              <Link
                key={item.id}
                href={`/blog/${item.slug}`}
                className="rounded-2xl border border-border bg-surface p-5 transition hover:border-accent/40"
              >
                <p className="text-xs text-muted">{item.category?.name || "Artikel"}</p>
                <h3 className="mt-2 font-[family-name:var(--font-space)] text-lg font-semibold">{item.title}</h3>
                <p className="mt-2 line-clamp-2 text-sm text-muted">{item.excerpt}</p>
              </Link>
            ))}
          </div>
        </section>
      ) : null}
    </article>
  );
}