import { render } from '@testing-library/react';
import { describe, it, expect, vi, afterEach } from 'vitest';

// jsdom has no WebGL, so the real <Canvas> cannot mount. The mock keeps the
// wrapper — the part that is plain DOM and that carries the decisions worth
// protecting — testable, and reports back the frameloop it was handed.
vi.mock('@react-three/fiber', () => ({
  Canvas: ({ frameloop }: { frameloop?: string }) => (
    <div data-testid="lienzo" data-frameloop={frameloop} />
  ),
  useFrame: () => {},
  useThree: () => ({ camera: { position: { set: () => {} }, lookAt: () => {} }, invalidate: () => {} }),
}));

import { EscenaClaridad } from '../EscenaClaridad';

function conMovimientoReducido(reducido: boolean) {
  window.matchMedia = ((query: string) => ({
    matches: reducido && query.includes('reduce'),
    media: query,
    onchange: null,
    addEventListener: () => {},
    removeEventListener: () => {},
    addListener: () => {},
    removeListener: () => {},
    dispatchEvent: () => false,
  })) as unknown as typeof window.matchMedia;
}

afterEach(() => conMovimientoReducido(false));

describe('<EscenaClaridad />', () => {
  it('is decorative: hidden from assistive tech', () => {
    const { container } = render(<EscenaClaridad />);
    expect(container.firstElementChild).toHaveAttribute('aria-hidden', 'true');
  });

  it('takes its size from the caller, so the hero reserves the box', () => {
    const { container } = render(<EscenaClaridad className="w-full h-full" />);
    expect(container.firstElementChild).toHaveClass('w-full', 'h-full');
  });

  it('runs the loop while the hero is on screen', () => {
    conMovimientoReducido(false);
    const { getByTestId } = render(<EscenaClaridad />);
    expect(getByTestId('lienzo')).toHaveAttribute('data-frameloop', 'always');
  });

  it('stops the loop for readers who asked for reduced motion', () => {
    conMovimientoReducido(true);
    const { getByTestId } = render(<EscenaClaridad />);
    expect(getByTestId('lienzo')).toHaveAttribute('data-frameloop', 'demand');
  });
});