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

test.describe("Vacations", () => {
  test.describe("My Vacations (self-service)", () => {
    test.beforeEach(async ({ page }) => {
      await page.goto("/auth/signin");
      await page.fill('input[type="email"]', "admin@capakraken.dev");
      await page.fill('input[type="password"]', "admin123");
      await page.click('button[type="submit"]');
      await expect(page).toHaveURL(/\/(dashboard|resources)/);
      await page.goto("/vacations/my");
    });

    test("my vacations page loads", async ({ page }) => {
      await page.waitForLoadState("networkidle");
      await expect(page.locator("h1", { hasText: "My Vacations" })).toBeVisible({ timeout: 10000 });
    });

    test("request vacation button is visible", async ({ page }) => {
      await page.waitForLoadState("networkidle");
      await expect(
        page.locator("button", { hasText: /Request Vacation/i }),
      ).toBeVisible({ timeout: 10000 });
    });

    test("request vacation modal opens", async ({ page }) => {
      await page.waitForLoadState("networkidle");
      const reqBtn = page.locator("button", { hasText: /Request Vacation/i });
      await reqBtn.click();
      // Modal should show vacation form
      await expect(
        page.locator("text=Request Vacation").or(page.locator("text=Vacation Type")),
      ).toBeVisible({ timeout: 5000 });
      await page.keyboard.press("Escape");
    });
  });

  test.describe("Vacation Management", () => {
    test.beforeEach(async ({ page }) => {
      await page.goto("/auth/signin");
      await page.fill('input[type="email"]', "admin@capakraken.dev");
      await page.fill('input[type="password"]', "admin123");
      await page.click('button[type="submit"]');
      await expect(page).toHaveURL(/\/(dashboard|resources)/);
      await page.goto("/vacations");
    });

    test("vacation management page loads with tabs", async ({ page }) => {
      await page.waitForLoadState("networkidle");
      // Should show List and Team Calendar tabs
      await expect(page.locator("text=List").first()).toBeVisible({ timeout: 10000 });
      await expect(page.locator("text=Team Calendar").first()).toBeVisible({ timeout: 10000 });
    });

    test("team calendar tab renders", async ({ page }) => {
      await page.waitForLoadState("networkidle");
      await page.locator("button", { hasText: "Team Calendar" }).or(page.locator("text=Team Calendar")).first().click();
      await page.waitForTimeout(500);
      // Calendar view should appear
      await expect(
        page.locator("table").or(page.locator("[data-calendar]")).or(page.locator("text=Mon").or(page.locator("text=Week"))),
      ).toBeVisible({ timeout: 10000 });
    });

    test("filter chips are visible on list tab", async ({ page }) => {
      await page.waitForLoadState("networkidle");
      // Status filter options should be visible
      await expect(
        page.locator("button", { hasText: /All|Pending|Approved/i }).first(),
      ).toBeVisible({ timeout: 10000 });
    });
  });
});