import Link from "next/link";
import { getSessionUser } from "@/lib/auth";
import { listVideos } from "@/lib/data";
import { VideoCard } from "@/components/video-card";
import { EmptyState } from "@/components/ui";
import { ensureSeeded } from "@/lib/seed";

export const dynamic = "force-dynamic";
export const metadata = { title: "Subscriptions" };

export default async function SubscriptionsPage() {
  await ensureSeeded();
  const session = await getSessionUser();
  if (!session) {
    return (
      <div className="px-4 py-10">
        <EmptyState
          icon="📺"
          title="Don't miss new videos"
          hint="Sign in to see updates from your favourite PlayTube channels."
          action={<Link href="/login" className="text-sm font-semibold text-brand">Sign in</Link>}
        />
      </div>
    );
  }
  const items = await listVideos({ subscriberOfUserId: session.user.id, sort: "recent", limit: 36 });
  return (
    <div className="px-4 py-5">
      <h1 className="mb-5 text-2xl font-bold">Latest from your subscriptions</h1>
      {items.length === 0 ? (
        <EmptyState icon="📭" title="No uploads yet" hint="Subscribe to channels and their newest videos will appear here." />
      ) : (
        <div className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
          {items.map((video) => (
            <VideoCard key={video.id} video={video} />
          ))}
        </div>
      )}
    </div>
  );
}