trails/apps/planner/app/components/PlannerMap.tsx

import { useState, useCallback, useRef } from "react";
import { MapContainer, TileLayer, LayersControl, Marker, Polyline } from "react-leaflet";
import L from "leaflet";
import { useTranslation } from "react-i18next";
import type { DayStage } from "@trails-cool/gpx";
import type { YjsState } from "~/lib/use-yjs";
import { baseLayers, overlayLayers } from "@trails-cool/map";
import { setOvernight } from "~/lib/overnight";
import { usePois } from "~/lib/use-pois";
import { useProfileDefaults } from "~/lib/use-profile-defaults";
import { useYjsPoiSync } from "~/lib/use-yjs-poi-sync";
import { Z_WAYPOINT, Z_WAYPOINT_HIGHLIGHTED, Z_HIGHLIGHT } from "@trails-cool/map-core";
import { NoGoAreaLayer } from "./NoGoAreaLayer";
import { ColoredRoute } from "./ColoredRoute";
import { RouteInteraction } from "./RouteInteraction";
import { PoiPanel, PoiMarkers } from "./PoiPanel";
import { WaypointContextMenu } from "./WaypointContextMenu";
import {
  MapExposer,
  RouteFitter,
  MapClickHandler,
  CursorTracker,
  NoGoAreaButton,
  OverlaySync,
  PoiRefresher,
} from "./MapHelpers";
import { useWaypointManager } from "~/lib/use-waypoint-manager";
import { useGpxDrop } from "~/lib/use-gpx-drop";
import "leaflet/dist/leaflet.css";

function waypointIcon(index: number, overnight?: boolean, highlighted?: boolean): L.DivIcon {
  const bg = overnight ? "#8B6D3A" : "#2563eb";
  const scale = highlighted ? "scale(1.17)" : "scale(1)";
  return L.divIcon({
    className: "",
    html: `<div style="
      width:24px;height:24px;border-radius:50%;
      background:${bg};color:white;
      display:flex;align-items:center;justify-content:center;
      font-size:12px;font-weight:600;
      border:2px solid white;box-shadow:0 1px 4px rgba(0,0,0,0.3);
      transform:translate(-12px,-12px) ${scale};
      transition:transform 0.2s ease;
    ">${overnight ? "☾" : index + 1}</div>`,
    iconSize: [0, 0],
  });
}

function dayLabelIcon(dayNumber: number, distanceKm: string): L.DivIcon {
  return L.divIcon({
    className: "",
    html: `<div style="position:absolute;left:50%;transform:translate(-50%,-40px);">
      <div style="
        background:white;color:#1f2937;
        padding:1px 6px;border-radius:8px;
        font-size:10px;font-weight:600;white-space:nowrap;
        box-shadow:0 1px 3px rgba(0,0,0,0.15);
      ">Day ${dayNumber} · ${distanceKm} km</div>
    </div>`,
    iconSize: [0, 0],
  });
}

interface PlannerMapProps {
  yjs: YjsState;
  sessionId: string;
  onRouteRequest?: (waypoints: { lat: number; lon: number; name?: string; overnight: boolean }[]) => void;
  onImportError?: (message: string) => void;
  highlightPosition?: [number, number] | null;
  highlightedWaypoint?: number | null;
  onRouteHover?: (distance: number | null) => void;
  days?: DayStage[];
}

export function PlannerMap({ yjs, sessionId, onRouteRequest, highlightPosition, highlightedWaypoint, onRouteHover, onImportError, days }: PlannerMapProps) {
  const { t } = useTranslation("planner");
  const poiState = usePois(sessionId);
  useProfileDefaults(yjs, poiState);
  useYjsPoiSync(yjs, poiState);
  const [enabledOverlays, setEnabledOverlays] = useState<string[]>([]);
  const [selectedBaseLayer, setSelectedBaseLayer] = useState<string>(baseLayers[0]!.name);
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; index: number } | null>(null);
  const [noGoDrawing, setNoGoDrawing] = useState(false);
  const toggleNoGoDraw = useCallback(() => setNoGoDrawing((v) => !v), []);
  const suppressMapClickRef = useRef(false);
  const routeInteractionSuspendedRef = useRef(false);
  const waypointDraggingRef = useRef(false);

  const {
    waypoints,
    routeCoordinates,
    segmentBoundaries,
    surfaces,
    highways,
    maxspeeds,
    smoothnesses,
    tracktypes,
    cycleways,
    bikeroutes,
    colorMode,
    addWaypoint,
    handleRouteInsert,
    moveWaypoint,
    deleteWaypoint,
    handleRoutePolylineHover,
  } = useWaypointManager(yjs, poiState, suppressMapClickRef, onRouteRequest);

  const { draggingOver, handleDragEnter, handleDragLeave, handleDragOver, handleDrop } = useGpxDrop(yjs, onImportError);

  const handleRoutePolylineOut = useCallback(() => {
    onRouteHover?.(null);
  }, [onRouteHover]);

  return (
    <div
      className="relative h-full w-full"
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
    >
      {draggingOver && (
        <div className="absolute inset-0 z-[2000] flex items-center justify-center bg-blue-500/20 backdrop-blur-sm">
          <div className="rounded-xl bg-white px-8 py-6 text-lg font-medium text-blue-600 shadow-lg">
            {t("dropGpxHere")}
          </div>
        </div>
      )}
      <MapContainer center={[50.1, 10.0]} zoom={6} className="h-full w-full">
        <LayersControl position="topright">
          {baseLayers.map((layer) => (
            <LayersControl.BaseLayer key={layer.name} checked={layer.name === selectedBaseLayer} name={layer.name}>
              <TileLayer url={layer.url} attribution={layer.attribution} maxZoom={layer.maxZoom} />
            </LayersControl.BaseLayer>
          ))}
          {overlayLayers.map((layer) => (
            <LayersControl.Overlay key={layer.id} checked={enabledOverlays.includes(layer.id)} name={layer.name}>
              <TileLayer url={layer.url} attribution={layer.attribution} maxZoom={layer.maxZoom} opacity={layer.opacity ?? 0.7} />
            </LayersControl.Overlay>
          ))}
        </LayersControl>

        <MapExposer />
        <OverlaySync yjs={yjs} onOverlayChange={setEnabledOverlays} onBaseLayerChange={setSelectedBaseLayer} />
        <RouteFitter coordinates={routeCoordinates} />
        <MapClickHandler onAdd={noGoDrawing ? () => {} : addWaypoint} suppressRef={suppressMapClickRef} />
        <CursorTracker awareness={yjs.awareness} />
        <NoGoAreaLayer noGoAreas={yjs.noGoAreas} doc={yjs.doc} enabled={noGoDrawing} onToggle={toggleNoGoDraw} />
        <NoGoAreaButton active={noGoDrawing} onClick={toggleNoGoDraw} />
        <PoiRefresher poiState={poiState} />
        <PoiMarkers poiState={poiState} onAddWaypoint={addWaypoint} />
        <PoiPanel poiState={poiState} />

        {waypoints.map((wp, i) => (
          <Marker
            key={i}
            position={[wp.lat, wp.lon]}
            draggable
            zIndexOffset={highlightedWaypoint === i ? Z_WAYPOINT_HIGHLIGHTED : Z_WAYPOINT}
            icon={waypointIcon(i, wp.overnight, highlightedWaypoint === i)}
            eventHandlers={{
              mouseover: () => { routeInteractionSuspendedRef.current = true; },
              mouseout: () => {
                if (!waypointDraggingRef.current) routeInteractionSuspendedRef.current = false;
              },
              dragstart: () => {
                waypointDraggingRef.current = true;
                yjs.undoManager.stopCapturing();
                routeInteractionSuspendedRef.current = true;
              },
              dragend: (e) => {
                waypointDraggingRef.current = false;
                routeInteractionSuspendedRef.current = false;
                const { lat, lng } = e.target.getLatLng();
                moveWaypoint(i, lat, lng);
              },
              contextmenu: (e) => {
                L.DomEvent.preventDefault(e as unknown as Event);
                const orig = e.originalEvent as MouseEvent;
                setContextMenu({ x: orig.clientX, y: orig.clientY, index: i });
              },
            }}
          />
        ))}

        {days && days.length > 1 && days.map((day) => {
          const wp = waypoints[day.endWaypointIndex];
          if (!wp || day.dayNumber === days.length) return null;
          return (
            <Marker
              key={`day-${day.dayNumber}`}
              position={[wp.lat, wp.lon]}
              icon={dayLabelIcon(day.dayNumber, (day.distance / 1000).toFixed(1))}
              interactive={false}
            />
          );
        })}

        {routeCoordinates && routeCoordinates.length >= 2 && (
          <>
            <ColoredRoute
              coordinates={routeCoordinates}
              colorMode={colorMode}
              surfaces={surfaces}
              highways={highways}
              maxspeeds={maxspeeds}
              smoothnesses={smoothnesses}
              tracktypes={tracktypes}
              cycleways={cycleways}
              bikeroutes={bikeroutes}
            />
            <RouteInteraction
              coordinates={routeCoordinates}
              segmentBoundaries={segmentBoundaries}
              onInsertWaypoint={handleRouteInsert}
              suspendedRef={routeInteractionSuspendedRef}
              disabled={noGoDrawing}
            />
            {onRouteHover && (
              <Polyline
                positions={routeCoordinates.map((c) => [c[1]!, c[0]!] as [number, number])}
                pathOptions={{ weight: 20, opacity: 0, interactive: true }}
                eventHandlers={{
                  mouseover: (e) => handleRoutePolylineHover(e, onRouteHover),
                  mousemove: (e) => handleRoutePolylineHover(e, onRouteHover),
                  mouseout: handleRoutePolylineOut,
                }}
              />
            )}
          </>
        )}

        {highlightPosition && (
          <Marker
            position={highlightPosition}
            zIndexOffset={Z_HIGHLIGHT}
            interactive={false}
            icon={L.divIcon({
              className: "",
              html: '<div style="width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.3);transform:translate(-6px,-6px)"></div>',
              iconSize: [0, 0],
            })}
          />
        )}
      </MapContainer>
      {contextMenu && (
        <WaypointContextMenu
          position={{ x: contextMenu.x, y: contextMenu.y }}
          isFirst={contextMenu.index === 0}
          isLast={contextMenu.index === waypoints.length - 1}
          isOvernight={waypoints[contextMenu.index]?.overnight ?? false}
          onDelete={() => deleteWaypoint(contextMenu.index)}
          onToggleOvernight={() => setOvernight(yjs, contextMenu.index, !waypoints[contextMenu.index]?.overnight)}
          onClose={() => setContextMenu(null)}
        />
      )}
    </div>
  );
}