import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { getGalleryAlbums } from "@db/queries/gallery-db";
import { BLOG_POSTS, getBlogPost } from "@/lib/blog";
import { CameraIcon, ArrowRightIcon } from "@/components/icons";

export function generateStaticParams() {
  return BLOG_POSTS.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = getBlogPost(slug);
  if (!post) return { title: "Blog — VibePass Tickets" };
  return {
    title: `${post.title} · VibePass blog`,
    description: post.excerpt,
    openGraph: { title: post.title, description: post.excerpt, images: [post.cover] },
  };
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = getBlogPost(slug);
  if (!post) notFound();

  // Link to the photo album only if it actually exists; else fall back to /gallery.
  const albumSlugs = new Set((await getGalleryAlbums()).map((a) => a.slug));
  const galleryHref = albumSlugs.has(post.gallerySlug)
    ? `/gallery/${post.gallerySlug}`
    : "/gallery";

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

  return (
    <div className="flex-1 bg-bg">
      {/* Hero */}
      <section className="relative overflow-hidden">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={post.cover}
          alt=""
          aria-hidden="true"
          className="absolute inset-0 w-full h-full object-cover opacity-40"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-bg via-bg/85 to-bg/50" />
        <div className="relative">
          <SiteNav transparent />
          <div className="max-w-3xl mx-auto px-4 pt-12 pb-16">
            <Link
              href="/blog"
              className="text-xs font-semibold uppercase tracking-[0.2em] text-muted hover:text-white"
            >
              ← All stories
            </Link>
            <p className="mt-6 text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
              {post.category}
            </p>
            <h1 className="mt-4 text-3xl sm:text-5xl font-black leading-[1.02] tracking-tight text-white">
              {post.title}
            </h1>
            <p className="mt-5 text-sm text-muted">
              <time dateTime={post.isoDate}>{post.date}</time> · {post.venue}, {post.city} · By{" "}
              {post.author}
            </p>
          </div>
        </div>
      </section>

      {/* Body */}
      <article className="bg-bg">
        <div className="max-w-3xl mx-auto px-4 py-14">
          <div className="space-y-5 text-lg leading-relaxed text-ink/85">
            {post.body.map((para, i) => (
              <p key={i}>{para}</p>
            ))}
          </div>

          {/* Lineup */}
          <div className="mt-12 rounded-2xl border border-line bg-panel p-6">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-green-h">
              On the lineup
            </p>
            <ul className="mt-4 flex flex-wrap gap-2.5">
              {post.lineup.map((act) => (
                <li
                  key={act}
                  className="rounded-full border border-line bg-panel-soft px-4 py-1.5 text-sm text-ink/80"
                >
                  {act}
                </li>
              ))}
            </ul>
          </div>

          {/* Gallery CTA */}
          <Link
            href={galleryHref}
            className="mt-8 inline-flex items-center gap-2 rounded-full bg-brand-green px-7 py-3 text-base font-semibold text-white hover:bg-brand-green-h"
          >
            <CameraIcon className="w-5 h-5" />
            See the photo album
          </Link>
        </div>
      </article>

      {/* More stories */}
      {more.length > 0 && (
        <section className="bg-panel border-t border-line">
          <div className="max-w-6xl mx-auto px-4 py-16">
            <h2 className="text-2xl font-black tracking-tight text-white">More stories</h2>
            <div className="mt-8 grid sm:grid-cols-2 gap-6">
              {more.map((p) => (
                <Link
                  key={p.slug}
                  href={`/blog/${p.slug}`}
                  className="group flex flex-col overflow-hidden rounded-2xl border border-line bg-panel-soft transition-all duration-200 hover:-translate-y-0.5 hover:border-brand-green motion-reduce:hover:translate-y-0"
                >
                  <div className="aspect-[16/10] overflow-hidden bg-brand-green-panel">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={p.cover}
                      alt={p.title}
                      className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                  </div>
                  <div className="flex flex-1 flex-col p-6">
                    <span className="text-xs font-semibold uppercase tracking-wide text-brand-green-h">
                      {p.category}
                    </span>
                    <h3 className="mt-2 text-lg font-bold text-white group-hover:text-brand-gold-h transition-colors">
                      {p.title}
                    </h3>
                    <span className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-brand-green-h">
                      Read the story
                      <ArrowRightIcon className="w-4 h-4" />
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      <SiteFooter />
    </div>
  );
}