import type { Metadata } from "next";
import { VideoSection, type VideoListItem } from "@/components/site/VideoSection";
import { prisma } from "@/lib/prisma";

export const metadata: Metadata = {
  title: "Videos",
  description: "Watch Just Chill Nepal bike rides, travel videos, shorts, and Nepal blogs."
};

const VIDEOS_PER_BLOCK = 8;

function toListItem(
  video: Awaited<ReturnType<typeof prisma.video.findMany>>[number]
): VideoListItem {
  return {
    category: video.category?.name,
    description: video.description,
    href: `/videos/${video.slug}`,
    id: video.id,
    kind: video.kind,
    publishedAt: video.publishedAt,
    thumbnail: video.thumbnail,
    title: video.title,
    youtubeId: video.youtubeId
  };
}

export default async function VideosPage() {
  const videos = await prisma.video.findMany({
    include: { category: true },
    orderBy: { publishedAt: "desc" },
    where: { approvalStatus: "APPROVED", status: "PUBLISHED" }
  });

  const allItems = videos.map(toListItem);
  const regularVideos = allItems.filter((item) => item.kind === "VIDEO");
  const shorts = allItems.filter((item) => item.kind === "SHORT");

  const firstVideoBlock = regularVideos.slice(0, VIDEOS_PER_BLOCK);
  const secondVideoBlock = regularVideos.slice(VIDEOS_PER_BLOCK);

  return (
    <main className="container videos-page" style={{ padding: "4rem 1.25rem" }}>
      <div className="section-head">
        <div>
          <span className="pill">YouTube videos</span>
          <h1 className="section-title">Videos</h1>
          <p className="muted">
            Long-form vlogs and bike rides in a 4-column grid, YouTube Shorts in vertical 9:16, then more videos below.
          </p>
        </div>
      </div>

      <div className="videos-page-sections">
        <VideoSection
          description="Latest long-form videos — 4 per row, up to 2 rows."
          emptyMessage="No long-form videos published yet."
          items={firstVideoBlock}
          title="Featured videos"
          variant="video"
        />

        <VideoSection
          description="Vertical shorts in 9:16 — 4 per row, TikTok-style previews."
          emptyMessage="No shorts published yet."
          items={shorts}
          title="YouTube Shorts"
          variant="short"
        />

        {secondVideoBlock.length > 0 ? (
          <VideoSection
            description="More videos from the channel."
            items={secondVideoBlock}
            title="More videos"
            variant="video"
          />
        ) : null}
      </div>

      {allItems.length === 0 ? (
        <p className="admin-empty-state" style={{ marginTop: "2rem" }}>
          No videos published yet. Check back soon.
        </p>
      ) : null}
    </main>
  );
}