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 { CodeEditor } from './CodeEditor';

/* ---------- DOM test harness (no @testing-library/react in this repo; see
   src/ui/AssetPicker.test.tsx / src/ui/Modal.test.tsx for the same
   react-dom/client + react-dom/test-utils `act` pattern). ----------

   CodeMirror is loaded via dynamic import() (see CodeEditor.tsx), which is
   always async -- even for an already-resolved/cached module, `import()`
   only settles on a later microtask. That means immediately after the
   initial synchronous `act(() => root.render(...))` below, the component is
   still in its 'loading' state and renders the <textarea> fallback. These
   tests deliberately assert against that first-tick DOM (never awaiting
   the CodeMirror promise), so they exercise exactly the fallback path a
   real headless/offline environment would fall back to, deterministically
   and without needing to mock @codemirror/*. */

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);
  });
}

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

function fallbackTextarea(): HTMLTextAreaElement {
  const el = container.querySelector<HTMLTextAreaElement>('[data-testid="code-editor-fallback"]');
  if (!el) throw new Error('fallback textarea not found');
  return el;
}

describe('CodeEditor', () => {
  test('shows the textarea fallback immediately (CodeMirror loads async)', () => {
    render(<CodeEditor value="<p>hi</p>" onChange={vi.fn()} />);
    const textarea = fallbackTextarea();
    expect(textarea.value).toBe('<p>hi</p>');
  });

  test('the CodeMirror mount root is hidden while the fallback is showing', () => {
    render(<CodeEditor value="" onChange={vi.fn()} />);
    const cmRoot = container.querySelector<HTMLDivElement>('[data-testid="code-editor-cm-root"]');
    expect(cmRoot?.style.display).toBe('none');
  });

  test('onChange fires with the new value when typing in the fallback textarea', () => {
    const onChange = vi.fn();
    render(<CodeEditor value="<p>hi</p>" onChange={onChange} />);
    const textarea = fallbackTextarea();
    act(() => {
      const setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')!.set!;
      setter.call(textarea, '<p>updated</p>');
      textarea.dispatchEvent(new Event('input', { bubbles: true }));
    });
    expect(onChange).toHaveBeenCalledWith('<p>updated</p>');
  });

  test('accepts a language prop without throwing (html/css/javascript/auto)', () => {
    for (const language of ['html', 'css', 'javascript', 'auto'] as const) {
      expect(() => render(<CodeEditor value="" onChange={vi.fn()} language={language} />)).not.toThrow();
      const textarea = fallbackTextarea();
      expect(textarea.dataset.language).toBe(language);
      act(() => { root.unmount(); });
      container.remove();
    }
  });

  test('defaults to html language when none is passed', () => {
    render(<CodeEditor value="" onChange={vi.fn()} />);
    expect(fallbackTextarea().dataset.language).toBe('html');
  });

  test('respects a custom height', () => {
    render(<CodeEditor value="" onChange={vi.fn()} height={480} />);
    expect((container.firstElementChild as HTMLElement).style.height).toBe('480px');
  });
});