goodgo-platform/apps/web/components/neighborhood/neighborhood-poi-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 { useMapboxStyle } from '@/lib/mapbox-style';
import { cn } from '@/lib/utils';
import { type POIItem, type POICategory, POI_CATEGORY_CONFIG  } from './types';

/**
 * Hard-coded inline SVG markup for the 6 POI categories. Sourced from
 * lucide-react (same icons referenced in POI_CATEGORY_CONFIG). Used to render
 * the Lucide glyph inside Mapbox marker DOM where we can't mount a React tree.
 */
const POI_MARKER_SVG: Record<POICategory, string> = {
  school:
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"/><path d="M22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/></svg>',
  hospital:
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 2v2"/><path d="M5 2v2"/><path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"/><path d="M8 15a6 6 0 0 0 12 0v-3"/><circle cx="20" cy="10" r="2"/></svg>',
  transit:
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3.1V7a4 4 0 0 0 8 0V3.1"/><path d="m9 15-1-1"/><path d="m15 15 1-1"/><path d="M9 19c-2.8 0-5-2.2-5-5v-4a8 8 0 0 1 16 0v4c0 2.8-2.2 5-5 5Z"/><path d="m8 19-2 3"/><path d="m16 19 2 3"/></svg>',
  shopping:
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg>',
  restaurant:
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8"/><path d="M15 15 3.3 3.3a4.2 4.2 0 0 0 0 6l7.3 7.3c.7.7 2 .7 2.8 0L15 15Zm0 0 7 7"/><path d="m2.1 21.8 6.4-6.3"/><path d="m19 5-7 7"/></svg>',
  park:
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"/><path d="M7 16v6"/><path d="M13 19v3"/><path d="M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"/></svg>',
};

interface NeighborhoodPOIMapProps {
  center: { lat: number; lng: number };
  pois: POIItem[];
  zoom?: number;
  height?: string;
  className?: string;
}

export function NeighborhoodPOIMap({
  center,
  pois,
  zoom = 14,
  height = '400px',
  className,
}: NeighborhoodPOIMapProps) {
  const mapContainerRef = React.useRef<HTMLDivElement>(null);
  const mapRef = React.useRef<mapboxgl.Map | null>(null);
  const markersRef = React.useRef<mapboxgl.Marker[]>([]);
  const mapStyle = useMapboxStyle();

  const [activeCategories, setActiveCategories] = React.useState<Set<POICategory>>(
    () => new Set(Object.keys(POI_CATEGORY_CONFIG) as POICategory[]),
  );

  const toggleCategory = React.useCallback((category: POICategory) => {
    setActiveCategories((prev) => {
      const next = new Set(prev);
      if (next.has(category)) {
        next.delete(category);
      } else {
        next.add(category);
      }
      return next;
    });
  }, []);

  // Initialize map
  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: mapStyle,
      center: [center.lng, center.lat],
      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;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Sync style changes with theme
  React.useEffect(() => {
    const map = mapRef.current;
    if (!map) return;
    map.setStyle(mapStyle);
  }, [mapStyle]);

  // Update center when prop changes
  React.useEffect(() => {
    mapRef.current?.flyTo({ center: [center.lng, center.lat], zoom });
  }, [center, zoom]);

  // Render POI markers based on active categories
  React.useEffect(() => {
    const map = mapRef.current;
    if (!map) return;

    // Clear existing markers
    markersRef.current.forEach((m) => m.remove());
    markersRef.current = [];

    const visiblePois = pois.filter((poi) => activeCategories.has(poi.category));

    visiblePois.forEach((poi) => {
      const config = POI_CATEGORY_CONFIG[poi.category];

      // Mapbox Marker writes its own `transform: translate(Xpx, Ypx)…` on
      // the element it's given. If we mutate `el.style.transform` (e.g. to
      // scale on hover), it clobbers the translate and the marker snaps to
      // (0, 0). Wrap the visible circle in an INNER div and scale that
      // instead, leaving Mapbox's outer transform untouched.
      const el = document.createElement('div');
      el.className = 'poi-marker';
      el.style.cssText = `width: 32px; height: 32px; cursor: pointer;`;
      el.title = `${poi.name} (${config.label})`;

      const inner = document.createElement('div');
      inner.style.cssText = `
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: ${config.color};
        border: 2px solid white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s;
        transform: scale(1);
        pointer-events: none;
      `;
      inner.innerHTML = POI_MARKER_SVG[poi.category];
      el.appendChild(inner);

      el.addEventListener('mouseenter', () => {
        inner.style.transform = 'scale(1.3)';
      });
      el.addEventListener('mouseleave', () => {
        inner.style.transform = 'scale(1)';
      });

      const popup = new mapboxgl.Popup({ offset: 20, closeButton: true, closeOnClick: true })
        .setHTML(
          `<div style="font-family:system-ui,sans-serif;background:hsl(var(--card));color:hsl(var(--card-foreground));padding:8px;border-radius:6px;">
            <p style="font-weight:600;font-size:13px;margin:0 0 2px;">${poi.name}</p>
            <p style="font-size:12px;color:hsl(var(--muted-foreground));margin:0;">${config.label}${poi.distance ? ` · ${poi.distance}m` : ''}</p>
          </div>`,
        );

      const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
        .setLngLat([poi.lng, poi.lat])
        .setPopup(popup)
        .addTo(map);

      markersRef.current.push(marker);
    });
  }, [pois, activeCategories]);

  // Add property center marker
  React.useEffect(() => {
    const map = mapRef.current;
    if (!map) return;

    const el = document.createElement('div');
    el.style.cssText = `
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: hsl(var(--primary));
      border: 3px solid hsl(var(--card));
      box-shadow: 0 0 0 2px hsl(var(--primary)), 0 2px 8px rgba(0,0,0,0.3);
    `;

    const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
      .setLngLat([center.lng, center.lat])
      .addTo(map);

    return () => {
      marker.remove();
    };
  }, [center]);

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

  const allCategories = Object.entries(POI_CATEGORY_CONFIG) as [
    POICategory,
    (typeof POI_CATEGORY_CONFIG)[POICategory],
  ][];

  return (
    <div className={cn('relative overflow-hidden rounded-lg border', className)}>
      <div ref={mapContainerRef} style={{ height }} className="w-full" />

      {/* Layer toggle controls */}
      <div className="absolute left-3 top-3 flex flex-col gap-1.5">
        {allCategories.map(([key, config]) => {
          const isActive = activeCategories.has(key);
          const poiCount = pois.filter((p) => p.category === key).length;
          return (
            <button
              key={key}
              type="button"
              onClick={() => toggleCategory(key)}
              className={cn(
                'flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium shadow-sm transition-all',
                isActive
                  ? 'bg-card text-card-foreground ring-1 ring-inset ring-border'
                  : 'bg-card/60 text-muted-foreground line-through ring-1 ring-inset ring-transparent',
              )}
              title={`${isActive ? 'Ẩn' : 'Hiện'} ${config.label}`}
            >
              <config.icon className="h-3.5 w-3.5" aria-hidden="true" />
              <span>{config.label}</span>
              {poiCount > 0 && (
                <span
                  className={cn(
                    'ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold',
                    isActive
                      ? 'bg-primary/10 text-primary'
                      : 'bg-muted text-muted-foreground',
                  )}
                >
                  {poiCount}
                </span>
              )}
            </button>
          );
        })}
      </div>

      {/* Fallback when no Mapbox token */}
      {!hasToken && (
        <div
          className="absolute inset-0 flex items-center justify-center bg-gradient-to-b from-blue-50 to-green-50"
          style={{ height }}
        >
          <div className="text-center">
            <svg
              className="mx-auto mb-2 h-10 w-10 text-muted-foreground"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
              />
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
              />
            </svg>
            <p className="text-sm text-muted-foreground">
              Thiết lập NEXT_PUBLIC_MAPBOX_TOKEN để hiển thị bản đồ POI
            </p>
          </div>
        </div>
      )}
    </div>
  );
}