// @vitest-environment jsdom

import { act } from 'react';
import { createRoot } from 'react-dom/client';
import { describe, expect, it } from 'vitest';
import { BackendConnectionDialog } from '../../src/components/BackendConnectionDialog/BackendConnectionDialog';

describe('Backend connection dialog', () => {
  it('uses the shared popup and can be dismissed without hiding the underlying page', () => {
    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
    const container = document.createElement('div');
    document.body.append(container);
    const root = createRoot(container);

    act(() => root.render(<BackendConnectionDialog
      backendStatus="unavailable"
      message="Synthetic functionality will be available after reconnecting."
    />));

    const dialog = document.body.querySelector<HTMLElement>('[role="dialog"]');
    expect(dialog?.getAttribute('aria-label')).toBe('Backend is unreachable');
    expect(dialog?.classList.contains('backend-connection-dialog')).toBe(true);
    expect(dialog?.textContent).toContain('Synthetic functionality will be available after reconnecting.');
    expect(dialog?.textContent).toContain('The connection is checked automatically.');

    act(() => dialog?.querySelector<HTMLButtonElement>('[aria-label="Close window"]')?.click());
    expect(document.body.querySelector('[role="dialog"]')).toBeNull();
    expect(document.body.contains(container)).toBe(true);

    act(() => root.unmount());
    container.remove();
  });
});