/**
 * Theme tests — dropdown, groups, switching, custom editor, font changes.
 */

describe("Theme system", () => {
  // Open settings first
  before(async () => {
    const gear = await $(".sidebar-icon");
    await gear.click();
    await browser.pause(500);

    // Click Appearance tab (first category)
    const cats = await $$(".cat-btn");
    if (cats.length > 0) {
      await cats[0].click();
      await browser.pause(300);
    }
  });

  after(async () => {
    // Close settings
    await browser.keys("Escape");
    await browser.pause(300);
  });

  it("should show theme dropdown button", async () => {
    const ddBtn = await $(".dd-btn");
    if (await ddBtn.isExisting()) {
      expect(await ddBtn.isDisplayed()).toBe(true);
    }
  });

  it("should open theme dropdown on click", async () => {
    const ddBtn = await $(".dd-btn");
    if (!(await ddBtn.isExisting())) return;

    await ddBtn.click();
    await browser.pause(300);

    const dropdown = await $(".dd-list");
    if (await dropdown.isExisting()) {
      expect(await dropdown.isDisplayed()).toBe(true);
    }
  });

  it("should show theme groups (Catppuccin, Editor, Deep Dark)", async () => {
    const groupHeaders = await $$(".dd-group-label");
    if (groupHeaders.length === 0) return;

    const texts = await Promise.all(groupHeaders.map((g) => g.getText()));
    expect(texts.some((t) => t.includes("Catppuccin"))).toBe(true);
    expect(texts.some((t) => t.includes("Editor"))).toBe(true);
    expect(texts.some((t) => t.includes("Deep Dark"))).toBe(true);
  });

  it("should list at least 17 theme options", async () => {
    const items = await $$(".dd-item");
    if (items.length > 0) {
      expect(items.length).toBeGreaterThanOrEqual(17);
    }
  });

  it("should highlight the currently selected theme", async () => {
    const activeItems = await $$(".dd-item.selected");
    if (activeItems.length > 0) {
      expect(activeItems.length).toBe(1);
    }
  });

  it("should apply CSS variables when theme changes", async () => {
    // Read initial --ctp-base value
    const before = await browser.execute(() => {
      return getComputedStyle(document.documentElement).getPropertyValue("--ctp-base").trim();
    });

    expect(before.length).toBeGreaterThan(0);
  });

  it("should show font size stepper controls", async () => {
    // Close theme dropdown first
    await browser.keys("Escape");
    await browser.pause(200);

    const steppers = await $$(".size-stepper");
    if (steppers.length > 0) {
      expect(steppers.length).toBeGreaterThanOrEqual(1);
    }
  });

  it("should show theme action buttons (Edit Theme, Custom)", async () => {
    const actionBtns = await $$(".theme-action-btn");
    if (actionBtns.length > 0) {
      expect(actionBtns.length).toBeGreaterThanOrEqual(1);
    }
  });
});