#!/usr/bin/env node
/**
 * Debug: Check actual computed styles for buttons and icons
 */

import { chromium } from 'playwright';

const TEST_URL = 'http://localhost:1999';

async function debugButtonIcons() {
  console.log('🔍 Debugging Button and Icon Actual Computed Styles');
  console.log('='.repeat(70));

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: { width: 375, height: 812 }, // iPhone X
    deviceScaleFactor: 2,
  });
  const page = await context.newPage();

  await page.goto(TEST_URL, { waitUntil: 'networkidle' });
  await page.waitForTimeout(1000);

  console.log('\n📱 Viewport: 375x812 (iPhone X portrait)\n');

  const buttons = [
    '.cmd-k-btn',
    '.download-btn',
    '.print-friendly-btn',
    '.fixed-btn.contact-btn',
    '.shortcuts-btn',
    '.color-theme-switcher',
    '.info-button',
    '.back-to-top',
  ];

  for (const selector of buttons) {
    try {
      const result = await page.evaluate((sel) => {
        const btn = document.querySelector(sel);
        if (!btn) return null;

        const btnStyles = window.getComputedStyle(btn);
        const icon = btn.querySelector('iconify-icon');

        let iconInfo = null;
        if (icon) {
          const iconStyles = window.getComputedStyle(icon);
          iconInfo = {
            width: iconStyles.width,
            height: iconStyles.height,
            fontSize: iconStyles.fontSize,
            // Check HTML attributes
            htmlWidth: icon.getAttribute('width'),
            htmlHeight: icon.getAttribute('height'),
            // Check inline style
            inlineStyle: icon.getAttribute('style'),
          };
        }

        return {
          selector: sel,
          button: {
            width: btnStyles.width,
            height: btnStyles.height,
          },
          icon: iconInfo,
        };
      }, selector);

      if (result) {
        console.log(`${selector}:`);
        console.log(`  Button: ${result.button.width} x ${result.button.height}`);
        if (result.icon) {
          console.log(`  Icon computed: ${result.icon.width} x ${result.icon.height} (font-size: ${result.icon.fontSize})`);
          console.log(`  Icon HTML attrs: width="${result.icon.htmlWidth}" height="${result.icon.htmlHeight}"`);
          if (result.icon.inlineStyle) {
            console.log(`  Icon inline style: ${result.icon.inlineStyle}`);
          }
        }
        console.log('');
      }
    } catch (e) {
      console.log(`${selector}: Error - ${e.message}\n`);
    }
  }

  // Also check what CSS rules are being applied
  console.log('\n📋 Checking CSS rule specificity for iconify-icon...\n');

  const cssInfo = await page.evaluate(() => {
    const icon = document.querySelector('.download-btn iconify-icon');
    if (!icon) return 'No icon found';

    // Get all stylesheets and find rules for iconify-icon
    const sheets = [...document.styleSheets];
    const rules = [];

    for (const sheet of sheets) {
      try {
        const cssRules = [...sheet.cssRules];
        for (const rule of cssRules) {
          if (rule.selectorText && rule.selectorText.includes('iconify-icon')) {
            rules.push({
              selector: rule.selectorText,
              width: rule.style.width,
              height: rule.style.height,
              fontSize: rule.style.fontSize,
            });
          }
        }
      } catch (e) {
        // CORS restrictions on external stylesheets
      }
    }

    return rules;
  });

  console.log('CSS rules targeting iconify-icon:');
  if (Array.isArray(cssInfo)) {
    for (const rule of cssInfo) {
      if (rule.width || rule.height || rule.fontSize) {
        console.log(`  ${rule.selector}`);
        if (rule.width) console.log(`    width: ${rule.width}`);
        if (rule.height) console.log(`    height: ${rule.height}`);
        if (rule.fontSize) console.log(`    font-size: ${rule.fontSize}`);
      }
    }
  } else {
    console.log(cssInfo);
  }

  await browser.close();
}

debugButtonIcons().catch(console.error);