ulweb/web/components/map/google/GoogleJobMap.tsx

/// <reference types="google.maps" />
import { APIProvider, Map as GoogleMap, useMap } from '@vis.gl/react-google-maps';
import { useEffect, useRef } from 'react';
import { JobMapProps, MapPoint, pointSummary, UTILITY_COLORS } from '../types';

const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '';

const DEFAULT_CENTER = { lat: 39.5, lng: -98.35 }; // continental US
const DEFAULT_ZOOM = 4;

function colorFor(utilityType: string): string {
  return UTILITY_COLORS[utilityType] ?? UTILITY_COLORS.UNKNOWN;
}

function orderKey(p: MapPoint): number {
  return p.sequence ?? new Date(p.recordedAt).getTime();
}

// Draws points as colored circles plus one polyline per utility run.
// Imperative overlays (google.maps.Marker/Polyline) are used because
// @vis.gl/react-google-maps has no polyline component.
function PointsLayer({ points, fitBounds }: { points: MapPoint[]; fitBounds: boolean }) {
  const map = useMap();
  const overlaysRef = useRef<{ setMap: (m: google.maps.Map | null) => void }[]>([]);
  const fittedCountRef = useRef(0);

  useEffect(() => {
    if (!map) {
      return;
    }

    overlaysRef.current.forEach((o) => o.setMap(null));
    overlaysRef.current = [];
    if (points.length === 0) {
      return;
    }

    const byUtility = new Map<string, MapPoint[]>();
    for (const p of points) {
      const group = byUtility.get(p.utilityType) ?? [];
      group.push(p);
      byUtility.set(p.utilityType, group);
    }

    for (const [utility, group] of byUtility) {
      const sorted = [...group].sort((a, b) => orderKey(a) - orderKey(b));
      const color = colorFor(utility);

      const line = new google.maps.Polyline({
        path: sorted.map((p) => ({ lat: p.lat, lng: p.lng })),
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 3,
        map,
      });
      overlaysRef.current.push(line);

      for (const p of sorted) {
        const marker = new google.maps.Marker({
          position: { lat: p.lat, lng: p.lng },
          map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 5,
            fillColor: color,
            fillOpacity: 1,
            strokeColor: '#ffffff',
            strokeWeight: 1.5,
          },
          title: `${pointSummary(p)}\n${new Date(p.recordedAt).toLocaleString()}`,
        });
        overlaysRef.current.push(marker);
      }
    }

    if (fitBounds && points.length !== fittedCountRef.current) {
      fittedCountRef.current = points.length;
      const bounds = new google.maps.LatLngBounds();
      points.forEach((p) => bounds.extend({ lat: p.lat, lng: p.lng }));
      map.fitBounds(bounds, 48);
    }
  }, [map, points, fitBounds]);

  return null;
}

export default function GoogleJobMap({ points, fitBounds = true, heightPx = 480 }: JobMapProps) {
  if (!API_KEY) {
    return (
      <div
        style={{
          height: heightPx,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          border: '1px dashed #999',
          borderRadius: 8,
          color: '#666',
        }}
      >
        Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY in .env to enable the map.
      </div>
    );
  }

  return (
    <div style={{ height: heightPx, borderRadius: 8, overflow: 'hidden' }}>
      <APIProvider apiKey={API_KEY}>
        <GoogleMap
          defaultCenter={points[0] ? { lat: points[0].lat, lng: points[0].lng } : DEFAULT_CENTER}
          defaultZoom={points[0] ? 18 : DEFAULT_ZOOM}
          mapTypeId="hybrid"
          gestureHandling="greedy"
        >
          <PointsLayer points={points} fitBounds={fitBounds} />
        </GoogleMap>
      </APIProvider>
    </div>
  );
}