import { readFileSync } from 'node:fs';
import { describe, expect, it } from 'vitest';

const components = readFileSync(new URL('../../src/styles/components.css', import.meta.url), 'utf8').replace(/\r\n/g, '\n');
const tokens = readFileSync(new URL('../../src/styles/ui-tokens.css', import.meta.url), 'utf8').replace(/\r\n/g, '\n');

// User decision 2026-10-01: several Context badges in the Finding Reader heading stand one below the other,
// align with the finding badges above (title column) and carry a small marker dot in the Context tone that
// Pathfinder already uses for context nodes - never the focus, marking or a status colour.
describe('Finding Reader context badge layout', () => {
  it('starts the action row in the title column so context badges align with the badges above', () => {
    expect(components).toMatch(/\.reader-heading-actions\s*\{[^}]*grid-column:\s*2 \/ -1;/);
  });

  it('stacks several context badges vertically', () => {
    expect(components).toMatch(/\.context-cluster-badges\s*\{[^}]*flex-direction:\s*column;[^}]*align-items:\s*flex-start;/);
  });

  it('marks every context badge with a dot in the dedicated context marker tone', () => {
    expect(components).toMatch(/\.status-badge\.context-cluster-badge::before\s*\{[^}]*width:\s*var\(--space-2\);[^}]*height:\s*var\(--space-2\);[^}]*border-radius:\s*50%;[^}]*background:\s*var\(--context-marker\);/);
    const markerDefinitions = [...tokens.matchAll(/--context-marker:\s*([^;]+);/g)].map(match => match[1].trim());
    expect(markerDefinitions).toEqual(['var(--graph-relation)', 'var(--graph-relation)']);
    expect(components).not.toMatch(/context-cluster-badge[^{]*\{[^}]*(?:--focus-ring|--marking-color|--table-row-marking|--outcome-|--sev-)/);
  });
});