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/currency', () => ({ formatPrice: (v: string | number) => `${v} VNĐ` }));
vi.mock('@/lib/du-an-api', () => ({
  PROJECT_STATUS_LABELS: { SELLING: 'Đang bán' },
  PROJECT_STATUS_COLORS: { SELLING: 'bg-green-100 text-green-800' },
}));

import { ProjectMap } from '../project-map';

const projects = [
  { id: 'p1', name: 'Vinhomes', slug: 'vinhomes', status: 'SELLING' as const, district: 'Q9', city: 'HCMC', minPrice: '2000000000', latitude: 10.84, longitude: 106.83 },
] as never[];

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

  it('shows project count overlay', () => {
    render(<ProjectMap projects={projects} />);
    expect(screen.getByText(/1 dự án trên bản đồ/)).toBeInTheDocument();
  });

  it('shows 0 projects when empty', () => {
    render(<ProjectMap projects={[]} />);
    expect(screen.getByText(/0 dự án trên bản đồ/)).toBeInTheDocument();
  });
});