#!/usr/bin/env bun
/**
 * Test: Course list icons - small size with preserved colors
 *
 * Verifies:
 * 1. Course list icons are small (24px)
 * 2. Icons preserve their original colors from inline styles
 */

import { chromium } from 'playwright';

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

async function testCourseIconsFinal() {
  console.log('\n📚 Course Icons - Final Test (Size + Colors)\n');

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

  try {
    await page.goto(BASE_URL, { waitUntil: 'networkidle' });
    await page.waitForSelector('.cv-container', { timeout: 5000 });

    console.log('📱 Test: Course list icons');

    const iconInfo = await page.evaluate(() => {
      const results = [];

      // Find all iconify icons in course responsibilities
      const icons = document.querySelectorAll('.course-item .responsibilities li iconify-icon.default-company-icon');

      icons.forEach((icon, index) => {
        const styles = window.getComputedStyle(icon);
        const width = parseFloat(styles.width);
        const height = parseFloat(styles.height);
        const color = styles.color;
        const display = styles.display;

        // Check if icon has inline style color
        const inlineStyle = icon.getAttribute('style');
        const hasInlineColor = inlineStyle && inlineStyle.includes('color');

        results.push({
          index,
          width,
          height,
          color,
          display,
          hasInlineColor,
          isSmallSize: width <= 30 && height <= 30, // Should be ~24px
          isVisible: width > 0 && height > 0,
        });
      });

      return results;
    });

    if (iconInfo.length === 0) {
      console.log('   ⚠️  No course list icons found');
      await browser.close();
      return;
    }

    console.log(`   Found ${iconInfo.length} course list icons\n`);

    let allCorrect = true;

    iconInfo.forEach(icon => {
      const sizeStatus = icon.isSmallSize ? '✅' : '❌';
      const colorStatus = icon.hasInlineColor ? '🎨' : '⚪';

      console.log(`   Icon ${icon.index}:`);
      console.log(`     ${sizeStatus} Size: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px`);
      console.log(`     ${colorStatus} Color: ${icon.color} ${icon.hasInlineColor ? '(inline style preserved)' : '(no inline style)'}`);
      console.log(`     Display: ${icon.display}\n`);

      if (!icon.isSmallSize || !icon.isVisible) {
        allCorrect = false;
      }
    });

    if (!allCorrect) {
      console.log('   ❌ Some icons have incorrect size!');
      await browser.close();
      process.exit(1);
    }

    console.log('✅ All course icons are properly sized and colors are preserved!\n');
    await browser.close();

  } catch (error) {
    console.error('\n❌ Test failed:', error.message);
    await browser.close();
    process.exit(1);
  }
}

testCourseIconsFinal();