import { describe, test, expect } from 'vitest';
import { ContentSlider } from './ContentSlider';

const toHtml = (ContentSlider as any).toHtml;

const slides = [
  { type: 'image' as const, heading: 'One' },
  { type: 'image' as const, heading: 'Two' },
  { type: 'image' as const, heading: 'Three' },
];

describe('ContentSlider.toHtml accessibility (F1.1)', () => {
  test('prev/next arrows get aria-labels and are real buttons', () => {
    const { html } = toHtml({ slides, showArrows: true }, '');
    expect(html).toMatch(/<button[^>]*aria-label="Previous slide"/);
    expect(html).toMatch(/<button[^>]*aria-label="Next slide"/);
  });

  test('dot buttons get "Go to slide N" aria-labels', () => {
    const { html } = toHtml({ slides, showDots: true }, '');
    expect(html).toMatch(/<button[^>]*aria-label="Go to slide 1"/);
    expect(html).toMatch(/<button[^>]*aria-label="Go to slide 2"/);
    expect(html).toMatch(/<button[^>]*aria-label="Go to slide 3"/);
  });

  test('slides are wrapped in an aria-live region', () => {
    const { html } = toHtml({ slides }, '');
    expect(html).toMatch(/aria-live="(polite|off)"/);
  });

  test('decorative chevron icons in arrows are aria-hidden', () => {
    const { html } = toHtml({ slides, showArrows: true }, '');
    expect(html).toMatch(/<i class="fa fa-chevron-left" aria-hidden="true"><\/i>/);
    expect(html).toMatch(/<i class="fa fa-chevron-right" aria-hidden="true"><\/i>/);
  });
});

describe('ContentSlider.toHtml deterministic + unique scope ids (thread node id)', () => {
  test('same node id -> identical output across calls (deterministic, no Math.random)', () => {
    const { html: html1 } = toHtml({ slides }, '', 'node-cs1');
    const { html: html2 } = toHtml({ slides }, '', 'node-cs1');
    expect(html1).toBe(html2);
  });

  test('different node ids -> different, non-colliding scope ids (identical slides, no collision)', () => {
    const { html: html1 } = toHtml({ slides }, '', 'node-cs1');
    const { html: html2 } = toHtml({ slides }, '', 'node-cs2');
    const id1 = html1.match(/<section id="([^"]+)"/)![1];
    const id2 = html2.match(/<section id="([^"]+)"/)![1];
    expect(id1).not.toBe(id2);
  });

  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
    const { html: html1 } = toHtml({ slides }, '');
    const { html: html2 } = toHtml({ slides }, '');
    expect(html1).toBe(html2);
  });
});

describe('ContentSlider.toHtml autoplay silences aria-live and is pausable (F-export review Minor)', () => {
  test('aria-live is "off" while autoplay is running, to avoid announcing every auto-rotation', () => {
    const { html } = toHtml({ slides, autoplay: true }, '');
    expect(html).toContain('aria-live="off"');
  });

  test('aria-live stays "polite" when autoplay is disabled', () => {
    const { html } = toHtml({ slides, autoplay: false }, '');
    expect(html).toContain('aria-live="polite"');
  });

  test('manual navigation (next/prev/dot) marks the live region "polite"', () => {
    const { html } = toHtml({ slides, autoplay: true }, '');
    expect(html).toMatch(/setAttribute\(["']aria-live["'],\s*["']polite["']\)/);
  });

  test('autoplay pauses on hover and resumes on mouse leave', () => {
    const { html } = toHtml({ slides, autoplay: true }, '');
    expect(html).toMatch(/addEventListener\(["']mouseenter["']/);
    expect(html).toMatch(/addEventListener\(["']mouseleave["']/);
  });

  test('autoplay pauses when the tab is hidden (visibilitychange) and the interval is clearable', () => {
    const { html } = toHtml({ slides, autoplay: true }, '');
    expect(html).toMatch(/visibilitychange/);
    expect(html).toMatch(/clearInterval\(/);
  });

  test('no autoplay: no setInterval/hover/visibility wiring at all', () => {
    const { html } = toHtml({ slides, autoplay: false }, '');
    expect(html).not.toMatch(/setInterval\(/);
    expect(html).not.toMatch(/visibilitychange/);
  });
});
