// @vitest-environment jsdom
import { describe, it, expect, afterEach } from 'vitest';
import { render, screen, cleanup, fireEvent } from '@testing-library/react';
import ScannerTips from '../../components/scanner/ScannerTips';

const TIP_LEADS = [
  'Good lighting',
  'Fill the frame',
  'Hold still',
  'Use Batch Scan',
  'Switch camera',
];

const TIP_BODIES = [
  'avoid glare on foil cards.',
  'with one card; keep corners visible.',
  'until Auto-detect locks the match.',
  'for a pile of photos from your gallery.',
  'if the image is dark or mirrored.',
];

describe('ScannerTips', () => {
  afterEach(() => cleanup());

  it('opens the modal when the trigger is clicked', () => {
    render(<ScannerTips />);

    expect(screen.queryByRole('dialog')).toBeNull();

    fireEvent.click(screen.getByRole('button', { name: 'Scanner Tips' }));

    expect(screen.getByRole('dialog')).toBeTruthy();
    expect(screen.getByRole('heading', { name: 'Scanner Tips' })).toBeTruthy();
  });

  it('lists all five locked tips when open', () => {
    render(<ScannerTips />);

    fireEvent.click(screen.getByRole('button', { name: 'Scanner Tips' }));

    for (const lead of TIP_LEADS) {
      expect(screen.getByText(lead, { selector: 'strong' })).toBeTruthy();
    }
    for (const body of TIP_BODIES) {
      expect(screen.getByText(body, { exact: false })).toBeTruthy();
    }
    expect(screen.getAllByRole('listitem')).toHaveLength(5);
  });

  it('dismisses the modal when the close control is clicked', () => {
    render(<ScannerTips />);

    fireEvent.click(screen.getByRole('button', { name: 'Scanner Tips' }));
    expect(screen.getByRole('dialog')).toBeTruthy();

    fireEvent.click(screen.getByRole('button', { name: 'Close' }));

    expect(screen.queryByRole('dialog')).toBeNull();
  });
});