"use client";

// The filters half of the search bar: the profile row, every filter (channels,
// type, audience, availability, dates) and the advanced throughput knobs.
//
// It is ONE component with ONE mount, placed by FiltersContainer — inline under
// the bar from xl, inside a sheet below it. The profile row lives here rather
// than above the query builder because a profile IS a saved filter+query set,
// and on a phone it was three rows of chrome above the search box.
//
// The outer `<details data-testid="filters-panel">` is load-bearing: several
// specs locate a channel group card as `details details`, so this wrapper has
// to be the outer one. It also doubles as the inline collapse, driven by the
// session's persisted `filtersCollapsed`.

import { Fragment, useCallback, useMemo, useState } from "react";
import { ChevronRightIcon } from "lucide-react";
import {
  MISSING_STATES,
  VIDEO_STATE_LABELS,
  type VideoState,
} from "../lib/availability";
import { Button } from "./ui/button";
import { Checkbox } from "./ui/checkbox";
import { cn } from "../lib/utils";
import { clearAdvanced } from "./exportAdvancedStorage";
import { ymdToInput, inputToYmd } from "../lib/ymd";
import {
  useSearchSession,
  SEARCH_IN_REFUSAL,
  DEFAULT_MAX_HITS,
  DEFAULT_FETCH_CONCURRENCY,
  DEFAULT_FLUSH_INTERVAL_MS,
} from "./SearchSessionContext";
import { useSearchData } from "./SearchDataContext";
import {
  groupPublishedTags,
  selectableTags,
} from "../lib/publishedTags";
import type { PublishedTag } from "../lib/curatedTags";

export default function FiltersPanel({
  // Inside the sheet the sheet itself IS the disclosure, so the wrapper stays
  // open and its summary is not offered as a second control.
  forceOpen = false,
}: {
  forceOpen?: boolean;
}) {
  const {
    profiles,
    activeProfileName,
    profileDirty,
    shareCopied,
    handleLoadProfile,
    handleSaveProfile,
    handleSaveAsProfile,
    handleRenameProfile,
    handleDeleteProfile,
    handleRevertProfile,
    handleShareCurrentSearch,
    channelOptions,
    filtersCollapsed,
    toggleFiltersCollapsed,
    selectedChannelNames,
    selectedChannelsLabel,
    draftExcludedChannels,
    setDraftExcludedChannels,
    handleResetChannels,
    handleResetAllFilters,
    handleResetEverything,
    channelGroupings,
    collapsedGroups,
    toggleGroupCollapsed,
    setSelected,
    channelLabelByKey,
    draftNov,
    draftNop,
    setDraftNop,
    draftNotr,
    setDraftNotr,
    draftLc,
    setDraftLc,
    draftSearchInEmpty,
    hasPostsCorpus,
    hasSubs,
    setDraftNov,
    draftNol,
    setDraftNol,
    draftNaa,
    setDraftNaa,
    draftNar,
    setDraftNar,
    draftStates,
    setDraftStates,
    draftDateFrom,
    setDraftDateFrom,
    draftDateTo,
    setDraftDateTo,
    hitBatchValue,
    setHitBatchValue,
    hitBatchUnlimited,
    setHitBatchUnlimited,
    fetchConcurrency,
    setFetchConcurrency,
    flushIntervalMs,
    setFlushIntervalMs,
    setHitLimit,
  } = useSearchSession();

  const toggleState = useCallback(
    (state: VideoState, keep: boolean) => {
      setDraftStates((prev) => {
        const next = new Set(prev);
        if (keep) next.add(state);
        else next.delete(state);
        return next;
      });
    },
    [setDraftStates],
  );
  const setAllMissing = useCallback(
    (keep: boolean) => {
      setDraftStates((prev) => {
        const next = new Set(prev);
        for (const s of MISSING_STATES) {
          if (keep) next.add(s);
          else next.delete(s);
        }
        return next;
      });
    },
    [setDraftStates],
  );
  const allMissingKept = MISSING_STATES.every((s) => draftStates.has(s));
  const someMissingKept = MISSING_STATES.some((s) => draftStates.has(s));

  return (
    <details
      data-testid="filters-panel"
      open={forceOpen || !filtersCollapsed}
      className="min-w-0"
    >
      <summary
        onClick={(e) => {
          // Drive the open state from React rather than the browser's default
          // toggle action. Avoids a spurious `toggle` event that fires when
          // React first mounts <details open> after the manifest loads, which
          // would clobber the persisted value.
          e.preventDefault();
          if (!forceOpen) toggleFiltersCollapsed();
        }}
        className={cn(
          "cursor-pointer select-none flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-muted-foreground",
          forceOpen && "hidden",
        )}
      >
        <span className="text-xs uppercase tracking-wide text-muted-foreground">
          Filters
        </span>
        {channelOptions.length > 0 && (
          <span className="text-xs text-muted-foreground">
            {selectedChannelNames.length} of {channelOptions.length} channel
            {channelOptions.length === 1 ? "" : "s"}
          </span>
        )}
        {filtersCollapsed && selectedChannelNames.length > 0 && (
          <span
            className="text-xs text-muted-foreground truncate min-w-0 flex-1"
            title={selectedChannelsLabel}
            data-testid="filters-summary-channels"
          >
            {selectedChannelsLabel}
          </span>
        )}
      </summary>

      <div className="mt-2 flex flex-col gap-4">
        <ProfilesRow
          profileNames={Object.keys(profiles).sort()}
          activeProfileName={activeProfileName}
          profileDirty={profileDirty}
          shareCopied={shareCopied}
          onSelect={handleLoadProfile}
          onSave={handleSaveProfile}
          onSaveAs={handleSaveAsProfile}
          onRename={handleRenameProfile}
          onDelete={handleDeleteProfile}
          onRevert={handleRevertProfile}
          onShareCurrentSearch={handleShareCurrentSearch}
          saveDisabled={draftSearchInEmpty}
        />

        {channelOptions.length > 0 && (
        <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
          {channelOptions.length > 1 && (
            <div className="flex flex-col gap-2 w-full">
              <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                <span className="text-xs uppercase tracking-wide text-muted-foreground">
                  Channels
                </span>
                <ChannelAllToggle
                  channelOptions={channelOptions}
                  draftExcludedChannels={draftExcludedChannels}
                  setDraftExcludedChannels={setDraftExcludedChannels}
                />
                <Button
                  type="button"
                  variant="link"
                  size="sm"
                  onClick={handleResetChannels}
                  className="text-xs text-muted-foreground"
                >
                  Reset channels
                </Button>
                <Button
                  type="button"
                  variant="link"
                  size="sm"
                  onClick={handleResetAllFilters}
                  className="text-xs text-muted-foreground"
                >
                  Reset all filters
                </Button>
                <Button
                  type="button"
                  variant="link"
                  size="sm"
                  onClick={handleResetEverything}
                  data-testid="reset-everything"
                  className="text-xs text-muted-foreground"
                >
                  Reset everything
                </Button>
              </div>
              <div className="flex flex-wrap items-start gap-1.5">
                {channelGroupings.map(({ group, channels }) => {
                  if (group.inline) {
                    // Inline group: no collapsible box — each member channel
                    // renders as its own loose chip flowing among the group
                    // chips, styled like a collapsed group chip.
                    return (
                      <Fragment key={group.id}>
                        {channels.map((key) => {
                          const label = channelLabelByKey.get(key) ?? key;
                          return (
                            <label
                              key={key}
                              title={label}
                              data-testid="inline-channel-chip"
                              className="flex items-center gap-2 rounded border border-border bg-card/60 px-2.5 py-1.5 text-sm cursor-pointer select-none min-w-0 max-w-full w-full sm:w-auto sm:min-w-48"
                            >
                              <span className="flex items-center shrink-0">
                                <Checkbox
                                  checked={!draftExcludedChannels.has(key)}
                                  onCheckedChange={(value) =>
                                    setSelected([key], value === true)
                                  }
                                />
                              </span>
                              <span className="truncate">{label}</span>
                            </label>
                          );
                        })}
                      </Fragment>
                    );
                  }
                  const isOpen = !collapsedGroups.has(group.id);
                  const selectedCount = channels.reduce(
                    (n, name) =>
                      draftExcludedChannels.has(name) ? n : n + 1,
                    0,
                  );
                  return (
                    <details
                      key={group.id}
                      open={isOpen}
                      className={cn(
                        "rounded border border-border bg-card/60 min-w-0 max-w-full w-full",
                        !isOpen && "sm:w-auto sm:min-w-48",
                      )}
                    >
                      <summary
                        onClick={(e) => {
                          // Drive the open state from React rather than the
                          // browser's default toggle action — same rationale
                          // as the outer Filters summary above.
                          e.preventDefault();
                          toggleGroupCollapsed(group.id, !isOpen);
                        }}
                        className="cursor-pointer select-none flex items-center gap-2 px-2.5 py-1.5 text-sm min-w-0"
                        title={!isOpen ? group.description : undefined}
                      >
                        <ChevronRightIcon
                          aria-hidden="true"
                          className={cn(
                            "size-3.5 shrink-0 text-muted-foreground transition-transform",
                            isOpen && "rotate-90",
                          )}
                        />
                        <span
                          onClick={(e) => {
                            // Isolate checkbox clicks from the summary: no
                            // expand/collapse, just the group bulk-toggle.
                            e.preventDefault();
                            e.stopPropagation();
                          }}
                          className="flex items-center shrink-0"
                        >
                          <Checkbox
                            checked={
                              selectedCount === 0
                                ? false
                                : selectedCount === channels.length
                                  ? true
                                  : "indeterminate"
                            }
                            onCheckedChange={(value) =>
                              setSelected(channels, value === true)
                            }
                            aria-label={`Select all in ${group.name || "group"}`}
                          />
                        </span>
                        {group.name && (
                          <span
                            className="font-medium text-foreground flex items-center gap-1.5 min-w-0"
                            title={group.name}
                          >
                            {group.accent && (
                              <span
                                aria-hidden="true"
                                className="inline-block size-2 shrink-0 rounded-full"
                                style={{ background: group.accent }}
                              />
                            )}
                            <span className="truncate">{group.name}</span>
                          </span>
                        )}
                        <span
                          className={cn(
                            "text-xs text-muted-foreground shrink-0",
                            !isOpen && "ml-auto",
                          )}
                        >
                          {selectedCount}/{channels.length}
                          <span className="sr-only"> selected</span>
                        </span>
                        {isOpen && (
                          <span className="ml-auto flex items-center gap-2">
                            <Button
                              type="button"
                              variant="link"
                              size="sm"
                              onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                setSelected(channels, true);
                              }}
                              className="text-xs text-muted-foreground"
                            >
                              All
                            </Button>
                            <Button
                              type="button"
                              variant="link"
                              size="sm"
                              onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                setSelected(channels, false);
                              }}
                              className="text-xs text-muted-foreground"
                            >
                              None
                            </Button>
                          </span>
                        )}
                      </summary>
                      {group.description && (
                        <div className="px-3 pt-0 pb-1 text-xs text-muted-foreground">
                          {group.description}
                        </div>
                      )}
                      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-3 pt-1 pb-2">
                        {channels.map((key) => {
                          const checked = !draftExcludedChannels.has(key);
                          return (
                            <label
                              key={key}
                              className="flex items-center gap-1.5 select-none"
                            >
                              <Checkbox
                                checked={checked}
                                onCheckedChange={(value) => {
                                  setDraftExcludedChannels((prev) => {
                                    const next = new Set(prev);
                                    if (value === true) next.delete(key);
                                    else next.add(key);
                                    return next;
                                  });
                                }}
                              />
                              {channelLabelByKey.get(key) ?? key}
                            </label>
                          );
                        })}
                      </div>
                    </details>
                  );
                })}
              </div>
            </div>
          )}
          <TagChipRow />
          {/* What a plain query reads — the default "transcripts" leaf, not a
              leaf asked for by name in the builder. Posts is offered only
              where the site ships posts and Live chat only where it has live
              chat; with nothing ticked Search is refused and this row says so.
              Type below still says which records are listed. */}
          <div
            className="flex flex-wrap items-center gap-x-3 gap-y-1"
            data-testid="search-in-row"
          >
            <span className="text-xs uppercase tracking-wide text-muted-foreground">
              Search in
            </span>
            <label className="flex items-center gap-1.5 select-none">
              <Checkbox
                checked={!draftNotr}
                onCheckedChange={(value) => setDraftNotr(value !== true)}
              />
              Transcripts
            </label>
            {hasPostsCorpus && (
              <label className="flex items-center gap-1.5 select-none">
                <Checkbox
                  checked={!draftNop}
                  onCheckedChange={(value) => setDraftNop(value !== true)}
                />
                Posts
              </label>
            )}
            {hasSubs && (
              <label className="flex items-center gap-1.5 select-none">
                <Checkbox
                  checked={draftLc}
                  onCheckedChange={(value) => setDraftLc(value === true)}
                />
                Live chat
              </label>
            )}
            {/* Always mounted, empty unless Search is refused: a live region
                is announced when its content changes, which several screen
                readers miss for a region that appears with its text. A polite
                live region rather than role="status": this panel is always
                mounted from xl, and a page-wide second "status" would be a
                second answer to `getByRole("status")` (modal-digest.spec).
                The Search button is described by the bar's own copy of these
                words (this panel may be a closed sheet). */}
            <span
              aria-live="polite"
              aria-atomic="true"
              data-testid="search-in-empty"
              className={cn("text-xs text-warning", draftSearchInEmpty && "basis-full")}
            >
              {draftSearchInEmpty ? SEARCH_IN_REFUSAL : ""}
            </span>
          </div>
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
            <span className="text-xs uppercase tracking-wide text-muted-foreground">
              Type
            </span>
            <label className="flex items-center gap-1.5 select-none">
              <Checkbox
                checked={!draftNov}
                onCheckedChange={(value) => setDraftNov(value !== true)}
              />
              Videos
            </label>
            <label className="flex items-center gap-1.5 select-none">
              <Checkbox
                checked={!draftNol}
                onCheckedChange={(value) => setDraftNol(value !== true)}
              />
              Livestreams
            </label>
          </div>
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
            <span className="text-xs uppercase tracking-wide text-muted-foreground">
              Audience
            </span>
            <label className="flex items-center gap-1.5 select-none">
              <Checkbox
                checked={!draftNaa}
                onCheckedChange={(value) => setDraftNaa(value !== true)}
              />
              All ages
            </label>
            <label className="flex items-center gap-1.5 select-none">
              <Checkbox
                checked={!draftNar}
                onCheckedChange={(value) => setDraftNar(value !== true)}
              />
              Age-restricted
            </label>
          </div>
          {/* Availability is one enum, not three independent booleans:
              "Missing" is an umbrella over the five ways a video can leave
              its channel listing, so it renders as a parent with the leaves
              nested under it. Toggling the parent sets or clears all five;
              it goes indeterminate when only some are kept. */}
          <div className="flex flex-wrap items-start gap-x-3 gap-y-1">
            <span className="text-xs uppercase tracking-wide text-muted-foreground pt-0.5">
              Availability
            </span>
            <label className="flex items-center gap-1.5 select-none">
              <Checkbox
                data-testid="av-available"
                checked={draftStates.has("available")}
                onCheckedChange={(value) =>
                  toggleState("available", value === true)
                }
              />
              Available
            </label>
            <div className="flex flex-col gap-1">
              <label className="flex items-center gap-1.5 select-none">
                <Checkbox
                  data-testid="av-missing"
                  checked={
                    allMissingKept
                      ? true
                      : someMissingKept
                        ? "indeterminate"
                        : false
                  }
                  onCheckedChange={(value) => setAllMissing(value === true)}
                />
                Missing
              </label>
              <div className="flex flex-wrap items-center gap-x-3 gap-y-1 pl-5">
                {MISSING_STATES.map((state) => (
                  <label
                    key={state}
                    className="flex items-center gap-1.5 select-none"
                  >
                    <Checkbox
                      data-testid={`av-${state}`}
                      checked={draftStates.has(state)}
                      onCheckedChange={(value) =>
                        toggleState(state, value === true)
                      }
                    />
                    {VIDEO_STATE_LABELS[state]}
                  </label>
                ))}
              </div>
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
            <span className="text-xs uppercase tracking-wide text-muted-foreground">
              Date
            </span>
            <label className="flex items-center gap-1.5 select-none">
              From
              <input
                type="date"
                data-testid="date-from"
                value={ymdToInput(draftDateFrom)}
                onChange={(e) =>
                  setDraftDateFrom(inputToYmd(e.target.value) ?? "")
                }
                className="rounded-md border border-border bg-card text-foreground px-2 py-1 text-sm"
              />
            </label>
            <label className="flex items-center gap-1.5 select-none">
              To
              <input
                type="date"
                data-testid="date-to"
                value={ymdToInput(draftDateTo)}
                onChange={(e) =>
                  setDraftDateTo(inputToYmd(e.target.value) ?? "")
                }
                className="rounded-md border border-border bg-card text-foreground px-2 py-1 text-sm"
              />
            </label>
          </div>
        </div>
        )}

        {/* Throughput knobs: nobody sets these on a first visit, and on a phone
            they were four more rows between the query and the results. */}
        <details className="text-sm text-muted-foreground">
          <summary className="cursor-pointer select-none text-xs uppercase tracking-wide text-muted-foreground hover:text-foreground">
            Advanced options
          </summary>
          <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 p-4 rounded-md border border-border bg-card/60">
            <LimitField
              label="Max hits per batch"
              hint="Pause after this many matches; “Show more” adds another batch."
              value={hitBatchValue}
              unlimited={hitBatchUnlimited}
              defaultValue={DEFAULT_MAX_HITS}
              onValueChange={setHitBatchValue}
              onUnlimitedChange={setHitBatchUnlimited}
            />
            <NumberField
              label="Fetch concurrency"
              hint="Parallel transcript downloads while searching. Applies on next search."
              value={fetchConcurrency}
              defaultValue={DEFAULT_FETCH_CONCURRENCY}
              min={1}
              max={32}
              onChange={setFetchConcurrency}
            />
            <NumberField
              label="Flush interval (ms)"
              hint="UI update cadence during search. Applies on next search."
              value={flushIntervalMs}
              defaultValue={DEFAULT_FLUSH_INTERVAL_MS}
              min={16}
              max={2000}
              onChange={setFlushIntervalMs}
            />
            <div className="sm:col-span-2 flex flex-wrap gap-2 pt-1">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => {
                  setHitBatchUnlimited(true);
                  setHitLimit(Infinity);
                }}
                className="text-xs"
              >
                Search through all transcripts
              </Button>
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => {
                  setHitBatchValue(DEFAULT_MAX_HITS);
                  setHitBatchUnlimited(false);
                  setFetchConcurrency(DEFAULT_FETCH_CONCURRENCY);
                  setFlushIntervalMs(DEFAULT_FLUSH_INTERVAL_MS);
                  clearAdvanced();
                }}
                className="text-xs"
              >
                Reset to defaults
              </Button>
            </div>
          </div>
        </details>
      </div>
    </details>
  );
}

function ProfilesRow({
  profileNames,
  activeProfileName,
  profileDirty,
  shareCopied,
  onSelect,
  onSave,
  onSaveAs,
  onRename,
  onDelete,
  onRevert,
  onShareCurrentSearch,
  saveDisabled,
}: {
  profileNames: string[];
  activeProfileName: string | null;
  profileDirty: boolean;
  shareCopied: boolean;
  onSelect: (name: string) => void;
  onSave: () => void;
  onSaveAs: () => void;
  onRename: () => void;
  onDelete: () => void;
  onRevert: () => void;
  onShareCurrentSearch: () => void;
  // A save commits the draft, so it is refused when Search is ("Search in"
  // has nothing ticked).
  saveDisabled: boolean;
}) {
  const showRevert = activeProfileName != null && profileDirty;
  return (
    <div
      className="flex flex-wrap items-center gap-x-3 gap-y-1"
      data-testid="profiles-row"
    >
      <span className="text-xs uppercase tracking-wide text-muted-foreground">
        Profile
      </span>
      <select
        value={activeProfileName ?? ""}
        onChange={(e) => onSelect(e.target.value)}
        data-testid="profile-select"
        className="rounded border border-border bg-card text-foreground px-2 py-0.5 text-sm"
      >
        <option value="">(unsaved)</option>
        {profileNames.map((n) => (
          <option key={n} value={n}>
            {n}
          </option>
        ))}
      </select>
      {profileDirty && (
        <span
          role="status"
          aria-label="profile has unsaved changes"
          data-testid="profile-dirty-dot"
          className="text-base leading-none text-warning"
        >
          •
        </span>
      )}
      <Button
        type="button"
        variant="link"
        size="sm"
        onClick={onSave}
        disabled={!activeProfileName || !profileDirty || saveDisabled}
        className="text-xs text-muted-foreground"
      >
        Save
      </Button>
      <Button
        type="button"
        variant="link"
        size="sm"
        onClick={onSaveAs}
        disabled={saveDisabled}
        className="text-xs text-muted-foreground"
      >
        Save as…
      </Button>
      {showRevert && (
        <Button
          type="button"
          variant="link"
          size="sm"
          onClick={onRevert}
          data-testid="profile-revert"
          className="text-xs text-muted-foreground"
        >
          Revert
        </Button>
      )}
      <Button
        type="button"
        variant="link"
        size="sm"
        onClick={onRename}
        disabled={!activeProfileName}
        className="text-xs text-muted-foreground"
      >
        Rename
      </Button>
      <Button
        type="button"
        variant="link"
        size="sm"
        onClick={onDelete}
        disabled={!activeProfileName}
        className="text-xs text-destructive"
      >
        Delete
      </Button>
      <div className="ml-auto flex items-center gap-x-3">
        <Button
          type="button"
          variant="link"
          size="sm"
          onClick={onShareCurrentSearch}
          title={
            shareCopied
              ? "Copied!"
              : "Copy link encoding the current search + filters"
          }
          className="text-xs text-muted-foreground"
        >
          {shareCopied ? "Link copied!" : "Share current search"}
        </Button>
      </div>
    </div>
  );
}

// The curated-tag chip row (lib/curatedTags.ts) — "Eva: Collab · In chat ·
// Discussed" beside the channel-group chips.
//
// Built ONLY from this site's published /tags.json, which is the operator's
// decision and the reason there is no static list anywhere in this file: a tag
// defined corpus-wide but matching nothing on THIS site does not appear here,
// and neither does a hidden one, because compose-site never wrote it into this
// site's document. The whole row is absent when the site publishes nothing —
// which is every site until someone curates a tag, and every site built before
// corpus spec 4.
//
// OR across the chips: selecting Collab and In chat is every stream with
// either, never only the ones with both. A selected chip clears on click, so
// the row is its own reset and needs no second control.
function TagChipRow() {
  const { curatedTags } = useSearchData();
  const { draftTags, toggleDraftTag } = useSearchSession();

  // selectableTags is the belt to compose-site's braces: a stale or
  // hand-written document must not be able to offer a chip that finds nothing.
  const publishable = useMemo(() => selectableTags(curatedTags), [curatedTags]);
  const groups = useMemo(() => groupPublishedTags(publishable), [publishable]);

  // Tags the SELECTION carries that this site does not publish. A `?tg=` link
  // written against another site in the family, or against this one before a
  // rebuild, arrives with a perfectly valid id that has no chip — and without
  // this the Filters badge and the "N selected" line would say a filter is on
  // while nothing in the row is lit, and (if it is the only tag) the results
  // would go to zero with nothing to click off. So the selection ALWAYS has a
  // chip, even when the vocabulary does not have the tag.
  const unpublished = useMemo(() => {
    const known = new Set(publishable.map((t) => t.id));
    return Array.from(draftTags)
      .filter((id) => !known.has(id))
      .sort();
  }, [publishable, draftTags]);

  // Collapse is per-group and LOCAL, unlike the channel groups' persisted
  // `collapsedGroups`: a tag row is a handful of chips a reader folds away to
  // get the results back on screen, not a filter shape worth carrying into
  // every future session — and a group that came back folded would hide the
  // vocabulary this site is built around. Every group starts open.
  const [collapsedTagGroups, setCollapsedTagGroups] = useState<Set<string>>(
    () => new Set(),
  );
  const toggleTagGroup = useCallback((key: string) => {
    setCollapsedTagGroups((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  }, []);

  const renderChip = (tag: PublishedTag) => {
    const selected = draftTags.has(tag.id);
    return (
      <button
        key={tag.id}
        type="button"
        aria-pressed={selected}
        data-testid="tag-chip"
        data-tag-id={tag.id}
        title={
          selected
            ? `Clear "${tag.label}"`
            : `Keep only videos tagged "${tag.label}"`
        }
        onClick={() => toggleDraftTag(tag.id)}
        className={cn(
          "flex items-center gap-1.5 rounded border px-2.5 py-1.5 text-sm select-none min-w-0 transition-colors",
          selected
            ? "border-primary bg-primary/10 text-foreground"
            : "border-border bg-card/60 hover:bg-accent hover:text-accent-foreground",
        )}
      >
        {tag.color && (
          <span
            aria-hidden="true"
            className="inline-block size-2 shrink-0 rounded-full"
            style={{ background: tag.color }}
          />
        )}
        <span className="truncate">{tag.label}</span>
        {/* The count is this site's, computed at index time — the same number
            the chip's filter will produce. */}
        <span className="text-xs text-muted-foreground shrink-0">
          {tag.count}
        </span>
      </button>
    );
  };

  if (groups.length === 0 && unpublished.length === 0) return null;

  return (
    <div
      className="flex flex-col gap-2 w-full"
      data-testid="tag-chip-row"
    >
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
        <span className="text-xs uppercase tracking-wide text-muted-foreground">
          Tags
        </span>
        <span className="text-xs text-muted-foreground">
          {draftTags.size === 0
            ? "any"
            : `${draftTags.size} selected — a video with ANY of them`}
        </span>
      </div>
      {/* One wrapping flow, phone-first: a group is a disclosure — its label
          over its chips — and wraps as a unit, so a narrow viewport gets one
          group per line rather than a torn row, and a reader on a phone can
          fold a group away to get the results back on screen. */}
      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
        {groups.map((group) => {
          const key = group.id || "ungrouped";
          const chips = group.tags.map(renderChip);
          // The trailing ungrouped bucket has no label, so there is nothing to
          // put in a summary and nothing to name what folding it away hides:
          // it stays a plain wrapping row.
          if (!group.label) {
            return (
              <div
                key={key}
                data-testid="tag-chip-group"
                data-group-id={group.id}
                className="flex flex-wrap items-center gap-1.5 min-w-0"
              >
                {chips}
              </div>
            );
          }
          const isOpen = !collapsedTagGroups.has(key);
          // What the summary has to say when the chips are hidden: a folded
          // group that is narrowing the results must still admit it, or the
          // reader is left with a short list and no visible cause.
          const selectedCount = group.tags.reduce(
            (n, tag) => (draftTags.has(tag.id) ? n + 1 : n),
            0,
          );
          return (
            <details
              key={key}
              open={isOpen}
              data-testid="tag-chip-group"
              data-group-id={group.id}
              className="min-w-0 max-w-full"
            >
              <summary
                onClick={(e) => {
                  // Drive the open state from React rather than the browser's
                  // default toggle — same rationale as the channel group
                  // chips above.
                  e.preventDefault();
                  toggleTagGroup(key);
                }}
                className="cursor-pointer select-none flex items-center gap-1.5 py-1 text-xs text-muted-foreground min-w-0"
                title={
                  isOpen
                    ? `Hide the ${group.label} tags`
                    : `Show the ${group.label} tags`
                }
              >
                <ChevronRightIcon
                  aria-hidden="true"
                  className={cn(
                    "size-3.5 shrink-0 transition-transform",
                    isOpen && "rotate-90",
                  )}
                />
                <span className="font-medium text-foreground truncate">
                  {group.label}
                </span>
                {selectedCount > 0 && (
                  <span
                    data-testid="tag-group-selected"
                    className="shrink-0"
                  >
                    {selectedCount} selected
                  </span>
                )}
              </summary>
              <div className="flex flex-wrap items-center gap-1.5 min-w-0 pt-1.5">
                {chips}
              </div>
            </details>
          );
        })}
        {unpublished.length > 0 && (
          <div
            data-testid="tag-chip-group"
            data-group-id="__unpublished"
            className="flex flex-wrap items-center gap-1.5 min-w-0"
          >
            {unpublished.map((id) => (
              <button
                key={id}
                type="button"
                aria-pressed={true}
                data-testid="tag-chip"
                data-tag-id={id}
                data-unpublished="true"
                title={`"${id}" is not published by this site — click to clear it`}
                onClick={() => toggleDraftTag(id)}
                className="flex items-center gap-1.5 rounded border border-dashed border-primary px-2.5 py-1.5 text-sm select-none min-w-0 bg-primary/5 transition-colors hover:bg-accent hover:text-accent-foreground"
              >
                <span className="truncate">{id}</span>
                <span className="text-xs text-muted-foreground shrink-0">
                  (not on this site)
                </span>
                <span aria-hidden="true" className="text-xs shrink-0">
                  ×
                </span>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function ChannelAllToggle({
  channelOptions,
  draftExcludedChannels,
  setDraftExcludedChannels,
}: {
  channelOptions: string[];
  draftExcludedChannels: Set<string>;
  setDraftExcludedChannels: (next: Set<string>) => void;
}) {
  const allChecked = draftExcludedChannels.size === 0;
  return (
    <label className="flex items-center gap-1.5 select-none">
      <Checkbox
        checked={allChecked}
        onCheckedChange={() => {
          setDraftExcludedChannels(
            allChecked ? new Set(channelOptions) : new Set(),
          );
        }}
      />
      All
    </label>
  );
}

function NumberField({
  label,
  hint,
  value,
  defaultValue,
  min,
  max,
  onChange,
  disabled,
}: {
  label: string;
  hint?: string;
  value: number;
  defaultValue: number;
  min: number;
  max: number;
  onChange: (n: number) => void;
  disabled?: boolean;
}) {
  return (
    <label className="flex flex-col gap-1">
      <span className="text-xs font-medium text-foreground">
        {label}
      </span>
      <input
        type="number"
        min={min}
        max={max}
        value={Number.isFinite(value) ? value : ""}
        placeholder={String(defaultValue)}
        disabled={disabled}
        onChange={(e) => {
          const raw = e.target.value;
          if (raw === "") {
            onChange(defaultValue);
            return;
          }
          const n = Math.max(min, Math.min(max, Math.floor(Number(raw))));
          if (Number.isFinite(n)) onChange(n);
        }}
        className="w-full rounded border border-border bg-card text-foreground px-2 py-1 text-sm disabled:opacity-50"
      />
      {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
    </label>
  );
}

function LimitField({
  label,
  hint,
  value,
  unlimited,
  defaultValue,
  onValueChange,
  onUnlimitedChange,
}: {
  label: string;
  hint?: string;
  value: number;
  unlimited: boolean;
  defaultValue: number;
  onValueChange: (n: number) => void;
  onUnlimitedChange: (b: boolean) => void;
}) {
  return (
    <div className="flex flex-col gap-1">
      <div className="flex items-baseline justify-between gap-2">
        <span className="text-xs font-medium text-foreground">
          {label}
        </span>
        <label className="flex items-center gap-1 text-xs select-none">
          <Checkbox
            checked={unlimited}
            onCheckedChange={(value) => onUnlimitedChange(value === true)}
          />
          No limit
        </label>
      </div>
      <input
        type="number"
        aria-label={label}
        min={1}
        max={1_000_000}
        value={unlimited ? "" : value}
        placeholder={unlimited ? "∞" : String(defaultValue)}
        disabled={unlimited}
        onChange={(e) => {
          const raw = e.target.value;
          if (raw === "") {
            onValueChange(defaultValue);
            return;
          }
          const n = Math.max(1, Math.floor(Number(raw)));
          if (Number.isFinite(n)) onValueChange(n);
        }}
        className="w-full rounded border border-border bg-card text-foreground px-2 py-1 text-sm disabled:opacity-50"
      />
      {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
    </div>
  );
}