import { describe, test, expect, vi, afterEach } from 'vitest';
import React from 'react';
import { createRoot, Root } from 'react-dom/client';
import { act } from 'react-dom/test-utils';
import { PublishWarnings } from './PublishWarnings';

/* ---------- DOM test harness (no @testing-library/react in this repo, see
   src/ui/AssetPicker.test.tsx for the same pattern: react-dom/client +
   react-dom/test-utils `act`, both transitive deps of react-dom already). ---------- */
let container: HTMLDivElement;
let root: Root;

function render(ui: React.ReactElement) {
  container = document.createElement('div');
  document.body.appendChild(container);
  act(() => {
    root = createRoot(container);
    root.render(ui);
  });
}

function click(el: Element | null) {
  if (!el) throw new Error('element not found');
  act(() => { (el as HTMLElement).dispatchEvent(new MouseEvent('click', { bubbles: true })); });
}

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

describe('PublishWarnings', () => {
  test('renders nothing when there are no warnings', () => {
    render(<PublishWarnings warnings={[]} onDismiss={() => {}} />);
    expect(container.innerHTML).toBe('');
  });

  test('renders each warning', () => {
    render(
      <PublishWarnings
        warnings={['First problem.', 'Second problem.']}
        onDismiss={() => {}}
      />,
    );
    expect(container.textContent).toContain('First problem.');
    expect(container.textContent).toContain('Second problem.');
  });

  test('dismiss fires the callback', () => {
    const onDismiss = vi.fn();
    render(<PublishWarnings warnings={['A problem.']} onDismiss={onDismiss} />);
    click(container.querySelector('[data-testid="publish-warnings-dismiss"]'));
    expect(onDismiss).toHaveBeenCalledTimes(1);
  });
});