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

function stubMatchMedia(matches: boolean) {
  vi.stubGlobal('matchMedia', (query: string) => ({
    matches,
    media: query,
    addEventListener: () => {},
    removeEventListener: () => {},
  }));
}

describe('VibeAura', () => {
  afterEach(() => vi.unstubAllGlobals());

  it('leaves the displacement filter off a narrow viewport', () => {
    stubMatchMedia(false);
    const { container } = render(<VibeAura profile={{ energy: 0.8 }} ambient />);

    expect(container.querySelector('filter#vibe-plasma')).toBeNull();
    expect(container.querySelector('.vibe-aura-stack-plasma')).toBeNull();
    // The layers themselves stay: a phone gets the churn, not the noise pass.
    expect(container.querySelectorAll('.vibe-aura-layer')).toHaveLength(3);
  });

  it('mounts the filter and names it on the stack once there is room for it', () => {
    stubMatchMedia(true);
    const { container } = render(<VibeAura profile={{ energy: 0.8 }} ambient />);

    expect(container.querySelector('filter#vibe-plasma')).not.toBeNull();
    expect(container.querySelector('.vibe-aura-stack-plasma')).not.toBeNull();
  });

  it('turns the live recommendation profile into an accessible ambient state', () => {
    render(<VibeAura profile={{ energy: 0.82, noveltyHunger: 0.78 }} />);

    expect(screen.getByRole('img', { name: 'Current Vibe: charged energy and adventurous discovery' })).toBeInTheDocument();
    expect(screen.getByText('Your Vibe is charged')).toBeInTheDocument();
  });
});
