// frontend/src/shell/SteerInput.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { http, HttpResponse } from "msw";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { server } from "../test/msw";
import { useSessionStore } from "../store/sessionStore";
import { ComposerFooter, ContextGauge, SteerInput } from "./SteerInput";

beforeEach(() => {
  localStorage.clear();
  server.use(
    http.post("http://localhost:8787/sessions/:id/steer", () =>
      new HttpResponse(null, { status: 204 }),
    ),
  );
});

test("new sessions send the browser-selected workspace, model, provider, and thinking", async () => {
  let body: unknown;
  localStorage.setItem("thothii.workspace-registry.v1.preferences", JSON.stringify({
    workspaceId: "psd-clinical", provider: "zai", model: "glm-5.2", thinking: "high",
  }));
  server.use(http.post("http://localhost:8787/sessions", async ({ request }) => {
    body = await request.json();
    return HttpResponse.json({ id: "s1" });
  }));
  render(<SteerInput sessionId={null} />);

  await userEvent.type(screen.getByRole("textbox", { name: /new question/i }), "q");
  await userEvent.click(screen.getByRole("button", { name: /send/i }));

  await waitFor(() => expect(body).toEqual({
    question: "q", workspaceId: "psd-clinical", provider: "zai", model: "glm-5.2", thinking: "high",
  }));
});

test("renders a text input and submit button", () => {
  render(<SteerInput sessionId="s1" />);
  expect(screen.getByRole("textbox")).toBeInTheDocument();
  expect(screen.getByRole("button", { name: /invia|send|steer/i })).toBeInTheDocument();
});

test("submitting typed text POSTs to /steer and clears the input", async () => {
  let captured: unknown = null;
  server.use(
    http.post("http://localhost:8787/sessions/:id/steer", async ({ request, params }) => {
      captured = { id: params.id, body: await request.json() };
      return new HttpResponse(null, { status: 204 });
    }),
  );
  render(<SteerInput sessionId="s1" />);
  const input = screen.getByRole("textbox");
  await userEvent.type(input, "redirect to plan B");
  await userEvent.click(screen.getByRole("button", { name: /invia|send|steer/i }));
  await waitFor(() => {
    expect(captured).toEqual({ id: "s1", body: { text: "redirect to plan B" } });
  });
  expect(input).toHaveValue("");
});

test("pressing Enter in the input submits the steer", async () => {
  let captured: unknown = null;
  server.use(
    http.post("http://localhost:8787/sessions/:id/steer", async ({ request }) => {
      captured = await request.json();
      return new HttpResponse(null, { status: 204 });
    }),
  );
  render(<SteerInput sessionId="s1" />);
  const input = screen.getByRole("textbox");
  await userEvent.type(input, "use approach X{Enter}");
  await waitFor(() => {
    expect(captured).toEqual({ text: "use approach X" });
  });
});

test("does not POST when input is empty", async () => {
  let called = false;
  server.use(
    http.post("http://localhost:8787/sessions/:id/steer", () => {
      called = true;
      return new HttpResponse(null, { status: 204 });
    }),
  );
  render(<SteerInput sessionId="s1" />);
  await userEvent.click(screen.getByRole("button", { name: /invia|send|steer/i }));
  // small wait to ensure the call didn't go through
  await new Promise((r) => setTimeout(r, 50));
  expect(called).toBe(false);
});


test("keeps the new-question composer white by default", () => {
  render(<SteerInput sessionId={null} />);
  const input = screen.getByRole("textbox", { name: /new question/i });
  expect(input).not.toHaveAttribute("data-awaiting-input");
  expect(input).not.toHaveClass("thot-awaiting-input");
});

test("marks the composer as awaiting input only when requested", () => {
  render(<SteerInput sessionId={null} awaitingInput />);
  const input = screen.getByRole("textbox", { name: /new question/i });
  expect(input).toHaveAttribute("data-awaiting-input", "true");
  expect(input).toHaveClass("thot-awaiting-input");
});

test("the context gauge uses green, yellow, and red at the requested thresholds", () => {
  const { rerender } = render(<ContextGauge pct={0.699} />);
  expect(screen.getByLabelText("Context usage 70%")).toHaveAttribute("data-level", "green");

  rerender(<ContextGauge pct={0.7} />);
  expect(screen.getByLabelText("Context usage 70%")).toHaveAttribute("data-level", "yellow");

  rerender(<ContextGauge pct={0.85} />);
  expect(screen.getByLabelText("Context usage 85%")).toHaveAttribute("data-level", "yellow");

  rerender(<ContextGauge pct={0.851} />);
  expect(screen.getByLabelText("Context usage 85%")).toHaveAttribute("data-level", "red");
});

test("footer shows cumulative k-token counters after workspace and context gauge after thinking", async () => {
  server.use(
    http.get("http://localhost:8787/settings", () => HttpResponse.json({
      workspace: "psd", provider: "zai", model: "glm-5.2", thinking: "medium",
    })),
    http.get("http://localhost:8787/workspaces", () => HttpResponse.json([{ name: "psd" }])),
    http.get("http://localhost:8787/workspaces/psd", () => HttpResponse.json({
      workspace: { llm_policy: { allowed: ["zai/glm-5.2"] } },
      revision: { id: "psd", commit: "a".repeat(40), blob: "b".repeat(40), snapshotPath: "/snapshot", state: "operational" },
    })),
    http.get("http://localhost:8787/models", () => HttpResponse.json({
      models: [{ provider: "zai", id: "glm-5.2", name: "GLM-5.2", reasoning: true }],
    })),
  );
  useSessionStore.getState().resetSession();
  useSessionStore.getState().applyEvent({
    type: "usage",
    usage: {
      input: 110_348,
      cacheRead: 633_344,
      output: 33_652,
      totalTokens: 55_935,
      contextWindow: 200_000,
    },
  });
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  render(<QueryClientProvider client={client}><ComposerFooter /></QueryClientProvider>);

  const counters = screen.getByText("110k/633k/34k");
  const workspace = await screen.findByRole("combobox", { name: "Workspace" });
  const gauge = screen.getByLabelText("Context usage 28%");
  const thinking = await screen.findByRole("combobox", { name: "Thinking level" });
  expect(workspace.compareDocumentPosition(counters) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
  expect(thinking.compareDocumentPosition(gauge) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
});

test("footer limits model choices to the selected workspace policy", async () => {
  server.use(
    http.get("http://localhost:8787/settings", () => HttpResponse.json({
      workspace: "psd-clinical", provider: "zai", model: "glm-5.2", thinking: "medium",
    })),
    http.get("http://localhost:8787/workspaces", () => HttpResponse.json([{
      id: "psd-clinical", name: "psd-clinical", file: "psd-clinical.yaml", displayName: "PSD Clinical",
      revision: { id: "psd-clinical", commit: "a".repeat(40), blob: "b".repeat(40), snapshotPath: "/snapshot", state: "operational" },
    }])),
    http.get("http://localhost:8787/workspaces/psd-clinical", () => HttpResponse.json({
      workspace: { llm_policy: { allowed: ["zai/glm-5.2"] } },
      revision: { id: "psd-clinical", commit: "a".repeat(40), blob: "b".repeat(40), snapshotPath: "/snapshot", state: "operational" },
    })),
    http.get("http://localhost:8787/models", () => HttpResponse.json({ models: [
      { provider: "zai", id: "glm-5.2", name: "GLM-5.2", reasoning: true },
      { provider: "deepseek", id: "deepseek-v4-pro", name: "DeepSeek V4 Pro", reasoning: true },
    ] })),
  );
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  render(<QueryClientProvider client={client}><ComposerFooter /></QueryClientProvider>);

  const selector = await screen.findByRole("combobox", { name: "Model" });
  await waitFor(() => expect(selector).toHaveTextContent("GLM-5.2"));
  await waitFor(() => expect(selector).not.toHaveTextContent("DeepSeek V4 Pro"));
});

test("switching workspaces replaces an out-of-policy model before session creation", async () => {
  let body: unknown;
  localStorage.setItem("thothii.workspace-registry.v1.preferences", JSON.stringify({
    workspaceId: "research", provider: "deepseek", model: "deepseek-v4-pro", thinking: "medium",
  }));
  const revision = (id: string) => ({
    id, commit: "a".repeat(40), blob: "b".repeat(40), snapshotPath: "/snapshot", state: "operational" as const,
  });
  server.use(
    http.get("http://localhost:8787/settings", () => HttpResponse.json({
      workspace: "research", provider: "deepseek", model: "deepseek-v4-pro", thinking: "medium",
    })),
    http.get("http://localhost:8787/workspaces", () => HttpResponse.json([
      { id: "research", name: "research", file: "research.yaml", displayName: "Research", revision: revision("research") },
      { id: "psd-clinical", name: "psd-clinical", file: "psd-clinical.yaml", displayName: "PSD Clinical", revision: revision("psd-clinical") },
    ])),
    http.get("http://localhost:8787/workspaces/research", () => HttpResponse.json({
      workspace: { workspace: { id: "research" }, llm_policy: { allowed: ["deepseek/deepseek-v4-pro"] } },
      revision: revision("research"),
    })),
    http.get("http://localhost:8787/workspaces/psd-clinical", () => HttpResponse.json({
      workspace: { workspace: { id: "psd-clinical" }, llm_policy: { default: "zai/glm-5.2", allowed: ["zai/glm-5.2"] } },
      revision: revision("psd-clinical"),
    })),
    http.get("http://localhost:8787/models", () => HttpResponse.json({ models: [
      { provider: "zai", id: "glm-5.2", name: "GLM-5.2", reasoning: true },
      { provider: "deepseek", id: "deepseek-v4-pro", name: "DeepSeek V4 Pro", reasoning: true },
    ] })),
    http.post("http://localhost:8787/sessions", async ({ request }) => {
      body = await request.json();
      return HttpResponse.json({ id: "s1" });
    }),
  );
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  render(<QueryClientProvider client={client}><ComposerFooter /><SteerInput sessionId={null} /></QueryClientProvider>);

  const workspaceSelector = await screen.findByRole("combobox", { name: "Workspace" });
  await waitFor(() => expect(workspaceSelector).toHaveTextContent("psd-clinical"));
  await userEvent.selectOptions(workspaceSelector, "psd-clinical");
  await waitFor(() => expect(screen.getByRole("combobox", { name: "Model" })).toHaveValue("glm-5.2"));
  expect(screen.getByRole("combobox", { name: "Model" })).not.toHaveTextContent("DeepSeek V4 Pro");

  await userEvent.type(screen.getByRole("textbox", { name: /new question/i }), "q");
  await userEvent.click(screen.getByRole("button", { name: /send/i }));

  await waitFor(() => expect(body).toEqual({
    question: "q", workspaceId: "psd-clinical", provider: "zai", model: "glm-5.2", thinking: "medium",
  }));
});

test("pulses the stop dot only while the harness is working", () => {
  const { rerender } = render(<SteerInput sessionId="s1" working />);
  const dot = () =>
    screen.getByRole("button", { name: /stop and save session/i }).querySelector("span");
  expect(dot()).toHaveClass("thot-pulse");
  rerender(<SteerInput sessionId="s1" working={false} />);
  expect(dot()).not.toHaveClass("thot-pulse");
});