// <SubagentTerms> — an agent's subagents, under its own terminal preview in
// `AgentsPage`'s detail panel. The list is `GET /api/agents/{name}/subagents`:
// the subagents the swarm queue holds terminal rows for. Subagents are
// spawned on demand, so it is refetched every `REFRESH_MS`. Picking one
// shows its terminal in `AgentTermPreview`, expand-to-tab included. Read-only
// like the agent's own: subagents take no input.
//
// Mount it keyed by agent name: the refresh timer is armed once per mount.
import { useState } from "preact/hooks";
import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
import { Badge } from "@hive/shared/badge.js";
import { AgentTermPreview } from "./AgentTermPreview.js";
import { useRefreshInterval } from "../../ui/refresh-interval/RefreshInterval.js";
import "./SubagentTerms.css";

const REFRESH_MS = 10_000;

export function SubagentTerms({ agentName }: { agentName: string }) {
  const [names, setNames] = useState<string[] | null>(null);
  const [error, setError] = useState<ProblemDetails | null>(null);
  const [selected, setSelected] = useState<string | null>(null);

  async function refresh() {
    const res = await fetch(
      `/api/agents/${encodeURIComponent(agentName)}/subagents`,
    );
    if (!res.ok) {
      setError(await readApiError(res));
      return;
    }
    setNames((await res.json()) as string[]);
    setError(null);
  }

  useRefreshInterval(REFRESH_MS, () => {
    refresh().catch((e: unknown) => setError({ detail: String(e) }));
  });

  return (
    <section class="ui-subagent-terms" aria-label={`${agentName}'s subagents`}>
      <div class="ui-subagent-terms-list">
        <span class="ui-subagent-terms-heading">subagents</span>
        {names === null && !error && <Badge value="loading…" />}
        {names?.length === 0 && (
          <span class="ui-subagent-terms-empty">
            none with output on record
          </span>
        )}
        {names?.map((name) => (
          <Badge
            key={name}
            variant={name === selected ? "default" : "quiet"}
            value={name}
            expanded={name === selected}
            title={
              name === selected
                ? `hide ${name}'s terminal`
                : `show ${name}'s terminal`
            }
            onClick={() => setSelected(name === selected ? null : name)}
          />
        ))}
      </div>
      {error && (
        <ApiErrorPanel
          problem={error}
          context={`failed to list ${agentName}'s subagents`}
        />
      )}
      {selected && (
        <AgentTermPreview agentName={agentName} subagent={selected} />
      )}
    </section>
  );
}