"use client";

import { useState, type CSSProperties } from "react";
import { useActionState } from "react";
import Link from "next/link";
import { saveSiteAction, type SaveResult } from "../actions";
import type { Site } from "yt-dlp-transcript-common/lib/site";
import {
  ACCENTS,
  ACCENT_IDS,
  DEFAULT_ACCENT,
  isAccentId,
} from "yt-dlp-transcript-common/lib/brand";
import type { ChannelGroup } from "yt-dlp-transcript-common/lib/channelGroups";
import {
  SocialLinksField,
  toSocialRow,
  type SocialRow,
} from "../../components/SocialLinksField";
import { Field, SeededSelect } from "../../components/forms/Field";
import {
  ControlledCheck,
  ControlledSelect,
} from "../../components/forms/Controlled";
import { seedChecked } from "../../lib/formState";

export type ChannelOption = { slug: string; name: string };
export type SiteOption = { siteId: string; siteTitle: string };

type Props = {
  initial: Site;
  channels: ChannelOption[];
  // Other sites (excluding this one) available to feature in related-site
  // groups. Empty for a single-site install.
  allSites: SiteOption[];
  isNew: boolean;
};

type GroupRow = {
  id: string;
  name: string;
  description: string;
  selectedByDefault: boolean;
  inline: boolean;
};

// A featured related-sites group: a label + the sibling siteIds picked into it,
// in pick order.
type RelatedGroupRow = { label: string; siteIds: string[] };

function toGroupRow(g: ChannelGroup): GroupRow {
  return {
    id: g.id,
    name: g.name,
    description: g.description ?? "",
    selectedByDefault: g.selectedByDefault,
    inline: g.inline === true,
  };
}

export function SiteForm({ initial, channels, allSites, isNew }: Props) {
  const [state, formAction] = useActionState<SaveResult | undefined, FormData>(
    saveSiteAction,
    undefined,
  );
  const [groups, setGroups] = useState<GroupRow[]>(() =>
    initial.groups.map(toGroupRow),
  );
  // Featured related-sites groups (siblings pulled to the front of the footer
  // cross-site list). Sites not featured here auto-fall into a trailing group.
  const [related, setRelated] = useState<RelatedGroupRow[]>(() =>
    (initial.relatedSites ?? []).map((g) => ({
      label: g.label ?? "",
      siteIds: [...g.siteIds],
    })),
  );
  const [defaultGroupId, setDefaultGroupId] = useState(initial.defaultGroupId);
  // Brand accent: one of the named accents (absent reads as the default,
  // Signal) or "custom" with its own hex. Controlled, so the choice survives
  // the form reset React does after an action.
  const initialCustom =
    initial.accent && !isAccentId(initial.accent) ? initial.accent : "";
  const [accentChoice, setAccentChoice] = useState<string>(() =>
    initialCustom ? "custom" : (initial.accent ?? DEFAULT_ACCENT),
  );
  const [customHex, setCustomHex] = useState(initialCustom);
  const customSwatch = /^#?[0-9a-f]{6}$/i.test(customHex.trim())
    ? `#${customHex.trim().replace(/^#/, "")}`
    : undefined;
  // undefined socialLinks = inherit the global default (the default for new
  // sites); an array (even empty) = this site supplies its own list.
  const [inheritSocial, setInheritSocial] = useState(
    initial.socialLinks === undefined,
  );
  const [social, setSocial] = useState<SocialRow[]>(() =>
    (initial.socialLinks ?? []).map(toSocialRow),
  );
  // Membership keyed by slug. Order = the order channels are listed; members
  // serialize in `channels` array order.
  const [members, setMembers] = useState<Map<string, string>>(
    () => new Map(initial.channels.map((c) => [c.slug, c.groupId ?? ""])),
  );

  const groupsJson = JSON.stringify(
    groups.map((g, idx) => ({
      id: g.id.trim(),
      name: g.name.trim(),
      description: g.description.trim() || undefined,
      selectedByDefault: g.selectedByDefault,
      order: idx,
      inline: g.inline || undefined,
    })),
  );
  const channelsJson = JSON.stringify(
    channels
      .filter((c) => members.has(c.slug))
      .map((c, idx) => {
        const groupId = members.get(c.slug)?.trim();
        return groupId
          ? { slug: c.slug, groupId, order: idx }
          : { slug: c.slug, order: idx };
      }),
  );

  const toggleMember = (slug: string, on: boolean) =>
    setMembers((prev) => {
      const next = new Map(prev);
      if (on) next.set(slug, prev.get(slug) ?? "");
      else next.delete(slug);
      return next;
    });
  const setMemberGroup = (slug: string, groupId: string) =>
    setMembers((prev) => {
      const next = new Map(prev);
      next.set(slug, groupId);
      return next;
    });

  const moveGroup = (idx: number, delta: -1 | 1) =>
    setGroups((prev) => {
      const next = prev.slice();
      const j = idx + delta;
      if (j < 0 || j >= next.length) return prev;
      [next[idx], next[j]] = [next[j], next[idx]];
      return next;
    });
  const addGroup = () =>
    setGroups((prev) => [
      ...prev,
      // Manually added groups default off; only the seeded FALLBACK_GROUP
      // starts with inline on.
      { id: "", name: "", description: "", selectedByDefault: false, inline: false },
    ]);
  const removeGroup = (idx: number) =>
    setGroups((prev) => {
      const next = prev.filter((_, i) => i !== idx);
      if (next.length > 0 && !next.some((g) => g.id.trim() === defaultGroupId)) {
        setDefaultGroupId(next[0].id.trim());
      }
      return next;
    });
  const groupOptions = groups
    .map((g) => ({ id: g.id.trim(), label: g.name.trim() || g.id.trim() }))
    .filter((g) => g.id);

  // Drop empty groups + unknown siteIds at serialize time so the payload always
  // matches what writeSite would keep (parseRelatedSites does the same).
  const knownSiteIds = new Set(allSites.map((s) => s.siteId));
  const relatedSitesJson = JSON.stringify(
    related
      .map((g) => ({
        label: g.label.trim() || undefined,
        siteIds: g.siteIds.filter((id) => knownSiteIds.has(id)),
      }))
      .filter((g) => g.siteIds.length > 0),
  );
  const siteTitleById = new Map(allSites.map((s) => [s.siteId, s.siteTitle]));

  const addRelatedGroup = () =>
    setRelated((prev) => [...prev, { label: "", siteIds: [] }]);
  const removeRelatedGroup = (idx: number) =>
    setRelated((prev) => prev.filter((_, i) => i !== idx));
  const moveRelatedGroup = (idx: number, delta: -1 | 1) =>
    setRelated((prev) => {
      const next = prev.slice();
      const j = idx + delta;
      if (j < 0 || j >= next.length) return prev;
      [next[idx], next[j]] = [next[j], next[idx]];
      return next;
    });
  const setRelatedLabel = (idx: number, label: string) =>
    setRelated((prev) =>
      prev.map((row, i) => (i === idx ? { ...row, label } : row)),
    );
  // Toggle a sibling into/out of a group. Appending on add preserves pick order.
  const toggleRelatedSite = (idx: number, siteId: string, on: boolean) =>
    setRelated((prev) =>
      prev.map((row, i) => {
        if (i !== idx) return row;
        const has = row.siteIds.includes(siteId);
        if (on && !has) return { ...row, siteIds: [...row.siteIds, siteId] };
        if (!on && has)
          return { ...row, siteIds: row.siteIds.filter((s) => s !== siteId) };
        return row;
      }),
    );

  return (
    <form action={formAction} className="flex flex-col gap-4 max-w-2xl">
      <input type="hidden" name="groupsJson" value={groupsJson} />
      <input type="hidden" name="defaultGroupId" value={defaultGroupId} />
      <input type="hidden" name="channelsJson" value={channelsJson} />
      <input type="hidden" name="relatedSitesJson" value={relatedSitesJson} />

      {isNew ? (
        <Field
          label="Site ID"
          state={state}
          name="siteId"
          defaultValue={initial.siteId}
          required
          hint="Stable identifier (kebab-case). Used as the directory name and deploy key. Cannot be changed later."
        />
      ) : (
        <>
          <input type="hidden" name="siteId" value={initial.siteId} />
          <div className="text-sm">
            <span className="font-medium">Site ID:</span>{" "}
            <code>{initial.siteId}</code>
          </div>
        </>
      )}
      <Field
        label="Site title"
        state={state}
        name="siteTitle"
        defaultValue={initial.siteTitle}
        required
      />
      <Field
        label="Header title"
        state={state}
        name="headerTitle"
        defaultValue={initial.headerTitle}
        required
      />
      <Field
        label="Wordmark lead"
        state={state}
        name="wordmarkLead"
        defaultValue={initial.wordmarkLead ?? ""}
        hint={'The heavy start of the wordmark — the subject\'s name, e.g. "Jer" for Jeralyzer; the rest is set light. It must be how the header text begins (same case) and shorter than it. Leave blank to set the whole name heavy.'}
      />
      <Field
        label="Site description"
        state={state}
        name="siteDescription"
        defaultValue={initial.siteDescription}
      />
      <Field
        label="Home tagline"
        state={state}
        name="homeTagline"
        defaultValue={initial.homeTagline}
      />
      <fieldset className="flex flex-col gap-2 text-sm">
        <legend className="font-medium">Brand accent</legend>
        <p className="text-xs text-muted-foreground">
          This site&apos;s accent (its icon and every page). A custom colour
          is darkened or lightened on each base (light, dark) until it reads
          at 4.5:1.
        </p>
        <div className="flex flex-wrap gap-x-4 gap-y-2">
          {ACCENT_IDS.map((id) => (
            <label key={id} className="flex items-center gap-1.5">
              <ControlledCheck
                type="radio"
                name="accent"
                value={id}
                checked={accentChoice === id}
                onChange={() => setAccentChoice(id)}
                className="accent-brand"
              />
              <span
                aria-hidden="true"
                className="size-3.5 rounded-full border border-border bg-[var(--swatch-on-light)] dark:bg-[var(--swatch-on-dark)]"
                style={
                  {
                    "--swatch-on-light": ACCENTS[id].onLight,
                    "--swatch-on-dark": ACCENTS[id].onDark,
                  } as CSSProperties
                }
              />
              {ACCENTS[id].name}
              {id === DEFAULT_ACCENT ? " (default)" : ""}
            </label>
          ))}
          <label className="flex items-center gap-1.5">
            <ControlledCheck
              type="radio"
              name="accent"
              value="custom"
              checked={accentChoice === "custom"}
              onChange={() => setAccentChoice("custom")}
              className="accent-brand"
            />
            <span
              aria-hidden="true"
              className="size-3.5 rounded-full border border-border"
              style={{ background: customSwatch ?? "transparent" }}
            />
            Custom
          </label>
        </div>
        <label className="flex items-center gap-2">
          <span className="font-medium">Custom hex</span>
          <input
            type="text"
            name="accentCustom"
            value={customHex}
            onChange={(e) => {
              setCustomHex(e.target.value);
              setAccentChoice("custom");
            }}
            placeholder="#cc3366"
            spellCheck={false}
            className="w-28 rounded border border-border bg-card px-2 py-1 font-mono text-sm"
          />
        </label>
      </fieldset>
      <Field
        label="Cloudflare Pages project"
        state={state}
        name="cloudflareProject"
        defaultValue={initial.cloudflareProject ?? ""}
        hint="Project name this site deploys to (wrangler --project-name). Leave blank to set later."
      />
      <Field
        label="Public URL"
        state={state}
        name="siteUrl"
        defaultValue={initial.siteUrl ?? ""}
        hint="Absolute URL this site is served at (e.g. https://jeralyzer.com). Used so other sites can link to it in their footer. Leave blank to omit this site from cross-site lists."
      />
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Audience</span>
        <SeededSelect
          state={state}
          name="audience"
          aria-label="Audience"
          initial={initial.audience === "private" ? "private" : "public"}
          className="w-fit rounded border border-border bg-card px-2 py-1 text-sm"
        >
          <option value="public">Public — deployed and listed as configured</option>
          <option value="private">Private — built for reading on this machine, never deployed</option>
        </SeededSelect>
        <span className="text-xs text-muted-foreground">
          A private site is never deployed (Build &amp; deploy and Deploy refuse
          it; Build still builds it) and never listed on the homepage or the hub,
          and publishes no hub URL. It is the one kind of site X posts are built
          into while Settings keeps X posts private.
        </span>
      </label>
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Publish policy</span>
        <SeededSelect
          state={state}
          name="publishAuto"
          aria-label="Publish policy"
          initial={initial.publish?.auto ?? "off"}
          className="w-fit rounded border border-border bg-card px-2 py-1 text-sm"
        >
          <option value="off">Off — built and deployed only when you press a button</option>
          <option value="build">Build — Publish now and the publish lane rebuild it when it is stale</option>
          <option value="preview">Preview — and deploy it to the preview branch</option>
          <option value="production">Production — and deploy it to production</option>
        </SeededSelect>
        <span className="text-xs text-muted-foreground">
          What Publish now and the publish lane do for this site (site.json{" "}
          <code>publish.auto</code>). Preview and Production need a Cloudflare
          Pages project; a private site is built, never deployed.
        </span>
      </label>
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="search"
          defaultChecked={seedChecked(state, "search", initial.search !== false)}
          className="accent-brand"
        />
        Search
      </label>
      <p className="-mt-2 text-xs text-muted-foreground">
        Off: the site is its reports only.
      </p>
      <div className="flex flex-col gap-1 text-sm">
        <span className="font-medium">Reports</span>
        {initial.reports && initial.reports.length > 0 ? (
          <ol
            aria-label="Published reports"
            className="list-decimal pl-6 font-mono text-xs"
          >
            {initial.reports.map((id) => (
              <li key={id}>{id}</li>
            ))}
          </ol>
        ) : (
          <span className="text-xs text-muted-foreground">None</span>
        )}
        <span className="text-xs text-muted-foreground">
          The published reports, in order (report ids under this site&apos;s
          reports/ directory). Not edited here: saving this form keeps the list
          as it is.
          {!isNew && (
            <>
              {" "}Publish, unpublish and reorder them on the{" "}
              <Link href={`/sites/${initial.siteId}/reports`} className="underline">
                Reports
              </Link>{" "}
              tab.
            </>
          )}
        </span>
      </div>
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="listed"
          defaultChecked={seedChecked(
            state,
            "listed",
            initial.listed !== false,
          )}
          className="accent-brand"
        />
        List on the Archilyzer homepage and hub
      </label>
      <p className="-mt-2 text-xs text-muted-foreground">
        On by default. Turn off to leave this site out of the homepage (its
        card, chart and stats), the hub (its members, search, corpus.json and
        llms.txt) and every other site&apos;s footer, and to count its own
        channels in none of the published totals. The site still builds and
        deploys as before, at its own URL.
      </p>
      <Field
        label="Hub URL"
        state={state}
        name="hubUrl"
        defaultValue={initial.hubUrl ?? ""}
        hint="The hub this site belongs under (e.g. https://archilyzer-hub.pages.dev), published in this site's /site.json and /corpus.json so the hub can tell it is a member; the header does not link to it. Leave blank to inherit the family default from Settings."
      />
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="pwa"
          defaultChecked={seedChecked(state, "pwa", initial.pwa === true)}
          className="accent-brand"
        />
        Ship as an installable PWA
      </label>
      <p className="-mt-2 text-xs text-muted-foreground">
        Off by default: the site serves its data for the hub to read but isn&apos;t
        independently installable and ships no service worker. Turn on to make
        this site installable with offline support.
      </p>

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="archives"
          defaultChecked={seedChecked(
            state,
            "archives",
            initial.archives !== false,
          )}
          className="accent-brand"
        />
        Generate downloadable archive zips on build
      </label>
      <p className="-mt-2 text-xs text-muted-foreground">
        On by default: each build produces per-channel transcript &amp; live-chat
        zips and lists them on the site&apos;s Downloads page. Turn off to skip
        generation for this site.
      </p>
      <Field
        label="Archive size cap (MB)"
        state={state}
        name="archiveMaxMB"
        type="number"
        min="0"
        defaultValue={
          typeof initial.archiveMaxBytes === "number"
            ? String(Math.round(initial.archiveMaxBytes / (1024 * 1024)))
            : ""
        }
        hint="Archives larger than this can't ship as Cloudflare Pages assets (25 MB limit). If R2 overflow storage is configured in Settings they upload there on deploy; otherwise they show as unavailable. Leave blank for the default 25 MB; 0 = no cap."
      />
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="transcriptDownloads"
          defaultChecked={seedChecked(
            state,
            "transcriptDownloads",
            initial.transcriptDownloads !== false,
          )}
          className="accent-brand"
        />
        Per-video transcript downloads (Download menu, Copy Markdown)
      </label>
      <p className="-mt-2 text-xs text-muted-foreground">
        On by default: a visitor&apos;s transcript viewer offers the transcript as a
        txt/srt/json file and as Markdown. Turn off to hide both on this site;
        the yt-dlp command for a marked clip is not a download and stays. The
        machine contract
        (corpus.json, manifests, shards) is published either way.
      </p>
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          name="duplicates"
          defaultChecked={seedChecked(
            state,
            "duplicates",
            initial.duplicates !== false,
          )}
          className="accent-brand"
        />
        Show the Duplicates page
      </label>
      <p className="-mt-2 text-xs text-muted-foreground">
        On by default: publishes the cross-channel duplicate-shorts page and its
        header link. Turn off to hide it for this site. Even when on, the link and
        page auto-hide when this site has no detected duplicates.
      </p>

      <fieldset className="flex flex-col gap-3 border border-border rounded p-3">
        <legend className="px-1 text-sm font-medium">Channels</legend>
        <p className="text-xs text-muted-foreground">
          Pick the channels this site exposes and the group each belongs to.
          Channels not checked here are excluded from this site&apos;s build.
        </p>
        <div className="flex flex-col gap-1 max-h-96 overflow-y-auto">
          {channels.length === 0 && (
            <div className="text-sm text-muted-foreground">No channels configured.</div>
          )}
          {channels.map((c) => {
            const on = members.has(c.slug);
            return (
              <div
                key={c.slug}
                className="flex items-center gap-2 text-sm py-1 border-b border-border"
              >
                <label className="flex items-center gap-2 flex-1 min-w-0">
                  <ControlledCheck
                    type="checkbox"
                    checked={on}
                    onChange={(e) => toggleMember(c.slug, e.target.checked)}
                    aria-label={`Include ${c.name || c.slug}`}
                  />
                  <span className="truncate">
                    {c.name || c.slug}{" "}
                    <code className="text-xs text-muted-foreground">{c.slug}</code>
                  </span>
                </label>
                {on && groupOptions.length > 0 && (
                  <ControlledSelect
                    value={members.get(c.slug) ?? ""}
                    onChange={(e) => setMemberGroup(c.slug, e.target.value)}
                    aria-label={`Group for ${c.name || c.slug}`}
                    className="rounded border border-border bg-card px-1.5 py-0.5 text-xs shrink-0"
                  >
                    <option value="">(default)</option>
                    {groupOptions.map((g) => (
                      <option key={g.id} value={g.id}>
                        {g.label}
                      </option>
                    ))}
                  </ControlledSelect>
                )}
              </div>
            );
          })}
        </div>
      </fieldset>

      <fieldset className="flex flex-col gap-3 border border-border rounded p-3">
        <legend className="px-1 text-sm font-medium">Channel groups</legend>
        <p className="text-xs text-muted-foreground">
          Cosmetic groupings the export UI uses to organize this site&apos;s
          channel checkboxes.
        </p>
        {groups.map((g, idx) => {
          const idTrim = g.id.trim();
          const isDefault = idTrim !== "" && idTrim === defaultGroupId;
          return (
            <div
              key={idx}
              className="flex flex-col gap-2 border border-border rounded p-3 bg-card"
            >
              <div className="flex items-center justify-between gap-2">
                <label className="flex items-center gap-1.5 text-xs select-none">
                  <ControlledCheck
                    type="radio"
                    checked={isDefault}
                    onChange={() => setDefaultGroupId(idTrim)}
                    disabled={!idTrim}
                    className="accent-brand"
                  />
                  Default group
                </label>
                <div className="flex items-center gap-1">
                  <button
                    type="button"
                    onClick={() => moveGroup(idx, -1)}
                    disabled={idx === 0}
                    className="px-2 py-0.5 rounded border border-border text-xs disabled:opacity-40"
                    aria-label="Move group up"
                  >
                    ↑
                  </button>
                  <button
                    type="button"
                    onClick={() => moveGroup(idx, 1)}
                    disabled={idx === groups.length - 1}
                    className="px-2 py-0.5 rounded border border-border text-xs disabled:opacity-40"
                    aria-label="Move group down"
                  >
                    ↓
                  </button>
                  <button
                    type="button"
                    onClick={() => removeGroup(idx)}
                    className="px-2 py-0.5 rounded border border-destructive/30 text-xs text-destructive"
                  >
                    Remove
                  </button>
                </div>
              </div>
              <label className="flex flex-col gap-1 text-sm">
                <span className="font-medium">ID</span>
                <input
                  type="text"
                  value={g.id}
                  onChange={(e) => {
                    const v = e.target.value;
                    setGroups((prev) =>
                      prev.map((row, i) => (i === idx ? { ...row, id: v } : row)),
                    );
                    if (idTrim && idTrim === defaultGroupId)
                      setDefaultGroupId(v.trim());
                  }}
                  placeholder="kebab-case"
                  className="rounded border border-border bg-card px-2 py-1 text-sm font-mono"
                />
              </label>
              <label className="flex flex-col gap-1 text-sm">
                <span className="font-medium">Name</span>
                <input
                  type="text"
                  value={g.name}
                  onChange={(e) =>
                    setGroups((prev) =>
                      prev.map((row, i) =>
                        i === idx ? { ...row, name: e.target.value } : row,
                      ),
                    )
                  }
                  placeholder="Display name (optional)"
                  className="rounded border border-border bg-card px-2 py-1 text-sm"
                />
              </label>
              <label className="flex flex-col gap-1 text-sm">
                <span className="font-medium">Description</span>
                <textarea
                  value={g.description}
                  onChange={(e) =>
                    setGroups((prev) =>
                      prev.map((row, i) =>
                        i === idx
                          ? { ...row, description: e.target.value }
                          : row,
                      ),
                    )
                  }
                  rows={2}
                  className="rounded border border-border bg-card px-2 py-1 text-sm"
                />
              </label>
              <label className="flex items-center gap-2 text-sm">
                <ControlledCheck
                  type="checkbox"
                  checked={g.selectedByDefault}
                  onChange={(e) =>
                    setGroups((prev) =>
                      prev.map((row, i) =>
                        i === idx
                          ? { ...row, selectedByDefault: e.target.checked }
                          : row,
                      ),
                    )
                  }
                  className="accent-brand"
                />
                Selected by default
              </label>
              <label className="flex items-center gap-2 text-sm">
                <ControlledCheck
                  type="checkbox"
                  checked={g.inline}
                  onChange={(e) =>
                    setGroups((prev) =>
                      prev.map((row, i) =>
                        i === idx ? { ...row, inline: e.target.checked } : row,
                      ),
                    )
                  }
                  className="accent-brand"
                />
                Show channels as individual chips
              </label>
              <p className="text-xs text-muted-foreground">
                Renders each member channel as its own loose chip in the
                viewer&apos;s filter row instead of a collapsible group box.
              </p>
            </div>
          );
        })}
        <div>
          <button
            type="button"
            onClick={addGroup}
            className="px-3 py-1.5 rounded border border-border text-sm hover:bg-muted"
          >
            + Add group
          </button>
        </div>
      </fieldset>

      <fieldset className="flex flex-col gap-3 border border-border rounded p-3">
        <legend className="px-1 text-sm font-medium">Social links</legend>
        <input
          type="hidden"
          name="inheritSocialLinks"
          value={inheritSocial ? "on" : ""}
        />
        <label className="flex items-center gap-2 text-sm">
          <ControlledCheck
            type="checkbox"
            checked={inheritSocial}
            onChange={(e) => setInheritSocial(e.target.checked)}
            className="accent-brand"
          />
          Use global default social links
        </label>
        {inheritSocial ? (
          <p className="text-xs text-muted-foreground">
            This site&apos;s footer uses the social links set in{" "}
            <span className="font-medium">Settings</span>. Uncheck to give this
            site its own list (an empty list shows no links).
          </p>
        ) : (
          <SocialLinksField
            value={social}
            onChange={setSocial}
            name="socialLinksJson"
          />
        )}
      </fieldset>

      <fieldset className="flex flex-col gap-3 border border-border rounded p-3">
        <legend className="px-1 text-sm font-medium">Related sites</legend>
        <p className="text-xs text-muted-foreground">
          The footer links to every other site that has a Public URL. Add groups
          here to pull closely-related sites to the front under a heading; every
          site you don&apos;t feature falls into a trailing &ldquo;Other
          sites&rdquo; group automatically.
        </p>
        {allSites.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            No other sites to link to yet.
          </p>
        ) : (
          <>
            {related.map((g, idx) => (
              <div
                key={idx}
                className="flex flex-col gap-2 border border-border rounded p-3 bg-card"
              >
                <div className="flex items-center justify-between gap-2">
                  <label className="flex flex-col gap-1 text-sm flex-1 min-w-0">
                    <span className="font-medium">Group label</span>
                    <input
                      type="text"
                      value={g.label}
                      onChange={(e) => setRelatedLabel(idx, e.target.value)}
                      placeholder="Heading (optional)"
                      className="rounded border border-border bg-card px-2 py-1 text-sm"
                    />
                  </label>
                  <div className="flex items-center gap-1 self-end">
                    <button
                      type="button"
                      onClick={() => moveRelatedGroup(idx, -1)}
                      disabled={idx === 0}
                      className="px-2 py-0.5 rounded border border-border text-xs disabled:opacity-40"
                      aria-label="Move related group up"
                    >
                      ↑
                    </button>
                    <button
                      type="button"
                      onClick={() => moveRelatedGroup(idx, 1)}
                      disabled={idx === related.length - 1}
                      className="px-2 py-0.5 rounded border border-border text-xs disabled:opacity-40"
                      aria-label="Move related group down"
                    >
                      ↓
                    </button>
                    <button
                      type="button"
                      onClick={() => removeRelatedGroup(idx)}
                      className="px-2 py-0.5 rounded border border-destructive/30 text-xs text-destructive"
                    >
                      Remove
                    </button>
                  </div>
                </div>
                <div className="flex flex-col gap-1">
                  {allSites.map((s) => (
                    <label
                      key={s.siteId}
                      className="flex items-center gap-2 text-sm"
                    >
                      <ControlledCheck
                        type="checkbox"
                        checked={g.siteIds.includes(s.siteId)}
                        onChange={(e) =>
                          toggleRelatedSite(idx, s.siteId, e.target.checked)
                        }
                      />
                      <span className="truncate">
                        {s.siteTitle || s.siteId}{" "}
                        <code className="text-xs text-muted-foreground">{s.siteId}</code>
                      </span>
                    </label>
                  ))}
                </div>
              </div>
            ))}
            <div>
              <button
                type="button"
                onClick={addRelatedGroup}
                className="px-3 py-1.5 rounded border border-border text-sm hover:bg-muted"
              >
                + Add related group
              </button>
            </div>
            {related.some((g) =>
              g.siteIds.some((id) => !siteTitleById.has(id)),
            ) && (
              <p className="text-xs text-warning">
                Some featured sites no longer exist and will be dropped on save.
              </p>
            )}
          </>
        )}
      </fieldset>

      <div className="flex items-center gap-3">
        <button
          type="submit"
          className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90"
        >
          {isNew ? "Create site" : "Save site"}
        </button>
        {state?.ok === true && (
          <span role="status" className="text-sm text-success">
            Saved.
          </span>
        )}
        {state && state.ok === false && (
          <span role="alert" className="text-sm text-destructive">
            {state.error}
          </span>
        )}
      </div>
    </form>
  );
}