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

(async () => {
  console.log('🔧 TOGGLE VERIFICATION TEST\n');
  console.log('Testing all 3 toggles after icons fix\n');

  const browser = await chromium.launch({
    headless: false,
    args: ['--disable-http-cache', '--disable-cache']
  });

  const context = await browser.newContext({
    ignoreHTTPSErrors: true,
    bypassCSP: true
  });

  const page = await context.newPage();

  // Track errors
  const errors = [];
  page.on('console', msg => {
    if (msg.type() === 'error') {
      errors.push(msg.text());
      console.log('  [ERROR]', msg.text());
    }
  });

  page.on('pageerror', err => {
    errors.push(err.message);
    console.log('  [PAGE ERROR]', err.message);
  });

  const url = `http://localhost:1999/?lang=en&_=${Date.now()}`;
  console.log(`📄 Loading: ${url}\n`);

  await page.goto(url, { waitUntil: 'networkidle' });
  await page.waitForTimeout(2000);

  console.log('═'.repeat(70));
  console.log('TOGGLE VERIFICATION RESULTS');
  console.log('═'.repeat(70) + '\n');

  let passCount = 0;
  let failCount = 0;

  // TEST 1: Toggle Icons (the one we just fixed)
  console.log('1. TOGGLE ICONS (JUST FIXED)');
  const iconsTest = await page.evaluate(() => {
    const paper = document.querySelector('.cv-paper');

    // Get initial state
    const initialState = paper.classList.contains('show-icons');

    // Toggle ON
    toggleIcons(true);
    const hasIconsAfterOn = paper.classList.contains('show-icons');

    // Toggle OFF
    toggleIcons(false);
    const hasIconsAfterOff = paper.classList.contains('show-icons');

    // Toggle back to initial
    toggleIcons(initialState);

    return {
      initialState,
      hasIconsAfterOn,
      hasIconsAfterOff,
      toggleOnWorks: hasIconsAfterOn === true,
      toggleOffWorks: hasIconsAfterOff === false
    };
  });

  if (iconsTest.toggleOnWorks && iconsTest.toggleOffWorks) {
    console.log('   ✅ PASS - Icons toggle works correctly');
    console.log(`      ON: ${iconsTest.hasIconsAfterOn} | OFF: ${iconsTest.hasIconsAfterOff}\n`);
    passCount++;
  } else {
    console.log('   ❌ FAIL - Icons toggle broken:', iconsTest, '\n');
    failCount++;
  }

  // TEST 2: Toggle CV Length
  console.log('2. TOGGLE CV LENGTH');
  const lengthTest = await page.evaluate(() => {
    const paper = document.querySelector('.cv-paper');

    // Get initial state
    const initialLong = paper.classList.contains('cv-long');

    // Toggle to LONG
    toggleCVLength(true);
    const isLongAfterOn = paper.classList.contains('cv-long');
    const hasShortAfterOn = paper.classList.contains('cv-short');

    // Toggle to SHORT
    toggleCVLength(false);
    const isLongAfterOff = paper.classList.contains('cv-long');
    const hasShortAfterOff = paper.classList.contains('cv-short');

    // Restore initial
    toggleCVLength(initialLong);

    return {
      initialLong,
      isLongAfterOn,
      hasShortAfterOn,
      isLongAfterOff,
      hasShortAfterOff,
      toggleLongWorks: isLongAfterOn === true && hasShortAfterOn === false,
      toggleShortWorks: isLongAfterOff === false && hasShortAfterOff === true
    };
  });

  if (lengthTest.toggleLongWorks && lengthTest.toggleShortWorks) {
    console.log('   ✅ PASS - CV length toggle works correctly');
    console.log(`      LONG: adds .cv-long, removes .cv-short`);
    console.log(`      SHORT: adds .cv-short, removes .cv-long\n`);
    passCount++;
  } else {
    console.log('   ❌ FAIL - CV length toggle broken:', lengthTest, '\n');
    failCount++;
  }

  // TEST 3: Toggle Theme
  console.log('3. TOGGLE THEME');
  const themeTest = await page.evaluate(() => {
    const container = document.querySelector('.cv-container');

    // Get initial state
    const initialClean = container.classList.contains('theme-clean');

    // Toggle to CLEAN
    toggleTheme(true);
    const isCleanAfterOn = container.classList.contains('theme-clean');

    // Toggle to DEFAULT
    toggleTheme(false);
    const isCleanAfterOff = container.classList.contains('theme-clean');

    // Restore initial
    toggleTheme(initialClean);

    return {
      initialClean,
      isCleanAfterOn,
      isCleanAfterOff,
      toggleCleanWorks: isCleanAfterOn === true,
      toggleDefaultWorks: isCleanAfterOff === false
    };
  });

  if (themeTest.toggleCleanWorks && themeTest.toggleDefaultWorks) {
    console.log('   ✅ PASS - Theme toggle works correctly');
    console.log(`      CLEAN: adds .theme-clean | DEFAULT: removes .theme-clean\n`);
    passCount++;
  } else {
    console.log('   ❌ FAIL - Theme toggle broken:', themeTest, '\n');
    failCount++;
  }

  console.log('═'.repeat(70));
  console.log(`SUMMARY: ${passCount} passed, ${failCount} failed out of 3 tests`);
  console.log('═'.repeat(70));

  if (failCount === 0) {
    console.log('\n✅ ALL TOGGLES WORKING! Icons fix successful.\n');
  } else {
    console.log(`\n❌ ${failCount} toggle(s) still broken. See details above.\n`);
  }

  if (errors.length > 0) {
    console.log('Console Errors Detected:');
    errors.forEach(e => console.log('  -', e));
    console.log();
  }

  console.log('💡 Browser window left open for manual verification');
  console.log('   Press Ctrl+C to exit\n');

  await new Promise(() => {});
})();