import { test, expect } from '@playwright/test';
import path from 'node:path';
import fs from 'node:fs';
import { fileURLToPath } from 'node:url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const OUT = path.join(__dirname, 'screenshots');

test.beforeAll(() => {
  fs.mkdirSync(OUT, { recursive: true });
});

const themes = ['light', 'dark', 'midnight'] as const;
const accents = ['vermilion', 'indigo', 'emerald'] as const;

test.describe('shell themes and accents', () => {
  for (const theme of themes) {
    for (const accent of accents) {
      test(`theme=${theme} accent=${accent}`, async ({ page }) => {
        await page.addInitScript(
          ({ theme, accent }) => {
            localStorage.setItem('zy-theme', theme);
            localStorage.setItem(
              'zy-ui',
              JSON.stringify({
                accent,
                density: 'comfortable',
                radius: 'default',
                fontSize: 'md',
                highContrast: false,
                reduceMotion: false,
              }),
            );
          },
          { theme, accent },
        );

        await page.goto('/');
        await expect(page.getByText('Zyphon').first()).toBeVisible();
        await expect(page.getByRole('link', { name: 'Insights' })).toBeVisible();
        await expect(page.getByRole('link', { name: 'Templates' })).toBeVisible();
        await expect(page.getByRole('link', { name: 'Logs' })).toBeVisible();

        const dataTheme = await page.locator('html').getAttribute('data-theme');
        expect(dataTheme).toBe(theme);

        await page.screenshot({
          path: path.join(OUT, `shell-${theme}-${accent}.png`),
          fullPage: true,
        });
      });
    }
  }

  test('command palette opens with Ctrl+K', async ({ page }) => {
    await page.goto('/');
    await page.keyboard.press('Control+k');
    await expect(page.getByRole('heading', { name: 'Search or jump' })).toBeVisible();
  });
});