import { test, expect } from '@playwright/test';

test.describe('Test des couleurs bleues', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3000');
  });

  test('Vérifier les couleurs bleues dans la page', async ({ page }) => {
    // Attendre que la page charge
    await page.waitForLoadState('networkidle');

    // Capturer tous les éléments avec des couleurs bleues via les classes
    const blueElements = await page.locator('*[class*="blue"]').all();

    console.log('Nombre d\'éléments avec "blue" dans leur classe:', blueElements.length);

    // Pour chaque élément avec une classe bleue, capturer les détails
    for (let i = 0; i < Math.min(blueElements.length, 20); i++) {
      const element = blueElements[i];
      const tagName = await element.evaluate(el => el.tagName);
      const className = await element.evaluate(el => el.className);
      const backgroundColor = await element.evaluate(el => window.getComputedStyle(el).backgroundColor);
      const color = await element.evaluate(el => window.getComputedStyle(el).color);
      const textContent = await element.evaluate(el => el.textContent?.substring(0, 50));

      console.log(`Élément ${i + 1}:`, {
        tagName,
        className: className.substring(0, 100),
        backgroundColor,
        color,
        textContent
      });
    }

    // Chercher aussi les styles inline bleus
    const elementsWithBlueStyle = await page.locator('*[style*="blue"]').all();
    console.log('Nombre d\'éléments avec style "blue":', elementsWithBlueStyle.length);

    // Prendre une capture d'écran pour visualisation
    await page.screenshot({ path: 'blue-color-test.png', fullPage: true });

    // Vérifier spécifiquement les boutons
    const buttons = await page.locator('button').all();
    console.log('Nombre total de boutons:', buttons.length);

    for (let i = 0; i < Math.min(buttons.length, 10); i++) {
      const button = buttons[i];
      const backgroundColor = await button.evaluate(el => window.getComputedStyle(el).backgroundColor);
      const color = await button.evaluate(el => window.getComputedStyle(el).color);
      const textContent = await button.evaluate(el => el.textContent?.substring(0, 30));

      if (backgroundColor.includes('blue') || backgroundColor.includes('rgb(37, 99, 235)') || 
          backgroundColor.includes('rgb(29, 78, 216)') || backgroundColor.includes('rgb(59, 130, 246)')) {
        console.log('Bouton bleu trouvé:', {
          backgroundColor,
          color,
          textContent
        });
      }
    }
  });

  test('Vérifier les variables CSS du thème', async ({ page }) => {
    // Attendre que la page charge
    await page.waitForLoadState('networkidle');

    // Récupérer les variables CSS du root
    const cssVars = await page.evaluate(() => {
      const rootStyle = getComputedStyle(document.documentElement);
      const variables: Record<string, string> = {};

      // Variables de thème principales
      const varNames = [
        '--background',
        '--foreground',
        '--primary',
        '--primary-foreground',
        '--secondary',
        '--accent',
        '--border',
        '--ring'
      ];

      varNames.forEach(varName => {
        variables[varName] = rootStyle.getPropertyValue(varName).trim();
      });

      return variables;
    });

    console.log('Variables CSS du thème:', cssVars);

    // Vérifier si les teintes contiennent des valeurs bleues (220-260)
    for (const [varName, value] of Object.entries(cssVars)) {
      const hueMatch = value.match(/(\d+)\s*\)/);
      if (hueMatch) {
        const hue = parseInt(hueMatch[1]);
        if (hue >= 220 && hue <= 260) {
          console.log(`⚠️ ${varName} contient une teinte bleue: ${value}`);
        }
      }
    }
  });
});