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 videos = await prisma.video.findMany({ where: { deletedAt: null, status: "PUBLISHED", visibility: "PUBLIC" }, select: { slug:true } });
    return videos.map(v=>({ slug: v.slug }));
  } catch { return []; }
}
export async function generateMetadata({ params }: { params: Promise<{ slug:string }> }): Promise<Metadata> {
  const { slug } = await params;
  const v = await prisma.video.findUnique({ where: { slug } }).catch(()=>null);
  if (!v || v.deletedAt || v.status!=="PUBLISHED" || v.visibility==="PRIVATE") return { title:"Not found" };
  return { title: `${v.title} — Ravneet Brar`, description: v.description || "" };
}
export default async function VideoDetail({ params, searchParams }: { params: Promise<{ slug:string }>, searchParams?: Promise<{ preview?:string }> }) {
  const { slug } = await params;
  const preview = (await searchParams)?.preview;
  const v = await prisma.video.findUnique({ where: { slug }, include:{ category:true } }).catch(()=>null);
  if (!v || v.deletedAt) notFound();
  if ((v.status!=="PUBLISHED" || v.visibility==="PRIVATE") && preview!=="1") notFound();
  const related = await prisma.video.findMany({ where: { deletedAt:null, status:"PUBLISHED", visibility:"PUBLIC", slug: { not: slug } }, take:3, orderBy:{ publishedAt:"desc" } });
  return (
    <div className="pt-24 bg-[#07080c]">
      <div className="max-w-[900px] mx-auto px-6 sm:px-8 py-12">
        <Link href="/videos" className="text-xs tracking-widest text-white/30 hover:text-white uppercase">← Videos</Link>
        <div className="mt-6 aspect-video bg-black rounded-[18px] border border-white/10 overflow-hidden grid place-items-center relative">
          {v.videoUrl ? (
            <video src={v.videoUrl} controls poster={v.thumbnailUrl || undefined} className="w-full h-full" />
          ) : (
            <span className="text-white/20 text-xs tracking-widest uppercase">Video • {v.title}</span>
          )}
        </div>
        <p className="mt-4 text-xs tracking-widest text-blue-300">{v.category?.name || "Video"} • {v.duration ? `${Math.floor(v.duration/60)}:${String(v.duration%60).padStart(2,"0")}` : ""} • {v.publishedAt ? new Date(v.publishedAt).toLocaleDateString() : ""}</p>
        <h1 className="mt-2 text-2xl sm:text-3xl font-bold text-white">{v.title}</h1>
        <p className="text-sm text-white/60 mt-2 leading-relaxed">{v.description}</p>
        <div className="mt-4 flex flex-wrap gap-2">
          {v.tags ? (JSON.parse(v.tags) as string[]).map((t:string)=> <span key={t} className="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white/60">{t}</span>) : null}
        </div>
        <div className="mt-8 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
          <h2 className="font-semibold text-white">Related videos</h2>
          <div className="mt-3 grid sm:grid-cols-3 gap-3">
            {related.length===0 ? <p className="text-sm text-white/30">No related videos.</p> : related.map(r=>(
              <Link key={r.slug} href={`/videos/${r.slug}`} className="rounded-xl border border-white/10 bg-white/[0.04] p-3 hover:bg-white/[0.06]">
                <p className="text-sm font-medium text-white line-clamp-1">{r.title}</p><p className="text-xs text-white/40">{r.slug}</p>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}