import "../../index.css";

import { ProjectId, ThreadId } from "@t3tools/contracts";
import { page } from "vitest/browser";
import { afterEach, describe, expect, it, vi } from "vitest";
import { render } from "vitest-browser-react";

import { CodexTraitsPicker } from "./CodexTraitsPicker";
import { COMPOSER_DRAFT_STORAGE_KEY, useComposerDraftStore } from "../../composerDraftStore";

async function mountPicker(props: {
  reasoningEffort?: "low" | "medium" | "high" | "xhigh";
  fastModeEnabled: boolean;
}) {
  const threadId = ThreadId.makeUnsafe("thread-codex-traits");
  const draftsByThreadId = {} as ReturnType<
    typeof useComposerDraftStore.getState
  >["draftsByThreadId"];
  draftsByThreadId[threadId] = {
    prompt: "",
    images: [],
    nonPersistedImageIds: [],
    persistedAttachments: [],
    terminalContexts: [],
    provider: "codex",
    model: null,
    modelOptions: {
      codex: {
        ...(props.reasoningEffort ? { reasoningEffort: props.reasoningEffort } : {}),
        ...(props.fastModeEnabled ? { fastMode: true } : {}),
      },
    },
    runtimeMode: null,
    interactionMode: null,
  };
  useComposerDraftStore.setState({
    draftsByThreadId,
    draftThreadsByThreadId: {},
    projectDraftThreadIdByProjectId: {
      [ProjectId.makeUnsafe("project-codex-traits")]: threadId,
    },
  });
  const host = document.createElement("div");
  document.body.append(host);
  const screen = await render(<CodexTraitsPicker threadId={threadId} />, { container: host });

  return {
    cleanup: async () => {
      await screen.unmount();
      host.remove();
    },
  };
}

describe("CodexTraitsPicker", () => {
  afterEach(() => {
    document.body.innerHTML = "";
    localStorage.removeItem(COMPOSER_DRAFT_STORAGE_KEY);
    useComposerDraftStore.setState({
      draftsByThreadId: {},
      draftThreadsByThreadId: {},
      projectDraftThreadIdByProjectId: {},
    });
  });

  it("shows fast mode controls", async () => {
    const mounted = await mountPicker({
      fastModeEnabled: false,
    });

    try {
      await page.getByRole("button").click();

      await vi.waitFor(() => {
        const text = document.body.textContent ?? "";
        expect(text).toContain("Fast Mode");
        expect(text).toContain("off");
        expect(text).toContain("on");
      });
    } finally {
      await mounted.cleanup();
    }
  });

  it("shows Fast in the trigger label when fast mode is active", async () => {
    const mounted = await mountPicker({
      fastModeEnabled: true,
    });

    try {
      await vi.waitFor(() => {
        expect(document.body.textContent ?? "").toContain("High · Fast");
      });
    } finally {
      await mounted.cleanup();
    }
  });

  it("shows only the provided effort options", async () => {
    const mounted = await mountPicker({
      fastModeEnabled: false,
    });

    try {
      await page.getByRole("button").click();

      await vi.waitFor(() => {
        const text = document.body.textContent ?? "";
        expect(text).toContain("Low");
        expect(text).toContain("Medium");
        expect(text).toContain("High");
        expect(text).toContain("Extra High");
      });
    } finally {
      await mounted.cleanup();
    }
  });

  it("persists sticky codex model options when traits change", async () => {
    const mounted = await mountPicker({
      fastModeEnabled: false,
    });

    try {
      await page.getByRole("button").click();
      await page.getByRole("menuitemradio", { name: "on" }).click();

      expect(useComposerDraftStore.getState().stickyModelOptions).toMatchObject({
        codex: {
          fastMode: true,
        },
      });
    } finally {
      await mounted.cleanup();
    }
  });

  it("hydrates legacy codex persisted state into modelOptions through the picker", async () => {
    const threadId = ThreadId.makeUnsafe("thread-codex-legacy");
    localStorage.setItem(
      COMPOSER_DRAFT_STORAGE_KEY,
      JSON.stringify({
        state: {
          draftsByThreadId: {
            [threadId]: {
              prompt: "",
              attachments: [],
              provider: "codex",
              model: "gpt-5.3-codex",
              effort: "xhigh",
              codexFastMode: true,
              serviceTier: "fast",
            },
          },
          draftThreadsByThreadId: {},
          projectDraftThreadIdByProjectId: {},
        },
        version: 1,
      }),
    );
    useComposerDraftStore.setState({
      draftsByThreadId: {},
      draftThreadsByThreadId: {},
      projectDraftThreadIdByProjectId: {},
    });

    const host = document.createElement("div");
    document.body.append(host);
    const screen = await render(<CodexTraitsPicker threadId={threadId} />, { container: host });

    try {
      await useComposerDraftStore.persist.rehydrate();

      await vi.waitFor(() => {
        expect(document.body.textContent ?? "").toContain("Extra High · Fast");
        expect(useComposerDraftStore.getState().draftsByThreadId[threadId]?.modelOptions).toEqual({
          codex: {
            reasoningEffort: "xhigh",
            fastMode: true,
          },
        });
      });
    } finally {
      await screen.unmount();
      host.remove();
    }
  });
});