#!/usr/bin/env bun
/**
 * ALL ICONS COMPREHENSIVE TEST
 * Check ALL icon types for consistent size and transparent backgrounds
 */

import { chromium } from "playwright";

const URL = "http://localhost:1999";

async function testAllIcons() {
  console.log("🧪 ALL ICONS COMPREHENSIVE TEST\n");
  console.log("=".repeat(70));

  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage({ viewport: { width: 1400, height: 1080 } });

  await page.goto(URL);
  await page.waitForTimeout(2000);

  console.log("\n📋 Checking ALL icon types:\n");

  const iconData = await page.evaluate(() => {
    const selectors = [
      { name: 'Company Logos', selector: '.company-logo img' },
      { name: 'Award Logos', selector: '.award-logo img' },
      { name: 'Project Icons', selector: '.project-icon img' },
      { name: 'Course Icons', selector: '.course-icon img' },
      { name: 'Default Company', selector: '.default-company-icon' },
      { name: 'Default Award', selector: '.default-award-icon' },
      { name: 'Default Project', selector: '.default-project-icon' },
      { name: 'Default Course', selector: '.default-course-icon' }
    ];

    const results = [];

    selectors.forEach(({ name, selector }) => {
      const elements = document.querySelectorAll(selector);
      const samples = [];

      elements.forEach((el, i) => {
        if (i < 3) { // Check first 3 of each type
          const style = window.getComputedStyle(el);
          samples.push({
            index: i + 1,
            width: style.width,
            height: style.height,
            background: style.backgroundColor,
            opacity: style.opacity
          });
        }
      });

      results.push({
        type: name,
        count: elements.length,
        samples
      });
    });

    return results;
  });

  iconData.forEach(({ type, count, samples }) => {
    console.log(`\n${type}:`);
    console.log(`   Total found: ${count}`);

    samples.forEach(sample => {
      console.log(`   #${sample.index}: ${sample.width} × ${sample.height}, bg: ${sample.background}, opacity: ${sample.opacity}`);
    });

    // Check consistency
    if (samples.length > 0) {
      const uniqueSizes = new Set(samples.map(s => `${s.width}×${s.height}`));
      const uniqueBgs = new Set(samples.map(s => s.background));

      if (uniqueSizes.size === 1) {
        console.log(`   ✅ Consistent size: ${Array.from(uniqueSizes)[0]}`);
      } else {
        console.log(`   ❌ INCONSISTENT sizes: ${Array.from(uniqueSizes).join(', ')}`);
      }

      const bg = Array.from(uniqueBgs)[0];
      if (bg.includes('rgba(0, 0, 0, 0)') || bg === 'transparent') {
        console.log(`   ✅ Transparent background`);
      } else {
        console.log(`   ⚠️  Background: ${bg}`);
      }
    }
  });

  console.log("\n" + "=".repeat(70));
  console.log("\nBrowser will stay open for 30 seconds for visual inspection...");
  await page.waitForTimeout(30000);
  await browser.close();
}

await testAllIcons();