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 Final Color Scheme...\n');

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

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

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

  // Open shortcuts modal
  console.log('📸 Opening shortcuts modal...');
  await shortcutsBtn.click();
  await page.waitForTimeout(500);

  // Check section header colors (should be ORANGE)
  console.log('\n✅ Section Headers (should be ORANGE):');
  const sectionTitleColor = await page.locator('.shortcuts-section-title').first().evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      color: styles.color,
      borderColor: styles.borderBottomColor
    };
  });
  console.log('   Text color:', sectionTitleColor.color);
  console.log('   Border color:', sectionTitleColor.borderColor);

  const sectionIconColor = await page.locator('.shortcuts-section-title iconify-icon').first().evaluate(el => {
    const styles = window.getComputedStyle(el);
    return styles.color;
  });
  console.log('   Icon color:', sectionIconColor);

  // Check kbd element colors (should be BLUE)
  console.log('\n✅ Keyboard Keys (should be BLUE):');
  const kbdStyles = 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('   Text color:', kbdStyles.color);
  console.log('   Background:', kbdStyles.background);
  console.log('   Border color:', kbdStyles.borderColor);

  // Take screenshot
  await page.screenshot({ path: join(screenshotsDir, 'final-colors-modal.png'), fullPage: true });

  console.log('\n🎯 Final Color Scheme Summary:');
  console.log('   ✓ Section headers: ORANGE (#f39c12)');
  console.log('   ✓ Section icons: ORANGE (#f39c12)');
  console.log('   ✓ Section borders: Light orange');
  console.log('   ✓ Keyboard keys (kbd): BLUE (#3498db)');
  console.log('   ✓ kbd backgrounds: Light blue');
  console.log('   ✓ kbd borders: Blue');

  console.log('\n📁 Screenshot saved to: test-screenshots/final-colors-modal.png');

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