#!/usr/bin/env bun
/**
 * Test: Course list icons visibility and sizing
 *
 * Verifies:
 * 1. Course list icons (in responsibilities) are visible and properly sized (60px)
 * 2. They are not shrunk to tiny sizes
 */

import { chromium } from 'playwright';

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

async function testCourseListIcons() {
  console.log('\n📚 Course List Icons Visibility Test\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 (should be 60px and visible)');

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

      // Find all iconify icons in course responsibilities that have default-company-icon class
      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 display = styles.display;
        const opacity = styles.opacity;

        results.push({
          index,
          width,
          height,
          display,
          opacity,
          isVisible: width >= 50 && height >= 50 && opacity > 0 && display !== 'none',
        });
      });

      return results;
    });

    if (iconInfo.length === 0) {
      console.log('   ⚠️  No course list icons found with default-company-icon class');
      console.log('   (This might be OK if course data structure is different)');
      await browser.close();
      return;
    }

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

    let allVisible = true;

    iconInfo.forEach(icon => {
      const status = icon.isVisible ? '✅' : '❌';
      console.log(`   ${status} Icon ${icon.index}: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px (opacity: ${icon.opacity}, display: ${icon.display})`);

      if (!icon.isVisible) {
        allVisible = false;
      }
    });

    if (!allVisible) {
      console.log('\n   ❌ Some course list icons are not visible!');
      await browser.close();
      process.exit(1);
    }

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

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

testCourseListIcons();