import { render } from '@testing-library/react';
import { describe, it, expect, afterEach } from 'vitest';
import { SecuenciaClaridad } from '../SecuenciaClaridad';
import { LINEAS_SIMBOLO } from '@/lib/simbolo';

describe('<SecuenciaClaridad />', () => {
  const matchMediaOriginal = window.matchMedia;
  afterEach(() => {
    window.matchMedia = matchMediaOriginal;
  });

  it('is decorative: hidden from assistive tech', () => {
    const { container } = render(<SecuenciaClaridad />);
    const svg = container.querySelector('svg');
    expect(svg).toHaveAttribute('aria-hidden', 'true');
    expect(svg).toHaveAttribute('focusable', 'false');
  });

  it('draws the tangle of lines that stands for complexity', () => {
    const { container } = render(<SecuenciaClaridad />);
    expect(container.querySelectorAll('line').length).toBeGreaterThanOrEqual(18);
  });

  it('resolves into the mark itself, not a lookalike', () => {
    const { container } = render(<SecuenciaClaridad variant="completa" />);
    const resolucion = container.querySelectorAll('[data-resolucion]');
    expect(resolucion).toHaveLength(3);
  });

  it('gives each resolved line its own bar\'s stroke width, not the first bar\'s', () => {
    // Force the reduced-motion branch: it is the only one where stroke-width
    // is a literal DOM attribute rather than a Framer Motion `animate` target
    // jsdom's inert IntersectionObserver stub never resolves (see
    // lib/__tests__/motion.test.tsx), so the animated branch's `enVista` never
    // flips true and its resolved strokeWidth is unreachable from the DOM.
    window.matchMedia = (query: string) =>
      ({
        matches: true,
        media: query,
        onchange: null,
        addEventListener: () => {},
        removeEventListener: () => {},
        addListener: () => {},
        removeListener: () => {},
        dispatchEvent: () => false,
      }) as unknown as MediaQueryList;

    const { container } = render(<SecuenciaClaridad variant="completa" />);
    const resueltas = container.querySelectorAll('[data-resolucion]');
    expect(resueltas).toHaveLength(3);

    // The three survivors appear in document order following DISPERSAS, one
    // per group, so they line up 1:1 with the symbol's own three bars.
    resueltas.forEach((linea, i) => {
      expect(linea).toHaveAttribute('stroke-width', String(LINEAS_SIMBOLO[i].grosor));
    });
  });

  it('leaves the tension unresolved in the hero variant', () => {
    const { container } = render(<SecuenciaClaridad variant="hero" />);
    expect(container.querySelectorAll('[data-resolucion]')).toHaveLength(0);
  });

  it('shares the viewBox with the symbol so both scale alike', () => {
    const { container } = render(<SecuenciaClaridad />);
    expect(container.querySelector('svg')).toHaveAttribute('viewBox', '0 0 64 64');
  });
});