/**
 * Notification system tests — bell, drawer, clear, toast, history.
 */

describe("Notification system", () => {
  it("should show the notification bell button", async () => {
    const bell = await $(".notif-btn");
    expect(await bell.isDisplayed()).toBe(true);
  });

  it("should open notification drawer on bell click", async () => {
    const bell = await $(".notif-btn");
    await bell.click();
    await browser.pause(400);

    const drawer = await $(".notif-drawer");
    if (await drawer.isExisting()) {
      const display = await drawer.getCSSProperty("display");
      expect(display.value).not.toBe("none");
    }
  });

  it("should show drawer header with title", async () => {
    const title = await $(".drawer-title");
    if (await title.isExisting()) {
      expect(await title.getText()).toBe("Notifications");
    }
  });

  it("should show clear all button", async () => {
    const clearBtn = await $(".clear-btn");
    if (await clearBtn.isExisting()) {
      expect(await clearBtn.isDisplayed()).toBe(true);
      expect(await clearBtn.getText()).toContain("Clear");
    }
  });

  it("should show empty state or notification items", async () => {
    const empty = await $(".notif-empty");
    const items = await $$(".notif-item");

    // Either empty state message or notification items should be present
    const hasContent =
      (await empty.isExisting() && await empty.isDisplayed()) ||
      items.length > 0;
    expect(hasContent).toBe(true);
  });

  it("should close drawer on backdrop click", async () => {
    const backdrop = await $(".notif-backdrop");
    if (await backdrop.isExisting()) {
      await backdrop.click();
      await browser.pause(300);

      const drawer = await $(".notif-drawer");
      if (await drawer.isExisting()) {
        const display = await drawer.getCSSProperty("display");
        expect(display.value).toBe("none");
      }
    }
  });
});