import { render, screen, fireEvent } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { NeighborhoodPOIMap } from '../neighborhood-poi-map';
import type { POIItem } from '../types';

// Mock mapbox-gl
vi.mock('mapbox-gl', () => {
  const MockMap = vi.fn().mockImplementation(() => ({
    addControl: vi.fn(),
    remove: vi.fn(),
    flyTo: vi.fn(),
    on: vi.fn(),
  }));
  const MockMarker = vi.fn().mockImplementation(() => ({
    setLngLat: vi.fn().mockReturnThis(),
    setPopup: vi.fn().mockReturnThis(),
    addTo: vi.fn().mockReturnThis(),
    remove: vi.fn(),
  }));
  const MockPopup = vi.fn().mockImplementation(() => ({
    setHTML: vi.fn().mockReturnThis(),
    setLngLat: vi.fn().mockReturnThis(),
    addTo: vi.fn().mockReturnThis(),
    remove: vi.fn(),
  }));

  return {
    default: {
      Map: MockMap,
      Marker: MockMarker,
      Popup: MockPopup,
      NavigationControl: vi.fn(),
      AttributionControl: vi.fn(),
      accessToken: '',
    },
  };
});

vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}));

const samplePois: POIItem[] = [
  { id: '1', name: 'Trường THPT Nguyễn Du', category: 'school', lat: 10.82, lng: 106.63, distance: 200 },
  { id: '2', name: 'Bệnh viện Nhân dân 115', category: 'hospital', lat: 10.83, lng: 106.64, distance: 500 },
  { id: '3', name: 'Trạm Metro Bến Thành', category: 'transit', lat: 10.77, lng: 106.70, distance: 800 },
];

const center = { lat: 10.82, lng: 106.63 };

describe('NeighborhoodPOIMap', () => {
  it('renders map container', () => {
    const { container } = render(
      <NeighborhoodPOIMap center={center} pois={samplePois} />,
    );
    expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
  });

  it('renders all category toggle buttons', () => {
    render(<NeighborhoodPOIMap center={center} pois={samplePois} />);
    expect(screen.getByText('Trường học')).toBeInTheDocument();
    expect(screen.getByText('Bệnh viện')).toBeInTheDocument();
    expect(screen.getByText('Giao thông')).toBeInTheDocument();
    expect(screen.getByText('Mua sắm')).toBeInTheDocument();
    expect(screen.getByText('Nhà hàng')).toBeInTheDocument();
    expect(screen.getByText('Công viên')).toBeInTheDocument();
  });

  it('shows POI counts in toggle buttons', () => {
    render(<NeighborhoodPOIMap center={center} pois={samplePois} />);
    // school: 1, hospital: 1, transit: 1
    const buttons = screen.getAllByRole('button');
    expect(buttons.length).toBeGreaterThanOrEqual(6);
  });

  it('toggles category on click', () => {
    render(<NeighborhoodPOIMap center={center} pois={samplePois} />);
    const schoolBtn = screen.getByText('Trường học').closest('button')!;
    fireEvent.click(schoolBtn);
    // After clicking, it should be toggled off (line-through style applied)
    expect(schoolBtn.className).toContain('line-through');
  });

  it('shows fallback when no mapbox token', () => {
    const originalEnv = process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
    delete process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];

    render(<NeighborhoodPOIMap center={center} pois={samplePois} />);
    expect(screen.getByText(/NEXT_PUBLIC_MAPBOX_TOKEN/)).toBeInTheDocument();

    if (originalEnv) process.env['NEXT_PUBLIC_MAPBOX_TOKEN'] = originalEnv;
  });
});
