// @vitest-environment happy-dom
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';
import { Reveal, StaggerList } from '@bytelyst/motion';

/**
 * UX-5 — motion guard. The shared motion primitives must end fully visible
 * (no element stranded at opacity:0, which would trip contrast / a11y) and
 * must render all their content. We assert the reduced-motion / disabled path
 * (what `prefers-reduced-motion` users and SSR-stable snapshots get).
 */
describe('motion primitives stay visible + render content', () => {
  let container: HTMLDivElement;
  let root: Root;

  beforeEach(() => {
    (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT =
      true;
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);
  });

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

  it('Reveal renders its child and resolves to visible (opacity 1)', () => {
    act(() => {
      root.render(
        <Reveal disableMotion from="up">
          <span>Revealed content</span>
        </Reveal>
      );
    });
    const el = container.querySelector('[data-testid="bl-reveal"]') as HTMLElement | null;
    expect(el).toBeTruthy();
    expect(el!.getAttribute('data-visible')).toBe('true');
    expect(el!.style.opacity).toBe('1');
    expect(container.textContent).toContain('Revealed content');
  });

  it('StaggerList renders every child, each visible', () => {
    act(() => {
      root.render(
        <StaggerList disableMotion from="up">
          <div>alpha</div>
          <div>beta</div>
          <div>gamma</div>
        </StaggerList>
      );
    });
    const reveals = container.querySelectorAll('[data-testid="bl-reveal"]');
    expect(reveals.length).toBe(3);
    reveals.forEach(r => expect(r.getAttribute('data-visible')).toBe('true'));
    expect(container.textContent).toContain('alpha');
    expect(container.textContent).toContain('beta');
    expect(container.textContent).toContain('gamma');
  });
});
