import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import React from 'react';
import { MapFeatureList } from './map-feature-list';

const features = [
  { id: 'porto-alegre', label: 'Porto Alegre', description: '874 atendimentos' },
  { id: 'caxias-do-sul', label: 'Caxias do Sul', description: '412 atendimentos' },
  {
    id: 'pelotas',
    label: 'Pelotas',
    description: '233 atendimentos',
    precision: 'centroid' as const,
    precisionLabel: 'posição no centroide municipal',
  },
];

describe('MapFeatureList', () => {
  it('renders the map content as a listbox', () => {
    render(<MapFeatureList features={features} onSelect={() => {}} />);

    expect(screen.getByRole('listbox', { name: 'Map features' })).toBeInTheDocument();
    expect(screen.getAllByRole('option')).toHaveLength(3);
  });

  it('marks the selected feature', () => {
    render(<MapFeatureList features={features} selectedId="pelotas" onSelect={() => {}} />);

    expect(screen.getByRole('option', { name: /Pelotas/ })).toHaveAttribute(
      'aria-selected',
      'true'
    );
  });

  it('reports a click', () => {
    const onSelect = vi.fn();
    render(<MapFeatureList features={features} onSelect={onSelect} />);

    fireEvent.click(screen.getByRole('option', { name: /Caxias do Sul/ }));
    expect(onSelect).toHaveBeenCalledWith('caxias-do-sul');
  });

  it('keeps the whole list to one tab stop', () => {
    render(<MapFeatureList features={features} onSelect={() => {}} />);

    const options = screen.getAllByRole('option');
    // Roving tabindex: exactly one option is reachable by Tab.
    expect(options.filter(o => o.getAttribute('tabindex') === '0')).toHaveLength(1);
  });

  it('moves through the list with the arrow keys', () => {
    render(<MapFeatureList features={features} onSelect={() => {}} />);

    const listbox = screen.getByRole('listbox');
    fireEvent.keyDown(listbox, { key: 'ArrowDown' });

    expect(screen.getAllByRole('option')[1]).toHaveFocus();
  });

  it('selects with Enter and clears with Escape', () => {
    const onSelect = vi.fn();
    render(<MapFeatureList features={features} onSelect={onSelect} />);

    const listbox = screen.getByRole('listbox');

    fireEvent.keyDown(listbox, { key: 'Enter' });
    expect(onSelect).toHaveBeenLastCalledWith('porto-alegre');

    fireEvent.keyDown(listbox, { key: 'Escape' });
    expect(onSelect).toHaveBeenLastCalledWith(null);
  });

  it('jumps to the ends with Home and End', () => {
    render(<MapFeatureList features={features} onSelect={() => {}} />);
    const listbox = screen.getByRole('listbox');

    fireEvent.keyDown(listbox, { key: 'End' });
    expect(screen.getAllByRole('option')[2]).toHaveFocus();

    fireEvent.keyDown(listbox, { key: 'Home' });
    expect(screen.getAllByRole('option')[0]).toHaveFocus();
  });

  it('surfaces an approximate position rather than hiding it', () => {
    render(<MapFeatureList features={features} onSelect={() => {}} />);
    expect(screen.getByText('posição no centroide municipal')).toBeInTheDocument();
  });

  it('says so when there is nothing to list', () => {
    render(<MapFeatureList features={[]} onSelect={() => {}} />);
    expect(screen.getByText('No features to list')).toBeInTheDocument();
  });

  it('follows a selection made on the map', () => {
    const { rerender } = render(
      <MapFeatureList features={features} selectedId={null} onSelect={() => {}} />
    );

    rerender(<MapFeatureList features={features} selectedId="pelotas" onSelect={() => {}} />);

    // The two-way link: selecting on the map moves the list's active row.
    expect(screen.getAllByRole('option')[2]).toHaveAttribute('tabindex', '0');
  });
});