import { expect, test } from "@playwright/test";
import { completeOnboarding, routePatchRpc, signup, waitForChatComposer } from "./helpers";

const viewports = [
  { name: "desktop", width: 1440, height: 900 },
  { name: "mobile", width: 390, height: 844 },
];

for (const viewport of viewports) {
  test(`queued run shows waiting status (${viewport.name})`, async ({ page }) => {
    await page.setViewportSize({ width: viewport.width, height: viewport.height });
    const stamp = Date.now();
    await signup(page, `queued-${viewport.name}-${stamp}@rakazo.test`, "password12", "Queue");
    await completeOnboarding(page);
    await waitForChatComposer(page);
    const botId = new URL(page.url()).pathname.split("/").filter(Boolean).at(-1)!;
    let holdQueued = false;

    await routePatchRpc(page, "threads/get", (json) => {
      if (!holdQueued) return json;
      const run = {
        id: "run-queued-e2e",
        botId,
        threadId: String(json.threadId ?? "thread-e2e"),
        taskId: "task-queued-e2e",
        status: "queued",
        trigger: "user",
        routineId: null,
        modelProvider: null,
        modelId: null,
        error: null,
        startedAt: null,
        completedAt: null,
        createdAt: new Date().toISOString(),
      };
      return { ...json, run, activeRuns: [run] };
    });

    await page.route("**/rpc/threads/send", async (route) => {
      holdQueued = true;
      await route.continue();
    });
    const composer = page.getByRole("combobox", { name: /Message|Nachricht/i });
    await composer.fill("Hallo");
    await composer.press("Enter");
    await expect(page.getByRole("status").filter({ hasText: /Queued|Wartet|Working|Arbeitet/i })).toBeVisible({
      timeout: 20_000,
    });
    await expect(page.getByRole("button", { name: /Stop|Stopp/i })).toBeVisible();
  });
}