import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
import L from 'leaflet';
import { Loader2, MapPin, Navigation, AlertTriangle, LocateFixed, Play, Square, Crosshair, Volume2, VolumeX, Check } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import {
  getCurrentPosition,
  watchPosition,
  GeolocationError,
  type GeoCoords,
  type GeoWatch,
} from '@/lib/geolocation';
import { getLastLocation } from '@/lib/lastLocation';
import { saveRoute, loadRoute, formatAge } from '@/lib/routeCache';
import { createCachedTileLayer } from '@/lib/cachedTileLayer';
import { calculateDistance } from '@/lib/sortOptions';
import {
  fetchRoute,
  fetchTransitRoute,
  formatClock,
  formatDistance,
  formatDuration,
  TRAVEL_MODES,
  TRANSIT_ATTRIBUTION,
  ROUTE_ERR_BUSY,
  ROUTE_ERR_NO_ROUTE,
  skateTime,
  type TravelMode,
  type RouteResult,
} from '@/lib/routing';

// ─── Transit presentation helpers ────────────────────────────────────────────

/** Line colour for a transit leg, keyed by the MOTIS mode. */
function transitLegColor(mode: string): string {
  switch (mode) {
    case 'BUS': return '#22c55e';
    case 'TRAM': return '#eab308';
    case 'SUBWAY':
    case 'METRO': return '#3b82f6';
    case 'RAIL':
    case 'REGIONAL_RAIL':
    case 'REGIONAL_FAST_RAIL':
    case 'LONG_DISTANCE':
    case 'HIGHSPEED_RAIL':
    case 'NIGHT_RAIL':
    case 'SUBURBAN': return '#ef4444';
    case 'FERRY': return '#06b6d4';
    default: return '#ccff00';
  }
}

/** Emoji for a transit leg's mode. */
function transitModeEmoji(mode: string): string {
  switch (mode) {
    case 'BUS': return '🚌';
    case 'TRAM': return '🚊';
    case 'SUBWAY':
    case 'METRO': return '🚇';
    case 'RAIL':
    case 'REGIONAL_RAIL':
    case 'REGIONAL_FAST_RAIL':
    case 'LONG_DISTANCE':
    case 'HIGHSPEED_RAIL':
    case 'NIGHT_RAIL':
    case 'SUBURBAN': return '🚆';
    case 'FERRY': return '⛴️';
    case 'WALK': return '🚶';
    case 'BIKE': return '🚲';
    default: return '🚇';
  }
}

interface RouteDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Destination coordinates. */
  destination: { lat: number; lng: number } | null;
  /** Destination label shown in the header. */
  destinationLabel?: string;
}

/**
 * In-app routing dialog.
 *
 * Shows a self-contained Leaflet map with a route drawn from the user's current
 * location to a destination, with a foot/bike/moto/car mode toggle. No external
 * maps app is opened — the route comes from the keyless public OSRM server and
 * is drawn here. See src/lib/routing.ts for the honest scope notes.
 */
/** Big number + label tile used in the route summary. */
function StatTile({ label, value, sub }: { label: string; value: string; sub?: string }) {
  return (
    <div className="rounded-xl border border-white/8 bg-white/[0.03] px-2 py-2.5 text-center">
      <p className="text-lg font-black leading-tight tabular-nums text-white">{value}</p>
      <p className="mt-0.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
        {label}
      </p>
      {sub && <p className="mt-0.5 text-[10px] leading-tight text-muted-foreground/70">{sub}</p>}
    </div>
  );
}

/** The average speed the routing engine assumed for this mode, e.g. "21 km/h avg". */
function speedLabel(distanceM: number, durationS: number): string | undefined {
  if (!(distanceM > 0) || !(durationS > 0)) return undefined;
  const kmh = distanceM / 1000 / (durationS / 3600);
  if (!Number.isFinite(kmh) || kmh <= 0) return undefined;
  return `${kmh < 10 ? kmh.toFixed(1) : Math.round(kmh)} km/h avg`;
}

/** Local clock time you'd arrive if you set off now. */
function etaClock(durationS: number): string {
  return new Date(Date.now() + durationS * 1000).toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  });
}

export function RouteDialog({
  open,
  onOpenChange,
  destination,
  destinationLabel = 'Destination',
}: RouteDialogProps) {
  // The map container is inside Radix Dialog content, which mounts AFTER this
  // component's first effect pass. A plain useRef is therefore still null when
  // the init effect runs, and — because the effect's deps never changed again —
  // the map was NEVER created (empty dialog, no route line). Holding the node in
  // state makes the effect re-run the moment it actually mounts.
  const [mapDiv, setMapDiv] = useState<HTMLDivElement | null>(null);
  const mapRef = useRef<L.Map | null>(null);
  const routeLayersRef = useRef<L.LayerGroup | null>(null);
  const originMarkerRef = useRef<L.Marker | null>(null);
  const destMarkerRef = useRef<L.Marker | null>(null);

  const [origin, setOrigin] = useState<{ lat: number; lng: number } | null>(null);
  // Remember the last mode used — a cyclist or driver shouldn't be reset to
  // "Skate / Walk" every time they open Directions.
  const [mode, setMode] = useState<TravelMode>(() => {
    try {
      const saved = localStorage.getItem('skatespots:route-mode') as TravelMode | null;
      return saved && TRAVEL_MODES.some((m) => m.mode === saved) ? saved : 'foot';
    } catch {
      return 'foot';
    }
  });
  const chooseMode = useCallback((next: TravelMode) => {
    setMode(next);
    try {
      localStorage.setItem('skatespots:route-mode', next);
    } catch {
      // ignore (private mode / quota)
    }
  }, []);
  /** Which step the user tapped (highlights + pans the map). */
  const [activeStep, setActiveStep] = useState<number | null>(null);

  // ── Start point: my location, or a point the user picks on the map ─────────
  const [startMode, setStartMode] = useState<'me' | 'picked'>('me');
  const [picked, setPicked] = useState<GeoCoords | null>(null);
  const [pickingStart, setPickingStart] = useState(false);

  // ── Follow mode (explicit; owns a GPS watcher) ─────────────────────────────
  const [following, setFollowing] = useState(false);
  const [live, setLive] = useState<GeoCoords | null>(null);
  const [followError, setFollowError] = useState<string | null>(null);
  const watchRef = useRef<GeoWatch | null>(null);

  // ── Voice guidance, wake lock, arrival (phone navigation) ──────────────────
  const [voiceOn, setVoiceOn] = useState(() => {
    try {
      return localStorage.getItem('skatespots:route-voice') !== 'off';
    } catch {
      return true;
    }
  });
  const [arrived, setArrived] = useState(false);
  /** stepIndex → set of announced distance bands (150 m / 40 m). */
  const announcedRef = useRef<Map<number, Set<number>>>(new Map());
  const arrivedRef = useRef(false);
  const wakeLockRef = useRef<{ release: () => Promise<void> } | null>(null);

  /** Route shown while offline came from the cache (with its age). */
  const [cachedAge, setCachedAge] = useState<number | null>(null);

  /** Where the route starts: a picked point wins, else the device location. */
  const effectiveOrigin = useMemo<GeoCoords | null>(
    () => (startMode === 'picked' && picked ? picked : origin),
    [startMode, picked, origin],
  );

  /** Where to draw the "you are here" dot — live position while following. */
  const markerPos = useMemo<GeoCoords | null>(
    () => (following && live ? live : effectiveOrigin),
    [following, live, effectiveOrigin],
  );

  // Keep the map-click handler current without rebuilding the map.
  const pickingStartRef = useRef(false);
  pickingStartRef.current = pickingStart;
  const [route, setRoute] = useState<RouteResult | null>(null);
  const [locating, setLocating] = useState(false);
  const [routing, setRouting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [locError, setLocError] = useState<string | null>(null);

  /** Re-fit the map to the whole route (after tapping a step pans it away). */
  const fitRoute = useCallback(() => {
    const map = mapRef.current;
    if (!map || !route || route.coordinates.length < 2) return;
    map.fitBounds(L.latLngBounds(route.coordinates), { padding: [48, 48], maxZoom: 16 });
  }, [route]);

  // A new route (mode/origin change) invalidates the tapped-step focus and the
  // once-only voice/haptic announcements.
  useEffect(() => {
    setActiveStep(null);
    announcedRef.current.clear();
    arrivedRef.current = false;
    setArrived(false);
  }, [route]);

  // ── Voice guidance (device TTS — free, offline, no server, no permission) ───
  const speak = useCallback(
    (text: string) => {
      if (!voiceOn) return;
      if (typeof window === 'undefined' || !('speechSynthesis' in window)) return;
      try {
        const synth = window.speechSynthesis;
        const utter = new SpeechSynthesisUtterance(text);
        utter.rate = 1;
        const lang = (navigator.language || 'en').slice(0, 2).toLowerCase();
        const voices = synth.getVoices();
        // Prefer an on-device voice in the user's language (offline, no network).
        const voice =
          voices.find((v) => v.localService && v.lang.toLowerCase().startsWith(lang)) ??
          voices.find((v) => v.lang.toLowerCase().startsWith(lang));
        if (voice) {
          utter.voice = voice;
          utter.lang = voice.lang;
        } else {
          utter.lang = lang;
        }
        synth.cancel(); // never let prompts queue up and lag behind you
        synth.speak(utter);
      } catch {
        // No TTS — haptics still guide.
      }
    },
    [voiceOn],
  );

  const toggleVoice = useCallback(() => {
    setVoiceOn((on) => {
      const next = !on;
      try {
        localStorage.setItem('skatespots:route-voice', next ? 'on' : 'off');
      } catch {
        // ignore
      }
      if (!next && typeof window !== 'undefined' && 'speechSynthesis' in window) {
        window.speechSynthesis.cancel();
      }
      return next;
    });
  }, []);

  /** Short haptic pulse (Android). Silent no-op where unsupported. */
  const buzz = useCallback((pattern: number | number[]) => {
    try {
      if (typeof navigator.vibrate === 'function') navigator.vibrate(pattern);
    } catch {
      // ignore
    }
  }, []);

  // ── Wake lock: keep the screen on while navigating ──────────────────────────
  const acquireWakeLock = useCallback(async () => {
    const navWithWakeLock = navigator as Navigator & {
      wakeLock?: { request: (type: 'screen') => Promise<{ release: () => Promise<void> }> };
    };
    try {
      const sentinel = await navWithWakeLock.wakeLock?.request('screen');
      if (sentinel) wakeLockRef.current = sentinel;
    } catch {
      // Unsupported / denied — navigation still works, the screen may sleep.
    }
  }, []);

  const releaseWakeLock = useCallback(() => {
    try {
      void wakeLockRef.current?.release();
    } catch {
      // ignore
    }
    wakeLockRef.current = null;
  }, []);

  // ── Follow mode ────────────────────────────────────────────────────────────
  // Explicit only: the user taps Start, we watch their position, we keep the
  // screen awake, and we stop the watcher the moment they stop or the dialog
  // closes. Voice + haptics guide; voice is the point — you can't watch a
  // screen while skating.
  const stopFollowing = useCallback(() => {
    watchRef.current?.stop();
    watchRef.current = null;
    setFollowing(false);
    releaseWakeLock();
  }, [releaseWakeLock]);

  const startFollowing = useCallback(() => {
    if (watchRef.current) return;
    setFollowError(null);
    setArrived(false);
    arrivedRef.current = false;
    announcedRef.current.clear();
    setFollowing(true);
    void acquireWakeLock();
    // Spoken from the Start tap (a user gesture) — this also unlocks TTS.
    speak('Starting navigation');
    watchRef.current = watchPosition(
      (coords) => {
        setLive(coords);
        setFollowError(null);
      },
      (err) => {
        // Only a real permission denial stops following. A timeout / temporary
        // loss is normal (tunnels, indoors) and the watcher recovers by itself,
        // so we keep running and just say we're waiting.
        if (err.kind === 'denied') {
          setFollowError('Location permission denied.');
          stopFollowing();
        } else {
          setFollowError('Waiting for a GPS fix…');
        }
      },
    );
  }, [stopFollowing, acquireWakeLock, speak]);

  // Never leave the GPS running: stop on close and on unmount.
  useEffect(() => {
    if (!open && watchRef.current) stopFollowing();
  }, [open, stopFollowing]);
  useEffect(
    () => () => {
      watchRef.current?.stop();
      watchRef.current = null;
      releaseWakeLock();
    },
    [releaseWakeLock],
  );

  // Browsers drop the wake lock whenever the page is hidden. Re-acquire it when
  // the user comes back to a navigation that is still running.
  useEffect(() => {
    if (!following) return;
    const onVisibility = () => {
      if (document.visibilityState === 'visible') void acquireWakeLock();
    };
    document.addEventListener('visibilitychange', onVisibility);
    return () => document.removeEventListener('visibilitychange', onVisibility);
  }, [following, acquireWakeLock]);

  // While following, keep the live dot centred.
  useEffect(() => {
    if (!following || !live) return;
    mapRef.current?.panTo([live.lat, live.lng]);
  }, [following, live]);

  /** Live guidance: distance left, and which step you're on. */
  const nav = useMemo(() => {
    if (!live || !destination) return null;
    const toDestKm = calculateDistance(live.lat, live.lng, destination.lat, destination.lng);
    let bestI = -1;
    let bestKm = Infinity;
    (route?.steps ?? []).forEach((s, i) => {
      if (!s.lat && !s.lng) return;
      const km = calculateDistance(live.lat, live.lng, s.lat, s.lng);
      if (km < bestKm) {
        bestKm = km;
        bestI = i;
      }
    });
    return { toDestKm, stepIndex: bestI, stepKm: bestKm };
  }, [live, destination, route]);

  const currentStepIndex = following && nav && nav.stepIndex >= 0 ? nav.stepIndex : activeStep;

  // ── Voice + haptics + arrival while following ───────────────────────────────
  useEffect(() => {
    if (!following || !nav || !route) return;

    // Arrival: within ~30 m of the destination.
    if (nav.toDestKm < 0.03) {
      if (!arrivedRef.current) {
        arrivedRef.current = true;
        speak("You've arrived");
        buzz([120, 80, 120]);
        setArrived(true);
        stopFollowing();
      }
      return;
    }

    const idx = nav.stepIndex;
    const km = nav.stepKm;
    if (idx < 0 || !Number.isFinite(km)) return;

    const steps = route.steps ?? [];
    const bands = announcedRef.current.get(idx) ?? new Set<number>();

    if (km <= 0.15 && km > 0.04 && !bands.has(150)) {
      // ~150 m out — a heads-up so you know what's coming.
      bands.add(150);
      announcedRef.current.set(idx, bands);
      const metres = Math.max(50, Math.round((km * 1000) / 10) * 10);
      speak(`In ${metres} metres, ${steps[idx]?.instruction ?? 'continue'}`);
      buzz(60);
    } else if (km <= 0.04 && !bands.has(40)) {
      // ~40 m out — the turn itself.
      bands.add(40);
      announcedRef.current.set(idx, bands);
      speak(steps[idx]?.instruction ?? 'Continue');
      buzz(140);
    }
  }, [following, nav, route, speak, buzz, stopFollowing]);

  // ─── Get the user's location when the dialog opens ─────────────────────────
  const locate = useCallback(async () => {
    setLocating(true);
    setLocError(null);
    try {
      const pos = await getCurrentPosition();
      setOrigin(pos);
    } catch (err) {
      const msg =
        err instanceof GeolocationError
          ? err.kind === 'denied'
            ? 'Location permission denied. Enable location to route from where you are.'
            : 'Could not get your location. Try again.'
          : 'Could not get your location.';
      setLocError(msg);
    } finally {
      setLocating(false);
    }
  }, []);

  useEffect(() => {
    if (!open) return;
    // Seed from the last known fix so a route can be drawn immediately, then
    // refine with a live reading. This is what makes opening Directions feel
    // instant instead of hanging on "Finding your location…".
    const cached = getLastLocation();
    const fresh = !!cached && Date.now() - cached.at < 2 * 60 * 1000;
    if (!origin && cached) setOrigin({ lat: cached.lat, lng: cached.lng });
    // Only ask for a live GPS fix when the cached one is missing or stale. A
    // recent fix means the route can draw instantly with no "Finding your
    // location…" wait (and no needless location request on every open).
    if (!fresh) locate();
    // Re-run only when the dialog opens (locate is stable).
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open]);

  // Reset transient state when closed
  useEffect(() => {
    if (!open) {
      setRoute(null);
      setError(null);
      setPickingStart(false);
      setCachedAge(null);
    }
  }, [open]);

  // ─── Initialize the Leaflet map once the dialog content is mounted ─────────
  useEffect(() => {
    if (!open || !mapDiv || mapRef.current || !destination) return;

    const map = L.map(mapDiv, {
      center: [destination.lat, destination.lng],
      zoom: 14,
      scrollWheelZoom: true,
      attributionControl: false,
      minZoom: 2,
    });

    createCachedTileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '',
      subdomains: 'abc',
      maxZoom: 19,
      className: 'skatespots-dark-tiles',
    }).addTo(map);

    // Metric scale bar — genuinely useful on a route map (how long is that line?).
    L.control.scale({ imperial: false, position: 'topleft' }).addTo(map);

    // Destination marker
    const destIcon = L.divIcon({
      className: 'route-dest-icon',
      html: `<div style="width:32px;height:32px;background:linear-gradient(135deg,#ff0040,#ff6600);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 12px rgba(255,0,64,0.5);border:3px solid rgba(255,255,255,0.9);"></div>`,
      iconSize: [32, 32],
      iconAnchor: [16, 30],
    });
    destMarkerRef.current = L.marker([destination.lat, destination.lng], {
      icon: destIcon,
    }).addTo(map);

    mapRef.current = map;

    // "Choose on map" — the next tap sets the start point.
    const onMapClick = (e: L.LeafletMouseEvent) => {
      if (!pickingStartRef.current) return;
      setPicked({ lat: e.latlng.lat, lng: e.latlng.lng });
      setStartMode('picked');
      setPickingStart(false);
    };
    map.on('click', onMapClick);

    setTimeout(() => map.invalidateSize(), 120);

    return () => {
      map.off('click', onMapClick);
      map.remove();
      mapRef.current = null;
      routeLayersRef.current = null;
      originMarkerRef.current = null;
      destMarkerRef.current = null;
    };
  }, [open, mapDiv, destination]);

  // ─── Draw / update the "from" marker (device location, picked point, live) ──
  useEffect(() => {
    const map = mapRef.current;
    if (!map || !markerPos) return;

    if (originMarkerRef.current) {
      originMarkerRef.current.setLatLng([markerPos.lat, markerPos.lng]);
    } else {
      const userIcon = L.divIcon({
        className: 'route-origin-icon',
        html: `<div style="width:18px;height:18px;background:#00b3ff;border-radius:50%;box-shadow:0 0 0 6px rgba(0,179,255,0.25),0 2px 8px rgba(0,0,0,0.4);border:3px solid #fff;"></div>`,
        iconSize: [18, 18],
        iconAnchor: [9, 9],
      });
      originMarkerRef.current = L.marker([markerPos.lat, markerPos.lng], {
        icon: userIcon,
      }).addTo(map);
    }
  }, [markerPos]);

  // ─── Fetch + draw the route whenever origin / mode changes ─────────────────
  useEffect(() => {
    if (!open || !effectiveOrigin || !destination) return;

    const controller = new AbortController();
    let cancelled = false;

    (async () => {
      setRouting(true);
      setError(null);
      try {
        const result = mode === 'transit'
          ? await fetchTransitRoute(effectiveOrigin, destination, controller.signal)
          : await fetchRoute(effectiveOrigin, destination, mode, controller.signal);
        if (cancelled) return;
        setCachedAge(null);
        setRoute(result);
        if (mode !== 'transit') saveRoute(destination, mode, result);

        const map = mapRef.current;
        if (map) {
          if (routeLayersRef.current) {
            routeLayersRef.current.remove();
            routeLayersRef.current = null;
          }
          const group = L.layerGroup().addTo(map);

          if (result.transit) {
            // Public transport: draw each leg — walking dashed grey, transit
            // legs solid and coloured by mode.
            for (const leg of result.transit.legs) {
              if (leg.coordinates.length < 2) continue;
              const isWalk = leg.mode === 'WALK';
              L.polyline(leg.coordinates, {
                color: isWalk ? '#9ca3af' : transitLegColor(leg.mode),
                weight: isWalk ? 3 : 5,
                opacity: isWalk ? 0.7 : 0.9,
                dashArray: isWalk ? '4 6' : undefined,
                lineJoin: 'round',
                lineCap: 'round',
              }).addTo(group);
            }
          } else {
            L.polyline(result.coordinates, {
              color: '#ccff00',
              weight: 5,
              opacity: 0.9,
              lineJoin: 'round',
              lineCap: 'round',
            }).addTo(group);
          }

          routeLayersRef.current = group;
          if (result.coordinates.length > 0) {
            map.fitBounds(L.latLngBounds(result.coordinates), { padding: [48, 48], maxZoom: 16 });
          }
        }
      } catch (err) {
        if (cancelled) return;
        if (err instanceof DOMException && err.name === 'AbortError') return;
        const msg = err instanceof Error ? err.message : '';
        if (mode === 'transit') {
          setError(
            msg === 'No transit route found'
              ? 'No public-transport route found here — this area may not publish open timetables.'
              : "Couldn't reach the transit service. Check your connection and try again.",
          );
        } else if (msg === ROUTE_ERR_BUSY) {
          setError('The routing service is busy right now — try again in a moment.');
        } else if (msg === ROUTE_ERR_NO_ROUTE) {
          setError('No route for this mode — the destination may be off the road network. Try another mode.');
        } else {
          setError("Couldn't reach the routing service. Check your connection and try again.");
        }

        // Offline / server down: fall back to the last route we saved for this
        // destination + mode, clearly labelled, instead of a dead dialog.
        if (mode !== 'transit') {
          const hit = loadRoute(destination, mode);
          if (hit) {
            setRoute(hit.route);
            setCachedAge(hit.ageMs);
            setError(null);
            const map = mapRef.current;
            if (map && hit.route.coordinates.length > 1) {
              if (routeLayersRef.current) routeLayersRef.current.remove();
              const group = L.layerGroup().addTo(map);
              L.polyline(hit.route.coordinates, {
                color: '#ccff00',
                weight: 5,
                opacity: 0.7,
                dashArray: '8 8',
                lineJoin: 'round',
                lineCap: 'round',
              }).addTo(group);
              routeLayersRef.current = group;
              map.fitBounds(L.latLngBounds(hit.route.coordinates), { padding: [48, 48], maxZoom: 16 });
            }
          }
        }
      } finally {
        if (!cancelled) setRouting(false);
      }
    })();

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [open, effectiveOrigin, destination, mode]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      {/* App-like shell. VISUAL ORDER is set with flex `order` utilities, not DOM
          order: the map sits directly under the header (bigger — it's the point
          of the screen), the mode/vehicle row moves BELOW it, and the details
          scroll with the Start/Stop bar pinned at the bottom. */}
      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg flex-col gap-0 overflow-hidden p-0 sm:max-w-xl">
        <DialogHeader className="order-1 shrink-0 p-4 pb-3">
          <DialogTitle className="flex items-center gap-2 text-lg">
            <Navigation className="h-5 w-5 text-[#ccff00]" />
            Route to {destinationLabel}
          </DialogTitle>
          <DialogDescription className="text-xs">
            {mode === 'transit'
              ? 'Public transport via Transitous (open timetables + OpenStreetMap)'
              : 'In-app route · OpenStreetMap routing — nothing leaves to Google or Apple Maps'}
          </DialogDescription>
        </DialogHeader>

        {/* Mode toggle (vehicles) — sits BELOW the map via order-3. */}
        <div className="order-3 flex shrink-0 gap-1.5 px-4 pb-3">
          {TRAVEL_MODES.map((m) => (
            <button
              key={m.mode}
              type="button"
              onClick={() => chooseMode(m.mode)}
              className={cn(
                'flex-1 flex flex-col items-center gap-0.5 rounded-xl py-2 text-xs font-bold uppercase tracking-wide transition-all border-2',
                mode === m.mode
                  ? 'bg-[#ccff00]/15 border-[#ccff00] text-[#ccff00]'
                  : 'border-transparent bg-muted/50 text-muted-foreground hover:bg-muted',
              )}
              aria-pressed={mode === m.mode}
            >
              <span className="text-lg leading-none">{m.emoji}</span>
              <span className="text-[10px] leading-tight text-center">{m.label}</span>
            </button>
          ))}
        </div>

        {/* Start point — default is where you are; you can pick another on the map */}
        <div className="order-4 flex shrink-0 flex-wrap items-center gap-1.5 px-4 pb-3">
          <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">
            From
          </span>
          <button
            type="button"
            onClick={() => {
              setStartMode('me');
              setPickingStart(false);
            }}
            className={cn(
              'rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide transition-colors',
              startMode === 'me'
                ? 'border-[#ccff00]/60 bg-[#ccff00]/15 text-[#ccff00]'
                : 'border-white/10 text-muted-foreground hover:text-foreground',
            )}
          >
            My location
          </button>
          <button
            type="button"
            onClick={() => setPickingStart((v) => !v)}
            className={cn(
              'flex items-center gap-1 rounded-full border px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide transition-colors',
              pickingStart || startMode === 'picked'
                ? 'border-[#ccff00]/60 bg-[#ccff00]/15 text-[#ccff00]'
                : 'border-white/10 text-muted-foreground hover:text-foreground',
            )}
          >
            <Crosshair className="h-3 w-3" />
            {pickingStart ? 'Tap the map…' : 'Choose on map'}
          </button>
        </div>

        {/* Map. The height lives on the WRAPPER: the global
            `.leaflet-container { height: 100% }` override beats a `h-64` on the
            map element itself, and against a height-less parent that resolved to
            0 — a fully invisible map with no route line. */}
        <div className={cn('order-2 relative shrink-0', following ? 'h-[60vh] min-h-[360px] sm:h-[62vh]' : 'h-[50vh] min-h-[300px] sm:h-[440px]')}>
          <div
            ref={setMapDiv}
            className="h-full w-full bg-muted"
            aria-label="Route map"
          />

          {/* Overlays */}
          {/* Blocking overlay only when we have nothing to show yet. With a
              cached origin we keep the map visible and refine quietly. */}
          {((locating && !origin) || (routing && !route)) && (
            <div className="absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-sm">
              <div className="flex items-center gap-2 text-sm font-medium">
                <Loader2 className="h-4 w-4 animate-spin text-[#ccff00]" />
                {locating && !origin ? 'Finding your location…' : 'Plotting your route…'}
              </div>
            </div>
          )}

          {/* Bottom-left stack: offline badge + "refining location" chip. Kept
              out of the top-left so it never covers Leaflet's zoom control. */}
          {(cachedAge !== null || (locating && origin)) && (
            <div className="pointer-events-none absolute bottom-2 left-2 flex flex-col items-start gap-1">
              {cachedAge !== null && (
                <div className="rounded-full border border-amber-500/40 bg-amber-500/15 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-amber-300 backdrop-blur-sm">
                  Offline · saved route {formatAge(cachedAge)}
                </div>
              )}
              {locating && origin && (
                <div className="flex items-center gap-1.5 rounded-full bg-background/80 px-2 py-1 text-[10px] font-medium text-muted-foreground backdrop-blur-sm">
                  <Loader2 className="h-3 w-3 animate-spin" />
                  Refining location…
                </div>
              )}
            </div>
          )}

          {/* "Choose on map" hint */}
          {pickingStart && (
            <div className="pointer-events-none absolute inset-x-2 top-2 rounded-xl bg-black/80 px-3 py-2 text-center text-[11px] font-bold text-[#ccff00] backdrop-blur-sm">
              Tap the map to set your start point
            </div>
          )}

          {/* Follow mode: next turn + distance left */}
          {following && nav && (
            <div className="pointer-events-none absolute inset-x-2 top-2 rounded-xl bg-black/85 px-3 py-2 backdrop-blur-sm">
              <p className="text-[11px] font-black uppercase tracking-widest text-[#ccff00]">
                Next{nav.stepIndex >= 0 ? ` · step ${nav.stepIndex + 1}` : ''}
              </p>
              <p className="truncate text-base font-black text-white">
                {nav.stepIndex >= 0
                  ? route?.steps?.[nav.stepIndex]?.instruction ?? 'Follow the line'
                  : route?.steps?.[0]?.instruction ?? 'Follow the line'}
              </p>
              <p className="text-xs text-gray-400">
                {nav.stepIndex >= 0 && Number.isFinite(nav.stepKm)
                  ? `${formatDistance(nav.stepKm)} to the turn · `
                  : ''}
                {formatDistance(nav.toDestKm)} to go
              </p>
            </div>
          )}

          {followError && (
            <div className="pointer-events-none absolute inset-x-2 top-2 rounded-xl bg-black/85 px-3 py-2 text-center text-[11px] font-bold text-amber-300 backdrop-blur-sm">
              {followError}
            </div>
          )}

          {locError && !origin && (
            <div className="absolute inset-0 flex items-center justify-center bg-background/80 p-6">
              <div className="text-center space-y-3 max-w-xs">
                <MapPin className="h-8 w-8 mx-auto text-muted-foreground" />
                <p className="text-sm text-muted-foreground">{locError}</p>
                <Button size="sm" variant="outline" onClick={locate} className="gap-2">
                  <LocateFixed className="h-4 w-4" />
                  Try again
                </Button>
              </div>
            </div>
          )}

          {/* Re-fit the whole route — handy after tapping a step pans the map. */}
          {route && route.coordinates.length > 1 && (
            <button
              type="button"
              onClick={fitRoute}
              className="absolute bottom-2 right-2 flex items-center gap-1 rounded-lg border border-white/10 bg-background/85 px-2 py-1.5 text-[10px] font-bold uppercase tracking-wide text-muted-foreground shadow backdrop-blur-sm transition-colors hover:text-foreground"
              aria-label="Fit the whole route on the map"
            >
              <LocateFixed className="h-3.5 w-3.5" />
              Whole route
            </button>
          )}
        </div>

        {/* Scrollable details */}
        <div className="order-5 min-h-0 flex-1 overflow-y-auto">

        {/* Summary bar */}
        <div className="p-4 border-t bg-muted/30 min-h-[64px] flex items-center">
          {error ? (
            <div className="flex items-center gap-2 text-sm text-amber-500">
              <AlertTriangle className="h-4 w-4 shrink-0" />
              <span>{error}</span>
            </div>
          ) : route?.transit ? (
            <div className="w-full space-y-2">
              <div className="flex items-center gap-3">
                <div className="text-2xl leading-none">🚇</div>
                <div className="min-w-0">
                  <div className="text-lg font-black tabular-nums">
                    {formatClock(route.transit.departISO)} → {formatClock(route.transit.arriveISO)}
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {formatDuration(route.transit.durationS)} ·{' '}
                    {route.transit.transfers === 0
                      ? 'direct'
                      : `${route.transit.transfers} transfer${route.transit.transfers > 1 ? 's' : ''}`}
                    {routing && <Loader2 className="ml-1 inline h-3 w-3 animate-spin" />}
                  </div>
                </div>
              </div>
              {route.transit.legs.some((l) => l.mode !== 'WALK') && (
                <div className="flex flex-wrap gap-1">
                  {route.transit.legs
                    .filter((l) => l.mode !== 'WALK')
                    .map((l, i) => (
                      <span
                        key={`${l.mode}-${l.line}-${i}`}
                        className="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] font-bold text-gray-300"
                      >
                        <span aria-hidden>{transitModeEmoji(l.mode)}</span>
                        {l.line ?? l.mode}
                      </span>
                    ))}
                </div>
              )}
              <p className="text-[10px] text-muted-foreground/70">{TRANSIT_ATTRIBUTION}</p>
            </div>
          ) : route ? (
            <div className="w-full space-y-2">
              <div className="grid grid-cols-3 gap-2">
                <StatTile label="Distance" value={formatDistance(route.distanceM / 1000)} />
                <StatTile
                  label="Time"
                  value={formatDuration(route.durationS)}
                  sub={
                    mode === 'foot'
                      ? `${skateTime(route.distanceM / 1000)} on a board`
                      : speedLabel(route.distanceM, route.durationS)
                  }
                />
                <StatTile label="Arrive" value={etaClock(route.durationS)} />
              </div>
              <p className="flex flex-wrap items-center gap-x-1.5 text-[10px] text-muted-foreground">
                <span className="text-base leading-none">
                  {TRAVEL_MODES.find((m) => m.mode === mode)?.emoji}
                </span>
                <span>
                  {route.steps && route.steps.length > 1
                    ? `${route.steps.length} steps`
                    : 'direct'}
                </span>
                {TRAVEL_MODES.find((m) => m.mode === mode)?.approximate && (
                  <span>· uses driving roads</span>
                )}
                {route.approximate && <span>· driving estimate</span>}
                {routing && <span>· updating…</span>}
              </p>
            </div>
          ) : (
            <div className="text-sm text-muted-foreground">
              {origin ? 'Pick a mode to see your route.' : 'Waiting for your location…'}
            </div>
          )}
        </div>

        {/* Turn-by-turn orientation — the planning list. While following, the map
            and the live NEXT banner take over (so the list steps out of the way). */}
        {!following && mode !== 'transit' && route?.steps && route.steps.length > 1 && (
          <div className="border-t bg-muted/20">
            <div className="flex flex-wrap items-baseline justify-between gap-x-2 px-4 pt-3">
              <p className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-muted-foreground">
                Route steps
                <span className="rounded-full bg-white/10 px-1.5 py-0.5 text-[9px] tabular-nums">
                  {route.steps.length}
                </span>
              </p>
              {mode === 'foot' && (
                <p className="text-[10px] text-muted-foreground/70">walking route — quicker on a board</p>
              )}
            </div>
            <ol className="max-h-72 space-y-1.5 overflow-y-auto px-4 pb-2 pt-1.5">
              {route.steps.map((s, i) => (
                <li key={`${i}-${s.instruction}`}>
                  <button
                    type="button"
                    onClick={() => {
                      setActiveStep(i);
                      const map = mapRef.current;
                      if (map && s.lat && s.lng) map.panTo([s.lat, s.lng]);
                    }}
                    className={cn(
                      // `min-h-0` overrides the app-wide 44px mobile touch-target
                      // rule for `button`, which otherwise made every step row a
                      // giant 44px slab.
                      'flex min-h-0 w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition-colors',
                      currentStepIndex === i ? 'bg-[#ccff00]/10 text-white' : 'hover:bg-white/5',
                    )}
                  >
                    <span className="mt-px w-4 shrink-0 text-right font-mono text-[10px] text-muted-foreground/60">
                      {i + 1}
                    </span>
                    <span className="min-w-0 flex-1 leading-snug text-gray-300">{s.instruction}</span>
                    {s.distanceM >= 10 && (
                      <span className="shrink-0 tabular-nums text-muted-foreground/70">
                        {formatDistance(s.distanceM / 1000)}
                      </span>
                    )}
                  </button>
                </li>
              ))}
            </ol>
            <p className="px-4 pb-3 text-[10px] text-muted-foreground/60">
              Planning view — tap Start to follow with live turns, voice and arrival.
            </p>
          </div>
        )}

        </div>{/* /scrollable details */}

        {/* Follow mode: live turns + voice, with the screen kept awake. */}
        {route && !route.transit && (
          <div className="order-6 flex items-center gap-3 border-t bg-muted/30 px-4 py-3">
            {arrived ? (
              <Button
                size="sm"
                onClick={() => onOpenChange(false)}
                className="gap-2 bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90"
              >
                <Check className="h-3.5 w-3.5" />
                Done
              </Button>
            ) : following ? (
              <Button
                size="sm"
                variant="outline"
                onClick={stopFollowing}
                className="gap-2 border-[#ff0040]/50 text-[#ff0040] hover:bg-[#ff0040]/10"
              >
                <Square className="h-3.5 w-3.5" />
                Stop
              </Button>
            ) : (
              <Button
                size="sm"
                onClick={startFollowing}
                className="gap-2 bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90"
              >
                <Play className="h-3.5 w-3.5" />
                Start
              </Button>
            )}
            <p className="min-w-0 flex-1 text-[11px] leading-snug text-muted-foreground">
              {arrived
                ? "You've arrived. 🛹"
                : following
                  ? voiceOn
                    ? 'Screen stays on · voice on — turns and arrival are spoken.'
                    : 'Screen stays on · voice off.'
                  : 'Turns, voice and arrival as you roll. Keeps the screen on.'}
            </p>
            <button
              type="button"
              onClick={toggleVoice}
              aria-pressed={voiceOn}
              aria-label={voiceOn ? 'Turn voice guidance off' : 'Turn voice guidance on'}
              className={cn(
                'flex h-9 w-9 shrink-0 items-center justify-center rounded-full border transition-colors',
                voiceOn
                  ? 'border-[#ccff00]/50 bg-[#ccff00]/15 text-[#ccff00]'
                  : 'border-white/10 text-muted-foreground hover:text-foreground',
              )}
            >
              {voiceOn ? <Volume2 className="h-4 w-4" /> : <VolumeX className="h-4 w-4" />}
            </button>
          </div>
        )}

      </DialogContent>
    </Dialog>
  );
}