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

export const metadata: Metadata = { title: "Videos — Ravneet Brar", description: "Exclusive videos — projects, behind-the-scenes, infrastructure and things I'm building." };
export const dynamic = "force-dynamic";

export default async function VideosPage() {
  const videos = await prisma.video.findMany({ where: { deletedAt: null, status: "PUBLISHED", visibility: { in: ["PUBLIC","UNLISTED"] } }, orderBy: { publishedAt: "desc" }, include: { category: true } });
  const categories = await prisma.videoCategory.findMany().catch(()=>[]);
  const featured = videos.find(v=> v.featured);

  const catNames = categories.length ? categories.map(c=>c.name) : ["All","Featured","Projects","Behind the Scenes","Development","Infrastructure","Zyphron","FreeDash","Tutorials","Updates"];

  if (videos.length===0) {
    return (
      <div className="pt-24 bg-[#07080c] min-h-[70vh] grid place-items-center px-6">
        <div className="text-center max-w-[600px]">
          <h1 className="text-3xl font-bold text-white">NO VIDEOS YET</h1>
          <p className="text-white/50 mt-2">Upload your first video from Admin → Videos.</p>
          <Link href="/admin/videos" className="mt-4 inline-flex px-5 py-2 rounded-full bg-white text-black font-semibold text-sm">+ UPLOAD VIDEO</Link>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[1200px] mx-auto px-6 sm:px-8 py-12 text-center">
        <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Videos</p>
        <h1 className="mt-3 text-[40px] sm:text-[64px] font-[800] tracking-[-0.05em] text-white">EXCLUSIVE VIDEOS</h1>
        <p className="text-white/50 max-w-[600px] mx-auto">A collection of projects, behind-the-scenes content, technical walkthroughs, infrastructure, updates and things I&apos;m building.</p>
      </section>

      {featured && (
        <section className="max-w-[1200px] mx-auto px-6 sm:px-8 pb-8">
          <Link href={`/videos/${featured.slug}`} className="block rounded-[24px] border border-white/10 bg-white/[0.04] overflow-hidden group">
            <div className="aspect-video bg-black grid place-items-center relative overflow-hidden">
              {featured.thumbnailUrl ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={featured.thumbnailUrl} alt={featured.title} className="w-full h-full object-cover group-hover:scale-[1.02] transition" />
              ) : (
                <span className="text-white/20 text-xs tracking-widest uppercase">Featured • {featured.title}</span>
              )}
              <span className="absolute inset-0 grid place-items-center"><span className="w-16 h-16 rounded-full bg-white text-black grid place-items-center">▶</span></span>
            </div>
            <div className="p-6">
              <p className="text-xs tracking-widest text-blue-300">{featured.category?.name || "Featured"} • {featured.duration ? `${Math.floor(featured.duration/60)}:${String(featured.duration%60).padStart(2,"0")}` : "—"}</p>
              <h2 className="text-xl font-bold text-white mt-1">{featured.title}</h2>
              <p className="text-sm text-white/50 mt-1 line-clamp-2">{featured.description}</p>
            </div>
          </Link>
        </section>
      )}

      <section className="max-w-[1200px] mx-auto px-6 sm:px-8 pb-4 flex gap-2 overflow-x-auto">
        {catNames.map(c=>(
          <Link key={c} href={c==="All" ? "/videos" : `/videos?category=${encodeURIComponent(c)}`} className="shrink-0 px-3.5 py-1.5 rounded-full border border-white/10 bg-white/5 text-white/60 text-xs font-semibold hover:text-white">{c}</Link>
        ))}
      </section>

      <section className="max-w-[1200px] mx-auto px-6 sm:px-8 pb-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {videos.map(v=>(
          <Link key={v.slug} href={`/videos/${v.slug}`} className="group rounded-2xl border border-white/10 bg-white/[0.04] overflow-hidden hover:bg-white/[0.06]">
            <div className="aspect-video bg-black relative grid place-items-center overflow-hidden">
              {v.thumbnailUrl ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={v.thumbnailUrl} alt={v.title} className="w-full h-full object-cover group-hover:scale-[1.02] transition" />
              ) : (
                <span className="text-white/20 text-xs tracking-widest uppercase">{v.title.slice(0,20)}</span>
              )}
              <span className="absolute top-2 left-2 text-[10px] px-2 py-1 rounded-full bg-white text-black font-bold">{v.category?.name || "Video"}</span>
              <span className="absolute bottom-2 right-2 text-xs px-2 py-1 rounded-full bg-black/60 text-white">{v.duration ? `${Math.floor(v.duration/60)}:${String(v.duration%60).padStart(2,"0")}` : ""}</span>
              <span className="absolute inset-0 grid place-items-center opacity-0 group-hover:opacity-100 transition"><span className="w-12 h-12 rounded-full bg-white text-black grid place-items-center">▶</span></span>
            </div>
            <div className="p-4">
              <h3 className="font-semibold text-white text-sm line-clamp-1">{v.title}</h3>
              <p className="text-xs text-white/50 line-clamp-2 mt-1">{v.description}</p>
              <p className="text-xs text-white/30 mt-2">{v.publishedAt ? new Date(v.publishedAt).toLocaleDateString() : ""} {v.exclusive ? "• Exclusive" : ""}</p>
            </div>
          </Link>
        ))}
      </section>
    </div>
  );
}