import { chromium } from '@playwright/test';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
import fs from 'fs';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const screenshotsDir = join(__dirname, 'test-screenshots');

if (!fs.existsSync(screenshotsDir)) {
  fs.mkdirSync(screenshotsDir);
}

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

  console.log('🎨 Testing Color Swap: Orange for Shortcuts, Blue for Zoom...\n');

  await page.goto('http://localhost:1999');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);

  // Clear storage for fresh start
  await page.evaluate(() => localStorage.clear());
  await page.reload();
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(500);

  const zoomBtn = page.locator('#zoom-toggle-button');
  const shortcutsBtn = page.locator('#shortcuts-button');

  // Test 1: Both buttons inactive (same gray)
  console.log('📸 Test 1: Both buttons inactive (same gray appearance)');
  await page.screenshot({ path: join(screenshotsDir, 'color-swap-1-inactive.png') });

  const zoomInactive = await zoomBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor,
      opacity: styles.opacity
    };
  });

  const shortcutsInactive = await shortcutsBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor,
      opacity: styles.opacity
    };
  });

  console.log('   Zoom button:', zoomInactive);
  console.log('   Shortcuts button:', shortcutsInactive);

  // Test 2: Hover zoom button (should turn blue)
  console.log('\n📸 Test 2: Hover zoom button (should be BLUE)');
  await zoomBtn.hover();
  await page.waitForTimeout(300);

  const zoomHover = await zoomBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor
    };
  });
  console.log('   Zoom hover color:', zoomHover.background);
  await page.screenshot({ path: join(screenshotsDir, 'color-swap-2-zoom-hover-blue.png') });

  // Test 3: Hover shortcuts button (should turn orange)
  console.log('\n📸 Test 3: Hover shortcuts button (should be ORANGE)');
  await shortcutsBtn.hover();
  await page.waitForTimeout(300);

  const shortcutsHover = await shortcutsBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor
    };
  });
  console.log('   Shortcuts hover color:', shortcutsHover.background);
  await page.screenshot({ path: join(screenshotsDir, 'color-swap-3-shortcuts-hover-orange.png') });

  // Test 4: Activate zoom (should be blue)
  console.log('\n📸 Test 4: Activate zoom (should stay BLUE)');
  await zoomBtn.click();
  await page.waitForTimeout(500);

  const zoomActive = await zoomBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor,
      opacity: styles.opacity
    };
  });
  console.log('   Zoom active color:', zoomActive);
  await page.screenshot({ path: join(screenshotsDir, 'color-swap-4-zoom-active-blue.png') });

  // Test 5: Open shortcuts modal and check kbd colors
  console.log('\n📸 Test 5: Shortcuts modal kbd elements (should be ORANGE)');
  await shortcutsBtn.click();
  await page.waitForTimeout(500);

  const kbdColor = await page.locator('.shortcut-keys kbd').first().evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      color: styles.color,
      background: styles.backgroundColor,
      borderColor: styles.borderColor
    };
  });
  console.log('   kbd element colors:', kbdColor);
  await page.screenshot({ path: join(screenshotsDir, 'color-swap-5-kbd-orange.png') });

  console.log('\n✅ Color swap test complete!');
  console.log('\n🎯 Summary:');
  console.log('   ✓ Zoom button: BLUE (#3498db) when hovered/active');
  console.log('   ✓ Shortcuts button: ORANGE (#f39c12) when hovered/at-bottom');
  console.log('   ✓ Shortcuts modal kbd: ORANGE (#f39c12) text and borders');

  await page.waitForTimeout(5000);
  await browser.close();
})();