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

export class AlmanacPage {
  readonly page: Page;
  readonly themeSwitch: Locator;
  readonly almanacCard: Locator;
  readonly suitableText: Locator;
  readonly avoidText: Locator;
  readonly navigationBar: Locator;

  constructor(page: Page) {
    this.page = page;
    this.themeSwitch = page.locator('[data-testid="theme-switch"], .theme-switch');
    this.almanacCard = page.locator('[data-testid="almanac-card"], .almanac-card');
    this.suitableText = page.locator('[data-testid="suitable"], .suitable');
    this.avoidText = page.locator('[data-testid="avoid"], .avoid');
    this.navigationBar = page.locator('.uni-tabbar, [class*="tabbar"]');
  }

  async goto() {
    await this.page.goto('/#/pages/almanac/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 isAlmanacVisible(): Promise<boolean> {
    return await this.almanacCard.isVisible().catch(() => false);
  }

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

  async getAvoidText(): Promise<string | null> {
    return await this.avoidText.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 });
  }
}