import type { Metadata } from "next";
import Link from "next/link";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { listSites } from "yt-dlp-transcript-common/lib/site";
import { sortGroups } from "yt-dlp-transcript-common/lib/channelGroups";
import { ChannelFormClient } from "../components/ChannelFormClient";
import type { SiteMembershipOption } from "../components/SiteMembershipsSection";
import { createChannelAction } from "../actions";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "New channel — Channels" };

export default async function NewChannelPage() {
  const sites: SiteMembershipOption[] = listSites(getPaths()).map((s) => ({
    siteId: s.siteId,
    siteTitle: s.siteTitle,
    defaultGroupId: s.defaultGroupId,
    groups: sortGroups(s.groups).map((g) => ({ id: g.id, name: g.name })),
  }));
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Link href="/channels" className="underline hover:text-foreground">
          Channels
        </Link>
        <span>/</span>
        <span>new</span>
      </div>
      <h1 className="text-2xl font-semibold">New channel</h1>
      <ChannelFormClient
        action={createChannelAction}
        submitLabel="Create channel"
        sites={sites}
      />
    </div>
  );
}