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

test.describe("@functional", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/");
    // Ensure the page has no console errors or uncaught exceptions during interactions.
    page.on("pageerror", error => {
      throw new Error(`Uncaught exception: ${error.message}`);
    });
    page.on("console", message => {
      if (message.type() === "error") {
        throw new Error(`Console error: ${message.text()}`);
      }
    });
  });

  test("accordion toggles open and closed", async ({ page }) => {
    const summary = page.locator(".accordion-summary", { hasText: "Account details" }).first();
    const details = summary.locator("..");
    await expect(details).not.toHaveAttribute("open", "");
    await summary.click();
    await expect(details).toHaveAttribute("open", "");
    await expect(details).not.toHaveAttribute("data-animating", "true");
    await summary.click();
    await expect(details).not.toHaveAttribute("data-animating", "true");
    await expect(details).not.toHaveAttribute("open", "");
  });

  test("tabs switch panels", async ({ page }) => {
    const tabs = page.locator(".tabs").first();
    const detailsTab = tabs.locator(".tab", { hasText: "Details" });
    const detailsPanel = page.locator("#tab-panel-details");
    await expect(detailsPanel).toHaveAttribute("hidden", "");
    await detailsTab.click();
    await expect(detailsTab).toHaveClass(/tab-active/);
    await expect(detailsPanel).not.toHaveAttribute("hidden", "");
    await expect(detailsPanel).toBeVisible();
  });

  test("dropdown opens and closes", async ({ page }) => {
    const trigger = page.locator("[data-dropdown-trigger]", { hasText: "Open dropdown" });
    const menu = page.locator(".dropdown-menu").first();
    await trigger.click();
    await expect(menu).toHaveClass(/is-open/);
    await page.locator("body").click();
    await expect(menu).not.toHaveClass(/is-open/);
  });

  test("tooltip shows on hover", async ({ page }) => {
    const trigger = page.locator(".tooltip-trigger", { hasText: "Top" }).first();
    const wrapper = trigger.locator("xpath=..");
    await trigger.hover();
    await expect(wrapper).toHaveClass(/is-visible/);
    await page.mouse.move(0, 0);
    await expect(wrapper).not.toHaveClass(/is-visible/);
  });

  test("popover toggles and closes on outside click", async ({ page }) => {
    const trigger = page.locator("[data-popover-toggle]");
    const popover = page.locator(".popover").first();
    await trigger.click();
    await expect(popover).toHaveClass(/is-open/);
    await page.locator("body").click();
    await expect(popover).not.toHaveClass(/is-open/);
  });

  test("vue popover toggles and closes on outside click", async ({ page }) => {
    const trigger = page.locator("#vue-popover-app .popover-trigger");
    const popover = page.locator("#vue-popover-app .popover");
    await trigger.click();
    await expect(popover).toHaveClass(/is-open/);
    await page.locator("body").click();
    await expect(popover).not.toHaveClass(/is-open/);
  });

  test("navigation shell toggles sidebar", async ({ page }) => {
    await page.setViewportSize({ width: 800, height: 600 });
    const shell = page.locator(".navigation-shell").first();
    const toggle = shell.locator("[data-navigation-toggle]");
    const sidebar = shell.locator(".navigation-sidebar");
    const backdrop = shell.locator(".navigation-backdrop");
    await toggle.click();
    await expect(sidebar).toHaveClass(/is-open/);
    await expect(backdrop).toHaveClass(/is-visible/);
    await backdrop.click();
    await expect(sidebar).not.toHaveClass(/is-open/);
    await expect(backdrop).not.toHaveClass(/is-visible/);
  });

  test("modal opens and closes", async ({ page }) => {
    const trigger = page.getByRole("button", { name: "Open modal" });
    await trigger.click();
    const modal = page.locator(".modal").last();
    await expect(modal).toHaveClass(/a-show/);
    await modal.locator(".modal-close").click();
    await expect(modal).not.toBeVisible();
  });

  test("drawer opens and closes", async ({ page }) => {
    const trigger = page.getByRole("button", { name: "Open drawer" });
    await trigger.click();
    const drawer = page.locator(".drawer").last();
    await expect(drawer).toHaveClass(/a-show/);
    await drawer.locator(".drawer-backdrop").click();
    await expect(drawer).not.toBeVisible();
  });

  test("toast appears and can be closed", async ({ page }) => {
    const trigger = page.getByRole("button", { name: "Info toast" });
    await trigger.click();
    const toast = page.locator(".toast.toast-info").first();
    await expect(toast).toBeVisible();
    await expect(toast).toContainText("This is an info toast.");
    await toast.locator(".toast-close").click();
    await expect(toast).not.toBeVisible();
  });
});