import { chromium } from 'playwright';

/**
 * Test preference migration from old to new values
 *
 * Tests:
 * 1. Old 'long' → migrates to 'extended'
 * 2. Old 'true'/'false' → migrates to 'show'/'hide'
 * 3. Toggles work correctly with new values
 */

async function testPreferenceMigration() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();

  try {
    console.log('\n=== Testing Preference Migration ===\n');

    // Test 1: Set old values and verify migration
    console.log('Test 1: Setting old localStorage values...');
    await page.goto('http://localhost:1999/?lang=en');

    // Set OLD values
    await page.evaluate(() => {
      localStorage.setItem('cv-length', 'extended');
      localStorage.setItem('cv-icons', 'true');
    });

    console.log('  ✓ Old values set: length=extended, icons=true');

    // Reload page to trigger migration
    console.log('\nTest 2: Reloading page to trigger migration...');
    await page.reload();
    await page.waitForTimeout(500);

    // Check that values were migrated
    const migratedLength = await page.evaluate(() => localStorage.getItem('cv-length'));
    const migratedIcons = await page.evaluate(() => localStorage.getItem('cv-icons'));

    console.log(`  Migration result: length="${migratedLength}", icons="${migratedIcons}"`);

    if (migratedLength === 'long' && migratedIcons === 'show') {
      console.log('  ✅ Migration successful!');
    } else {
      console.error(`  ❌ Migration failed! Expected: length="long", icons="show"`);
      process.exit(1);
    }

    // Test 3: Verify UI state matches migrated values
    console.log('\nTest 3: Verifying UI state...');
    const hasLongClass = await page.evaluate(() => {
      return document.querySelector('.cv-paper')?.classList.contains('cv-long');
    });
    const hasIconsClass = await page.evaluate(() => {
      return document.querySelector('.cv-paper')?.classList.contains('show-icons');
    });

    console.log(`  UI state: cv-long=${hasLongClass}, show-icons=${hasIconsClass}`);

    if (hasLongClass && hasIconsClass) {
      console.log('  ✅ UI state correct!');
    } else {
      console.error('  ❌ UI state incorrect!');
      process.exit(1);
    }

    // Test 4: Toggle and verify new values are used
    console.log('\nTest 4: Testing toggles with new values...');

    // Toggle length
    const lengthToggle = await page.$('#lengthToggle');
    if (lengthToggle) {
      await lengthToggle.click();
      await page.waitForTimeout(500);

      const newLength = await page.evaluate(() => localStorage.getItem('cv-length'));
      console.log(`  Length toggle clicked, new value: "${newLength}"`);

      if (newLength === 'short') {
        console.log('  ✅ Length toggle works correctly!');
      } else {
        console.error(`  ❌ Length toggle failed! Expected "short", got "${newLength}"`);
        process.exit(1);
      }
    }

    // Toggle icons
    const iconToggle = await page.$('#iconToggle');
    if (iconToggle) {
      await iconToggle.click();
      await page.waitForTimeout(500);

      const newIcons = await page.evaluate(() => localStorage.getItem('cv-icons'));
      console.log(`  Icon toggle clicked, new value: "${newIcons}"`);

      if (newIcons === 'hide') {
        console.log('  ✅ Icon toggle works correctly!');
      } else {
        console.error(`  ❌ Icon toggle failed! Expected "hide", got "${newIcons}"`);
        process.exit(1);
      }
    }

    // Test 5: Test with 'false' old value
    console.log('\nTest 5: Testing migration of "false" value...');
    await page.evaluate(() => {
      localStorage.setItem('cv-icons', 'false');
    });
    await page.reload();
    await page.waitForTimeout(500);

    const migratedFalse = await page.evaluate(() => localStorage.getItem('cv-icons'));
    console.log(`  Migration of "false": "${migratedFalse}"`);

    if (migratedFalse === 'hide') {
      console.log('  ✅ "false" migrated to "hide" correctly!');
    } else {
      console.error(`  ❌ "false" migration failed! Expected "hide", got "${migratedFalse}"`);
      process.exit(1);
    }

    console.log('\n=== ✅ All tests passed! ===\n');

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

testPreferenceMigration();