import { Page, Locator } from '@playwright/test';

export class CalendarPage {
  readonly page: Page;
  readonly themeSwitch: Locator;
  readonly calendarGrid: Locator;
  readonly currentDate: Locator;
  readonly navigationBar: Locator;

  constructor(page: Page) {
    this.page = page;
    this.themeSwitch = page.locator('[data-testid="theme-switch"], .theme-switch');
    this.calendarGrid = page.locator('[data-testid="calendar-grid"], .calendar-grid');
    this.currentDate = page.locator('[data-testid="current-date"], .current-date');
    this.navigationBar = page.locator('.uni-tabbar, [class*="tabbar"]');
  }

  async goto() {
    await this.page.goto('/#/pages/calendar/index');
    await this.page.waitForLoadState('networkidle');
  }

  async switchTheme(themeId: string) {
    await this.themeSwitch.click();
    await this.page.locator(`[data-testid="theme-${themeId}"], [data-theme="${themeId}"]`).click();
    await this.page.waitForTimeout(500);
  }

  async getCurrentTheme(): Promise<string | null> {
    return await this.page.evaluate(() => {
      const body = document.body;
      const style = getComputedStyle(body);
      return style.getPropertyValue('--theme-id') || null;
    });
  }

  async isCalendarVisible(): Promise<boolean> {
    return await this.calendarGrid.isVisible().catch(() => false);
  }

  async getCurrentDateText(): Promise<string | null> {
    return await this.currentDate.textContent().catch(() => null);
  }

  async navigateToTab(tabName: string) {
    await this.navigationBar.locator(`text=${tabName}`).click();
    await this.page.waitForLoadState('networkidle');
  }

  async takeScreenshot(path: string) {
    await this.page.screenshot({ path, fullPage: true });
  }
}