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 Refined 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...\n');
  await shortcutsBtn.click();
  await page.waitForTimeout(500);

  // Check subtitle color (should be ORANGE)
  console.log('✅ Modal Subtitle (should be ORANGE #f39c12):');
  const subtitleColor = await page.locator('#shortcuts-modal .info-modal-cv-title').evaluate(el => {
    const styles = window.getComputedStyle(el);
    return styles.color;
  });
  console.log('   Color:', subtitleColor);

  // Check section header text color (should be #827a6e)
  console.log('\n✅ Section Header Text (should be #827a6e - brownish-gray):');
  const headerTextColor = 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:', headerTextColor.color);
  console.log('   Border color:', headerTextColor.borderColor);

  // Check section header icon color (should be ORANGE)
  console.log('\n✅ Section Header Icons (should be ORANGE #f39c12):');
  const headerIconColor = await page.locator('.shortcuts-section-title iconify-icon').first().evaluate(el => {
    const styles = window.getComputedStyle(el);
    return styles.color;
  });
  console.log('   Icon color:', headerIconColor);

  // Check kbd element colors (should be BLUE)
  console.log('\n✅ Keyboard Keys (should be BLUE #3498db):');
  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, 'refined-colors-modal.png'), fullPage: true });

  console.log('\n🎯 Refined Color Scheme Summary:');
  console.log('   ✓ Modal subtitle "Learn the Shortcuts": ORANGE (#f39c12)');
  console.log('   ✓ Section header text: Brownish-gray (#827a6e)');
  console.log('   ✓ Section header icons: ORANGE (#f39c12)');
  console.log('   ✓ Section borders: Light brownish-gray');
  console.log('   ✓ Keyboard keys (kbd): BLUE (#3498db)');

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

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