#!/usr/bin/env bun
import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  // Navigate to page
  await page.goto('http://localhost:1999/');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);

  // Check if theme button exists
  const themeButton = page.locator('#color-theme-switcher');
  const exists = await themeButton.count() > 0;
  console.log('✅ Theme button exists in DOM:', exists);

  if (exists) {
    // Get computed styles
    const isVisible = await themeButton.isVisible();
    console.log('🔍 Button isVisible():', isVisible);

    const box = await themeButton.boundingBox();
    console.log('📦 Bounding box:', box);

    // Get computed styles manually
    const styles = await page.evaluate(() => {
      const btn = document.getElementById('color-theme-switcher');
      if (!btn) return null;

      const computed = window.getComputedStyle(btn);
      return {
        display: computed.display,
        visibility: computed.visibility,
        opacity: computed.opacity,
        position: computed.position,
        bottom: computed.bottom,
        left: computed.left,
        width: computed.width,
        height: computed.height,
        background: computed.background,
        backgroundColor: computed.backgroundColor,
        zIndex: computed.zIndex,
        transform: computed.transform,
      };
    });

    console.log('🎨 Computed styles:', JSON.stringify(styles, null, 2));

    // Check --black-bar variable
    const blackBar = await page.evaluate(() => {
      return getComputedStyle(document.documentElement).getPropertyValue('--black-bar');
    });
    console.log('🔧 --black-bar variable:', blackBar || 'NOT DEFINED');

    // Take screenshot
    await page.screenshot({
      path: '/Users/txeo/Git/yo/cv/tests/mjs/screenshots/theme-button-debug.png',
      fullPage: false
    });
    console.log('📸 Screenshot saved');
  }

  // Keep browser open for manual inspection
  console.log('\n⏸️  Browser kept open for inspection. Press Ctrl+C to close.');
  await page.waitForTimeout(60000);

  await browser.close();
})();