import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { MDXRemote } from "next-mdx-remote/rsc";
import { getAllMedia, getMediaItem, formatMediaDate } from "@/lib/media";

export const dynamic = "force-dynamic";

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

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

export default async function MediaStory({ params }: Props) {
  const { slug } = await params;
  const item = await getMediaItem(slug);
  if (!item) notFound();

  return (
    <article
      className="relative py-24 sm:py-28"
      style={{
        backgroundImage:
          "radial-gradient(rgba(11, 31, 69, 0.40) 1.5px, transparent 1.5px)",
        backgroundSize: "28px 28px",
      }}
    >
      {/* Soft glow so content stays readable over the dot grid */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 z-0"
        style={{
          background:
            "radial-gradient(ellipse 70% 60% at center, rgba(238, 242, 248, 0.9) 0%, rgba(238, 242, 248, 0.55) 55%, transparent 100%)",
        }}
      />
      <div className="container-x relative max-w-3xl">
        {/* Back link */}
        <Link
          href="/media/"
          className="text-sm font-semibold text-gold-600 transition-colors hover:text-gold-700"
        >
          ← Back to Media
        </Link>

        {/* Header */}
        <header className="mt-8">
          <span className="inline-flex items-center rounded-full bg-navy px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-gold-300">
            {item.category}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold leading-tight text-navy sm:text-4xl">
            {item.title}
          </h1>
          <p className="mt-4 text-sm font-semibold uppercase tracking-wider text-navy-400">
            {formatMediaDate(item.date)}
            {item.location && <> · {item.location}</>}
          </p>
        </header>

        {/* Cover */}
        {item.cover && (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={item.cover}
            alt={item.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={item.content} />
        </div>
      </div>
    </article>
  );
}