import type { Metadata } from "next";
import Link from "next/link";
import { Mic2, Plus } from "lucide-react";
import type { Prisma, EpisodeStatus } from "@prisma/client";
import { requireAuth } from "@/lib/auth/guards";
import { prisma } from "@/lib/db";
import { PageHeader } from "@/components/app/page-header";
import { EpisodeCard } from "@/components/app/episode-card";
import { SearchInput, FilterSelect } from "@/components/admin/ui/table-controls";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";

export const metadata: Metadata = { title: "Episodes" };

const STATUS_OPTIONS = [
  { value: "DRAFT", label: "Draft" },
  { value: "QUEUED", label: "Queued" },
  { value: "SCRIPTING", label: "Writing script" },
  { value: "SYNTHESIZING", label: "Recording audio" },
  { value: "STITCHING", label: "Mixing audio" },
  { value: "ART", label: "Designing art" },
  { value: "SAVING", label: "Finalizing" },
  { value: "READY", label: "Ready" },
  { value: "FAILED", label: "Failed" },
];

const VALID_STATUSES = new Set(STATUS_OPTIONS.map((o) => o.value));

export default async function EpisodesPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; status?: string }>;
}) {
  const session = await requireAuth();
  const { q, status } = await searchParams;
  const query = q?.trim();
  const statusFilter = status && VALID_STATUSES.has(status) ? status : undefined;

  const where: Prisma.EpisodeWhereInput = {
    userId: session.user.id,
    ...(query ? { title: { contains: query, mode: "insensitive" } } : {}),
    ...(statusFilter ? { status: statusFilter as EpisodeStatus } : {}),
  };

  const episodes = await prisma.episode.findMany({
    where,
    orderBy: { createdAt: "desc" },
    include: { coverArt: { select: { storageKey: true } } },
  });

  const filtering = Boolean(query || statusFilter);

  return (
    <>
      <PageHeader
        title="Episodes"
        description="Your AI-produced podcast library."
        action={
          <Button asChild>
            <Link href="/episodes/new">
              <Plus className="h-4 w-4" /> New episode
            </Link>
          </Button>
        }
      />

      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center">
        <SearchInput placeholder="Search episodes…" />
        <FilterSelect param="status" placeholder="Status" options={STATUS_OPTIONS} allLabel="All statuses" />
      </div>

      {episodes.length === 0 ? (
        filtering ? (
          <EmptyState
            icon={Mic2}
            title="No matching episodes"
            description="Try a different search term or status filter."
          />
        ) : (
          <EmptyState
            icon={Mic2}
            title="No episodes yet"
            description="Create your first AI-produced episode."
            action={
              <Button asChild>
                <Link href="/episodes/new">
                  <Plus className="h-4 w-4" /> New episode
                </Link>
              </Button>
            }
          />
        )
      ) : (
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
          {episodes.map((ep) => (
            <EpisodeCard
              key={ep.id}
              episode={{
                id: ep.id,
                title: ep.title,
                status: ep.status,
                format: ep.format,
                language: ep.language,
                createdAt: ep.createdAt,
                coverArtKey: ep.coverArt?.storageKey,
              }}
            />
          ))}
        </div>
      )}
    </>
  );
}