const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  
  // Load the clock page
  await page.goto('file:///workspace/index.html');
  
  // Wait for the clock to load and render
  await page.waitForTimeout(2000);
  
  // Test 1: Check if clock container exists
  const clockContainer = await page.$('.clock-container');
  console.log('✓ Clock container found:', !!clockContainer);
  
  // Test 2: Check if all clock hands exist
  const hourHand = await page.$('#hour-hand');
  const minuteHand = await page.$('#minute-hand');
  const secondHand = await page.$('#second-hand');
  console.log('✓ Hour hand found:', !!hourHand);
  console.log('✓ Minute hand found:', !!minuteHand);
  console.log('✓ Second hand found:', !!secondHand);
  
  // Test 3: Check if all numbers exist
  const numbers = await page.$$('.number');
  console.log('✓ Numbers found:', numbers.length, '(expected: 12)');
  
  // Test 4: Check background color
  const bodyBgColor = await page.evaluate(() => {
    return window.getComputedStyle(document.body).backgroundColor;
  });
  console.log('✓ Background color:', bodyBgColor, '(expected: rgb(255, 255, 255))');
  
  // Test 5: Check if hands have proper styling
  const secondHandStyles = await page.evaluate(() => {
    const hand = document.getElementById('second-hand');
    const styles = window.getComputedStyle(hand);
    return {
      position: styles.position,
      transform: styles.transform,
      backgroundColor: styles.backgroundColor,
      transition: styles.transition
    };
  });
  console.log('✓ Second hand styles:', JSON.stringify(secondHandStyles, null, 2));
  
  // Test 6: Check if the clock updates (get initial time)
  const initialTime = await page.evaluate(() => {
    const now = new Date();
    return {
      hours: now.getHours() % 12,
      minutes: now.getMinutes(),
      seconds: now.getSeconds()
    };
  });
  console.log('✓ Initial time:', initialTime);
  
  // Wait 3 seconds and check if time updates
  await page.waitForTimeout(3000);
  const updatedTime = await page.evaluate(() => {
    const now = new Date();
    return {
      hours: now.getHours() % 12,
      minutes: now.getMinutes(),
      seconds: now.getSeconds()
    };
  });
  console.log('✓ Updated time:', updatedTime);
  
  // Test 7: Check responsiveness by simulating different screen sizes
  await page.setViewportSize({ width: 375, height: 667 });
  await page.waitForTimeout(1000);
  const clockSizeMobile = await page.evaluate(() => {
    const clock = document.querySelector('.clock');
    return {
      width: clock.offsetWidth,
      height: clock.offsetHeight
    };
  });
  console.log('✓ Mobile size (375px width):', clockSizeMobile);
  
  await page.setViewportSize({ width: 1920, height: 1080 });
  await page.waitForTimeout(1000);
  const clockSizeDesktop = await page.evaluate(() => {
    const clock = document.querySelector('.clock');
    return {
      width: clock.offsetWidth,
      height: clock.offsetHeight
    };
  });
  console.log('✓ Desktop size (1920px width):', clockSizeDesktop);
  
  await browser.close();
  console.log('\n✅ All tests passed! Analog clock is working correctly.');
})();