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

test.setTimeout(180_000);

test("brand kit editor saves a kit and the intro generator offers three variants", async ({
  page,
}, testInfo) => {
  const stamp = Date.now();
  await signup(page, `media-brand-${stamp}@rakazo.test`, "password12", "Brand Kit");
  await completeOnboarding(page);
  // The scripted runtime runs Media Studio on the inference emulator.
  const capabilities = await rpc<{ configured: boolean }>(page, "media/capabilities", {});
  expect(capabilities.configured).toBe(true);

  await page.goto("/e2e/fixtures/media-editor.html?view=brandKit");
  const editor = page.getByTestId("media-brand-kit");
  await expect(editor).toBeVisible();
  // A new kit has nothing to generate an intro from until it is saved.
  await expect(editor.getByTestId("media-intro-generator")).toHaveCount(0);

  await editor.getByLabel("Name").fill("Studio Nord");
  await editor.getByLabel("Tone").fill("calm, precise");
  await editor.getByLabel("Primary").fill("#1f4e79");
  await editor.getByRole("switch", { name: "Watermark" }).click();
  await editor.getByLabel("Position").selectOption("top_right");
  await editor.getByRole("button", { name: "Caption style" }).click();
  await editor.getByLabel("Look").selectOption("karaoke");
  await editor.getByRole("button", { name: "Save" }).click();

  const generator = editor.getByTestId("media-intro-generator");
  await expect(generator).toBeVisible();
  await expect(editor.getByRole("button", { name: "Save" })).toBeDisabled();
  await expect(editor.getByRole("heading", { name: "Studio Nord" })).toBeVisible();
  await captureScreenshot(page, testInfo, "media-brand-kit");

  await generator.getByRole("button", { name: "Suggest" }).click();
  const variants = generator.getByTestId("media-intro-variant");
  await expect(variants).toHaveCount(3, { timeout: 120_000 });
  await captureScreenshot(page, testInfo, "media-brand-kit-intros");

  await variants.first().getByRole("button", { name: "Use" }).click();
  await expect(variants.first().getByText("In use")).toBeVisible();
  await expect(variants.nth(1).getByRole("button", { name: "Use" })).toBeVisible();

  // The intro is stored on the kit.
  const kits = await rpc<Array<{ kit: { name: string; intro?: { templateId: string } } }>>(
    page,
    "media/brandKits/list",
    {},
  );
  const saved = kits.find((record) => record.kit.name === "Studio Nord");
  expect(saved?.kit.intro?.templateId).toBeTruthy();

  // Back lists the kits.
  await editor.getByRole("button", { name: "Back" }).click();
  const list = page.getByTestId("media-brand-kits");
  await expect(list.getByText("Studio Nord")).toBeVisible();
  await captureScreenshot(page, testInfo, "media-brand-kit-list");
});