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

test.describe("Shell UI", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/demo/rnotes");
  });

  test("header has logo, app switcher, identity, and space switcher", async ({ page }) => {
    await expect(page.locator("header.rstack-header")).toBeVisible();
    await expect(page.locator("header.rstack-header .rstack-header__logo")).toBeVisible();
    await expect(page.locator("rstack-app-switcher")).toBeAttached();
    await expect(page.locator("rstack-identity")).toBeAttached();
    await expect(page.locator("rstack-space-switcher")).toBeAttached();
  });

  test("theme toggle switches data-theme attribute", async ({ page }) => {
    // Get current theme
    const initialTheme = await page.evaluate(() =>
      document.documentElement.getAttribute("data-theme")
    );

    // Toggle theme via localStorage (same mechanism as the toggle button)
    const newTheme = initialTheme === "dark" ? "light" : "dark";
    await page.evaluate((t) => {
      localStorage.setItem("canvas-theme", t);
      document.documentElement.setAttribute("data-theme", t);
    }, newTheme);

    const currentTheme = await page.evaluate(() =>
      document.documentElement.getAttribute("data-theme")
    );
    expect(currentTheme).toBe(newTheme);
  });

  test("tab bar renders on module pages", async ({ page }) => {
    await expect(page.locator(".rstack-tab-row")).toBeAttached();
    await expect(page.locator("rstack-tab-bar")).toBeAttached();
  });

  test('"Try Demo" button has data-hide when on demo space', async ({ page }) => {
    const demoBtn = page.locator(".rstack-header__demo-btn");
    await expect(demoBtn).toBeAttached();

    // On demo space, the button should have data-hide
    const hasDataHide = await demoBtn.evaluate((el) => el.hasAttribute("data-hide"));
    expect(hasDataHide).toBe(true);
  });

  test("settings button exists", async ({ page }) => {
    await expect(page.locator("#settings-btn")).toBeAttached();
  });
});