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

const THEME = {
  brand: '#c20600',
  bgPrimary: '#0a0a0a',
  bgSecondary: '#121212',
  bgTertiary: '#1a1a1a',
  bgElevated: '#202020',
  textPrimary: '#d4d4d4',
  textSecondary: '#a3a3a3',
  textMuted: '#737373',
  borderSubtle: '#1a1a1a',
  borderDefault: '#2a2a2a',
  borderHighlight: '#3a3a3a',
};

function rgbToHex(rgb: string): string {
  const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
  if (!match) return rgb;
  const [, r, g, b] = match.map(Number);
  return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`;
}

test.describe('Theme Colors', () => {
  test('header should have correct border color', async ({ page }) => {
    await page.goto('https://code-dev.g4dge7.com:5174/');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    const header = page.locator('header').first();
    await expect(header).toBeVisible();

    const borderColor = await header.evaluate((el) => {
      return window.getComputedStyle(el).borderBottomColor;
    });

    const actualHex = rgbToHex(borderColor);
    const expectedHex = THEME.borderSubtle;

    console.log('Header border-bottom-color:', actualHex, '(expected:', expectedHex, ')');
    expect(actualHex.toLowerCase()).toBe(expectedHex);
  });

  test('body should have correct background color', async ({ page }) => {
    await page.goto('https://code-dev.g4dge7.com:5174/');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    const bgColor = await page.evaluate(() => {
      return window.getComputedStyle(document.body).backgroundColor;
    });

    const actualHex = rgbToHex(bgColor);
    const expectedHex = THEME.bgPrimary;

    console.log('Body background-color:', actualHex, '(expected:', expectedHex, ')');
    expect(actualHex.toLowerCase()).toBe(expectedHex);
  });

  test('header text should have correct color', async ({ page }) => {
    await page.goto('https://code-dev.g4dge7.com:5174/');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    const header = page.locator('header').first();
    const link = header.locator('a').first();

    const color = await link.evaluate((el) => {
      return window.getComputedStyle(el).color;
    });

    const actualHex = rgbToHex(color);
    const expectedHex = THEME.textPrimary;

    console.log('Header link color:', actualHex, '(expected:', expectedHex, ')');
    expect(actualHex.toLowerCase()).toBe(expectedHex);
  });

test('all theme colors should match spec', async ({ page }) => {
    await page.goto('https://code-dev.g4dge7.com:5174/');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    const results: string[] = [];

    const header = page.locator('header').first();
    const headerBorder = await header.evaluate((el) => {
      const c = window.getComputedStyle(el).borderBottomColor;
      const m = c.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
      if (!m) return c;
      return '#' + [m[1], m[2], m[3]].map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
    });
    results.push(`header border: ${headerBorder}`);

    const bodyBg = await page.evaluate(() => {
      const c = window.getComputedStyle(document.body).backgroundColor;
      const m = c.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
      if (!m) return c;
      return '#' + [m[1], m[2], m[3]].map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
    });
    results.push(`body bg: ${bodyBg}`);

    console.log('Theme verification:', results.join(', '));

    expect(headerBorder.toLowerCase()).toBe(THEME.borderSubtle);
    expect(bodyBg.toLowerCase()).toBe(THEME.bgPrimary);
  });
});