"use client";

import { useActionState } from "react";
import { useSearchParams } from "next/navigation";
import { ChannelForm } from "./ChannelForm";
import type { ChannelConfig } from "yt-dlp-transcript-common/lib/channelConfig";
import type { ActionResult } from "../actions";
import { resolveActiveSiteFrom } from "../../lib/activeSite";
import { useSiteScope } from "../../components/SiteScopeProvider";
import type {
  InitialMembership,
  SiteMembershipOption,
} from "./SiteMembershipsSection";

type Props = {
  action: (
    prev: ActionResult,
    formData: FormData,
  ) => Promise<ActionResult>;
  initial?: { slug: string; config: ChannelConfig };
  submitLabel: string;
  sites: SiteMembershipOption[];
  initialMemberships?: InitialMembership[];
};

export function ChannelFormClient({
  action,
  initial,
  submitLabel,
  sites,
  initialMemberships,
}: Props) {
  const [state, formAction] = useActionState<ActionResult, FormData>(
    action,
    undefined,
  );
  // A new channel starts checked on the active site, as the picker resolves it
  // off a site's pages: a `?site=` link's, else the stored selection (the
  // cookie, through SiteScopeProvider). Both are known on the server and on the
  // first client render, so the box is checked in the first paint. Create mode
  // only: an existing channel's memberships come from initialMemberships.
  // (useSearchParams needs no Suspense here: both pages that render this form
  // are dynamic.)
  const { stored, siteIds } = useSiteScope();
  const linkSite = useSearchParams().get("site");
  const activeSiteId = initial
    ? null
    : resolveActiveSiteFrom([linkSite, stored], siteIds).siteId;
  return (
    <ChannelForm
      action={formAction}
      initial={initial}
      submitLabel={submitLabel}
      errorMessage={state?.error}
      state={state}
      sites={sites}
      initialMemberships={initialMemberships}
      activeSiteId={activeSiteId}
    />
  );
}