// <AgentInputForm> — text for one agent, under its swarm terminal.
// POSTs `/api/agents/{name}/input`: 202 once the agent's harness holds the
// message, 503 when it is not listening, problem+json otherwise. The agent
// sees it as an inbox turn from the logged-in user (the controller takes the
// sender from the gateway, not from this request).
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 { TextField } from "../../ui/text-field/TextField.js";
import { Button } from "../../ui/button/Button.js";
import "./AgentInputForm.css";

type SubmitState =
  | { status: "idle" }
  | { status: "submitting" }
  | { status: "sent" }
  | { status: "error"; problem: ProblemDetails };

export function AgentInputForm({ agentName }: { agentName: string }) {
  const [body, setBody] = useState("");
  const [result, setResult] = useState<SubmitState>({ status: "idle" });

  async function submit(e: Event) {
    e.preventDefault();
    setResult({ status: "submitting" });
    try {
      const r = await fetch(
        `/api/agents/${encodeURIComponent(agentName)}/input`,
        {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ body }),
        },
      );
      if (!r.ok) {
        setResult({ status: "error", problem: await readApiError(r) });
        return;
      }
      setResult({ status: "sent" });
      setBody("");
    } catch (err) {
      setResult({ status: "error", problem: { detail: String(err) } });
    }
  }

  return (
    <div class="ui-agent-input">
      <form class="ui-agent-input-form" onSubmit={submit}>
        <TextField
          id={`agent-input-${agentName}`}
          label={`message ${agentName}`}
          value={body}
          required
          onInput={setBody}
        />
        <Button
          variant="primary"
          type="submit"
          disabled={result.status === "submitting"}
        >
          {result.status === "submitting" ? "sending…" : "send"}
        </Button>
      </form>
      {result.status === "sent" && <p class="ui-agent-input-sent">sent</p>}
      {result.status === "error" && (
        <ApiErrorPanel context="failed to send" problem={result.problem} />
      )}
    </div>
  );
}