import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";
import {
  cleanAccountLoginOutput,
  deviceAuthorizationFromOutput,
} from "../../apps/web/src/account-login-ui.js";
import { renderAccountsPage } from "../../apps/web/src/render-accounts.js";

describe("account device-auth UX", () => {
  it("renders a stable clickable-link and copy-code surface instead of a terminal-only flow", () => {
    const page = renderAccountsPage({ id: "project:awp", name: "AWP" }, []);
    expect(page).toContain("data-device-auth");
    expect(page).toContain("data-login-url");
    expect(page).toContain('target="_blank"');
    expect(page).toContain("data-login-code");
    expect(page).toContain("data-copy-login-code");
    expect(page).toContain("Copy code");
    expect(page).toContain("data-login-details");
  });

  it("turns raw Codex terminal output into clean selectable authorization data", () => {
    const raw =
      "Welcome to Codex [v\u001b[90m0.149.1\u001b[0m]\n" +
      "\u001b[94mhttps://auth.openai.com/codex/device\u001b[0m\n" +
      "\u001b[94mA9N9-KVAVQ\u001b[0m\n";
    const clean = cleanAccountLoginOutput(raw);
    expect(clean).not.toContain("\u001b[");
    expect(clean).toContain("0.149.1");
    expect(deviceAuthorizationFromOutput(clean)).toEqual({
      verificationUrl: "https://auth.openai.com/codex/device",
      userCode: "A9N9-KVAVQ",
    });
  });

  it("keeps the details selectable, avoids rewriting unchanged output, and copies the code", () => {
    const css = readFileSync("apps/web/src/lifecycle.css", "utf8");
    const client = readFileSync("apps/web/src/client.ts", "utf8");
    expect(css).toMatch(/\.login-output[\s\S]*user-select:\s*text/);
    expect(css).toMatch(/\.device-auth-code[\s\S]*user-select:\s*text/);
    expect(client).toContain("navigator.clipboard?.writeText");
    expect(client).toContain(
      "if (output.textContent !== nextOutput) output.textContent = nextOutput",
    );
  });
});