import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, Calendar, Clock, Eye, User as UserIcon } from "lucide-react";
import { prisma } from "@/lib/db";
import { categoryLabel } from "@/lib/blog";
import { MarkdownRenderer } from "@/components/blog/markdown-renderer";
import { ViewBumper } from "./view-bumper";

export const dynamic = "force-dynamic";

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

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { slug } = await params;
  const post = await prisma.blogPost.findUnique({ where: { slug } });
  if (!post || !post.publishedAt) {
    return { title: "Không tìm thấy · Tử Vi Số", robots: { index: false } };
  }
  return {
    title: `${post.title} · Tử Vi Số`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.publishedAt.toISOString(),
      authors: [post.authorName],
      images: post.coverImage ? [{ url: post.coverImage }] : undefined,
    },
    twitter: {
      card: post.coverImage ? "summary_large_image" : "summary",
      title: post.title,
      description: post.excerpt,
      images: post.coverImage ? [post.coverImage] : undefined,
    },
  };
}

export default async function BlogPost({ params }: { params: Params }) {
  const { slug } = await params;

  const post = await prisma.blogPost.findUnique({ where: { slug } });
  if (!post || !post.publishedAt) notFound();

  const related = await prisma.blogPost.findMany({
    where: {
      category: post.category,
      publishedAt: { not: null },
      id: { not: post.id },
    },
    orderBy: { publishedAt: "desc" },
    take: 3,
  });

  // JSON-LD Article schema for SEO
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    description: post.excerpt,
    image: post.coverImage ? [post.coverImage] : undefined,
    datePublished: post.publishedAt.toISOString(),
    dateModified: post.updatedAt.toISOString(),
    author: {
      "@type": "Person",
      name: post.authorName,
    },
    publisher: {
      "@type": "Organization",
      name: "Tử Vi Số",
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": `https://tuvi.so/blog/${post.slug}`,
    },
    articleSection: categoryLabel(post.category),
    keywords: post.tags.join(", "),
    wordCount: post.content.trim().split(/\s+/).length,
  };

  return (
    <div className="bg-bg-base min-h-screen">
      { }
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <ViewBumper slug={post.slug} />

      <article className="mx-auto max-w-[760px] px-4 py-10 lg:px-6">
        <Link
          href="/blog"
          className="text-ink-muted hover:text-brand-gold mb-6 inline-flex items-center gap-1.5 text-xs"
        >
          <ArrowLeft className="h-3.5 w-3.5" /> Quay lại danh sách
        </Link>

        {/* Category */}
        <div className="mb-3">
          <Link
            href={`/blog?cat=${post.category}`}
            className="text-brand-gold/80 hover:text-brand-gold text-[11px] tracking-[0.2em] uppercase"
          >
            {categoryLabel(post.category)}
          </Link>
        </div>

        {/* Title */}
        <h1 className="font-display text-ink-primary text-3xl leading-tight font-semibold lg:text-4xl">
          {post.title}
        </h1>

        {/* Excerpt */}
        <p className="text-ink-secondary mt-4 text-lg leading-relaxed">{post.excerpt}</p>

        {/* Meta */}
        <div className="border-stroke-subtle text-ink-muted mt-6 flex flex-wrap items-center gap-x-5 gap-y-2 border-y py-3 text-xs">
          <span className="inline-flex items-center gap-1.5">
            <UserIcon className="h-3.5 w-3.5" />
            {post.authorName}
          </span>
          <span className="inline-flex items-center gap-1.5">
            <Calendar className="h-3.5 w-3.5" />
            {post.publishedAt.toLocaleDateString("vi-VN", {
              day: "2-digit",
              month: "long",
              year: "numeric",
            })}
          </span>
          <span className="inline-flex items-center gap-1.5">
            <Clock className="h-3.5 w-3.5" />
            {post.readMinutes} phút đọc
          </span>
          <span className="inline-flex items-center gap-1.5">
            <Eye className="h-3.5 w-3.5" />
            {post.views.toLocaleString("vi-VN")} lượt xem
          </span>
        </div>

        {/* Cover */}
        {post.coverImage ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={post.coverImage}
            alt={post.title}
            className="my-8 aspect-[16/9] w-full rounded-xl object-cover"
          />
        ) : null}

        {/* Body */}
        <div className="mt-8">
          <MarkdownRenderer content={post.content} />
        </div>

        {/* Tags */}
        {post.tags.length > 0 && (
          <div className="border-stroke-subtle mt-10 flex flex-wrap items-center gap-2 border-t pt-6">
            <span className="text-ink-muted text-[11px] tracking-[0.15em] uppercase">Thẻ</span>
            {post.tags.map((tag) => (
              <span
                key={tag}
                className="border-stroke-subtle text-ink-secondary rounded-full border px-3 py-1 text-xs"
              >
                {tag}
              </span>
            ))}
          </div>
        )}
      </article>

      {/* Related */}
      {related.length > 0 && (
        <section className="border-stroke-subtle mt-12 border-t">
          <div className="mx-auto max-w-[1200px] px-4 py-12 lg:px-6">
            <h2 className="font-display text-ink-primary mb-6 text-xl font-semibold">
              Bài cùng chuyên mục
            </h2>
            <div className="grid gap-5 md:grid-cols-3">
              {related.map((p) => (
                <Link
                  key={p.id}
                  href={`/blog/${p.slug}`}
                  className="border-stroke-subtle bg-bg-elevated/40 hover:border-brand-gold/40 group rounded-xl border p-5 transition"
                >
                  <div className="text-brand-gold/80 mb-2 text-[11px] tracking-[0.15em] uppercase">
                    {categoryLabel(p.category)}
                  </div>
                  <h3 className="font-display text-ink-primary group-hover:text-brand-gold mb-2 text-base leading-snug font-semibold transition">
                    {p.title}
                  </h3>
                  <p className="text-ink-secondary line-clamp-2 text-sm leading-relaxed">
                    {p.excerpt}
                  </p>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}