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

test.describe('Stats Tab', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:5173/stats');
    await page.waitForTimeout(1000);
  });

  test('1. Stats tab is reachable via tab navigation', async ({ page }) => {
    await page.goto('http://localhost:5173/');
    await page.getByRole('link', { name: /Stats/i }).click();
    await page.waitForTimeout(500);
    await expect(page.getByRole('heading', { name: /Sleep Statistics/i })).toBeVisible();
  });

  test('2. Interval picker changes interval', async ({ page }) => {
    await expect(page.getByRole('button', { name: /7d/i })).toBeVisible();

    await page.getByRole('button', { name: /14d/i }).click();
    await page.waitForTimeout(500);

    await expect(page.getByRole('button', { name: /14d/i })).toBeVisible();
  });

  test('3. Timetable renders rows for selected interval', async ({ page }) => {
    const timetable = page.locator('text=Sleep Timetable');
    if (await timetable.isVisible({ timeout: 1000 }).catch(() => false)) {
      await expect(page.locator('text=00:00').first()).toBeVisible();
    }
  });

  test('4. Wakeup and bedtime plots render SVG lines', async ({ page }) => {
    await page.getByRole('heading', { name: /Wakeup Times/i }).waitFor({ timeout: 2000 });
    await expect(page.locator('h3:has-text("Wakeup Times")')).toBeVisible();

    await page.locator('h3:has-text("Bedtime")').first().waitFor({ timeout: 2000 });
    await expect(page.locator('h3:has-text("Bedtime")').first()).toBeVisible();
  });

  test('5. Settings popover for day/night boundary saves to localStorage and re-fetches', async ({ page }) => {
    await page.getByRole('button', { name: /Settings/i }).click();
    await page.waitForTimeout(300);

    await expect(page.locator('text=Day starts')).toBeVisible();

    await page.getByLabel('Day starts (HH:MM)').fill('08:00');
    await page.getByRole('button', { name: /Save/i }).click();
    await page.waitForTimeout(500);

    const localStorage = await page.evaluate(() => {
      return window.localStorage.getItem('baby-sleep-settings');
    });
    expect(localStorage).toContain('08:00');
  });

  test('6. Daily Summary shows chart with bars', async ({ page }) => {
    await expect(page.locator('text=Daily Summary')).toBeVisible();

    const chartBars = page.locator('.recharts-bar-rectangle');
    if (await chartBars.first().isVisible({ timeout: 1000 }).catch(() => false)) {
      await expect(chartBars.first()).toBeVisible();
    }
  });

  test('7. Average summaries display below chart', async ({ page }) => {
    const avgTotal = page.locator('text=Avg Total');
    if (await avgTotal.isVisible({ timeout: 1000 }).catch(() => false)) {
      await expect(avgTotal).toBeVisible();
    }
  });
});