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

test.describe('Timetable Mocked Data', () => {
  test.beforeEach(async ({ page }) => {
    // Mock current time to 12:00 PM for consistent red line position (50% through the day)
    await page.clock.setFixedTime(new Date('2026-04-25T12:00:00'));

    // Mock API responses
    await page.route('**/api/stats/daily-summary*', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          total_sleep_minutes: 480,
        }),
      });
    });

    await page.route('**/api/stats/timetable*', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          slots: [
            { date: '2026-04-25', slot_start: '22:00', slot_end: '06:00', sleeping: true },
            { date: '2026-04-24', slot_start: '23:00', slot_end: '07:00', sleeping: true },
          ],
        }),
      });
    });

    await page.route('**/api/stats/wake-sleep-times*', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          wakeup_times: [],
          bedtime_times: [],
        }),
      });
    });

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

  test('Timetable should render with correct sleep blocks and red line position', async ({ page }) => {
    // Find the container that holds the timetable. 
    const componentContainer = page.locator('div').filter({ 
      has: page.locator('h3', { hasText: 'Sleep Timetable' }) 
    }).first();

    await expect(componentContainer).toBeVisible();

    // Check if some sleep blocks are green
    const sleepingBlock = page.locator('.bg-green-500').first();
    await expect(sleepingBlock).toBeVisible();

    // The red line should be at roughly 50% of the grid height if it's 12:00 PM
    const redLine = page.locator('.bg-red-500').first();
    await expect(redLine).toBeVisible();

    const redLineBox = await redLine.boundingBox();
    // We need to find the grid container specifically for precise alignment check
    const gridContainer = componentContainer.locator('.relative').first();
    const gridBox = await gridContainer.boundingBox();

    if (gridBox && redLineBox) {
        // The red line's Y position relative to the grid container should be ~50%
        const relativeY = redLineBox.y - gridBox.y;
        const percentage = (relativeY / gridBox.height) * 100;
        
        console.log(`Red line relative Y: ${relativeY}, Grid height: ${gridBox.height}, Percentage: ${percentage}%`);
        
        // At 12:00 PM, it should be exactly at 50%
        expect(percentage).toBeCloseTo(50, 0);
    } else {
        throw new Error('Could not get bounding boxes for red line or grid container');
    }
  });
});