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

vi.mock('mapbox-gl', () => {
  class MockMap {
    addControl = vi.fn();
    fitBounds = vi.fn();
    flyTo = vi.fn();
    setStyle = vi.fn();
    remove = vi.fn();
    on = vi.fn();
  }
  class MockNavigationControl {}
  class MockAttributionControl {}
  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,
      AttributionControl: MockAttributionControl,
      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' }));
vi.mock('@/lib/khu-cong-nghiep-api', () => ({
  PARK_STATUS_LABELS: { OPERATIONAL: 'Hoạt động' },
  PARK_STATUS_COLORS: { OPERATIONAL: 'bg-green-100 text-green-800' },
}));

import { ParkMap } from '../park-map';

const parks = [
  { id: 'ip1', name: 'KCN A', slug: 'kcn-a', status: 'OPERATIONAL' as const, province: 'Bình Dương', totalAreaHa: 500, occupancyRate: 80, tenantCount: 50, landRentUsdM2Year: '55', latitude: 10.8, longitude: 106.6 },
] as never[];

describe('ParkMap', () => {
  it('renders fallback when no token', () => {
    delete (process.env as Record<string, string | undefined>)['NEXT_PUBLIC_MAPBOX_TOKEN'];
    render(<ParkMap parks={[]} />);
    expect(screen.getByText(/NEXT_PUBLIC_MAPBOX_TOKEN/)).toBeInTheDocument();
  });

  it('shows park count overlay', () => {
    render(<ParkMap parks={parks} />);
    expect(screen.getByText(/1 KCN trên bản đồ/)).toBeInTheDocument();
  });

  it('shows 0 parks when empty', () => {
    render(<ParkMap parks={[]} />);
    expect(screen.getByText(/0 KCN trên bản đồ/)).toBeInTheDocument();
  });
});