const { expect, test } = require("@playwright/test");

test("preview widget opens and sends a visitor message", async ({ page }, testInfo) => {
  await page.goto("/preview");

  await expect(page.getByRole("heading", { name: /9b-plus test stranka/i })).toBeVisible();

  const widget = page.locator("#maalflows-widget");
  await expect(widget).toBeAttached();

  const launcher = page.locator("#maalflows-widget .mf-launcher");
  await expect(launcher).toBeVisible();
  await launcher.click({ force: true });

  const panel = page.locator("#maalflows-widget .mf-panel");
  await expect(panel).toHaveClass(/open/);
  await expect(page.locator("#maalflows-widget textarea[name='message']")).toBeVisible();

  await page.screenshot({
    path: testInfo.outputPath(`preview-open-${testInfo.project.name}.png`),
    fullPage: true
  });

  const message = `Playwright smoke ${Date.now()}`;
  await page.locator("#maalflows-widget textarea[name='message']").fill(message);
  await page.locator("#maalflows-widget .mf-send").click();

  await expect(page.locator("#maalflows-widget .mf-message.visitor").last()).toContainText(message);
  await expect(panel).toBeVisible();

  const panelBox = await panel.boundingBox();
  expect(panelBox, "widget panel should have a measurable rendered box").toBeTruthy();
  expect(panelBox.width).toBeGreaterThan(250);
  expect(panelBox.height).toBeGreaterThan(250);

  await page.screenshot({
    path: testInfo.outputPath(`preview-message-${testInfo.project.name}.png`),
    fullPage: true
  });
});

test("admin login shell renders without layout breakage", async ({ page }, testInfo) => {
  await page.goto("/admin");

  const loginForm = page.locator("#loginForm");
  await expect(page.locator("#loginView")).toBeVisible();
  await expect(page.getByRole("heading", { name: "MaalFlows" })).toBeVisible();
  await expect(loginForm.locator("input[name='username']")).toBeVisible();
  await expect(loginForm.locator("input[name='password']")).toBeVisible();
  await expect(loginForm.getByRole("button", { name: /prihlasit/i })).toBeVisible();

  const formBox = await loginForm.boundingBox();
  expect(formBox, "login form should have a measurable rendered box").toBeTruthy();
  expect(formBox.width).toBeGreaterThan(250);
  expect(formBox.height).toBeGreaterThan(180);

  await page.screenshot({
    path: testInfo.outputPath(`admin-login-${testInfo.project.name}.png`),
    fullPage: true
  });
});