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

test('Debug calendar DOM structure', async ({ page }) => {
  // Set basic auth header
  await page.setExtraHTTPHeaders({
    'Authorization': 'Basic ' + Buffer.from('brotha:makefood1').toString('base64')
  });
  
  await page.goto('http://localhost:3000/admin/availability');
  await page.waitForSelector('.cook-calendar');
  
  // Log all classes i kalenderen
  const calendarHTML = await page.locator('.cook-calendar').innerHTML();
  console.log('Calendar HTML structure:');
  console.log(calendarHTML.slice(0, 1000) + '...');
  
  // Find alle elements med rdp classes
  const rdpElements = await page.locator('[class*="rdp"]').all();
  console.log(`Found ${rdpElements.length} elements with rdp classes`);
  
  for (let i = 0; i < Math.min(10, rdpElements.length); i++) {
    const className = await rdpElements[i].getAttribute('class');
    const tagName = await rdpElements[i].evaluate(el => el.tagName);
    console.log(`${i}: ${tagName}.${className}`);
  }
  
  // Tjek computed styles på nogle elements
  const dayElements = await page.locator('.cook-calendar [class*="day"]').all();
  console.log(`Found ${dayElements.length} day elements`);
  
  if (dayElements.length > 0) {
    const firstDayStyle = await dayElements[0].evaluate((el) => {
      const computed = window.getComputedStyle(el);
      return {
        backgroundColor: computed.backgroundColor,
        className: el.className
      };
    });
    console.log('First day style:', firstDayStyle);
  }
});