import React from "react";
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { JSDOM } from "jsdom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { ComposerAttachment } from "@/attachments/types";
import type { CreatePaseoWorktreeInput } from "@server/client/daemon-client";
import type { GitHubSearchItem } from "@server/shared/messages";
import { NewWorkspaceScreen } from "./new-workspace-screen";

const {
  theme,
  mockClient,
  mergeWorkspacesMock,
  navigateMock,
  saveDraftInputMock,
  clearDraftInputMock,
  queueDraftSubmissionMock,
  createdAgent: _createdAgent,
  createdWorkspace,
  prItem,
  prItemB,
  issueItem,
  initialAttachments,
  initialDraftState,
} = vi.hoisted(() => {
  const hoistedTheme = {
    spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32 },
    iconSize: { sm: 14, md: 18, lg: 22 },
    borderWidth: { 1: 1 },
    borderRadius: { md: 6, lg: 8, "2xl": 16 },
    fontSize: { xs: 11, sm: 13, base: 15, lg: 18 },
    fontWeight: { medium: "500" },
    shadow: { md: {} },
    colors: {
      surface0: "#000",
      surface1: "#111",
      surface2: "#222",
      foreground: "#fff",
      foregroundMuted: "#aaa",
      popoverForeground: "#fff",
      border: "#555",
      destructive: "#ff453a",
      palette: {
        zinc: { 600: "#52525b" },
      },
    },
  };

  const hoistedPrItem: GitHubSearchItem = {
    kind: "pr",
    number: 202,
    title: "Refactor picker",
    url: "https://example.com/pull/202",
    state: "open",
    body: null,
    labels: [],
    baseRefName: "main",
    headRefName: "feature/picker",
  };

  const hoistedPrItemB: GitHubSearchItem = {
    kind: "pr",
    number: 303,
    title: "Polish composer chip",
    url: "https://example.com/pull/303",
    state: "open",
    body: null,
    labels: [],
    baseRefName: "main",
    headRefName: "feature/composer-chip",
  };

  const hoistedIssueItem: GitHubSearchItem = {
    kind: "issue",
    number: 44,
    title: "Keep manual attachment",
    url: "https://example.com/issues/44",
    state: "open",
    body: null,
    labels: [],
  };

  const hoistedInitialAttachments: ComposerAttachment[] = [];
  const hoistedInitialDraftState = { text: "" };

  const hoistedCreatedWorkspace = {
    id: "workspace-1",
    workspaceDirectory: "/repo/.paseo/worktrees/workspace-1",
  };

  const hoistedCreatedAgent = {
    id: "agent-1",
    cwd: hoistedCreatedWorkspace.workspaceDirectory,
  };

  const hoistedMockClient = {
    isConnected: true,
    getCheckoutStatus: vi.fn(async () => ({ currentBranch: "main" })),
    getBranchSuggestions: vi.fn(async () => ({ branches: ["main", "dev", "feat/x"] })),
    searchGitHub: vi.fn(async () => ({
      items: [hoistedPrItem, hoistedPrItemB],
      githubFeaturesEnabled: true,
      error: null,
    })),
    createPaseoWorktree: vi.fn(async (_input: CreatePaseoWorktreeInput) => ({
      workspace: hoistedCreatedWorkspace,
      error: null,
    })),
    createAgent: vi.fn(async () => hoistedCreatedAgent),
  };

  return {
    theme: hoistedTheme,
    mockClient: hoistedMockClient,
    mergeWorkspacesMock: vi.fn(),
    navigateMock: vi.fn(),
    saveDraftInputMock: vi.fn(),
    clearDraftInputMock: vi.fn(),
    queueDraftSubmissionMock: vi.fn(),
    createdAgent: hoistedCreatedAgent,
    createdWorkspace: hoistedCreatedWorkspace,
    prItem: hoistedPrItem,
    prItemB: hoistedPrItemB,
    issueItem: hoistedIssueItem,
    initialAttachments: hoistedInitialAttachments,
    initialDraftState: hoistedInitialDraftState,
  };
});

vi.mock("react-native-unistyles", () => ({
  StyleSheet: {
    create: (factory: unknown) => (typeof factory === "function" ? factory(theme) : factory),
  },
  useUnistyles: () => ({ theme }),
}));

vi.mock("@/constants/platform", () => ({
  isWeb: true,
  isNative: false,
}));

vi.mock("@/constants/layout", () => ({
  HEADER_INNER_HEIGHT: 48,
  HEADER_INNER_HEIGHT_MOBILE: 56,
  HEADER_TOP_PADDING_MOBILE: 8,
  MAX_CONTENT_WIDTH: 900,
  useIsCompactFormFactor: () => false,
}));

vi.mock("react-native-safe-area-context", () => ({
  useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
}));

vi.mock("lucide-react-native", () => {
  const createIcon = (name: string) => (props: Record<string, unknown>) =>
    React.createElement("span", { ...props, "data-icon": name });
  return {
    ChevronDown: createIcon("ChevronDown"),
    GitBranch: createIcon("GitBranch"),
    GitPullRequest: createIcon("GitPullRequest"),
  };
});

function flattenReanimatedStyle(style: unknown) {
  if (!Array.isArray(style)) {
    return style;
  }
  return Object.assign({}, ...style.filter(Boolean));
}

vi.mock("react-native-reanimated", () => ({
  default: {
    View: ({
      testID,
      style,
      ...props
    }: React.HTMLAttributes<HTMLDivElement> & { testID?: string; style?: unknown }) => {
      const flattenedStyle = flattenReanimatedStyle(style);
      return <div {...props} data-testid={testID} style={flattenedStyle as React.CSSProperties} />;
    },
  },
}));

vi.mock("@/runtime/host-runtime", () => ({
  useHostRuntimeClient: () => mockClient,
  useHostRuntimeIsConnected: () => true,
}));

vi.mock("@/stores/session-store", () => ({
  useSessionStore: (selector: (state: unknown) => unknown) =>
    selector({
      mergeWorkspaces: mergeWorkspacesMock,
    }),
  normalizeWorkspaceDescriptor: (workspace: unknown) => workspace,
}));

vi.mock("@/utils/agent-snapshots", () => ({
  normalizeAgentSnapshot: (agent: unknown) => agent,
}));

vi.mock("@/utils/encode-images", () => ({
  encodeImages: vi.fn(async () => []),
}));

vi.mock("@/utils/error-messages", () => ({
  toErrorMessage: (error: unknown) => (error instanceof Error ? error.message : String(error)),
}));

vi.mock("@/utils/workspace-execution", () => ({
  requireWorkspaceExecutionAuthority: (input: { workspace: { workspaceDirectory: string } }) => ({
    workspaceDirectory: input.workspace.workspaceDirectory,
  }),
}));

vi.mock("@/utils/workspace-navigation", () => ({
  navigateToPreparedWorkspaceTab: navigateMock,
}));

vi.mock("@/stores/draft-keys", () => ({
  buildDraftStoreKey: ({
    serverId,
    agentId,
    draftId,
  }: {
    serverId: string;
    agentId: string;
    draftId?: string | null;
  }) => (draftId ? `draft:${serverId}:${draftId}` : `agent:${serverId}:${agentId}`),
  generateDraftId: () => "draft-new-workspace",
}));

vi.mock("@/stores/draft-store", () => ({
  useDraftStore: {
    getState: () => ({
      saveDraftInput: saveDraftInputMock,
      clearDraftInput: clearDraftInputMock,
    }),
  },
}));

vi.mock("@/stores/workspace-draft-submission-store", () => ({
  useWorkspaceDraftSubmissionStore: {
    getState: () => ({
      setPending: queueDraftSubmissionMock,
    }),
  },
}));

vi.mock("@/contexts/toast-context", () => ({
  useToast: () => ({ error: vi.fn() }),
}));

vi.mock("@/hooks/use-agent-input-draft", () => ({
  useAgentInputDraft: () => {
    const [attachments, setAttachments] = React.useState<ComposerAttachment[]>(initialAttachments);
    const [text, setText] = React.useState(initialDraftState.text);
    return {
      text,
      setText,
      attachments,
      setAttachments,
      cwd: "/repo",
      composerState: {
        selectedProvider: "claude-code",
        selectedMode: "",
        modeOptions: [],
        effectiveModelId: null,
        effectiveThinkingOptionId: null,
        commandDraftConfig: undefined,
        statusControls: {},
      },
    };
  },
}));

vi.mock("@/hooks/use-keyboard-shift-style", () => ({
  useKeyboardShiftStyle: () => ({ style: { transform: "translateY(-216px)" } }),
}));

interface ComposerMockProps {
  onSubmitMessage: (payload: {
    text: string;
    attachments: ComposerAttachment[];
    cwd: string;
  }) => void;
  submitBehavior?: "clear" | "preserve-and-lock";
  submitIcon?: "arrow" | "return";
  isSubmitLoading?: boolean;
  value: string;
  onChangeText: (text: string) => void;
  attachments: ComposerAttachment[];
  onChangeAttachments: (attachments: ComposerAttachment[]) => void;
}

interface AttachmentPillProps {
  attachment: Extract<ComposerAttachment, { kind: "github_pr" | "github_issue" }>;
  attachments: ComposerAttachment[];
  isDisabled: boolean;
  onChangeAttachments: (attachments: ComposerAttachment[]) => void;
}

function ComposerMockAttachmentPill({
  attachment,
  attachments,
  isDisabled,
  onChangeAttachments,
}: AttachmentPillProps) {
  const handleRemove = React.useCallback(() => {
    onChangeAttachments(
      attachments.filter(
        (candidate) =>
          candidate.kind !== attachment.kind || candidate.item.number !== attachment.item.number,
      ),
    );
  }, [attachment, attachments, onChangeAttachments]);
  return (
    <div data-testid="composer-github-attachment-pill">
      #{attachment.item.number} {attachment.item.title}
      <button
        type="button"
        aria-label={`Remove ${attachment.kind === "github_pr" ? "PR" : "issue"} #${attachment.item.number}`}
        disabled={isDisabled}
        onClick={handleRemove}
      >
        Remove
      </button>
    </div>
  );
}

function ComposerMock({
  onSubmitMessage,
  submitBehavior,
  submitIcon,
  isSubmitLoading,
  value,
  onChangeText,
  attachments,
  onChangeAttachments,
}: ComposerMockProps) {
  const isDisabled = submitBehavior === "preserve-and-lock" && Boolean(isSubmitLoading);
  const handleTextareaChange = React.useCallback(
    (event: React.ChangeEvent<HTMLTextAreaElement>) => onChangeText(event.currentTarget.value),
    [onChangeText],
  );
  const handleSubmit = React.useCallback(
    () => onSubmitMessage({ text: value, attachments, cwd: "/repo" }),
    [onSubmitMessage, value, attachments],
  );
  return (
    <div
      data-testid="test-composer"
      data-submit-behavior={submitBehavior}
      data-submit-icon={submitIcon}
    >
      <textarea
        aria-label="Message agent..."
        disabled={isDisabled}
        value={value}
        onChange={handleTextareaChange}
      />
      <button type="button" data-testid="message-input-attach-button" disabled={isDisabled}>
        Attach
      </button>
      {attachments.map((attachment) =>
        attachment.kind === "github_pr" || attachment.kind === "github_issue" ? (
          <ComposerMockAttachmentPill
            key={`${attachment.kind}-${attachment.item.number}`}
            attachment={attachment}
            attachments={attachments}
            isDisabled={isDisabled}
            onChangeAttachments={onChangeAttachments}
          />
        ) : null,
      )}
      <button type="button" data-testid="test-composer-submit" onClick={handleSubmit}>
        Submit
      </button>
    </div>
  );
}

vi.mock("@/components/composer", () => ({
  Composer: ComposerMock,
}));

vi.mock("@/components/composer-attachments", () => ({
  splitComposerAttachmentsForSubmit: (attachments: ComposerAttachment[]) => ({
    images: [],
    attachments: attachments.flatMap((attachment) => {
      if (attachment.kind === "github_pr") {
        return [
          {
            type: "github_pr",
            mimeType: "application/github-pr",
            number: attachment.item.number,
            title: attachment.item.title,
            url: attachment.item.url,
          },
        ];
      }
      if (attachment.kind === "github_issue") {
        return [
          {
            type: "github_issue",
            mimeType: "application/github-issue",
            number: attachment.item.number,
            title: attachment.item.title,
            url: attachment.item.url,
          },
        ];
      }
      return [];
    }),
  }),
}));

vi.mock("@/components/desktop/titlebar-drag-region", () => ({
  TitlebarDragRegion: () => null,
}));

vi.mock("@/components/headers/menu-header", () => ({
  SidebarMenuToggle: () => null,
}));

vi.mock("@/components/headers/screen-header", () => ({
  ScreenHeader: () => null,
}));

vi.mock("@/components/ui/tooltip", () => ({
  Tooltip: ({ children }: { children: React.ReactNode }) => children,
  TooltipTrigger: ({ children }: { children: React.ReactNode }) => children,
  TooltipContent: ({ children }: { children: React.ReactNode }) => children,
}));

function ComboboxOptionButton({
  option,
  onSelect,
}: {
  option: { id: string; label: string };
  onSelect: (id: string) => void;
}) {
  const handleClick = React.useCallback(() => onSelect(option.id), [onSelect, option.id]);
  return (
    <button type="button" onClick={handleClick}>
      {option.label}
    </button>
  );
}

function ComboboxOptionRenderWrapper({
  option,
  onSelect,
  renderOption,
}: {
  option: { id: string; label: string };
  onSelect: (id: string) => void;
  renderOption: (input: {
    option: { id: string; label: string };
    selected: boolean;
    active: boolean;
    onPress: () => void;
  }) => React.ReactElement;
}) {
  const handlePress = React.useCallback(() => onSelect(option.id), [onSelect, option.id]);
  return (
    <>
      {renderOption({
        option,
        selected: false,
        active: false,
        onPress: handlePress,
      })}
    </>
  );
}

vi.mock("@/components/ui/combobox", () => ({
  Combobox: ({
    open,
    options,
    renderOption,
    onSelect,
  }: {
    open?: boolean;
    options: Array<{ id: string; label: string }>;
    renderOption?: (input: {
      option: { id: string; label: string };
      selected: boolean;
      active: boolean;
      onPress: () => void;
    }) => React.ReactElement;
    onSelect: (id: string) => void;
  }) => {
    if (!open) return null;
    return (
      <div data-testid="ref-picker-combobox">
        {options.map((option) =>
          renderOption ? (
            <ComboboxOptionRenderWrapper
              key={option.id}
              option={option}
              onSelect={onSelect}
              renderOption={renderOption}
            />
          ) : (
            <ComboboxOptionButton key={option.id} option={option} onSelect={onSelect} />
          ),
        )}
      </div>
    );
  },
  ComboboxItem: ({
    label,
    onPress,
    testID,
    disabled,
  }: {
    label: string;
    onPress: () => void;
    testID?: string;
    disabled?: boolean;
  }) => (
    <button type="button" data-testid={testID} disabled={disabled} onClick={onPress}>
      {label}
    </button>
  ),
}));

vi.mock("mnemonic-id", () => ({
  createNameId: () => "gentle-slug",
}));

vi.mock("react-native", async () => {
  const actual = await vi.importActual<Record<string, unknown>>("react-native");
  return actual;
});

let root: Root | null = null;
let container: HTMLElement | null = null;
let queryClient: QueryClient | null = null;

beforeEach(() => {
  const dom = new JSDOM("<!doctype html><html><body></body></html>");
  vi.stubGlobal("React", React);
  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
  vi.stubGlobal("window", dom.window);
  vi.stubGlobal("document", dom.window.document);
  vi.stubGlobal("HTMLElement", dom.window.HTMLElement);
  vi.stubGlobal("Node", dom.window.Node);
  vi.stubGlobal("navigator", dom.window.navigator);

  container = document.createElement("div");
  document.body.appendChild(container);
  root = createRoot(container);
  queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  mockClient.getBranchSuggestions.mockClear();
  mockClient.searchGitHub.mockClear();
  mockClient.searchGitHub.mockResolvedValue({
    items: [prItem, prItemB],
    githubFeaturesEnabled: true,
    error: null,
  });
  mockClient.createPaseoWorktree.mockClear();
  mockClient.createAgent.mockClear();
  saveDraftInputMock.mockClear();
  clearDraftInputMock.mockClear();
  queueDraftSubmissionMock.mockClear();
  navigateMock.mockClear();
  initialAttachments.length = 0;
  initialDraftState.text = "";
});

afterEach(() => {
  if (root) {
    act(() => {
      root?.unmount();
    });
  }
  queryClient?.clear();
  root = null;
  container = null;
  queryClient = null;
  vi.unstubAllGlobals();
});

function renderScreen() {
  act(() => {
    root?.render(
      <QueryClientProvider client={queryClient!}>
        <NewWorkspaceScreen serverId="server" sourceDirectory="/repo" />
      </QueryClientProvider>,
    );
  });
}

function click(element: Element) {
  act(() => {
    element.dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
  });
}

async function flush() {
  await act(async () => {
    await Promise.resolve();
    await Promise.resolve();
    await new Promise((resolve) => setTimeout(resolve, 0));
  });
}

async function findByTestId(testID: string): Promise<HTMLElement> {
  for (let attempt = 0; attempt < 10; attempt += 1) {
    await flush();
    const element = document.querySelector(`[data-testid="${testID}"]`) as HTMLElement | null;
    if (element) return element;
  }
  throw new Error(`Missing element with testID ${testID}`);
}

function queryByTestId(testID: string): HTMLElement | null {
  return document.querySelector(`[data-testid="${testID}"]`);
}

function queryAllByTestId(testID: string): HTMLElement[] {
  return Array.from(document.querySelectorAll(`[data-testid="${testID}"]`)) as HTMLElement[];
}

type CreatePaseoWorktreeArg = Parameters<typeof mockClient.createPaseoWorktree>[0];

function createDeferredPromise<T>() {
  let resolve!: (value: T | PromiseLike<T>) => void;
  let reject!: (reason?: unknown) => void;
  const promise = new Promise<T>((nextResolve, nextReject) => {
    resolve = nextResolve;
    reject = nextReject;
  });
  return { promise, resolve, reject };
}

function firstCreateWorktreeCall(): CreatePaseoWorktreeArg {
  const calls = mockClient.createPaseoWorktree.mock.calls;
  const firstCall = calls[0];
  if (!firstCall) throw new Error("createPaseoWorktree not called");
  return firstCall[0];
}

describe("NewWorkspaceScreen picker payload", () => {
  it("moves the ref picker row with the mobile keyboard shift", async () => {
    renderScreen();
    await flush();

    const pickerRow = await findByTestId("new-workspace-ref-picker-row");
    expect(pickerRow.style.transform).toBe("translateY(-216px)");
  });

  it("lazily searches only GitHub PRs when the picker opens", async () => {
    renderScreen();
    await flush();

    expect(mockClient.searchGitHub).not.toHaveBeenCalled();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    expect(mockClient.searchGitHub).toHaveBeenCalledWith({
      cwd: "/repo",
      query: "",
      limit: 20,
      kinds: ["github-pr"],
    });
  });

  it("sends no new fields when nothing is selected (default)", async () => {
    renderScreen();
    await flush();

    click(await findByTestId("test-composer-submit"));
    await flush();

    expect(mockClient.createPaseoWorktree).toHaveBeenCalledTimes(1);
    const call = firstCreateWorktreeCall();
    expect(call).toMatchObject({
      cwd: "/repo",
      worktreeSlug: "gentle-slug",
    });
    expect(call).not.toHaveProperty("refName");
    expect(call).not.toHaveProperty("action");
    expect(call).not.toHaveProperty("githubPrNumber");
  });

  it("opens the new workspace draft tab as soon as the worktree is ready", async () => {
    initialDraftState.text = "please review this change";
    renderScreen();
    await flush();

    click(await findByTestId("test-composer-submit"));
    await flush();

    expect(mockClient.createPaseoWorktree).toHaveBeenCalledTimes(1);
    expect(mockClient.createAgent).not.toHaveBeenCalled();
    expect(saveDraftInputMock).toHaveBeenCalledWith({
      draftKey: "draft:server:draft-new-workspace",
      draft: {
        text: "please review this change",
        attachments: [],
        cwd: createdWorkspace.workspaceDirectory,
      },
    });
    expect(queueDraftSubmissionMock).toHaveBeenCalledWith({
      serverId: "server",
      workspaceId: createdWorkspace.id,
      draftId: "draft-new-workspace",
      text: "please review this change",
      attachments: [],
      cwd: createdWorkspace.workspaceDirectory,
      provider: "claude-code",
      allowEmptyText: true,
    });
    expect(navigateMock).toHaveBeenCalledWith({
      serverId: "server",
      workspaceId: createdWorkspace.id,
      target: { kind: "draft", draftId: "draft-new-workspace" },
      navigationMethod: "replace",
    });
    expect(clearDraftInputMock).toHaveBeenCalledWith({
      draftKey: "new-workspace:server:/repo",
      lifecycle: "sent",
    });
    expect(navigateMock.mock.invocationCallOrder[0]).toBeLessThan(
      clearDraftInputMock.mock.invocationCallOrder[0],
    );
    expect(document.querySelector("textarea")).toHaveProperty("disabled", true);
  });

  it("shows the selected PR number, title, and PR icon in the picker trigger", async () => {
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItem.number}`));
    await flush();

    const trigger = await findByTestId("new-workspace-ref-picker-trigger");
    expect(trigger.textContent).toContain(`#${prItem.number}`);
    expect(trigger.textContent).toContain(prItem.title);
    expect(trigger.textContent).not.toContain("feature/picker");
    expect(trigger.querySelectorAll('[data-icon="GitPullRequest"]')).toHaveLength(1);
  });

  it("adds the selected picker PR as a composer attachment pill", async () => {
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItem.number}`));
    await flush();

    const pills = queryAllByTestId("composer-github-attachment-pill");
    expect(pills).toHaveLength(1);
    expect(pills[0]?.textContent).toContain(`#${prItem.number}`);
    expect(pills[0]?.textContent).toContain("Refactor picker");
  });

  it("replaces the picker-owned composer PR pill when another PR is selected", async () => {
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItem.number}`));
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItemB.number}`));
    await flush();

    const pills = queryAllByTestId("composer-github-attachment-pill");
    expect(pills).toHaveLength(1);
    expect(pills[0]?.textContent).toContain(`#${prItemB.number}`);
    expect(pills[0]?.textContent).toContain("Polish composer chip");
    expect(pills[0]?.textContent).not.toContain(`#${prItem.number}`);
  });

  it("removes the picker-owned PR pill when switching to a branch and preserves user-added chips", async () => {
    initialAttachments.push({ kind: "github_issue", item: issueItem });
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItem.number}`));
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId("new-workspace-ref-picker-branch-dev"));
    await flush();

    const pills = queryAllByTestId("composer-github-attachment-pill");
    expect(pills).toHaveLength(1);
    expect(pills[0]?.textContent).toContain(`#${issueItem.number}`);
    expect(pills[0]?.textContent).toContain(issueItem.title);
    expect(pills[0]?.textContent).not.toContain(`#${prItem.number}`);
  });

  it("sends action=branch-off with the branch name when a branch row is selected", async () => {
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId("new-workspace-ref-picker-branch-dev"));
    await flush();

    click(await findByTestId("test-composer-submit"));
    await flush();

    expect(mockClient.createPaseoWorktree).toHaveBeenCalledTimes(1);
    const call = firstCreateWorktreeCall();
    expect(call).toMatchObject({
      cwd: "/repo",
      worktreeSlug: "gentle-slug",
      action: "branch-off",
      refName: "dev",
    });
    expect(call).not.toHaveProperty("githubPrNumber");
  });

  it("sends action=checkout with pr number + head ref when a github PR row is selected", async () => {
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItem.number}`));
    await flush();

    click(await findByTestId("test-composer-submit"));
    await flush();

    expect(mockClient.createPaseoWorktree).toHaveBeenCalledTimes(1);
    const call = firstCreateWorktreeCall();
    expect(call).toMatchObject({
      cwd: "/repo",
      worktreeSlug: "gentle-slug",
      action: "checkout",
      refName: "feature/picker",
      githubPrNumber: 202,
    });
  });

  it("sends the selected PR attachment when creating the worktree", async () => {
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItem.number}`));
    await flush();

    click(await findByTestId("test-composer-submit"));
    await flush();

    const call = firstCreateWorktreeCall();
    const attachments = call.attachments ?? [];
    expect(attachments).toHaveLength(1);
    expect(attachments[0]).toMatchObject({ type: "github_pr", number: 202 });
  });

  it("keeps the selected PR attachment when the PR query refreshes after selection", async () => {
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItem.number}`));
    await flush();

    mockClient.searchGitHub.mockResolvedValue({
      items: [],
      githubFeaturesEnabled: true,
      error: null,
    });
    await act(async () => {
      await queryClient?.invalidateQueries({
        queryKey: ["new-workspace-github-prs", "server", "/repo"],
      });
    });
    await flush();

    click(await findByTestId("test-composer-submit"));
    await flush();

    const call = firstCreateWorktreeCall();
    expect(call.attachments).toHaveLength(1);
    expect(call.attachments?.[0]).toMatchObject({ type: "github_pr", number: 202 });
  });

  it("omits PR rows from the picker when GitHub features are disabled", async () => {
    mockClient.searchGitHub.mockResolvedValueOnce({
      items: [],
      githubFeaturesEnabled: false,
      error: null,
    });
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    expect(queryByTestId(`new-workspace-ref-picker-pr-${prItem.number}`)).toBeNull();
    expect((await findByTestId("new-workspace-ref-picker-branch-dev")).textContent).toContain(
      "dev",
    );
  });

  it("preserves and locks the composer and picker while worktree creation is pending, then unlocks on error", async () => {
    initialDraftState.text = "please review this change";
    const createWorktree = createDeferredPromise<{
      workspace: typeof createdWorkspace;
      error: null;
    }>();
    mockClient.createPaseoWorktree.mockImplementationOnce(async () => await createWorktree.promise);
    renderScreen();
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId(`new-workspace-ref-picker-pr-${prItem.number}`));
    await flush();

    click(await findByTestId("new-workspace-ref-picker-trigger"));
    await flush();

    click(await findByTestId("test-composer-submit"));
    await flush();

    const textInput = document.querySelector('[aria-label="Message agent..."]');
    const removeButton = document.querySelector(`[aria-label="Remove PR #${prItem.number}"]`);
    expect(queryByTestId("test-composer")?.dataset.submitBehavior).toBe("preserve-and-lock");
    expect(queryByTestId("test-composer")?.dataset.submitIcon).toBe("return");
    expect(textInput).toHaveProperty("value", "please review this change");
    expect(textInput).toHaveProperty("disabled", true);
    expect(queryByTestId("composer-github-attachment-pill")).not.toBeNull();
    expect(removeButton).toHaveProperty("disabled", true);
    expect(queryByTestId("message-input-attach-button")).toHaveProperty("disabled", true);
    expect(queryByTestId("new-workspace-ref-picker-trigger")).toHaveProperty("disabled", true);
    expect(queryByTestId("new-workspace-ref-picker-branch-dev")).toHaveProperty("disabled", true);
    expect(clearDraftInputMock).not.toHaveBeenCalled();

    createWorktree.reject(new Error("Create worktree failed"));
    await flush();

    expect(textInput).toHaveProperty("value", "please review this change");
    expect(textInput).toHaveProperty("disabled", false);
    expect(queryByTestId("composer-github-attachment-pill")).not.toBeNull();
    expect(removeButton).toHaveProperty("disabled", false);
    expect(queryByTestId("message-input-attach-button")).toHaveProperty("disabled", false);
    expect(queryByTestId("new-workspace-ref-picker-trigger")).toHaveProperty("disabled", false);
    expect(queryByTestId("new-workspace-ref-picker-branch-dev")).toHaveProperty("disabled", false);
  });
});