goodgo-platform/apps/web/components/khu-cong-nghiep/park-map.tsx

'use client';

/* eslint-disable import-x/no-named-as-default-member */
import mapboxgl from 'mapbox-gl';
import * as React from 'react';
import 'mapbox-gl/dist/mapbox-gl.css';
import {
  type IndustrialParkListItem,
  PARK_STATUS_LABELS,
  PARK_STATUS_COLORS,
} from '@/lib/khu-cong-nghiep-api';

interface ParkMapProps {
  parks: IndustrialParkListItem[];
  className?: string;
}

const DEFAULT_CENTER: [number, number] = [106.6297, 10.8231]; // HCMC
const DEFAULT_ZOOM = 6;

export function ParkMap({ parks, className }: ParkMapProps) {
  const mapContainerRef = React.useRef<HTMLDivElement>(null);
  const mapRef = React.useRef<mapboxgl.Map | null>(null);
  const markersRef = React.useRef<mapboxgl.Marker[]>([]);

  const geoParks = React.useMemo(
    () => parks.filter((p) => p.latitude != null && p.longitude != null),
    [parks],
  );

  React.useEffect(() => {
    if (!mapContainerRef.current) return;

    const token = process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
    if (!token) return;

    mapboxgl.accessToken = token;

    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v12',
      center: DEFAULT_CENTER,
      zoom: DEFAULT_ZOOM,
      attributionControl: false,
    });

    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
    map.addControl(new mapboxgl.AttributionControl({ compact: true }), 'bottom-right');

    mapRef.current = map;

    return () => {
      map.remove();
      mapRef.current = null;
    };
  }, []);

  React.useEffect(() => {
    const map = mapRef.current;
    if (!map) return;

    markersRef.current.forEach((m) => m.remove());
    markersRef.current = [];

    if (geoParks.length === 0) return;

    const bounds = new mapboxgl.LngLatBounds();

    geoParks.forEach((park) => {
      const el = document.createElement('div');
      el.className = 'park-map-marker';
      el.style.cssText = `
        background: white;
        border-radius: 8px;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        white-space: nowrap;
        cursor: pointer;
        border-left: 3px solid hsl(221.2, 83.2%, 53.3%);
        transition: transform 0.15s;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
      `;
      el.textContent = park.name;
      el.addEventListener('mouseenter', () => {
        el.style.transform = 'scale(1.05)';
      });
      el.addEventListener('mouseleave', () => {
        el.style.transform = 'scale(1)';
      });

      const statusLabel = PARK_STATUS_LABELS[park.status];
      const statusColorClass = PARK_STATUS_COLORS[park.status];
      const bgColor = statusColorClass.includes('green') ? '#dcfce7' :
                      statusColorClass.includes('amber') ? '#fef3c7' :
                      statusColorClass.includes('red') ? '#fee2e2' :
                      '#dbeafe';
      const textColor = statusColorClass.includes('green') ? '#166534' :
                        statusColorClass.includes('amber') ? '#92400e' :
                        statusColorClass.includes('red') ? '#991b1b' :
                        '#1e40af';

      const rentText = park.landRentUsdM2Year
        ? `$${park.landRentUsdM2Year}/m²/năm`
        : 'Liên hệ';

      const popup = new mapboxgl.Popup({ offset: 15, maxWidth: '260px', closeButton: false })
        .setHTML(
          `<div style="font-family:system-ui,sans-serif;padding:4px 0;">
            <p style="font-weight:600;font-size:13px;margin:0 0 4px;">${park.name}</p>
            <p style="font-size:12px;color:#666;margin:0 0 4px;">${park.province} &middot; ${park.totalAreaHa.toLocaleString()} ha</p>
            <p style="font-size:12px;margin:0 0 4px;">
              <span style="background:${bgColor};color:${textColor};padding:2px 6px;border-radius:4px;">${statusLabel}</span>
              <span style="margin-left:4px;font-weight:600;color:hsl(221.2,83.2%,53.3%);">${rentText}</span>
            </p>
            <p style="font-size:12px;color:#666;margin:0 0 4px;">Lấp đầy: ${park.occupancyRate}% &middot; ${park.tenantCount} DN</p>
            <a href="/khu-cong-nghiep/${park.slug}" style="font-size:12px;color:hsl(221.2,83.2%,53.3%);text-decoration:none;">Xem chi tiết →</a>
          </div>`,
        );

      const marker = new mapboxgl.Marker({ element: el, anchor: 'left' })
        .setLngLat([park.longitude, park.latitude])
        .setPopup(popup)
        .addTo(map);

      markersRef.current.push(marker);
      bounds.extend([park.longitude, park.latitude]);
    });

    if (geoParks.length > 1) {
      map.fitBounds(bounds, { padding: 60, maxZoom: 13 });
    } else {
      map.flyTo({ center: [geoParks[0]!.longitude, geoParks[0]!.latitude], zoom: 14 });
    }
  }, [geoParks]);

  const hasToken = typeof process !== 'undefined' && process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];

  return (
    <div className={`relative overflow-hidden rounded-lg border ${className || 'h-[400px] md:h-[500px]'}`}>
      <div ref={mapContainerRef} className="h-full w-full" />

      {!hasToken && (
        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-b from-blue-50 to-green-50">
          <p className="text-sm text-muted-foreground">
            Thiết lập NEXT_PUBLIC_MAPBOX_TOKEN để hiển thị bản đồ
          </p>
        </div>
      )}

      <div className="absolute bottom-3 left-3 rounded bg-white/90 px-2 py-1 text-xs text-muted-foreground shadow">
        {geoParks.length} KCN trên bản đồ
      </div>
    </div>
  );
}