import type {
  HumanInputAnswer,
  HumanInputQuestion,
  HumanInputSecretAnswer,
  HumanInputSecretSaveTo,
  HumanInputSecretSpec,
  SkillRecord,
  SessionHumanInputRequest,
  SubmitHumanInputResponseRequest,
} from "@opengeni/sdk";
import { ChevronDownIcon, ChevronUpIcon, MessageCircleQuestionIcon } from "lucide-react";
import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type FormEvent,
  type ReactNode,
} from "react";
import { cn } from "../lib/cn";
import { useErrorMessage } from "../lib/error-message";
import {
  answersFromDrafts,
  defaultHumanInputFormMessages,
  emptyDraft,
  initialDrafts,
  secretAnswerFromReading,
  type HumanInputAnswerDraft,
  type HumanInputFormMessages,
} from "../human-input-model";
import {
  forgetHumanInputDraft,
  readHumanInputDraft,
  writeHumanInputDraft,
  type HumanInputDraftScope,
} from "../human-input-draft-store";
import { SecretQuestionField, type SecretFieldHandle } from "./secret-question-field";
import { linkifyText } from "./linkified-text";
import { useOpenGeniText } from "../messages/runtime";

export {
  answersFromDrafts,
  defaultHumanInputFormMessages,
  type HumanInputAnswerDraft,
  type HumanInputFormMessages,
};

class SkillReviewVerificationError extends Error {}

export type HumanInputFormProps = {
  /** Scoped immutable revision reader. Saving a Skill fails closed without its full preview. */
  loadSkillReview?:
    | ((reference: NonNullable<HumanInputQuestion["skillReview"]>) => Promise<SkillRecord>)
    | undefined;
  /**
   * With `workspaceId` and `sessionId` (as on a full pending request), unsent
   * non-secret answers are kept per browser tab and restored when the card
   * mounts again, e.g. after visiting Settings and coming back.
   */
  request: Pick<SessionHumanInputRequest, "id" | "questions" | "allowSkip" | "expiresAt"> &
    Partial<Pick<SessionHumanInputRequest, "workspaceId" | "sessionId" | "status">>;
  /**
   * Resolve only once the response was accepted: the form then forgets the
   * unsent draft and clears secret fields. Reject when sending failed so the
   * card keeps what was typed for a retry.
   */
  onSubmit: (response: SubmitHumanInputResponseRequest) => void | Promise<void>;
  submitting?: boolean | undefined;
  error?: string | null | undefined;
  title?: ReactNode;
  description?: ReactNode;
  /** e.g. "1 of 2" when a host is stepping through parallel requests. */
  progressLabel?: ReactNode;
  submitLabel?: string | undefined;
  skipLabel?: string | undefined;
  messages?: Partial<HumanInputFormMessages> | undefined;
  autoFocus?: boolean | undefined;
  /** Start collapsed to a compact bar (drafts still retained). */
  defaultCollapsed?: boolean | undefined;
  /**
   * Answer a yes/no decision (one required choice between an accept and a
   * decline option, without Other) with two buttons instead of a radio list.
   * Off by default; embedded conversations turn it on.
   */
  decisionButtons?: boolean | undefined;
  /**
   * Where this person may save an answer to a secret question. A request for
   * a target outside this list falls back to the most private allowed one,
   * with a note. Defaults to Only me, This task and This workspace.
   */
  allowedSaveTo?: readonly HumanInputSecretSaveTo[] | undefined;
  className?: string | undefined;
};

/**
 * Styled but host-neutral renderer for one structured request. Matches the
 * waiting-tone decision language of ApprovalSurface: question-first, compact
 * options, sticky ask/submit chrome. Hosts can replace title/description or
 * use `useHumanInputRequests` headlessly.
 */
export function HumanInputForm(props: HumanInputFormProps) {
  // The pending-request read model is refreshed after session events and
  // returns newly allocated question arrays for the same durable request.
  // Key the state owner by that request's lifecycle identity so reconciliation
  // cannot erase an answer that the operator is still typing.
  return <HumanInputRequestForm key={props.request.id} {...props} />;
}

function HumanInputRequestForm({
  request,
  onSubmit,
  loadSkillReview,
  submitting = false,
  error,
  title,
  description,
  progressLabel,
  submitLabel,
  skipLabel,
  messages: messageOverrides,
  autoFocus = true,
  defaultCollapsed = false,
  decisionButtons = false,
  allowedSaveTo,
  className,
}: HumanInputFormProps) {
  const t = useOpenGeniText();
  const formatError = useErrorMessage();
  const messages = { ...defaultHumanInputFormMessages(t), ...messageOverrides };
  const singleQuestion = request.questions.length === 1 ? request.questions[0]! : null;
  const decision = decisionButtons ? binaryDecision(request.questions) : null;
  const [decisionChoice, setDecisionChoice] = useState<string | null>(null);
  const resolvedTitle =
    title === undefined
      ? singleQuestion
        ? (singleQuestion.label ?? singleQuestion.prompt)
        : messages.title
      : title;
  const resolvedDescription =
    description === undefined
      ? singleQuestion
        ? singleQuestion.label
          ? singleQuestion.prompt
          : (singleQuestion.helpText ?? null)
        : messages.description || null
      : description;
  const resolvedSubmitLabel = submitLabel ?? messages.submit;
  const resolvedSkipLabel = skipLabel ?? messages.skip;
  const formId = useId();
  const titleId = useId();
  const scrollRef = useRef<HTMLDivElement>(null);
  const draftScope = useMemo<HumanInputDraftScope | null>(
    () =>
      request.workspaceId && request.sessionId
        ? { workspaceId: request.workspaceId, sessionId: request.sessionId, requestId: request.id }
        : null,
    [request.id, request.sessionId, request.workspaceId],
  );
  const requestSettled = request.status !== undefined && request.status !== "pending";
  const [drafts, setDrafts] = useState<Record<string, HumanInputAnswerDraft>>(() => ({
    ...initialDrafts(request.questions),
    ...(draftScope && !requestSettled ? readHumanInputDraft(draftScope, request) : null),
  }));
  // Once a response is accepted, nothing typed afterwards becomes a draft again.
  const draftClosed = useRef(false);
  // Mounting (or StrictMode's second mount) is not an edit: rewriting the
  // restored draft would refresh its age and let it outlive a pending-list
  // read that already settled it.
  const mountedDrafts = useRef(drafts);
  const questionsRef = useRef(request.questions);
  questionsRef.current = request.questions;
  useEffect(() => {
    if (!draftScope) return;
    if (requestSettled) {
      draftClosed.current = true;
      forgetHumanInputDraft(draftScope);
      return;
    }
    if (draftClosed.current || drafts === mountedDrafts.current) return;
    writeHumanInputDraft(draftScope, questionsRef.current, drafts);
  }, [draftScope, drafts, requestSettled]);
  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
  const [submissionError, setSubmissionError] = useState<string | null>(null);
  const [submittingInternally, setSubmittingInternally] = useState(false);
  const [overflowBelow, setOverflowBelow] = useState(false);
  const [collapsed, setCollapsed] = useState(defaultCollapsed);
  const submissionInFlight = useRef(false);
  const submissionGeneration = useRef(0);
  // Secret answers stay in their uncontrolled inputs until submit.
  const secretHandles = useRef(new Map<string, SecretFieldHandle>());
  const secretRegistrars = useMemo(
    () => new Map<string, (handle: SecretFieldHandle | null) => void>(),
    [],
  );
  const registerSecret = useCallback(
    (questionId: string) => {
      let registrar = secretRegistrars.get(questionId);
      if (!registrar) {
        registrar = (handle) => {
          if (handle) secretHandles.current.set(questionId, handle);
          else secretHandles.current.delete(questionId);
        };
        secretRegistrars.set(questionId, registrar);
      }
      return registrar;
    },
    [secretRegistrars],
  );
  const busy = submitting || submittingInternally;
  const reviewIdentity = JSON.stringify(
    request.questions
      .filter((question) => question.skillReview)
      .map((question) => ({
        id: question.id,
        reference: {
          sourceOperationId: question.skillReview!.sourceOperationId,
          skillId: question.skillReview!.skillId,
          revisionId: question.skillReview!.revisionId,
          expectedRevisionId: question.skillReview!.expectedRevisionId,
          expectedScopeVersion: question.skillReview!.expectedScopeVersion,
          ...(question.skillReview!.removalOperationId
            ? { removalOperationId: question.skillReview!.removalOperationId }
            : {}),
        },
      })),
  );
  const [reviewReload, setReviewReload] = useState(0);
  const [reviews, setReviews] = useState<{
    loader: typeof loadSkillReview;
    identity: string;
    records: Record<string, SkillRecord>;
    error: string | null;
  } | null>(null);
  useEffect(() => {
    let current = true;
    const questions = JSON.parse(reviewIdentity) as Array<{
      id: string;
      reference: NonNullable<HumanInputQuestion["skillReview"]>;
    }>;
    if (!questions.length) return;
    setReviews(null);
    void Promise.all(
      questions.map(async (question) => {
        if (!loadSkillReview) throw new Error(t("humanInputForm.thisClientCannotPreviewSkill"));
        const reference = question.reference;
        const record = await loadSkillReview(reference);
        if (
          record.id !== reference.skillId ||
          record.revisionId !== reference.revisionId ||
          (record.removalOperationId ?? undefined) !== reference.removalOperationId ||
          !record.files.some((file) => file.path === "SKILL.md")
        ) {
          throw new SkillReviewVerificationError(
            t("humanInputForm.theRequestedSkillRevisionCould"),
          );
        }
        return [question.id, record] as const;
      }),
    )
      .then((records) => {
        if (current)
          setReviews({
            loader: loadSkillReview,
            identity: reviewIdentity,
            records: Object.fromEntries(records),
            error: null,
          });
      })
      .catch((cause) => {
        if (current)
          setReviews({
            loader: loadSkillReview,
            identity: reviewIdentity,
            records: {},
            error: formatError(
              cause,
              cause instanceof SkillReviewVerificationError
                ? cause.message
                : !loadSkillReview
                  ? t("humanInputForm.thisClientCannotPreviewSkill")
                  : undefined,
            ),
          });
      });
    return () => {
      current = false;
    };
  }, [loadSkillReview, reviewIdentity, reviewReload, formatError, t]);
  const visibleReviews =
    reviews?.loader === loadSkillReview && reviews?.identity === reviewIdentity ? reviews : null;
  const preview = (question: HumanInputQuestion) => {
    if (!question.skillReview) return null;
    const record = visibleReviews?.records[question.id];
    return (
      <div className="mb-3 min-w-0 space-y-2" data-skill-review="">
        {record ? (
          <>
            <p className="text-og-sm">
              {record.title ?? t("humanInputForm.skill")}{" "}
              {t("humanInputForm.scopeLengthFiles", {
                scope: record.scope,
                length: record.files.length,
              })}
            </p>
            <p className="text-og-xs text-og-fg-muted">
              {question.skillReview.removalOperationId
                ? t("humanInputForm.permanentlyDeletesThisSkillAnd")
                : t("humanInputForm.savingActivatesTheseExactFiles")}
            </p>
            {record.files.map((file) => (
              <details key={file.path} open={file.path === "SKILL.md"}>
                <summary className="cursor-pointer break-all text-og-sm">{file.path}</summary>
                <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-og-md bg-og-surface-1 p-2 text-og-xs">
                  {file.content}
                </pre>
              </details>
            ))}
          </>
        ) : visibleReviews?.error ? (
          <>
            <p role="alert" className="text-og-sm">
              {visibleReviews.error}
            </p>
            <button type="button" onClick={() => setReviewReload((value) => value + 1)}>
              {t("humanInputForm.retryPreview")}
            </button>
          </>
        ) : (
          <p role="status" className="text-og-sm">
            {t("humanInputForm.loadingTheExactSkillFiles")}
          </p>
        )}
      </div>
    );
  };

  useEffect(() => {
    if (collapsed) {
      setOverflowBelow(false);
      return;
    }
    const node = scrollRef.current;
    if (!node) return;
    const sync = () => {
      const { scrollTop, scrollHeight, clientHeight } = node;
      setOverflowBelow(
        scrollHeight > clientHeight + 2 && scrollTop + clientHeight < scrollHeight - 4,
      );
    };
    // Layout after paint: first sync can run before the max-height flex
    // constraint resolves, which falsely reports no overflow.
    const frame = requestAnimationFrame(sync);
    node.addEventListener("scroll", sync, { passive: true });
    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(sync) : null;
    observer?.observe(node);
    const content = node.firstElementChild;
    if (content) observer?.observe(content);
    return () => {
      cancelAnimationFrame(frame);
      node.removeEventListener("scroll", sync);
      observer?.disconnect();
    };
  }, [request.id, request.questions, collapsed]);

  const update = (
    questionId: string,
    apply: (draft: HumanInputAnswerDraft) => HumanInputAnswerDraft,
  ): void => {
    setDrafts((current) => ({
      ...current,
      [questionId]: apply(current[questionId] ?? emptyDraft()),
    }));
    setValidationErrors((current) => {
      if (!(questionId in current)) return current;
      const next = { ...current };
      delete next[questionId];
      return next;
    });
  };

  const clearValidationError = (questionId: string): void =>
    setValidationErrors((current) => {
      if (!(questionId in current)) return current;
      const next = { ...current };
      delete next[questionId];
      return next;
    });

  /** Resolves true when the host accepted the response. */
  const submitResponse = async (response: SubmitHumanInputResponseRequest): Promise<boolean> => {
    if (busy || submissionInFlight.current) return false;
    const generation = submissionGeneration.current;
    submissionInFlight.current = true;
    setSubmissionError(null);
    setSubmittingInternally(true);
    try {
      await onSubmit(response);
      if (draftScope) {
        draftClosed.current = true;
        forgetHumanInputDraft(draftScope);
      }
      return true;
    } catch (cause) {
      if (generation === submissionGeneration.current) {
        setSubmissionError(formatError(cause));
      }
      return false;
    } finally {
      if (generation === submissionGeneration.current) {
        submissionInFlight.current = false;
        setSubmittingInternally(false);
      }
    }
  };

  const focusQuestion = (questionId: string): void => {
    const root = scrollRef.current;
    if (!root) return;
    const block = Array.from(
      root.querySelectorAll<HTMLElement>("[data-human-input-question]"),
    ).find((node) => node.getAttribute("data-human-input-question") === questionId);
    block?.scrollIntoView({ block: "nearest", behavior: "smooth" });
    const focusable = block?.querySelector<HTMLElement>(
      "input:not([type='hidden']):not([disabled]), textarea:not([disabled])",
    );
    focusable?.focus({ preventScroll: true });
  };

  const submit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
    event.preventDefault();
    const result = answersFromDrafts(t, request.questions, drafts, messages);
    const secretAnswers: HumanInputSecretAnswer[] = [];
    const secretPublicAnswers = new Map<string, HumanInputAnswer>();
    for (const question of request.questions) {
      if (question.kind !== "secret") continue;
      const handle = secretHandles.current.get(question.id);
      if (!handle) continue;
      const secret = secretAnswerFromReading(t, question, handle.read(), messages);
      if (!secret) continue;
      if ("error" in secret) {
        result.errors[question.id] = secret.error;
        continue;
      }
      secretAnswers.push(secret.secretAnswer);
      secretPublicAnswers.set(question.id, secret.answer);
    }
    if (Object.keys(result.errors).length > 0) {
      setValidationErrors(result.errors);
      const firstInvalid = request.questions.find((question) => question.id in result.errors);
      if (firstInvalid) {
        // After paint so aria-invalid / error text exist under the question.
        requestAnimationFrame(() => focusQuestion(firstInvalid.id));
      }
      return;
    }
    const unreviewedSave = request.questions.find(
      (question) =>
        question.skillReview &&
        !visibleReviews?.records[question.id] &&
        result.answers.some(
          (answer) => answer.questionId === question.id && answer.values.includes("save"),
        ),
    );
    if (unreviewedSave) {
      setValidationErrors({
        [unreviewedSave.id]: unreviewedSave.skillReview?.removalOperationId
          ? t("humanInputForm.loadTheExactSkillProposal")
          : t("humanInputForm.loadTheExactSkillFiles"),
      });
      return;
    }
    // Keep the request's question order across drafted and secret answers.
    const drafted = new Map(result.answers.map((answer) => [answer.questionId, answer]));
    const answers = request.questions.flatMap((question) => {
      const answer = drafted.get(question.id) ?? secretPublicAnswers.get(question.id);
      return answer ? [answer] : [];
    });
    const accepted = await submitResponse({
      outcome: "answered",
      answers,
      ...(secretAnswers.length > 0 ? { secretAnswers } : {}),
    });
    if (accepted) for (const handle of secretHandles.current.values()) handle.clear();
  };

  const metaBits = [
    progressLabel,
    !singleQuestion ? messages.questionCount(request.questions.length) : null,
    request.expiresAt ? (
      <>
        {messages.deadlineLabel}{" "}
        <time
          dateTime={request.expiresAt}
          title={new Date(request.expiresAt).toLocaleString(t.locale)}
        >
          {messages.formatDeadline(request.expiresAt)}
        </time>
      </>
    ) : null,
  ].filter(Boolean);

  if (collapsed) {
    return (
      <div
        data-human-input-request={request.id}
        data-human-input-collapsed=""
        aria-labelledby={titleId}
        className={cn(
          "og-root flex w-full items-center gap-3 rounded-og-lg border border-og-status-waiting/35 bg-og-status-waiting/5 px-3 py-2.5 shadow-og-sm",
          className,
        )}
      >
        <span className="inline-flex size-8 shrink-0 items-center justify-center rounded-og-md bg-og-status-waiting/12 text-og-status-waiting">
          <MessageCircleQuestionIcon aria-hidden="true" className="size-4" />
        </span>
        <div className="min-w-0 flex-1">
          <h2 id={titleId} className="truncate text-og-sm font-semibold text-og-fg">
            {resolvedTitle}
          </h2>
          {metaBits.length > 0 ? (
            <p className="mt-0.5 truncate text-og-xs text-og-fg-subtle">{metaBits.join(" · ")}</p>
          ) : null}
        </div>
        <button
          type="button"
          onClick={() => setCollapsed(false)}
          className="inline-flex min-h-8 shrink-0 items-center gap-1 rounded-og-md border border-og-border px-2.5 py-1 text-og-xs font-medium text-og-fg-muted transition-colors hover:bg-og-surface-1 hover:text-og-fg"
        >
          {messages.expand}
          <ChevronDownIcon aria-hidden="true" className="size-3.5" />
        </button>
      </div>
    );
  }

  return (
    <form
      data-human-input-request={request.id}
      onSubmit={(event) => void submit(event)}
      aria-labelledby={titleId}
      className={cn(
        // Multi-question: pin height at the cap so the flex body gets a real
        // box and overflow-y engages. max-height alone + percentage/`h-full`
        // children often sizes to content and clips with no scroll.
        "og-root flex min-h-0 w-full flex-col overflow-hidden rounded-og-lg border border-og-status-waiting/35 bg-og-status-waiting/5 shadow-og-sm",
        singleQuestion
          ? "max-h-[min(28rem,50dvh)]"
          : "h-[min(28rem,50dvh)] max-h-[min(28rem,50dvh)]",
        className,
      )}
    >
      <header className="shrink-0 border-b border-og-status-waiting/20 px-4 py-3">
        <div className="flex items-start gap-3">
          <span className="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-og-md bg-og-status-waiting/12 text-og-status-waiting">
            <MessageCircleQuestionIcon aria-hidden="true" className="size-4" />
          </span>
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
              <h2
                id={titleId}
                className="min-w-0 text-og-md font-semibold text-og-fg [overflow-wrap:anywhere]"
              >
                {linkifyText(resolvedTitle)}
                {singleQuestion?.required && !request.allowSkip && !decision ? (
                  <span aria-hidden className="ml-1 text-og-status-failed">
                    *
                  </span>
                ) : null}
              </h2>
              {progressLabel ? (
                <span className="text-og-xs font-medium text-og-status-waiting">
                  {progressLabel}
                </span>
              ) : null}
              {!singleQuestion ? (
                <span className="text-og-xs font-medium text-og-fg-subtle">
                  {messages.questionCount(request.questions.length)}
                </span>
              ) : null}
            </div>
            {resolvedDescription ? (
              <div className="mt-0.5 text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
                {linkifyText(resolvedDescription)}
              </div>
            ) : null}
            {request.expiresAt ? (
              <p className="mt-1 text-og-xs text-og-fg-subtle">
                {messages.deadlineLabel}{" "}
                <time
                  dateTime={request.expiresAt}
                  title={new Date(request.expiresAt).toLocaleString(t.locale)}
                >
                  {messages.formatDeadline(request.expiresAt)}
                </time>
              </p>
            ) : null}
            {request.allowSkip && singleQuestion ? (
              <p className="mt-1 text-og-xs text-og-fg-subtle">
                {t("humanInputForm.orSkipAndLetThe")}
              </p>
            ) : null}
          </div>
          <button
            type="button"
            onClick={() => setCollapsed(true)}
            aria-label={messages.collapse}
            title={messages.collapse}
            className="inline-flex size-8 shrink-0 items-center justify-center rounded-og-md text-og-fg-muted transition-colors hover:bg-og-surface-1 hover:text-og-fg"
          >
            <ChevronUpIcon aria-hidden="true" className="size-4" />
          </button>
        </div>
      </header>

      {decision ? (
        <>
          {decision.question.helpText ||
          decision.accept.description ||
          decision.decline.description ? (
            <div className="shrink-0 space-y-1 px-4 pt-3 text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
              {decision.question.label && decision.question.helpText ? (
                <p>{linkifyText(decision.question.helpText)}</p>
              ) : null}
              {[decision.accept, decision.decline].map((option) =>
                option.description ? (
                  <p key={option.id}>
                    <span className="font-medium text-og-fg">{option.label}</span>
                    {" · "}
                    {linkifyText(option.description)}
                  </p>
                ) : null,
              )}
            </div>
          ) : null}
          {(error ?? submissionError) ? (
            <p role="alert" className="shrink-0 px-4 pt-3 text-og-sm text-og-status-failed">
              {error ?? submissionError}
            </p>
          ) : null}
          <footer
            className="flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3"
            data-human-input-decision=""
          >
            {request.allowSkip ? (
              <button
                type="button"
                disabled={busy}
                onClick={() => void submitResponse({ outcome: "skipped" })}
                className="mr-auto inline-flex min-h-9 items-center rounded-og-md px-2 py-1.5 text-og-sm font-medium text-og-fg-muted transition-colors hover:bg-og-hover hover:text-og-fg disabled:opacity-50 pointer-coarse:min-h-11"
              >
                {resolvedSkipLabel}
              </button>
            ) : null}
            {[decision.decline, decision.accept].map((option) => {
              const primary = option === decision.accept;
              return (
                <button
                  key={option.id}
                  type="button"
                  disabled={busy}
                  ref={
                    !primary && autoFocus
                      ? (node) => {
                          if (node && !node.dataset.ogFocused) {
                            node.dataset.ogFocused = "";
                            node.focus({ preventScroll: true });
                          }
                        }
                      : undefined
                  }
                  data-human-input-choice={option.id}
                  onClick={() => {
                    setDecisionChoice(option.id);
                    void submitResponse({
                      outcome: "answered",
                      answers: [{ questionId: decision.question.id, values: [option.id] }],
                    });
                  }}
                  className={cn(
                    "inline-flex min-h-9 items-center rounded-og-md border px-3.5 py-1.5 text-og-sm font-medium transition disabled:opacity-50 pointer-coarse:min-h-11",
                    primary
                      ? "border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover"
                      : "border-og-border bg-og-surface-1 text-og-fg hover:bg-og-surface-2",
                  )}
                >
                  {busy && decisionChoice === option.id ? messages.submitting : option.label}
                </button>
              );
            })}
          </footer>
        </>
      ) : (
        <>
          <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
            <div
              ref={scrollRef}
              className="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]"
            >
              <fieldset disabled={busy} className="min-w-0 space-y-4 px-4 py-3">
                {request.questions.map((question, index) => {
                  if (singleQuestion) {
                    // Title already carries the question; only render the control + help extras.
                    return (
                      <div key={question.id} data-human-input-question={question.id}>
                        {preview(question)}
                        <QuestionControls
                          question={question}
                          questionNumber={null}
                          labelledBy={titleId}
                          draft={drafts[question.id] ?? emptyDraft()}
                          fieldId={`${formId}-${index}`}
                          error={validationErrors[question.id]}
                          messages={messages}
                          autoFocus={autoFocus}
                          firstOption
                          showPromptChrome={false}
                          allowSkip={request.allowSkip}
                          busy={busy}
                          allowedSaveTo={allowedSaveTo}
                          registerSecret={registerSecret(question.id)}
                          onSecretEdited={() => clearValidationError(question.id)}
                          onUpdate={(apply) => update(question.id, apply)}
                        />
                      </div>
                    );
                  }
                  return (
                    <div
                      key={question.id}
                      data-human-input-question={question.id}
                      className="flex flex-col gap-1.5"
                    >
                      {preview(question)}
                      <QuestionControls
                        question={question}
                        questionNumber={index + 1}
                        labelledBy={undefined}
                        draft={drafts[question.id] ?? emptyDraft()}
                        fieldId={`${formId}-${index}`}
                        error={validationErrors[question.id]}
                        messages={messages}
                        autoFocus={autoFocus && index === 0}
                        firstOption={index === 0}
                        showPromptChrome
                        allowSkip={request.allowSkip}
                        busy={busy}
                        allowedSaveTo={allowedSaveTo}
                        registerSecret={registerSecret(question.id)}
                        onSecretEdited={() => clearValidationError(question.id)}
                        onUpdate={(apply) => update(question.id, apply)}
                      />
                    </div>
                  );
                })}
              </fieldset>
            </div>
            {overflowBelow ? (
              <div
                className="pointer-events-none absolute inset-x-0 bottom-0 z-[1] flex flex-col items-center"
                aria-hidden="true"
              >
                <div className="h-10 w-full bg-gradient-to-t from-og-surface-1 via-og-surface-1/85 to-transparent" />
                <span className="-mt-5 mb-1 rounded-og-full bg-og-surface-1 px-2.5 py-0.5 text-og-xs font-medium text-og-fg-muted shadow-og-sm ring-1 ring-og-border/60">
                  {messages.moreBelow}
                </span>
              </div>
            ) : null}
          </div>

          {(error ?? submissionError) ? (
            <p
              role="alert"
              className="relative z-10 shrink-0 px-4 pb-1 text-og-sm text-og-status-failed"
            >
              {error ?? submissionError}
            </p>
          ) : null}

          <footer className="relative z-10 flex shrink-0 items-center justify-end gap-2 border-t border-og-status-waiting/20 bg-og-surface-1/95 px-4 py-3 backdrop-blur-[2px]">
            {request.allowSkip ? (
              <button
                type="button"
                disabled={busy}
                onClick={() => void submitResponse({ outcome: "skipped" })}
                className="inline-flex min-h-9 items-center rounded-og-md border border-og-border px-3 py-1.5 text-og-sm font-medium text-og-fg-muted transition-colors hover:bg-og-surface-1 hover:text-og-fg disabled:opacity-50"
              >
                {resolvedSkipLabel}
              </button>
            ) : null}
            <button
              type="submit"
              disabled={busy}
              className="inline-flex min-h-9 items-center rounded-og-md border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium transition hover:bg-og-primary-hover disabled:opacity-50"
            >
              {busy ? messages.submitting : resolvedSubmitLabel}
            </button>
          </footer>
        </>
      )}
    </form>
  );
}

// Unambiguous approve/decline verbs only: "Continue with A" vs "Keep B" is a
// real choice between two options, not a yes/no decision.
const ACCEPT_WORDS = new Set(["approve", "approved", "yes", "confirm", "allow", "accept"]);
const DECLINE_WORDS = new Set(["cancel", "decline", "reject", "deny", "no", "don't", "dont"]);

function firstWord(label: string): string {
  return (
    label
      .trim()
      .toLowerCase()
      .replace(/[’]/g, "'")
      .split(/[\s,.:;!?()]+/)[0] ?? ""
  );
}

/**
 * A yes/no decision (an approval asked as a question): one required
 * single-choice question with exactly an accept and a decline option. It is
 * answered with two buttons; an "Other" free-text answer has no meaning for it,
 * and the composer still accepts a different instruction.
 */
export function binaryDecision(questions: readonly HumanInputQuestion[]): {
  question: HumanInputQuestion;
  accept: HumanInputQuestion["options"][number];
  decline: HumanInputQuestion["options"][number];
} | null {
  if (questions.length !== 1) return null;
  const question = questions[0]!;
  if (
    question.kind !== "single_select" ||
    question.skillReview ||
    // The runtime marks every choice question `allowOther`, so it is not a
    // signal here; a different answer goes through the composer instead.
    !question.required ||
    question.options.length !== 2
  )
    return null;
  const [first, second] = question.options as [
    HumanInputQuestion["options"][number],
    HumanInputQuestion["options"][number],
  ];
  const kind = (option: HumanInputQuestion["options"][number]) => {
    const word = firstWord(option.label);
    return ACCEPT_WORDS.has(word) ? "accept" : DECLINE_WORDS.has(word) ? "decline" : null;
  };
  const a = kind(first);
  const b = kind(second);
  if (a === "accept" && b === "decline") return { question, accept: first, decline: second };
  if (a === "decline" && b === "accept") return { question, accept: second, decline: first };
  return null;
}

function QuestionControls({
  question,
  questionNumber,
  labelledBy,
  draft,
  fieldId,
  error,
  messages,
  autoFocus,
  firstOption,
  showPromptChrome,
  allowSkip,
  busy,
  allowedSaveTo,
  registerSecret,
  onSecretEdited,
  onUpdate,
}: {
  question: HumanInputQuestion;
  questionNumber: number | null;
  labelledBy: string | undefined;
  draft: HumanInputAnswerDraft;
  fieldId: string;
  error: string | undefined;
  messages: HumanInputFormMessages;
  autoFocus: boolean;
  firstOption: boolean;
  showPromptChrome: boolean;
  allowSkip: boolean;
  busy: boolean;
  allowedSaveTo: readonly HumanInputSecretSaveTo[] | undefined;
  registerSecret: (handle: SecretFieldHandle | null) => void;
  onSecretEdited: () => void;
  onUpdate: (apply: (draft: HumanInputAnswerDraft) => HumanInputAnswerDraft) => void;
}) {
  const t = useOpenGeniText();
  const errorId = `${fieldId}-error`;
  const helpId = `${fieldId}-help`;
  const labelId = `${fieldId}-label`;
  const promptId = `${fieldId}-prompt`;
  const otherChoiceId = `${fieldId}-other-choice`;
  const otherLabelId = `${fieldId}-other-label`;
  const otherTextId = `${fieldId}-other-text`;
  const visibleLabel = question.label ?? question.prompt;
  const controlLabelId = showPromptChrome ? labelId : labelledBy;
  const hint =
    question.kind === "multi_select"
      ? messages.selectionHint(
          question.validation?.minSelections,
          question.validation?.maxSelections,
        )
      : null;
  const describedBy =
    [
      question.label && showPromptChrome ? promptId : null,
      question.helpText && showPromptChrome ? helpId : null,
      hint ? `${fieldId}-hint` : null,
      error ? errorId : null,
    ]
      .filter(Boolean)
      .join(" ") || undefined;
  const selectOtherDraft = (current: HumanInputAnswerDraft): HumanInputAnswerDraft => ({
    ...current,
    otherSelected: true,
    ...(question.kind === "single_select" ? { values: [] } : {}),
  });
  return (
    <>
      {showPromptChrome ? (
        <>
          <div className="flex flex-wrap items-baseline gap-x-2">
            <label
              id={labelId}
              htmlFor={question.kind === "text" ? fieldId : undefined}
              className="min-w-0 text-og-sm font-medium text-og-fg [overflow-wrap:anywhere]"
            >
              {questionNumber === null ? null : (
                <span className="mr-1.5 tabular-nums text-og-fg-muted">{questionNumber}.</span>
              )}
              {questionNumber === null ? null : " "}
              {linkifyText(visibleLabel)}
              {question.required && !allowSkip ? (
                <span aria-hidden className="ml-1 text-og-status-failed">
                  *
                </span>
              ) : !question.required ? (
                <span className="ml-1.5 text-og-xs font-normal text-og-fg-subtle">
                  {messages.optional}
                </span>
              ) : null}
            </label>
          </div>
          {question.label ? (
            <p id={promptId} className="text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
              {linkifyText(question.prompt)}
            </p>
          ) : null}
          {question.helpText ? (
            <p id={helpId} className="text-og-xs text-og-fg-subtle [overflow-wrap:anywhere]">
              {linkifyText(question.helpText)}
            </p>
          ) : null}
          {hint ? (
            <p id={`${fieldId}-hint`} className="text-og-xs text-og-fg-subtle">
              {hint}
            </p>
          ) : null}
        </>
      ) : (
        <>
          {!question.required && allowSkip === false ? (
            <p className="text-og-xs text-og-fg-subtle">{messages.optional}</p>
          ) : null}
          {question.helpText && question.label ? (
            <p id={helpId} className="mb-1.5 text-og-xs text-og-fg-subtle [overflow-wrap:anywhere]">
              {linkifyText(question.helpText)}
            </p>
          ) : null}
          {hint ? (
            <p id={`${fieldId}-hint`} className="mb-1.5 text-og-xs text-og-fg-subtle">
              {hint}
            </p>
          ) : null}
        </>
      )}

      {question.kind === "secret" ? (
        question.secret ? (
          <SecretQuestionField
            question={question as HumanInputQuestion & { secret: HumanInputSecretSpec }}
            fieldId={fieldId}
            messages={messages}
            autoFocus={autoFocus}
            allowedSaveTo={allowedSaveTo}
            error={error}
            describedBy={
              [
                question.label && showPromptChrome ? promptId : null,
                question.helpText && showPromptChrome ? helpId : null,
              ]
                .filter(Boolean)
                .join(" ") || undefined
            }
            register={registerSecret}
            onEdited={onSecretEdited}
          />
        ) : (
          <p className="text-og-sm text-og-fg-muted">{t("humanInputForm.thisQuestionCanTBe")}</p>
        )
      ) : question.kind === "text" ? (
        <textarea
          id={fieldId}
          value={draft.values[0] ?? ""}
          onChange={(event) =>
            onUpdate((current) => ({
              ...current,
              values: event.target.value ? [event.target.value] : [],
            }))
          }
          aria-invalid={Boolean(error)}
          aria-labelledby={controlLabelId}
          aria-describedby={describedBy}
          autoFocus={autoFocus}
          rows={2}
          className="min-h-14 w-full resize-y rounded-og-md border border-og-border bg-og-surface-1 px-3 py-2 text-og-sm text-og-fg outline-hidden placeholder:text-og-fg-subtle focus:border-og-accent"
        />
      ) : (
        <div
          role={question.kind === "single_select" ? "radiogroup" : "group"}
          aria-labelledby={controlLabelId}
          aria-describedby={describedBy}
          className="flex flex-col gap-0.5"
        >
          {question.options.map((option, optionIndex) => {
            const checked = draft.values.includes(option.id);
            return (
              <label
                key={option.id}
                className={cn(
                  "flex cursor-pointer items-start gap-2.5 rounded-og-md px-2.5 py-2 transition-colors",
                  checked
                    ? "bg-og-status-waiting/12 text-og-fg"
                    : "text-og-fg hover:bg-og-surface-1/80",
                )}
              >
                <input
                  type={question.kind === "single_select" ? "radio" : "checkbox"}
                  name={question.kind === "single_select" ? fieldId : undefined}
                  autoFocus={autoFocus && firstOption && optionIndex === 0}
                  checked={checked}
                  onChange={(event) =>
                    onUpdate((current) => ({
                      ...current,
                      values:
                        question.kind === "single_select"
                          ? event.target.checked
                            ? [option.id]
                            : []
                          : event.target.checked
                            ? [...current.values, option.id]
                            : current.values.filter((value) => value !== option.id),
                      ...(question.kind === "single_select" && event.target.checked
                        ? { otherSelected: false }
                        : {}),
                    }))
                  }
                  className="mt-0.5 accent-og-accent"
                />
                <span className="min-w-0">
                  <span className="block text-og-sm font-medium">{option.label}</span>
                  {option.description ? (
                    <span className="mt-0.5 block text-og-xs text-og-fg-muted">
                      {linkifyText(option.description)}
                    </span>
                  ) : null}
                </span>
              </label>
            );
          })}
          {!question.skillReview ? (
            <div
              className={cn(
                "flex items-start gap-2.5 rounded-og-md px-2.5 py-2 transition-colors",
                draft.otherSelected
                  ? "bg-og-status-waiting/12 text-og-fg"
                  : "text-og-fg hover:bg-og-surface-1/80",
              )}
            >
              <input
                id={otherChoiceId}
                type={question.kind === "single_select" ? "radio" : "checkbox"}
                name={question.kind === "single_select" ? fieldId : undefined}
                aria-labelledby={otherLabelId}
                checked={draft.otherSelected}
                autoFocus={autoFocus && firstOption && question.options.length === 0}
                onChange={(event) =>
                  onUpdate((current) => ({
                    ...current,
                    otherSelected: event.target.checked,
                    ...(question.kind === "single_select" && event.target.checked
                      ? { values: [] }
                      : {}),
                  }))
                }
                className="mt-2 accent-og-accent"
              />
              <span className="min-w-0 flex-1">
                <label
                  id={otherLabelId}
                  htmlFor={otherChoiceId}
                  className="block text-og-sm font-medium"
                >
                  {messages.other}
                </label>
                <label htmlFor={otherTextId} className="sr-only">
                  {t("humanInputForm.otherAnswerForVisiblelabel", {
                    other: messages.other,
                    visibleLabel,
                  })}
                </label>
                <input
                  id={otherTextId}
                  type="text"
                  value={draft.other}
                  disabled={busy}
                  placeholder={t("humanInputForm.typeAValue")}
                  onClick={() => onUpdate(selectOtherDraft)}
                  onFocus={() => onUpdate(selectOtherDraft)}
                  onChange={(event) => {
                    const other = event.target.value;
                    onUpdate((current) => ({
                      ...selectOtherDraft(current),
                      other,
                    }));
                  }}
                  className="mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-hidden focus:border-og-accent disabled:opacity-50"
                />
              </span>
            </div>
          ) : null}
        </div>
      )}
      {/* A secret field shows its error under the input, above Save to. */}
      {error && !(question.kind === "secret" && question.secret) ? (
        <p id={errorId} role="alert" className="text-og-xs text-og-status-failed">
          {error}
        </p>
      ) : null}
    </>
  );
}