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

const component = readFileSync(new URL('../../src/features/dashboard/DashboardPanel.tsx', import.meta.url), 'utf8');
const styles = readFileSync(new URL('../../src/styles/datahub.css', import.meta.url), 'utf8');

/**
 * Die Kurven zwischen Overall Score und Security Domains trafen ihre Knoten
 * nur bei genau einer Fenstergroesse: feste Zielkoordinaten lagen in einem
 * ungleichmaessig gestreckten Koordinatensystem. Bei jeder anderen Breite
 * endeten sie sichtbar neben dem Knoten.
 */
describe('client info posture connectors', () => {
  it('derives the curve geometry from the rendered layout instead of fixed coordinates', () => {
    expect(component).toContain('function DashboardPostureConnectors(');
    expect(component).toContain('getBoundingClientRect()');
    expect(component).toContain("querySelectorAll('.client-domains .client-domain-score')");
    // Das Koordinatensystem entspricht der gemessenen Flaeche, deshalb darf es
    // nicht mehr verzerrt werden.
    expect(component).not.toMatch(/<svg[^>]*preserveAspectRatio/);
    expect(component).not.toMatch(/\[82, 150, 218, 286, 354, 422, 490, 558\]/);
    expect(component).toMatch(/viewBox=\{`0 0 \$\{Math\.max\(1, geometry\.width\)\} \$\{Math\.max\(1, geometry\.height\)\}`\}/);
  });

  it('remeasures on both layout and window size changes', () => {
    expect(component).toContain("window.addEventListener('resize', measure)");
    expect(component).toContain("window.removeEventListener('resize', measure)");
    expect(component).toContain('new ResizeObserver(() => measure())');
    expect(component).toContain('observer?.disconnect()');
  });

  it('keeps the connector overlay positioned inside the posture surface', () => {
    expect(styles).toMatch(/\.client-posture\s*\{[^}]*position:\s*relative;/s);
    expect(styles).toMatch(/\.client-posture-connectors\s*\{[^}]*position:\s*absolute;[^}]*inset:\s*0;/s);
    // Unterhalb des Umbruchs stehen Ring und Domains untereinander; dort gibt
    // es keine waagerechte Verbindung mehr.
    expect(styles).toMatch(/\.client-posture-connectors\s*\{\s*display:\s*none;\s*\}/);
  });
});