import type { Metadata } from "next";
import Link from "next/link";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { listChannelConfigs } from "yt-dlp-transcript-common/controller/channels";
import {
  DEFAULT_GROUP_FALLBACK_ID,
  FALLBACK_GROUP,
} from "yt-dlp-transcript-common/lib/channelGroups";
import { listSites, type Site } from "yt-dlp-transcript-common/lib/site";
import {
  SiteForm,
  type ChannelOption,
  type SiteOption,
} from "../components/SiteForm";

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

export default async function NewSitePage() {
  const paths = getPaths();
  const channels: ChannelOption[] = (await listChannelConfigs(paths)).map((c) => ({
    slug: c.slug,
    name: c.config.name ?? c.slug,
  }));
  const allSites: SiteOption[] = listSites(paths).map((s) => ({
    siteId: s.siteId,
    siteTitle: s.siteTitle,
  }));
  const blank: Site = {
    siteId: "",
    siteTitle: "",
    siteDescription: "",
    headerTitle: "",
    homeTagline: "",
    // socialLinks omitted = inherit the global default.
    groups: [{ ...FALLBACK_GROUP }],
    defaultGroupId: DEFAULT_GROUP_FALLBACK_ID,
    channels: [],
  };
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Link href="/sites" className="underline hover:text-foreground">
          Sites
        </Link>
        <span>/</span>
        <span>new</span>
      </div>
      <h1 className="text-2xl font-semibold">New site</h1>
      <SiteForm initial={blank} channels={channels} allSites={allSites} isNew />
    </div>
  );
}