import { describe, it, expect } from 'vitest';
import fs from 'fs';
import path from 'path';
import { THEME_PRESETS, contrastRatio } from '../config/theme';

/**
 * The passepartout frame prints the EXIF line on the mat, in --mat-text on
 * --mat-bg. Until v0.20.0 the mat never showed — the photo covered it, and the
 * line sat on the photo at 1.3–2.4:1 — so its colours had never been checked.
 *
 * Tokens are resolved the way the cascade does on <html>, where every block
 * of app/tokens.css matches at once: a preset's light block beats everything,
 * then the later of the one-attribute blocks wins — and every preset block
 * comes after the generic light block, so a preset that sets a mat token for
 * dark mode only would carry it into light mode too.
 */
const css = fs.readFileSync(path.join(process.cwd(), 'app', 'tokens.css'), 'utf8');

function block(selector: string): string | undefined {
  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  return new RegExp(`(?:^|\\n)${escaped}\\s*\\{([^}]*)\\}`).exec(css)?.[1];
}

function declared(selector: string, name: string): string | undefined {
  const body = block(selector);
  if (!body) return undefined;
  return new RegExp(`--${name}:\\s*([^;]+);`).exec(body)?.[1].trim();
}

function token(preset: string, mode: 'dark' | 'light', name: string): string | undefined {
  const chain =
    mode === 'dark'
      ? [`[data-preset='${preset}']`, ':root']
      : [
          `[data-preset='${preset}'][data-theme='light']`,
          `[data-preset='${preset}']`,
          "[data-theme='light']",
          ':root',
        ];
  for (const selector of chain) {
    const value = declared(selector, name);
    if (value === undefined) continue;
    const ref = /^var\(--([\w-]+)\)$/.exec(value);
    return ref ? token(preset, mode, ref[1]) : value;
  }
  return undefined;
}

// WCAG AA for text at the caption's size (0.6875–0.75rem).
const TEXT_MIN = 4.5;

describe('passepartout mat tokens', () => {
  it('are defined for both modes', () => {
    expect(declared(':root', 'mat-bg')).toBeDefined();
    expect(declared("[data-theme='light']", 'mat-bg')).toBeDefined();
  });

  it('are no longer hard-coded in the theme files', () => {
    const themes = path.join(process.cwd(), 'app', 'themes');
    const globals = fs.readFileSync(path.join(process.cwd(), 'app', 'globals.css'), 'utf8');
    const sources = [
      globals,
      ...fs.readdirSync(themes).map((f) => fs.readFileSync(path.join(themes, f), 'utf8')),
    ];
    for (const source of sources) {
      for (const rule of source.matchAll(/\[data-photo-frame='passepartout'\][^{]*\{([^}]*)\}/g)) {
        expect(rule[1]).not.toMatch(/(background|border|color)[^;]*#[0-9a-f]{3,6}/i);
      }
    }
  });

  for (const preset of Object.keys(THEME_PRESETS)) {
    for (const mode of ['dark', 'light'] as const) {
      it(`${preset} (${mode}): the EXIF line is readable on the mat`, () => {
        const bg = token(preset, mode, 'mat-bg')!;
        const fg = token(preset, mode, 'mat-text')!;
        expect(bg).toMatch(/^#[0-9a-f]{6}$/i);
        expect(fg).toMatch(/^#[0-9a-f]{6}$/i);
        expect(contrastRatio(fg, bg)!).toBeGreaterThanOrEqual(TEXT_MIN);
      });
    }
  }

  it('keeps the light mat light in a preset that tints it', () => {
    // classic sets a warm dark mat; without its own light value that dark
    // mat would win over the generic light one.
    expect(token('classic', 'light', 'mat-bg')).toBe('#fffdf5');
    expect(token('classic', 'dark', 'mat-bg')).toBe('#1a1816');
  });

  it('tones the mat to the wall in the gallery presets', () => {
    // kunsthalle hangs on grey, salon on oxblood and plaster rose; the default
    // black and white boards cut a hole in either wall.
    for (const preset of ['kunsthalle', 'salon']) {
      expect(token(preset, 'dark', 'mat-bg')).not.toBe(token('studio', 'dark', 'mat-bg'));
      expect(token(preset, 'light', 'mat-bg')).not.toBe(token('studio', 'light', 'mat-bg'));
      expect(token(preset, 'dark', 'mat-bg')).not.toBe(token(preset, 'light', 'mat-bg'));
    }
  });
});