import Link from "next/link";
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { prisma } from "@/lib/db";

export async function generateStaticParams() {
  try {
    const pls = await prisma.playlist.findMany({ select:{ slug:true } });
    return pls.map(p=>({ slug:p.slug }));
  } catch { return []; }
}
export async function generateMetadata({ params }: { params: Promise<{ slug:string }> }): Promise<Metadata> {
  const { slug } = await params;
  const p = await prisma.playlist.findUnique({ where:{ slug } }).catch(()=>null);
  if (!p) return { title:"Not found" };
  return { title: `${p.title} — Ravneet Brar`, description: p.description || "" };
}
export default async function PlaylistDetail({ params }: { params: Promise<{ slug:string }> }) {
  const { slug } = await params;
  const pl = await prisma.playlist.findUnique({ where:{ slug }, include:{ videos:{ include:{ video:true }, orderBy:{ order:"asc" } } } }).catch(()=>null);
  if (!pl) notFound();
  return (
    <div className="pt-24 bg-[#07080c]">
      <div className="max-w-[900px] mx-auto px-6 sm:px-8 py-12">
        <Link href="/playlists" className="text-xs tracking-widest text-white/30 hover:text-white uppercase">← Playlists</Link>
        <h1 className="mt-3 text-3xl font-bold text-white">{pl.title}</h1>
        <p className="text-sm text-white/50 mt-1">{pl.description}</p>
        <div className="mt-6 space-y-3">
          {pl.videos.length===0 ? <p className="text-sm text-white/30">No videos in this playlist.</p> : pl.videos.map((pv,idx)=>(
            <Link key={pv.video.slug} href={`/videos/${pv.video.slug}`} className="flex gap-4 rounded-2xl border border-white/10 bg-white/[0.04] p-4 hover:bg-white/[0.06]">
              <span className="text-sm font-mono text-white/30">0{idx+1}</span>
              <div>
                <p className="font-semibold text-white text-sm">{pv.video.title}</p><p className="text-xs text-white/40">{pv.video.slug}</p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}