"use client";

// The row of scope chips above the query builder: one per archive on the hub,
// official and added. Pressing a chip takes that archive in or out of the
// search (useHubScope remembers it per browser). Each chip says what its
// archive is doing — loading, its record count once ready (its summaries
// manifest's totalCount, the number the results header counts), or failed with
// a Retry beside it — so a slow or dead member is visible, not a silent gap.
// A ready archive whose live chat could not be read says that too
// (LIVE_CHAT_MISSING), with a Retry for its live chat alone: its videos stay
// in the search meanwhile.

import { cn } from "yt-dlp-transcript-common/lib/utils";
import {
  useSearchData,
  type FederatedSiteState,
} from "yt-dlp-transcript-common/components/SearchDataContext";
import { LIVE_CHAT_MISSING } from "../../ask/hubScopeCopy";

function detail(s: FederatedSiteState): string {
  switch (s.status) {
    case "off":
      return "off";
    case "loading":
      return "loading…";
    case "failed":
      return "failed";
    case "ready":
      return s.count === undefined ? "ready" : s.count.toLocaleString();
  }
}

export default function HubScope({
  onToggle,
}: {
  onToggle: (origin: string) => void;
}) {
  const { federation } = useSearchData();
  if (!federation || federation.sites.length === 0) return null;
  const { sites, retry, retryLiveChat } = federation;

  return (
    <div
      role="group"
      aria-label="Archives to search"
      className="flex flex-wrap items-center gap-2"
    >
      {sites.map((s) => {
        const on = s.status !== "off";
        return (
          <span
            key={s.origin}
            data-testid={`hub-scope-chip-${s.origin}`}
            data-status={s.status}
            className={cn(
              "inline-flex min-w-0 items-stretch overflow-hidden rounded border text-sm transition-colors",
              on ? "border-border-strong bg-card" : "border-border bg-transparent",
              s.status === "failed" && "border-destructive/60",
            )}
          >
            <button
              type="button"
              aria-pressed={on}
              title={
                on
                  ? `${s.status === "ready" && s.count !== undefined ? `${s.count.toLocaleString()} videos from ${s.siteTitle} are in the search. ` : ""}Press to leave ${s.siteTitle} out.`
                  : `Press to search ${s.siteTitle} again.`
              }
              onClick={() => onToggle(s.origin)}
              className={cn(
                "flex min-w-0 items-center gap-1.5 px-2.5 py-1.5 select-none hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
                on ? "text-foreground" : "text-muted-foreground",
              )}
            >
              {s.accent && (
                <span
                  aria-hidden="true"
                  className="inline-block size-2 shrink-0 rounded-full"
                  style={{ background: s.accent }}
                />
              )}
              <span className="truncate">{s.siteTitle}</span>
              <span
                className={cn(
                  "shrink-0 text-xs tabular-nums",
                  s.status === "failed" ? "text-destructive" : "text-muted-foreground",
                )}
              >
                {detail(s)}
              </span>
            </button>
            {s.status === "failed" && (
              <button
                type="button"
                onClick={() => retry(s.origin)}
                aria-label={`Retry ${s.siteTitle}`}
                title={s.error ? `${s.error} — try again` : "Try again"}
                className="border-l border-border px-2.5 py-1.5 text-xs text-brand hover:bg-accent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
              >
                Retry
              </button>
            )}
            {s.status === "ready" && s.liveChatMissing && (
              <>
                <span
                  data-testid="hub-scope-live-chat"
                  className="flex items-center border-l border-border px-2.5 py-1.5 text-xs text-muted-foreground"
                >
                  {LIVE_CHAT_MISSING}
                </span>
                <button
                  type="button"
                  onClick={() => retryLiveChat(s.origin)}
                  disabled={s.liveChatMissing.retrying}
                  aria-label={`Retry live chat from ${s.siteTitle}`}
                  title={
                    s.liveChatMissing.error
                      ? `${s.liveChatMissing.error} — try again`
                      : "Try again"
                  }
                  className="border-l border-border px-2.5 py-1.5 text-xs text-brand hover:bg-accent disabled:opacity-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
                >
                  Retry
                </button>
              </>
            )}
          </span>
        );
      })}
    </div>
  );
}