#!/usr/bin/env node

/**
 * Final Zoom Control Test - X Button and Drag
 */

import { chromium } from 'playwright';

async function testZoomControl() {
    console.log('🧪 Final Zoom Control Test - X Button & Drag\n');

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

    try {
        // Navigate
        console.log('📄 Loading http://localhost:1999/?lang=en');
        await page.goto('http://localhost:1999/?lang=en', { waitUntil: 'networkidle' });
        await page.waitForTimeout(2000);

        const zoomControl = page.locator('#zoom-control');
        await zoomControl.waitFor({ state: 'visible', timeout: 5000 });
        console.log('✅ Zoom control loaded\n');

        // TEST 1: X Button
        console.log('🧪 TEST 1: X Button Click');
        const closeButton = page.locator('#zoom-close');
        await closeButton.click({ force: true });
        await page.waitForTimeout(500);

        const isHidden = await zoomControl.evaluate(el =>
            window.getComputedStyle(el).display === 'none'
        );

        if (isHidden) {
            console.log('✅ SUCCESS: X button works! Zoom control is hidden\n');
        } else {
            console.log('❌ FAIL: X button did not hide zoom control\n');
            throw new Error('X button test failed');
        }

        // Show it again for drag test
        await page.evaluate(() => {
            document.getElementById('zoom-control').style.display = '';
        });
        await page.waitForTimeout(500);

        // TEST 2: Drag Functionality
        console.log('🧪 TEST 2: Drag Functionality');

        const initialBox = await zoomControl.boundingBox();
        console.log(`   Initial position: x=${Math.round(initialBox.x)}, y=${Math.round(initialBox.y)}`);

        // Click on grey background area (not on buttons)
        const dragX = initialBox.x + 60; // Left side, away from buttons
        const dragY = initialBox.y + initialBox.height / 2;

        await page.mouse.move(dragX, dragY);
        await page.mouse.down();

        // Drag to new location
        const targetX = dragX + 300;
        const targetY = dragY - 150;
        console.log(`   Dragging to: x=${Math.round(targetX)}, y=${Math.round(targetY)}`);

        await page.mouse.move(targetX, targetY, { steps: 20 });
        await page.mouse.up();
        await page.waitForTimeout(500);

        const finalBox = await zoomControl.boundingBox();
        console.log(`   Final position: x=${Math.round(finalBox.x)}, y=${Math.round(finalBox.y)}`);

        const deltaX = Math.abs(finalBox.x - initialBox.x);
        const deltaY = Math.abs(finalBox.y - initialBox.y);

        if (deltaX > 100 || deltaY > 50) {
            console.log(`✅ SUCCESS: Drag works! Moved ${Math.round(deltaX)}px horizontally, ${Math.round(deltaY)}px vertically\n`);
        } else {
            console.log(`❌ FAIL: Drag did not work properly. Only moved ${Math.round(deltaX)}px, ${Math.round(deltaY)}px\n`);
            throw new Error('Drag test failed');
        }

        // Summary
        console.log('='.repeat(60));
        console.log('✅ ALL TESTS PASSED!');
        console.log('='.repeat(60));
        console.log('✅ X button hides zoom control');
        console.log('✅ Drag functionality works correctly');
        console.log('='.repeat(60));

        console.log('\n🎉 Zoom control is fully functional!');
        console.log('\n⏸️  Browser will stay open for 5 seconds...');
        await page.waitForTimeout(5000);

    } catch (error) {
        console.error('\n❌ Test failed:', error.message);
    } finally {
        await browser.close();
        console.log('\n✅ Test completed\n');
    }
}

testZoomControl();