import { describe, it, expect, beforeEach } from 'vitest';
import '../../core/element.js';
import './adia-mark.js';

const tick = () => new Promise((r) => queueMicrotask(r));

function mount(html) {
  const wrap = document.createElement('div');
  wrap.innerHTML = html;
  document.body.appendChild(wrap);
  return wrap.firstElementChild;
}

describe('adia-mark-ui', () => {
  beforeEach(() => { document.body.innerHTML = ''; });

  it('registers adia-mark-ui as a custom element', () => {
    expect(customElements.get('adia-mark-ui')).toBeDefined();
  });

  it('defaults to size="md"', async () => {
    const el = mount('<adia-mark-ui></adia-mark-ui>');
    await tick();
    expect(el.size).toBe('md');
  });

  it('reflects an explicit [size]', async () => {
    const el = mount('<adia-mark-ui size="xl"></adia-mark-ui>');
    await tick();
    expect(el.size).toBe('xl');
  });

  it('defaults to inline=false and reflects an explicit [inline]', async () => {
    const a = mount('<adia-mark-ui></adia-mark-ui>');
    const b = mount('<adia-mark-ui inline></adia-mark-ui>');
    await tick();
    expect(a.inline).toBe(false);
    expect(b.inline).toBe(true);
    expect(b.getAttribute('inline')).toBe('');
  });

  it('sets role="img" and a default aria-label on connect', async () => {
    const el = mount('<adia-mark-ui></adia-mark-ui>');
    await tick();
    expect(el.getAttribute('role')).toBe('img');
    expect(el.getAttribute('aria-label')).toBe('Adia');
  });

  it('does not overwrite a consumer-authored aria-label', async () => {
    const el = mount('<adia-mark-ui aria-label="Adia — home"></adia-mark-ui>');
    await tick();
    expect(el.getAttribute('aria-label')).toBe('Adia — home');
  });

  it('stamps the wordmark SVG with five glyph paths, no consumer-content conflict', async () => {
    const el = mount('<adia-mark-ui></adia-mark-ui>');
    await tick();
    const svg = el.querySelector('svg');
    expect(svg).toBeTruthy();
    expect(el.querySelectorAll('[data-mark-glyph]').length).toBe(5);
  });

  it('renders identically regardless of size — static template, no interpolation', async () => {
    const a = mount('<adia-mark-ui size="sm"></adia-mark-ui>');
    const b = mount('<adia-mark-ui size="xl"></adia-mark-ui>');
    await tick();
    expect(a.innerHTML).toBe(b.innerHTML);
  });
});
