import { describe, it, expect } from 'vitest';
import {
  renderSymbolGraphViewer,
  renderPianoRollViewer,
  renderGenericViewer,
  renderDomainViewer,
} from './domain-viewers';

// Minimal HTMLElement shim — vitest runs in node, no real DOM/SVG needed
// since these functions only ever set innerHTML to a plain string.
function makeContainer(): HTMLElement {
  return { innerHTML: '', clientWidth: 600 } as unknown as HTMLElement;
}

describe('renderSymbolGraphViewer', () => {
  it('renders one labeled node per dimension', () => {
    const el = makeContainer();
    renderSymbolGraphViewer(el, [{ name: 'file' }, { name: 'symbol' }]);
    expect(el.innerHTML).toContain('<svg');
    expect(el.innerHTML).toContain('file');
    expect(el.innerHTML).toContain('symbol');
  });

  it('renders a placeholder node when no dimensions are declared', () => {
    const el = makeContainer();
    renderSymbolGraphViewer(el, []);
    expect(el.innerHTML).toContain('state');
  });

  it('escapes dimension names to prevent injection', () => {
    const el = makeContainer();
    renderSymbolGraphViewer(el, [{ name: '<script>alert(1)</script>' }]);
    expect(el.innerHTML).not.toContain('<script>');
    expect(el.innerHTML).toContain('&lt;script&gt;');
  });
});

describe('renderPianoRollViewer', () => {
  it('renders one track row per dimension', () => {
    const el = makeContainer();
    renderPianoRollViewer(el, [{ name: 'drums' }, { name: 'bass' }, { name: 'lead' }]);
    expect(el.innerHTML).toContain('<svg');
    expect(el.innerHTML).toContain('drums');
    expect(el.innerHTML).toContain('bass');
    expect(el.innerHTML).toContain('lead');
  });

  it('is deterministic for the same dimension name', () => {
    const a = makeContainer();
    const b = makeContainer();
    renderPianoRollViewer(a, [{ name: 'drums' }]);
    renderPianoRollViewer(b, [{ name: 'drums' }]);
    expect(a.innerHTML).toBe(b.innerHTML);
  });
});

describe('renderGenericViewer', () => {
  it('lists declared dimensions with descriptions', () => {
    const el = makeContainer();
    renderGenericViewer(el, [{ name: 'notes', description: 'Note events' }]);
    expect(el.innerHTML).toContain('notes');
    expect(el.innerHTML).toContain('Note events');
  });

  it('shows an informative empty state, not a blank render', () => {
    const el = makeContainer();
    renderGenericViewer(el, []);
    expect(el.innerHTML.toLowerCase()).toContain('no dimensions');
  });
});

describe('renderDomainViewer dispatch', () => {
  it('dispatches symbol_graph to the graph renderer', () => {
    const el = makeContainer();
    renderDomainViewer(el, 'symbol_graph', [{ name: 'file' }]);
    expect(el.innerHTML).toContain('Symbol graph preview');
  });

  it('dispatches piano_roll to the track renderer', () => {
    const el = makeContainer();
    renderDomainViewer(el, 'piano_roll', [{ name: 'drums' }]);
    expect(el.innerHTML).toContain('Track preview');
  });

  it('falls back to the generic renderer for anything else', () => {
    const el = makeContainer();
    renderDomainViewer(el, 'generic', [{ name: 'x' }]);
    expect(el.innerHTML).toContain('domain-viewer-list');
  });
});