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

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

describe('Header connection indicator', () => {
  it('places the compact connection state directly before the client name in every header', () => {
    expect(app).toContain('const headerContext = <div className="app-header-context">{connectionIndicator}{headerClientName &&');
    expect(app).toContain('{readerToolbar}{headerContext}');
    expect(app).toContain('</span>{headerContext}</div>');
    expect(app).not.toContain('connection-pill');
    expect(app).not.toContain('Server connected');
  });

  it('uses a red and green square with only the current state emphasized', () => {
    expect(app).toContain('connection-state-square is-offline');
    expect(app).toContain('connection-state-square is-online');
    expect(app).toContain("backendStatus === 'connected' ? 'Server connection available'");
    expect(app).toContain("'No server connection'");
    expect(layout).toMatch(/\.connection-state-square\s*\{[^}]*width:\s*9px;[^}]*height:\s*9px;[^}]*border-radius:\s*0;/s);
    expect(layout).toMatch(/\.connection-state-square\.is-offline\s*\{[^}]*background:\s*var\(--state-offline\);/s);
    expect(layout).toMatch(/\.connection-state-square\.is-online\s*\{[^}]*background:\s*var\(--state-online\);/s);
    expect(layout).toMatch(/\.connection-connected \.connection-state-square\.is-online\s*\{[^}]*opacity:\s*1;/s);
    expect(layout).toMatch(/\.connection-unavailable \.connection-state-square\.is-offline,[\s\S]*?\.connection-checking \.connection-state-square\.is-offline\s*\{[^}]*opacity:\s*1;/s);
  });
});