/**
 * empty-state-ui — focused unit tests for the §223 (v0.5.9) `minimal`
 * boolean prop.
 *
 * Pre-§223 only the centered-column canvas layout existed. §223 adds
 * an inline single-row muted layout for placeholder cells / table rows
 * where the full-canvas placeholder is too prominent (R13 §4).
 */

import { describe, it, expect, beforeEach } from 'vitest';
import '../../core/element.js';
import './empty-state.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('empty-state-ui — §223 (v0.5.9) minimal mode', () => {
  beforeEach(() => { document.body.innerHTML = ''; });

  it('defaults to non-minimal (canvas-style placeholder)', () => {
    const el = mount('<empty-state-ui heading="No results"></empty-state-ui>');
    expect(el.minimal).toBe(false);
    expect(el.hasAttribute('minimal')).toBe(false);
  });

  it('reflects [minimal] attribute to the property', () => {
    const el = mount('<empty-state-ui minimal heading="No matches"></empty-state-ui>');
    expect(el.minimal).toBe(true);
    expect(el.hasAttribute('minimal')).toBe(true);
  });

  it('stamps icon WITHOUT size="lg" when minimal', async () => {
    const el = mount('<empty-state-ui minimal icon="search" heading="No matches"></empty-state-ui>');
    await tick();
    const icon = el.querySelector(':scope > [slot="icon"]');
    expect(icon).not.toBeNull();
    // Minimal layout uses 1em inherited font-size; non-minimal stamps lg.
    expect(icon.hasAttribute('size')).toBe(false);
  });

  it('stamps icon WITH size="lg" when not minimal (no regression)', async () => {
    const el = mount('<empty-state-ui icon="search" heading="No matches"></empty-state-ui>');
    await tick();
    const icon = el.querySelector(':scope > [slot="icon"]');
    expect(icon).not.toBeNull();
    expect(icon.getAttribute('size')).toBe('lg');
  });

  it('stamps heading + description slots in both modes', async () => {
    const minimal = mount('<empty-state-ui minimal heading="Empty" description="No rows"></empty-state-ui>');
    const canvas = mount('<empty-state-ui heading="Empty" description="No rows"></empty-state-ui>');
    await tick();

    for (const el of [minimal, canvas]) {
      const h = el.querySelector(':scope > [slot="heading"]');
      const d = el.querySelector(':scope > [slot="description"]');
      expect(h?.textContent).toBe('Empty');
      expect(d?.textContent).toBe('No rows');
    }
  });

  it('honors a consumer-provided [slot="action"] child in either mode', () => {
    const el = mount(`
      <empty-state-ui minimal heading="Empty">
        <button slot="action" data-test="reset">Reset</button>
      </empty-state-ui>
    `);
    const action = el.querySelector(':scope > [slot="action"][data-test="reset"]');
    expect(action).not.toBeNull();
  });
});
