import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import type { HeatmapPoint } from '../district-heatmap';

vi.mock('mapbox-gl', () => {
  class MockMap {
    addControl = vi.fn();
    fitBounds = vi.fn();
    setStyle = vi.fn();
    remove = vi.fn();
    on = vi.fn();
  }
  class MockNavigationControl {}
  class MockMarker {
    setLngLat() { return this; }
    setPopup() { return this; }
    addTo() { return this; }
    remove() {}
  }
  class MockPopup {
    setHTML() { return this; }
    setLngLat() { return this; }
    addTo() { return this; }
    remove() {}
  }
  class MockLngLatBounds {
    extend() { return this; }
    isEmpty() { return false; }
  }
  return {
    default: {
      accessToken: '',
      Map: MockMap,
      NavigationControl: MockNavigationControl,
      Marker: MockMarker,
      Popup: MockPopup,
      LngLatBounds: MockLngLatBounds,
    },
  };
});
vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}));
vi.mock('@/lib/mapbox-style', () => ({
  useMapboxStyle: () => 'mapbox://styles/mapbox/light-v11',
  MAPBOX_STYLE_DARK: 'mapbox://styles/mapbox/dark-v11',
}));

import { DistrictHeatmap } from '../district-heatmap';

const sampleData: HeatmapPoint[] = [
  { district: 'Quan 1', avgPriceM2: 80_000_000, totalListings: 120, medianPrice: '7500000000' },
  { district: 'Quan 7', avgPriceM2: 45_000_000, totalListings: 85, medianPrice: '4500000000' },
];

describe('DistrictHeatmap', () => {
  it('renders the map container', () => {
    render(<DistrictHeatmap data={sampleData} city="Ho Chi Minh" />);
    // Legend is always visible
    expect(screen.getByText('Giá trung bình/m²')).toBeInTheDocument();
  });

  it('shows token missing fallback when NEXT_PUBLIC_MAPBOX_TOKEN is absent', () => {
    delete (process.env as Record<string, string | undefined>)['NEXT_PUBLIC_MAPBOX_TOKEN'];
    render(<DistrictHeatmap data={[]} city="Ho Chi Minh" />);
    expect(screen.getByText(/NEXT_PUBLIC_MAPBOX_TOKEN/)).toBeInTheDocument();
  });

  it('renders legend labels', () => {
    render(<DistrictHeatmap data={sampleData} city="Ho Chi Minh" />);
    expect(screen.getByText('Thấp')).toBeInTheDocument();
    expect(screen.getByText('Cao')).toBeInTheDocument();
  });

  it('accepts optional className', () => {
    const { container } = render(
      <DistrictHeatmap data={sampleData} city="Ho Chi Minh" className="h-[600px]" />,
    );
    expect(container.firstChild).toHaveClass('h-[600px]');
  });
});