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

test.describe('Pagination', () => {
  test.beforeEach(async ({ page }) => {
    // Monitor network requests to see if our mock is hit
    page.on('request', request => console.log('>>', request.method(), request.url()));
    page.on('response', response => console.log('<<', response.status(), response.url()));

    // Mock the sessions API
    await page.route('**/api/sessions', async (route) => {
      const mockSessions = Array.from({ length: 15 }, (_, i) => ({
        id: i + 1,
        start_time: new Date(2024, 0, 1 + i).toISOString(),
        end_time: new Date(2024, 0, 1 + i, 8, 0).toISOString(),
        notes: null,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      }));
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ sessions: mockSessions, total: 15 }),
      });
    });

    // Mock other stats APIs to prevent crashes from accessing undefined properties
    await page.route(/\/api\/stats\/.*/, async (route) => {
      const url = route.request().url();
      let body = {};

      if (url.includes('summary')) {
        body = {
          total_sleeps: 10,
          avg_sleeps_per_day: 2.5,
          total_sleeps_all_time: 100,
          avg_sleeps_per_day_all_time: 2.0,
        };
      } else if (url.includes('daily-summary')) {
        body = {
          days: [
            { date: '2024-01-01', total_minutes: 480, day_minutes: 240, night_minutes: 240 },
          ],
        };
      } else if (url.includes('timetable')) {
        body = {
          slots: [],
        };
      } else if (url.includes('wake-sleep-times')) {
        body = {
          days: [
            { date: '2024-01-01', wakeup_minutes: 480, bedtime_minutes: 1200 },
          ],
        };
      }

      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify(body),
      });
    });

    await page.goto('http://localhost:5173/stats');
  });

  test('Pagination component is visible when sessions exceed page size', async ({ page }) => {
    // Wait for one of the mocked dates to appear to ensure data is loaded
    await expect(page.locator('body')).toContainText('2024-01-01', { timeout: 10000 });
    await page.screenshot({ path: 'screenshots/pagination_visible.png' });

    const pagination = page.getByTestId('pagination');
    await expect(pagination).toBeVisible();

    // Use a more specific selector for the first page button
    await expect(page.getByTestId('pagination').getByRole('button', { name: '1' })).toBeVisible();
  });

  test('Changing results per page in settings updates the list', async ({ page }) => {
    // Wait for data to load first
    await expect(page.locator('body')).toContainText('2024-01-01', { timeout: 10000 });
    await page.screenshot({ path: 'screenshots/before_settings_change.png' });

    // Open Settings
    await page.getByRole('button', { name: /Settings/i }).click();
    await expect(page.locator('text=Results per page')).toBeVisible();

    // Change to 5
    await page.getByLabel(/Results per page/i).selectOption('5');
    await page.getByRole('button', { name: /Save/i }).click();
    
    // Wait for the UI to update and settings to be saved
    await page.waitForTimeout(2000);

    await page.screenshot({ path: 'screenshots/after_settings_change.png' });

    // Verify sessions per page is 5 (only 5 should be visible)
    const sessionRows = page.locator('.session-list .border-b');
    await expect(sessionRows).toHaveCount(5);

    // Verify settings is saved in localStorage
    const localStorage = await page.evaluate(() => {
      return window.localStorage.getItem('baby-sleep-settings');
    });
    expect(localStorage).toContain('"sessionsPerPage":5');
  });

  test('Navigating through pages works', async ({ page }) => {
    // Wait for data to load first
    await expect(page.locator('body')).toContainText('2024-01-01', { timeout: 10000 });
    
    // Set to 5 via settings first
    await page.getByRole('button', { name: /Settings/i }).click();
    await page.getByLabel(/Results per page/i).selectOption('5');
    await page.getByRole('button', { name: /Save/i }).click();
    await page.waitForTimeout(2000);

    const nextButton = page.getByRole('button', { name: /Next/i });
    await expect(nextButton).toBeVisible();

    await nextButton.click();
    await page.waitForTimeout(1000);

    // Should now show sessions from index 5 to 9 (if total is 15)
    // Mocked start_time for i=5 is 2024-01-06
    await expect(page.locator('.text-gray-900').filter({ hasText: '2024-01-06' }).first()).toBeVisible();
  });
});