import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { MDXRemote } from "next-mdx-remote/rsc";
import { getAllPosts, getPost } from "@/lib/posts";

interface Props {
  params: Promise<{ slug: string }>;
}

export function generateStaticParams() {
  return getAllPosts().map((post) => ({ slug: post.slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = getPost(slug);
  if (!post) return { title: "Post not found" };
  return {
    title: post.title,
    description: post.excerpt,
  };
}

function formatDate(iso: string): string {
  if (!iso) return "";
  const d = new Date(iso + "T00:00:00");
  return d.toLocaleDateString("en-MY", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = getPost(slug);
  if (!post) notFound();

  return (
    <article
      className="relative py-24 sm:py-28"
      style={{
        backgroundImage:
          "linear-gradient(to right, rgba(11, 31, 69, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(11, 31, 69, 0.15) 1px, transparent 1px)",
        backgroundSize: "40px 40px",
      }}
    >
      {/* Soft white glow so content stays readable over the grid */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse 60% 50% at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 55%, transparent 100%)",
        }}
      />
      <div className="container-x relative max-w-3xl">
        {/* Back link */}
        <Link
          href="/researchandblogs/"
          className="text-sm font-semibold text-gold-600 transition-colors hover:text-gold-700"
        >
          ← Back to Research and Blogs
        </Link>

        {/* Header */}
        <header className="mt-8">
          <div className="flex flex-wrap items-center gap-2">
            {post.tags.map((tag) => (
              <span
                key={tag}
                className="rounded-full bg-navy-50 px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wider text-navy-500"
              >
                {tag}
              </span>
            ))}
          </div>
          <h1 className="mt-4 text-3xl font-extrabold leading-tight text-navy sm:text-4xl">
            {post.title}
          </h1>
          <p className="mt-4 text-sm font-semibold uppercase tracking-wider text-navy-400">
            {formatDate(post.date)} · {post.author}
          </p>
        </header>

        {/* Cover */}
        {post.cover && (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={post.cover}
            alt={post.title}
            className="mt-8 w-full rounded-xl border border-navy-100 shadow-card"
          />
        )}

        {/* Body */}
        <div className="prose prose-navy mt-10 max-w-none">
          <MDXRemote source={post.content} />
        </div>
      </div>
    </article>
  );
}