import type { Metadata } from "next";
import Link from "next/link";
import { prisma } from "@/lib/db";
export const metadata: Metadata = { title: "Playlists — Ravneet Brar", description: "Curated video playlists." };
export const dynamic = "force-dynamic";
export default async function PlaylistsPage() {
  const playlists = await prisma.playlist.findMany({ include: { videos: { include: { video: true } } }, orderBy: { createdAt:"desc" } });
  if (playlists.length===0) {
    return (
      <div className="pt-24 bg-[#07080c] min-h-[60vh] grid place-items-center px-6">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-white">NO PLAYLISTS YET</h1>
          <p className="text-white/50">Create your first playlist from Admin → Videos → Playlists.</p>
        </div>
      </div>
    );
  }
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[1000px] mx-auto px-6 sm:px-8 py-12 text-center">
        <h1 className="text-3xl font-bold text-white">PLAYLISTS</h1>
        <p className="text-white/50">Curated collections — e.g., ZYPHRON CLOUD</p>
      </section>
      <section className="max-w-[1000px] mx-auto px-6 sm:px-8 pb-12 grid sm:grid-cols-2 gap-4">
        {playlists.map(p=>(
          <Link key={p.slug} href={`/playlists/${p.slug}`} className="rounded-2xl border border-white/10 bg-white/[0.04] p-6 hover:bg-white/[0.06]">
            <h3 className="font-semibold text-white">{p.title}</h3>
            <p className="text-sm text-white/50 mt-1">{p.description || "No description"}</p>
            <p className="text-xs text-white/30 mt-2">{p.videos.length} videos</p>
          </Link>
        ))}
      </section>
    </div>
  );
}