import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import CaseStudyList from './CaseStudyListing';
import {
  centerAndResetMapZoom,
  scrollToElement,
  zoomMapToFeatures,
} from './utils';
import { createMockMap, createMockPointsSource } from './testUtils';

jest.mock('@eeacms/volto-openlayers-map', () => ({
  withOpenLayers: (Component) => Component,
}));

jest.mock('./utils', () => ({
  centerAndResetMapZoom: jest.fn(),
  scrollToElement: jest.fn(),
  zoomMapToFeatures: jest.fn(),
}));

const mockMap = createMockMap();
const mockPointsSource = createMockPointsSource([
  {
    values_: {
      title: 'Feature 1',
      path: '/feature1',
      description: 'Description 1',
      typology_of_measures: ['SectorA'],
      measures_implemented: [{ title: 'M1', path: '/m1' }],
      geometry: { flatCoordinates: [0, 0] },
    },
  },
]);

const selectedCase = {
  title: 'Selected Title',
  path: '/selected',
  description: 'Selected description',
  typology_of_measures: ['S1', 'S2'],
  measures_implemented: [{ title: 'M1', path: '/m1' }],
};

describe('CaseStudyList', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders empty state when no features', () => {
    const emptyPointsSource = { getFeatures: () => [] };
    const { getByText } = render(
      <CaseStudyList
        selectedCase={null}
        onSelectedCase={jest.fn()}
        pointsSource={emptyPointsSource}
        searchInput=""
        ol={{}}
      />,
    );

    expect(
      getByText('We could not find any results for your search criteria'),
    ).toBeInTheDocument();
    expect(getByText('check the selected filters')).toBeInTheDocument();
  });

  it('renders selectedCase details', () => {
    const { getByText } = render(
      <CaseStudyList
        selectedCase={selectedCase}
        onSelectedCase={jest.fn()}
        pointsSource={mockPointsSource}
        map={mockMap}
        searchInput=""
        ol={{}}
      />,
    );

    expect(getByText('Selected Title')).toBeInTheDocument();
    expect(getByText('Selected description')).toBeInTheDocument();
    // Note: Sectors and NWRMs sections are commented out in the component
    // So we only check the title and description render
  });

  it('calls reset map utils when clicking Reset map', () => {
    const { getByTestId } = render(
      <CaseStudyList
        selectedCase={selectedCase}
        onSelectedCase={jest.fn()}
        pointsSource={mockPointsSource}
        map={mockMap}
        searchInput=""
        ol={{}}
      />,
    );

    fireEvent.click(getByTestId('reset-map'));

    expect(scrollToElement).toHaveBeenCalledWith('search-input');
    expect(centerAndResetMapZoom).toHaveBeenCalledWith({
      map: mockMap,
      ol: {},
    });
  });

  it('renders features and highlights search term', () => {
    const { getByText } = render(
      <CaseStudyList
        selectedCase={null}
        onSelectedCase={jest.fn()}
        pointsSource={mockPointsSource}
        map={mockMap}
        searchInput="match"
        ol={{}}
      />,
    );

    expect(getByText('Feature 1')).toBeInTheDocument();
    expect(getByText('Feature 1').getAttribute('href')).toBe('/feature1');
  });

  it('calls zoomMapToFeatures and onSelectedCase when clicking Show on map', async () => {
    const onSelectedCase = jest.fn();

    const { getByText } = render(
      <CaseStudyList
        selectedCase={null}
        onSelectedCase={onSelectedCase}
        pointsSource={mockPointsSource}
        map={mockMap}
        searchInput=""
        ol={{}}
      />,
    );

    fireEvent.click(getByText('Show on map'));

    expect(scrollToElement).toHaveBeenCalledWith('ol-map-container');
    expect(zoomMapToFeatures).toHaveBeenCalled();
    expect(onSelectedCase).toHaveBeenCalled();
  });
});