import { expect, test } from "@playwright/test";

test.describe.configure({ mode: "serial" });

test("demo entry screen names the fictional org and never shows a password", async ({ page }) => {
  await page.goto("/login");
  await expect(page.getByText(/Northstar Mobility/)).toBeVisible();
  await expect(page.getByText(/Synthetische demo/)).toBeVisible();
  await expect(page.getByRole("button", { name: "Start begeleide demo" })).toBeVisible();
  await expect(page.getByRole("button", { name: "Verken als Operationsmanager" })).toBeVisible();
  await expect(page.getByRole("button", { name: "Verken als Verhuurmedewerker" })).toBeVisible();
  await expect(page.locator('input[type="password"]')).toHaveCount(0);
});

test("start guided demo logs in as Operations Manager and opens the guide at step 1", async ({ page }) => {
  await page.goto("/login");
  await page.getByRole("button", { name: "Start begeleide demo" }).click();
  // The ?guide=start marker is a one-shot signal the dashboard strips immediately after
  // consuming it, so assert on its effect (the guide panel opens at step 1) rather than
  // the transient URL, which can already be gone by the time this assertion runs.
  await expect(page).toHaveURL(/\/dashboard/);
  await expect(page.getByText("Amelie De Ridder")).toBeVisible();
  await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
  await expect(page.getByRole("heading", { name: "1. Begrijp de operationele status" })).toBeVisible();
});

test("permanent demo badge shows a popover with last reset info and a working About link", async ({ page }) => {
  await page.goto("/login");
  await page.getByRole("button", { name: "Verken als Operationsmanager" }).click();
  await expect(page).toHaveURL(/\/dashboard$/);

  const trigger = page.getByRole("button", { name: /Synthetische demo/ });
  await expect(trigger).toBeVisible();
  await trigger.click();
  await expect(page.getByRole("dialog", { name: "Over deze demo-omgeving" })).toBeVisible();
  await expect(page.getByText(/Laatste reset:/)).toBeVisible();

  await page.getByRole("link", { name: /Over deze demo/ }).click();
  await expect(page).toHaveURL(/\/about$/);
  await expect(page.getByRole("heading", { name: "Wat Fleet Ops wel en niet is" })).toBeVisible();
  await expect(page.getByText("Northstar Mobility").first()).toBeVisible();
  await expect(page.getByText("Demomodus").first()).toBeVisible();
  await expect(page.getByText("Niet gekoppeld").first()).toBeVisible();
});

test("badge popover closes on Escape and outside click", async ({ page }) => {
  await page.goto("/login");
  await page.getByRole("button", { name: "Verken als Operationsmanager" }).click();
  await expect(page).toHaveURL(/\/dashboard$/);

  const trigger = page.getByRole("button", { name: /Synthetische demo/ });
  await trigger.click();
  await expect(page.getByRole("dialog")).toBeVisible();
  await page.keyboard.press("Escape");
  await expect(page.getByRole("dialog")).toBeHidden();

  await trigger.click();
  await expect(page.getByRole("dialog")).toBeVisible();
  await page.mouse.click(10, 10);
  await expect(page.getByRole("dialog")).toBeHidden();
});