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

const dialog = readFileSync(new URL('../../src/components/Dialog/Dialog.tsx', import.meta.url), 'utf8');
const styles = readFileSync(new URL('../../src/styles/import-workflow.css', import.meta.url), 'utf8');
const offlineViews = [
  '../../src/features/project-import/DataHub.tsx',
  '../../src/features/db-structure/DbStructurePanel.tsx',
  '../../src/features/results-browser/ResultsBrowser.tsx'
].map(path => readFileSync(new URL(path, import.meta.url), 'utf8'));

describe('Standard dialog layout', () => {
  it('portals dialogs to the document body so the backdrop covers the viewport', () => {
    expect(dialog).toContain("import { createPortal } from 'react-dom'");
    expect(dialog).toContain('return createPortal(dialog, document.body)');
    expect(styles).toMatch(/\.dialog-backdrop\s*\{[^}]*position:\s*fixed;[^}]*inset:\s*0;/s);
    expect(styles).toMatch(/\.dialog-backdrop\s*\{[^}]*backdrop-filter:\s*blur\(8px\);/s);
  });

  it('uses the compact 500 pixel standard dialog width', () => {
    expect(styles).toMatch(/\.dialog-window\s*\{[^}]*width:\s*min\(500px, 100%\);/s);
    expect(styles).not.toContain('width: min(1000px, 100%)');
  });

  it('uses the shared Assessor popup for every backend-unavailable view', () => {
    offlineViews.forEach(view => {
      expect(view).toContain('<BackendConnectionDialog');
      expect(view).not.toContain('className="datahub-offline"');
    });
  });
});