import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Favorites remain usable when their provider is disabled", WEB, async ({ t3, app, screen, browser }) => {
  await t3.project("Favorites demo");
  await t3.open();
  await screen.getByRole("textbox").fill("Draft for model selection");
  await browser.evaluate(async () => {
    const { serverEnvironment } = await import("/src/state/server.ts");
    const { appAtomRegistry } = await import("/src/rpc/atomRegistry.ts");
    const { readPrimaryEnvironmentId } = await import("/src/state/environments.ts");
    const environmentId = readPrimaryEnvironmentId();
    const settings = appAtomRegistry.get(serverEnvironment.settingsValueAtom(environmentId));
    const result = await serverEnvironment.updateSettings.run(appAtomRegistry, {
      environmentId,
      input: { patch: {
        providerInstances: { ...settings.providerInstances,
          codex: { driver: "codex", enabled: true, config: { binaryPath: "codex", customModels: [{ slug: "demo-active", name: "Demo active model" }] } },
          opencode: { driver: "opencode", enabled: true, config: { customModels: [{ slug: "demo-favorite", name: "Demo favorite" }, ...Array.from({ length: 20 }, (_, i) => ({ slug: `demo-option-${i}`, name: `Demo option ${i}` }))] } },
        },
        favorites: [{ provider: "opencode", model: "demo-favorite" }, { provider: "opencode", model: "demo-retired" }],
      } },
    });
    if (result._tag === "Failure") throw new Error("Could not prepare synthetic provider preferences");
    await serverEnvironment.refreshProviders.run(appAtomRegistry, {
      environmentId, input: { refreshModels: true, reloadSecrets: true },
    });
  });
  await t3.open("/settings/providers?instanceId=opencode");
  await screen.getByRole("switch", "Enable OpenCode").tap();
  await screen.getByRole("button", "Add custom model").scrollIntoView();
  await screen.getByRole("textbox", "Filter models").fill("demo-retired");
  await browser.evaluate(() => {
    const input = document.querySelector('[aria-label="Filter models"]');
    let parent = input?.parentElement;
    while (parent) {
      if (parent.scrollHeight > parent.clientHeight && getComputedStyle(parent).overflowY === "auto") {
        parent.scrollTop += 360;
        break;
      }
      parent = parent.parentElement;
    }
  });
  await app.screenshot("missing-favorite-settings");
  const retiredStar = screen.getByRole("button", "Remove demo-retired from favorites");
  await expect.soft(retiredStar).toBeVisible();
  if (await retiredStar.count()) {
    await retiredStar.tap();
    await expect(screen.getByRole("button", "Remove demo-retired from favorites")).toBeHidden();
  }
  await screen.getByRole("button", "Close").tap();
  await screen.getByRole("dialog", "Settings").waitFor({ state: "hidden" });
  await screen.getByRole("textbox").fill("Draft for model selection");
  await browser.locator("[data-chat-provider-model-picker]").tap();
  await screen.getByRole("button", "Codex").tap();
  await screen.getByRole("option", /Demo active model/).tap();
  await browser.keyboard.press("Escape");
  await screen.getByRole("option", /Demo active model/).waitFor({ state: "hidden" });
  await browser.locator("[data-chat-provider-model-picker]").tap();
  await app.screenshot("picker-initial");
  await expect.soft(screen.getByRole("option", /Demo active model/)).toBeVisible();
  await screen.getByRole("button", "Codex").tap();
  await app.screenshot("codex-models-available");
  await browser.keyboard.press("Escape");
  await screen.getByRole("option", /Demo active model/).waitFor({ state: "hidden" });
  await browser.locator("[data-chat-provider-model-picker]").tap();
  await app.screenshot("picker-reopened");
  await expect(screen.getByRole("option", /Demo active model/)).toBeVisible();
});