import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Icon } from "@/components/icons";
import { CtaBand } from "@/components/cta-band";
import { posts } from "@/content/posts";

const dateFmt = new Intl.DateTimeFormat("en-GB", {
  day: "numeric",
  month: "long",
  year: "numeric",
});

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

export async function generateMetadata({
  params,
}: PageProps<"/blog/[slug]">): Promise<Metadata> {
  const { slug } = await params;
  const post = posts.find((p) => p.slug === slug);
  if (!post) return { title: "Article not found" };
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { type: "article", title: post.title, description: post.excerpt },
  };
}

export default async function BlogPostPage({ params }: PageProps<"/blog/[slug]">) {
  const { slug } = await params;
  const post = posts.find((p) => p.slug === slug);
  if (!post) notFound();

  const more = posts.filter((p) => p.slug !== post.slug).slice(0, 2);

  return (
    <>
      <article>
        <header className="bg-cream">
          <div className="container-page py-14 lg:py-20">
            <Link
              href="/blog"
              className="inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700"
            >
              <Icon name="arrow-right" className="h-4 w-4 rotate-180" />
              All articles
            </Link>
            <div className="mt-6 flex flex-wrap items-center gap-3 text-xs font-medium text-ink-500">
              <span className="rounded-full bg-brand-50 px-2.5 py-1 text-brand-700">
                {post.category}
              </span>
              <span>{dateFmt.format(new Date(post.dateISO))}</span>
              <span>{post.readMinutes} min read</span>
              <span>By {post.author}</span>
            </div>
            <h1 className="mt-4 max-w-3xl font-display text-4xl font-bold leading-[1.15] tracking-tight text-ink-900">
              {post.title}
            </h1>
          </div>
        </header>

        <div className="container-page py-12 lg:py-16">
          <div className="mx-auto max-w-2xl">
            <div className="aspect-[16/9] rounded-2xl bg-gradient-to-br from-brand-600 to-brand-800" />
            <div className="mt-8 space-y-5 text-[17px] leading-[1.75] text-ink-700">
              <p className="text-lg font-medium text-ink-900">{post.excerpt}</p>
              {post.body.map((para) => (
                <p key={para.slice(0, 24)}>{para}</p>
              ))}
            </div>
          </div>
        </div>
      </article>

      <section className="border-t border-ink-100 bg-white">
        <div className="container-page py-14">
          <h2 className="font-display text-xl font-bold text-ink-900">Keep reading</h2>
          <div className="mt-6 grid gap-6 sm:grid-cols-2">
            {more.map((p) => (
              <Link
                key={p.slug}
                href={`/blog/${p.slug}`}
                className="group rounded-2xl border border-ink-100 bg-cream p-6 shadow-card transition-colors hover:border-brand-300"
              >
                <span className="text-xs font-medium text-brand-700">{p.category}</span>
                <h3 className="mt-2 font-display text-lg font-bold text-ink-900 group-hover:text-brand-700">
                  {p.title}
                </h3>
                <p className="mt-2 text-sm text-ink-600">{p.excerpt}</p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  );
}