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

(async () => {
  console.log('🔍 ZOOM FUNCTIONALITY TEST\n');
  console.log('Testing if zoom is actually broken\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('ZOOM FUNCTIONALITY TEST');
  console.log('═'.repeat(70) + '\n');

  // TEST 1: Check zoom-control exists
  console.log('1. ZOOM CONTROL ELEMENTS:');
  const elements = await page.evaluate(() => {
    return {
      zoomControl: !!document.querySelector('#zoom-control'),
      zoomSlider: !!document.querySelector('#zoom-slider'),
      zoomWrapper: !!document.querySelector('#zoom-wrapper'),
      zoomToggleButton: !!document.querySelector('#zoom-toggle-button')
    };
  });

  console.log(`   - Zoom control exists: ${elements.zoomControl ? '✅' : '❌'}`);
  console.log(`   - Zoom slider exists: ${elements.zoomSlider ? '✅' : '❌'}`);
  console.log(`   - Zoom wrapper exists: ${elements.zoomWrapper ? '✅' : '❌'}`);
  console.log(`   - Zoom toggle button exists: ${elements.zoomToggleButton ? '✅' : '❌'}\n');

  // TEST 2: Check if zoom control is visible
  console.log('2. ZOOM CONTROL VISIBILITY:');
  const visibility = await page.evaluate(() => {
    const ctrl = document.querySelector('#zoom-control');
    return {
      hasHiddenClass: ctrl?.classList.contains('zoom-hidden'),
      displayStyle: ctrl ? window.getComputedStyle(ctrl).display : 'N/A',
      visibilityStyle: ctrl ? window.getComputedStyle(ctrl).visibility : 'N/A'
    };
  });

  const isHidden = visibility.hasHiddenClass ? 'YES' : 'NO';
  const isVisible = !visibility.hasHiddenClass && visibility.displayStyle !== 'none' ? '✅ YES' : '❌ NO';
  console.log(`   - Has .zoom-hidden class: ${isHidden}`);
  console.log(`   - Display style: ${visibility.displayStyle}`);
  console.log(`   - Visibility style: ${visibility.visibilityStyle}`);
  console.log(`   - Currently visible: ${isVisible}\n`);

  // TEST 3: Show zoom control  (click toggle button)
  console.log('3. SHOWING ZOOM CONTROL:');
  await page.click('#zoom-toggle-button');
  await page.waitForTimeout(500);

  const afterShow = await page.evaluate(() => {
    const ctrl = document.querySelector('#zoom-control');
    return {
      hasHiddenClass: ctrl?.classList.contains('zoom-hidden'),
      displayStyle: ctrl ? window.getComputedStyle(ctrl).display : 'N/A'
    };
  });

  const isHiddenAfter = afterShow.hasHiddenClass ? 'YES' : 'NO';
  const isVisibleAfter = !afterShow.hasHiddenClass ? '✅ YES' : '❌ NO';
  console.log(`   - After clicking toggle button:`);
  console.log(`   - Has .zoom-hidden class: ${isHiddenAfter}`);
  console.log(`   - Display style: ${afterShow.displayStyle}`);
  console.log(`   - Is visible: ${isVisibleAfter}\n`);

  // TEST 4: Test zoom functionality
  console.log('4. ZOOM FUNCTIONALITY TEST:');

  const zoomTest = await page.evaluate(() => {
    const slider = document.querySelector('#zoom-slider');
    const wrapper = document.querySelector('#zoom-wrapper');

    if (!slider || !wrapper) {
      return { error: 'Zoom elements not found' };
    }

    // Get initial state
    const initialZoom = wrapper.style.zoom || window.getComputedStyle(wrapper).zoom || '1';

    // Set zoom to 150%
    slider.value = '150';
    slider.dispatchEvent(new Event('input', { bubbles: true }));

    // Wait a tiny bit for the event to process
    const newZoom = wrapper.style.zoom || window.getComputedStyle(wrapper).zoom || '1';

    // Reset to 100%
    slider.value = '100';
    slider.dispatchEvent(new Event('input', { bubbles: true }));

    const resetZoom = wrapper.style.zoom || window.getComputedStyle(wrapper).zoom || '1';

    return {
      initialZoom,
      zoomAt150: newZoom,
      zoomAfterReset: resetZoom,
      sliderValue: slider.value
    };
  });

  console.log(`   - Initial zoom: ${zoomTest.initialZoom}`);
  console.log(`   - Zoom after setting to 150%: ${zoomTest.zoomAt150}`);
  console.log(`   - Zoom after reset to 100%: ${zoomTest.zoomAfterReset}`);
  console.log(`   - Slider value: ${zoomTest.sliderValue}`);

  const zoomWorks = zoomTest.zoomAt150 !== '1' && zoomTest.zoomAt150 !== zoomTest.initialZoom;
  const zoomStatus = zoomWorks ? '✅ YES (WORKING)' : '❌ NO (BROKEN)';
  console.log(`   - Zoom changes value: ${zoomStatus}\n`);

  console.log('═'.repeat(70));

  if (!zoomWorks) {
    console.log('\n❌ ZOOM IS BROKEN!');
    console.log('\nDiagnosis:');
    console.log('   The zoom slider exists and the zoom-wrapper exists,');
    console.log('   but changing the slider does not update the zoom property.');
    console.log('\nPossible causes:');
    console.log('   1. Hyperscript event handler not firing');
    console.log('   2. Hyperscript parse error preventing execution');
    console.log('   3. CSS interfering with zoom property');
    console.log('\nErrors found:', errors.length > 0 ? errors : 'none');
  } else {
    console.log('\n✅ ZOOM IS WORKING!');
    console.log('\nThe zoom functionality is operating correctly.');
    console.log('The user may be reporting a different issue.');
  }

  console.log('\n═'.repeat(70));
  console.log('\n💡 Browser window left open for manual testing');
  console.log('   Try moving the slider manually to verify');
  console.log('\nPress Ctrl+C to exit\n');

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