import { readFileSync } from 'node:fs';
import { describe, expect, it } from 'vitest';
import { ASSESSOR_PRODUCT_VERSION } from '../../src/domain/assessor-release';

const app = readFileSync(new URL('../../src/app/App.tsx', import.meta.url), 'utf8');
const about = readFileSync(new URL('../../src/features/about/AboutDialog.tsx', import.meta.url), 'utf8');
const layout = readFileSync(new URL('../../src/styles/layout.css', import.meta.url), 'utf8');
const components = readFileSync(new URL('../../src/styles/components.css', import.meta.url), 'utf8');

describe('ASSESSOR version in the brand header', () => {
  it('shows the centrally maintained product version and opens About from the brand', () => {
    expect(ASSESSOR_PRODUCT_VERSION).toBe('2.21.0');
    expect(app).toContain("'db-structure': 'Data Flow'");
    expect(app).toContain("['db-structure', 'Data Flow']");
    expect(app).not.toContain("'DB Structure'");
    expect(app).toContain("import { ASSESSOR_PRODUCT_VERSION } from '../domain/assessor-release';");
    expect(app).toContain('aria-label="About ASSESSOR"');
    expect(app).toContain("import assessorLogo from '../assets/branding/assessor-icon-transparent.png';");
    expect(app).toContain('<span className="brand-copy"><h1>ASSESSOR</h1><span className="brand-version">{ASSESSOR_PRODUCT_VERSION}</span></span>');
    expect(app).toContain('{aboutOpen && <AboutDialog onClose={() => setAboutOpen(false)}/>}');
    expect(about).toContain('Credits · Michael Lukas · Binh Karl');
    expect(about).toContain('POLICY_EVALUATION_ENGINE.version');
    expect(about).toContain('CURRENT_ASSESSOR_PROCESSING_VERSION');
    expect(about).toContain('<div className="about-brand" aria-hidden="true"><img src={assessorLogo} alt=""/></div>');
    expect(layout).toMatch(/\.brand-copy\s*\{[^}]*display:\s*grid;[^}]*gap:\s*var\(--space-1\);/s);
    expect(layout).toMatch(/\.brand-version\s*\{[^}]*font-size:\s*var\(--type-meta-size\);[^}]*font-variant-numeric:\s*tabular-nums;/s);
    expect(layout).toMatch(/\.brand\s*\{[^}]*min-height:\s*112px;[^}]*padding:\s*6px 14px 6px 16px;[^}]*margin-top:\s*0;/s);
    expect(layout).toMatch(/\.brand:hover\s*\{[^}]*background:\s*transparent;/s);
    expect(layout).not.toMatch(/\.app-shell[^,{]* \.brand\s*\{/s);
    expect(components).toMatch(/\.about-brand img\s*\{[^}]*width:\s*160px;[^}]*height:\s*160px;/s);
  });
});