"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import {
  FeatureGroup,
  LayersControl,
  MapContainer,
  Marker,
  Polyline,
  Popup,
  TileLayer,
  useMap,
} from "react-leaflet";
import L from "leaflet";
import type { CallRecord, IncidentRecord, NodeRecord, NodeStatus } from "@/lib/types";
import { isKnownSeverity, SEVERITY_COLORS, SEVERITY_LABEL, type Severity } from "@/lib/severity";
import { MachineOutputNotice } from "@/components/ui/MachineOutputNotice";
import { useAircraft } from "@/lib/useAircraft";

// ── Leaflet icon fix ──────────────────────────────────────────────────────────
delete (L.Icon.Default.prototype as unknown as Record<string, unknown>)._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
});

// ── Basemap tiles ─────────────────────────────────────────────────────────────
// Prod sets NEXT_PUBLIC_MAP_TILE_URL to a keyed style (a CARTO account style,
// MapTiler, Mapbox, …). The in-code fallback is plain OpenStreetMap so the map
// still renders if that var is missing — CARTO's keyless CDN has proven flaky.
// Whatever is supplied must use Leaflet's {s}/{z}/{x}/{y}{r} placeholder scheme;
// the {z}/{x}/{y} tokens below are substituted by Leaflet at runtime.
const MAP_TILE_URL =
  process.env.NEXT_PUBLIC_MAP_TILE_URL ||
  "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
const MAP_TILE_ATTRIBUTION = "&copy; OpenStreetMap contributors";

// ── Colour ────────────────────────────────────────────────────────────────────
// Severity is the only hue on this map — see UI_REDESIGN.md §2.3. Incident
// type is carried by the glyph knocked out of the pin, never by colour, and
// node state is carried by the diamond's weight (filled/hollow/dashed), not
// by colour either. No green appears anywhere here any more.
function severityColor(severity: string | null | undefined): string {
  return isKnownSeverity(severity) ? SEVERITY_COLORS[severity] : "var(--ink-muted)";
}

// Inline SVG paths matching components/marks/TypeGlyph.tsx, duplicated here
// (rather than rendered through the React component) because Leaflet marker
// icons are raw HTML strings, not React nodes.
const TYPE_GLYPH_PATHS: Record<string, string> = {
  fire: '<path d="M12 2c1 3-2 4-2 7a3 3 0 0 0 6 0c1.5 1.5 2 3.5 2 5a6 6 0 0 1-12 0c0-3 1.5-4.5 3-6.5C10 5.5 11 4 12 2Z"/>',
  police: '<path d="M12 2 4 5v6c0 5 3.4 8.7 8 9 4.6-.3 8-4 8-9V5l-8-3Z"/><path d="M9 12l2 2 4-4"/>',
  ems: '<rect x="3" y="3" width="18" height="18" rx="3"/><path d="M12 7v10M7 12h10"/>',
  collision: '<path d="M3 16l3-7 4 2 2-5 4 3 3-2 2 6"/><path d="M3 16h18M6 16v3M18 16v3"/>',
  other:
    '<circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 4.7-1.2c.5.9.2 1.6-.7 2.3-.9.7-1.5 1.2-1.5 2.4"/><circle cx="12" cy="16.5" r="0.6" fill="currentColor" stroke="none"/>',
};
function typeGlyphSvg(type: string | null | undefined, color: string, size = 13): string {
  const key = type === "accident" ? "collision" : type && TYPE_GLYPH_PATHS[type] ? type : "other";
  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${TYPE_GLYPH_PATHS[key]}</svg>`;
}

// ── Node diamond icon — matches components/marks/NodeMark.tsx ────────────────
function nodeDiamondSvg(status: NodeStatus, size: number): string {
  const half = size / 2;
  const pts = `${half},1 ${size - 1},${half} ${half},${size - 1} 1,${half}`;
  if (status === "recording") {
    return `<polygon points="${pts}" fill="var(--ink)" stroke="var(--accent)" stroke-width="1.5"/>`;
  }
  if (status === "online") {
    return `<polygon points="${pts}" fill="var(--ink)"/>`;
  }
  if (status === "unconfigured") {
    return `<polygon points="${pts}" fill="none" stroke="var(--ink-muted)" stroke-width="1.5" stroke-dasharray="2.5 2"/>`;
  }
  return `<polygon points="${pts}" fill="none" stroke="var(--ink-muted)" stroke-width="1.5"/>`;
}

function nodeIcon(status: NodeStatus): L.DivIcon {
  const size = 14;
  const isRec = status === "recording";
  const ring = isRec
    ? `<div class="node-pulse-ring" style="position:absolute;width:${size * 2}px;height:${size * 2}px;border-radius:50%;border:2px solid var(--accent);top:-${size / 2}px;left:-${size / 2}px;pointer-events:none;"></div>`
    : "";
  return L.divIcon({
    className: "",
    html: `<div style="position:relative;width:${size}px;height:${size}px">${ring}<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">${nodeDiamondSvg(status, size)}</svg></div>`,
    iconSize: [size, size],
    iconAnchor: [size / 2, size / 2],
  });
}

// ── Aircraft icon — node-26#9 second-SDR ADS-B overlay ────────────────────────
function aircraftIcon(trackDeg: number | null): L.DivIcon {
  const size = 16;
  const rotation = trackDeg ?? 0;
  return L.divIcon({
    className: "",
    html: `<div style="width:${size}px;height:${size}px;transform:rotate(${rotation}deg)"><svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="var(--accent)" stroke="var(--surface)" stroke-width="1"><path d="M12 2 L15 11 L22 15 L15 15.5 L14 21 L17 22.5 L12 21.5 L7 22.5 L10 21 L9 15.5 L2 15 L9 11 Z"/></svg></div>`,
    iconSize: [size, size],
    iconAnchor: [size / 2, size / 2],
  });
}

function AircraftLayer() {
  const { aircraft } = useAircraft();
  return (
    <>
      {aircraft
        .filter((a) => a.lat != null && a.lon != null)
        .map((a) => (
          <Marker key={a.icao} position={[a.lat as number, a.lon as number]} icon={aircraftIcon(a.track_deg)}>
            <Popup minWidth={160}>
              <div className="space-y-1">
                <div className="font-semibold">{a.callsign || a.icao}</div>
                <div className="text-xs text-ink-muted">ICAO {a.icao}</div>
                {a.altitude_ft != null && <div className="text-xs">Altitude: {Math.round(a.altitude_ft)} ft</div>}
                {a.ground_speed_kt != null && <div className="text-xs">Speed: {Math.round(a.ground_speed_kt)} kt</div>}
              </div>
            </Popup>
          </Marker>
        ))}
    </>
  );
}

function nodeFanIcon(members: NodeRecord[]): L.DivIcon {
  const n = members.length;
  const CARD = 13;
  const STEP = 5;
  const totalW = CARD + (n - 1) * STEP;
  const maxRot = Math.min(28, n * 7);
  const cards = members
    .map((m, i) => {
      const ratio = n === 1 ? 0 : i / (n - 1) - 0.5;
      const rot = ratio * maxRot;
      const left = i * STEP;
      return `<div style="position:absolute;width:${CARD}px;height:${CARD}px;left:${left}px;top:0;transform:rotate(${rot}deg);transform-origin:bottom center;"><svg width="${CARD}" height="${CARD}" viewBox="0 0 ${CARD} ${CARD}">${nodeDiamondSvg(m.status, CARD)}</svg></div>`;
    })
    .join("");
  return L.divIcon({
    className: "",
    html: `<div style="position:relative;width:${totalW}px;height:${CARD + 6}px">${cards}</div>`,
    iconSize: [totalW, CARD + 6],
    iconAnchor: [totalW / 2, CARD + 6],
  });
}

// ── Incident pin — teardrop filled by severity, type glyph knocked out ───────
// Minor/routine (no alarm colour) render hollow with an ink stroke so the map
// doesn't imply urgency that isn't there.
function incidentIcon(type: string | null, severity: string | null | undefined): L.DivIcon {
  const color = severityColor(severity);
  const hollow = !isKnownSeverity(severity) || severity === "minor" || severity === "routine";
  const glyphColor = hollow ? color : "var(--page)";
  const fill = hollow ? "var(--surface)" : color;
  const stroke = hollow ? color : "var(--page)";
  const svg = `
    <svg width="28" height="36" viewBox="0 0 28 36">
      <path d="M14 1C6.8 1 1 6.8 1 14c0 9.5 13 21 13 21s13-11.5 13-21C27 6.8 21.2 1 14 1Z"
        fill="${fill}" stroke="${stroke}" stroke-width="2"/>
      <g transform="translate(7.5,7.5)">${typeGlyphSvg(type, glyphColor, 13)}</g>
    </svg>`;
  return L.divIcon({ className: "", html: svg, iconSize: [28, 36], iconAnchor: [14, 34] });
}

function incidentFanIcon(members: IncidentRecord[]): L.DivIcon {
  const n = members.length;
  const CARD = 16;
  const STEP = 9;
  const totalW = CARD + (n - 1) * STEP;
  const maxRot = Math.min(28, n * 7);
  const cards = members
    .map((m, i) => {
      const ratio = n === 1 ? 0 : i / (n - 1) - 0.5;
      const rot = ratio * maxRot;
      const left = i * STEP;
      const color = severityColor(m.severity);
      const hollow = !isKnownSeverity(m.severity) || m.severity === "minor" || m.severity === "routine";
      return `<div style="position:absolute;width:${CARD}px;height:${CARD}px;border-radius:3px;background:${hollow ? "var(--surface)" : color};border:1.5px solid ${color};left:${left}px;top:0;transform:rotate(${rot}deg);transform-origin:bottom center;box-shadow:0 1px 3px rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;">${typeGlyphSvg(m.type, hollow ? color : "var(--page)", 10)}</div>`;
    })
    .join("");
  return L.divIcon({
    className: "",
    html: `<div style="position:relative;width:${totalW}px;height:${CARD + 6}px">${cards}</div>`,
    iconSize: [totalW, CARD + 6],
    iconAnchor: [totalW / 2, CARD + 6],
  });
}

// ── Incident path stop marker — numbered, shared index with the call spine ───
function pathStopIcon(index: number, isFirst: boolean, isLast: boolean, color: string): L.DivIcon {
  const size = 22;
  const fill = isFirst ? "var(--surface)" : color;
  const textColor = isFirst ? color : "var(--page)";
  const halo = isLast ? `<circle cx="11" cy="11" r="10.5" fill="none" stroke="${color}" stroke-width="2" opacity="0.5"/>` : "";
  return L.divIcon({
    className: "",
    html: `<svg width="${size}" height="${size}" viewBox="0 0 22 22">
      ${halo}
      <circle cx="11" cy="11" r="8" fill="${fill}" stroke="${color}" stroke-width="2"/>
      <text x="11" y="14.5" text-anchor="middle" font-size="10" font-weight="600" fill="${textColor}" font-family="var(--font-sans)">${index}</text>
    </svg>`,
    iconSize: [size, size],
    iconAnchor: [size / 2, size / 2],
  });
}

// ── Fan cluster grouping ──────────────────────────────────────────────────────
const CLUSTER_PX = 32;

function computeGroups<T extends { id: string; lat: number; lng: number }>(
  items: T[],
  map: L.Map
): Map<string, T[]> {
  if (!items.length) return new Map();
  const withPx = items.map((item) => ({
    item,
    px: map.latLngToContainerPoint([item.lat, item.lng]),
  }));
  const parent: number[] = items.map((_, i) => i);
  function find(x: number): number {
    if (parent[x] !== x) parent[x] = find(parent[x]);
    return parent[x];
  }
  for (let i = 0; i < withPx.length; i++) {
    for (let j = i + 1; j < withPx.length; j++) {
      const dx = withPx[i].px.x - withPx[j].px.x;
      const dy = withPx[i].px.y - withPx[j].px.y;
      if (Math.sqrt(dx * dx + dy * dy) < CLUSTER_PX) {
        const ri = find(i), rj = find(j);
        if (ri !== rj) parent[ri] = rj;
      }
    }
  }
  const groups = new Map<number, T[]>();
  withPx.forEach(({ item }, i) => {
    const root = find(i);
    if (!groups.has(root)) groups.set(root, []);
    groups.get(root)!.push(item);
  });
  const result = new Map<string, T[]>();
  Array.from(groups.values()).forEach((members) => result.set(members[0].id, members));
  return result;
}

// ── MapRefCapture — exposes L.Map instance to parent ─────────────────────────
function MapRefCapture({ onReady }: { onReady: (m: L.Map) => void }) {
  const map = useMap();
  useEffect(() => {
    onReady(map);
  }, [map, onReady]);
  return null;
}

// ── FanNodeLayer ──────────────────────────────────────────────────────────────
function FanNodeLayer({
  nodes,
  activeCalls,
}: {
  nodes: NodeRecord[];
  activeCalls: CallRecord[];
}) {
  const map = useMap();
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const h = () => setTick((t: number) => t + 1);
    map.on("zoomend moveend", h);
    return () => { map.off("zoomend moveend", h); };
  }, [map]);

  const activeByNode = useMemo(
    () => Object.fromEntries(activeCalls.map((c) => [c.node_id, c])),
    [activeCalls]
  );
  const nodeById = useMemo(() => new Map(nodes.map((n) => [n.node_id, n])), [nodes]);

  const groups = useMemo(() => {
    const items = nodes.map((n) => ({ id: n.node_id, lat: n.lat, lng: n.lon }));
    return computeGroups(items, map);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [nodes, map, tick]);

  return (
    <>
      {(Array.from(groups.entries()) as Array<[string, { id: string; lat: number; lng: number }[]]>).map(([repId, raw]) => {
        const members = raw.map((r) => nodeById.get(r.id)!).filter(Boolean);
        const rep = nodeById.get(repId);
        if (!rep) return null;
        return (
          <Marker
            key={repId}
            position={[rep.lat, rep.lon]}
            icon={members.length > 1 ? nodeFanIcon(members) : nodeIcon(rep.status)}
          >
            <Popup minWidth={160}>
              <div className="space-y-2">
                {members.map((node, idx) => (
                  <div
                    key={node.node_id}
                    className={idx < members.length - 1 ? "border-b border-gray-200 pb-2" : ""}
                  >
                    <p className="font-semibold text-sm text-gray-900">{node.name}</p>
                    <p className="text-xs text-gray-500 font-mono">{node.node_id}</p>
                    <p className="text-xs capitalize text-gray-700">{node.status}</p>
                    {activeByNode[node.node_id] && (
                      <p className="text-xs text-orange-600 mt-0.5">
                        ● TG {activeByNode[node.node_id].talkgroup_id ?? "—"}{" "}
                        {activeByNode[node.node_id].talkgroup_name}
                      </p>
                    )}
                  </div>
                ))}
              </div>
            </Popup>
          </Marker>
        );
      })}
    </>
  );
}

// ── FanIncidentLayer ──────────────────────────────────────────────────────────
function FanIncidentLayer({
  incidents,
  onSelect,
}: {
  incidents: IncidentRecord[];
  onSelect: (inc: IncidentRecord) => void;
}) {
  const map = useMap();
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const h = () => setTick((t: number) => t + 1);
    map.on("zoomend moveend", h);
    return () => { map.off("zoomend moveend", h); };
  }, [map]);

  const plotted = useMemo(
    () =>
      incidents
        .filter((i) => i.location_coords)
        .map((i) => ({
          id: i.incident_id,
          lat: i.location_coords!.lat,
          lng: i.location_coords!.lng,
          inc: i,
        })),
    [incidents]
  );

  const incById = useMemo(
    () => new Map(plotted.map((p: { id: string; lat: number; lng: number; inc: IncidentRecord }) => [p.id, p.inc])),
    [plotted]
  );

  const groups = useMemo(
    () => computeGroups(plotted, map),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [plotted, map, tick]
  );

  return (
    <>
      {(Array.from(groups.entries()) as Array<[string, { id: string; lat: number; lng: number }[]]>).map(([repId, raw]) => {
        const members = raw.map((r) => incById.get(r.id)!).filter(Boolean);
        const repPlot = plotted.find((p: { id: string }) => p.id === repId);
        if (!repPlot) return null;
        return (
          <Marker
            key={repId}
            position={[repPlot.lat, repPlot.lng]}
            icon={members.length > 1 ? incidentFanIcon(members) : incidentIcon(repPlot.inc.type, repPlot.inc.severity)}
            eventHandlers={{ click: () => onSelect(repPlot.inc) }}
          >
            <Popup minWidth={180}>
              <div className="space-y-2">
                {members.map((inc, idx) => {
                  const color = severityColor(inc.severity);
                  return (
                    <div
                      key={inc.incident_id}
                      className={idx < members.length - 1 ? "border-b border-gray-200 pb-2" : ""}
                    >
                      <p className="font-semibold text-sm text-gray-900">{inc.title ?? "Incident"}</p>
                      <p className="text-xs capitalize font-medium" style={{ color }}>
                        {isKnownSeverity(inc.severity) ? SEVERITY_LABEL[inc.severity] : "Unknown"} · {inc.type ?? "other"}
                      </p>
                      {inc.location && <p className="text-xs text-gray-600">{inc.location}</p>}
                      <a
                        href={`/incidents/${inc.incident_id}`}
                        onClick={(e) => { e.stopPropagation(); window.location.href = `/incidents/${inc.incident_id}`; e.preventDefault(); }}
                        className="text-xs text-blue-600 hover:underline block mt-0.5"
                      >
                        View incident →
                      </a>
                    </div>
                  );
                })}
                {/* Gate A / A2 (server-26#46) — same screen as the output. */}
                <MachineOutputNotice variant="popup" />
              </div>
            </Popup>
          </Marker>
        );
      })}
    </>
  );
}

// ── Incident path layer — the flagship feature: a pursuit as a polyline ──────
// Per UI_REDESIGN.md §2.4/§5.1: an incident's map stops use the SAME index as
// its call timeline, so "where was he when he said that" is answered by
// looking, not cross-referencing timestamps. Needs no backend — per-call
// location_coords are already written by intelligence.py.
function IncidentPathLayer({
  incidents,
  callsByIncident,
}: {
  incidents: IncidentRecord[];
  callsByIncident: Map<string, CallRecord[]>;
}) {
  return (
    <>
      {incidents.map((inc) => {
        const calls = (callsByIncident.get(inc.incident_id) ?? [])
          .filter((c) => c.location_coords)
          .slice()
          .sort((a, b) => a.started_at.localeCompare(b.started_at));
        if (calls.length < 2) return null;
        const color = severityColor(inc.severity);
        const positions = calls.map((c) => [c.location_coords!.lat, c.location_coords!.lng] as [number, number]);
        return (
          <FeatureGroup key={inc.incident_id}>
            <Polyline
              positions={positions}
              pathOptions={{ color, weight: 3, opacity: 0.85, lineJoin: "round" }}
            />
            {calls.map((c, i) => (
              <Marker
                key={c.call_id}
                position={[c.location_coords!.lat, c.location_coords!.lng]}
                icon={pathStopIcon(i + 1, i === 0, i === calls.length - 1, color)}
              >
                <Popup minWidth={160}>
                  <div className="text-gray-900">
                    <p className="text-xs text-gray-500">Stop {i + 1} of {calls.length}</p>
                    <p className="font-semibold text-sm mt-0.5">{inc.title ?? "Incident"}</p>
                    {c.location && <p className="text-xs text-gray-600 mt-0.5">{c.location}</p>}
                    <a href={`/incidents/${inc.incident_id}`} className="text-xs text-blue-600 hover:underline block mt-1">
                      View incident →
                    </a>
                    {/* Gate A / A2 (server-26#46) — the stop location and its
                        ordering come from the transcript, not from GPS. */}
                    <MachineOutputNotice variant="popup" />
                  </div>
                </Popup>
              </Marker>
            ))}
          </FeatureGroup>
        );
      })}
    </>
  );
}

// ── Helpers ───────────────────────────────────────────────────────────────────
function timeAgo(date: Date): string {
  const s = Math.floor((Date.now() - date.getTime()) / 1000);
  if (s < 60) return `${s}s ago`;
  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
  return `${Math.floor(s / 3600)}h ago`;
}

// ── Main MapView ──────────────────────────────────────────────────────────────
interface Props {
  nodes: NodeRecord[];
  activeCalls: CallRecord[];
  incidents?: IncidentRecord[];
  /**
   * Calls to draw incident paths from — needs `location_coords` and
   * `incident_ids`/`incident_id`. Grouped internally by incident. Pass the
   * broadest set of recently-loaded calls the caller has (e.g. from
   * useCalls); an incident with fewer than 2 geocoded calls in this set
   * simply draws no path.
   */
  calls?: CallRecord[];
  lastUpdated?: Date | null;
}

export default function MapView({ nodes, activeCalls, incidents = [], calls = [], lastUpdated }: Props) {
  const [mapInstance, setMapInstance] = useState<L.Map | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [agoClock, setAgoClock] = useState(0);
  const [radarEpoch, setRadarEpoch] = useState(() => Date.now());

  useEffect(() => {
    const id = setInterval(() => setAgoClock((t: number) => t + 1), 10_000);
    return () => clearInterval(id);
  }, []);

  // Radar tiles are static once loaded — force remount every 5 min to refresh
  useEffect(() => {
    const id = setInterval(() => setRadarEpoch(Date.now()), 5 * 60 * 1000);
    return () => clearInterval(id);
  }, []);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const ago = useMemo(() => (lastUpdated ? timeAgo(lastUpdated) : null), [lastUpdated, agoClock]);

  const callsByIncident = useMemo(() => {
    const map = new Map<string, CallRecord[]>();
    for (const c of calls) {
      const ids = c.incident_ids?.length ? c.incident_ids : c.incident_id ? [c.incident_id] : [];
      for (const id of ids) {
        if (!map.has(id)) map.set(id, []);
        map.get(id)!.push(c);
      }
    }
    return map;
  }, [calls]);

  const allPositions = useMemo(
    () => [
      ...nodes.map((n) => [n.lat, n.lon] as [number, number]),
      ...incidents
        .filter((i) => i.location_coords)
        .map((i) => [i.location_coords!.lat, i.location_coords!.lng] as [number, number]),
    ],
    [nodes, incidents]
  );

  const center: [number, number] =
    nodes.length > 0
      ? [nodes[0].lat, nodes[0].lon]
      : allPositions.length > 0
      ? allPositions[0]
      : [39.5, -98.35];

  const zoom = nodes.length > 0 ? 10 : allPositions.length > 0 ? 14 : 4;

  const handleFitAll = useCallback(() => {
    if (!mapInstance || allPositions.length === 0) return;
    if (allPositions.length === 1) {
      mapInstance.setView(allPositions[0], 14);
    } else {
      mapInstance.fitBounds(L.latLngBounds(allPositions), { padding: [40, 40] });
    }
  }, [mapInstance, allPositions]);

  const handleIncidentSelect = useCallback(
    (inc: IncidentRecord) => {
      if (!mapInstance || !inc.location_coords) return;
      mapInstance.flyTo([inc.location_coords.lat, inc.location_coords.lng], 15, { duration: 1.2 });
    },
    [mapInstance]
  );

  const onMapReady = useCallback((m: L.Map) => setMapInstance(m), []);

  return (
    <div className="relative w-full h-full">
      {/* ── Map container ───────────────────────────────────────────────────── */}
      <MapContainer
        center={center}
        zoom={zoom}
        className="w-full h-full"
        style={{ background: "var(--map-bg)" }}
      >
        <MapRefCapture onReady={onMapReady} />

        <LayersControl position="topright">
          {/* Base layers */}
          <LayersControl.BaseLayer checked name="Dark">
            <TileLayer
              url={MAP_TILE_URL}
              attribution={MAP_TILE_ATTRIBUTION}
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer name="Light">
            <TileLayer
              url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
              attribution={MAP_TILE_ATTRIBUTION}
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer name="Streets">
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            />
          </LayersControl.BaseLayer>

          {/* Overlay: Nodes */}
          <LayersControl.Overlay checked name="Nodes">
            <FeatureGroup>
              <FanNodeLayer nodes={nodes} activeCalls={activeCalls} />
            </FeatureGroup>
          </LayersControl.Overlay>

          {/* Overlay: Active Incidents */}
          <LayersControl.Overlay checked name="Active Incidents">
            <FeatureGroup>
              <FanIncidentLayer incidents={incidents} onSelect={handleIncidentSelect} />
            </FeatureGroup>
          </LayersControl.Overlay>

          {/* Overlay: Incident paths — the flagship feature */}
          <LayersControl.Overlay checked name="Incident Paths">
            <FeatureGroup>
              <IncidentPathLayer incidents={incidents} callsByIncident={callsByIncident} />
            </FeatureGroup>
          </LayersControl.Overlay>

          {/* Overlay: Aircraft — node-26#9 second-SDR ADS-B live snapshot, opt-in */}
          <LayersControl.Overlay name="Aircraft">
            <FeatureGroup>
              <AircraftLayer />
            </FeatureGroup>
          </LayersControl.Overlay>

          {/* Overlay: Weather Radar — NEXRAD via Iowa Env Mesonet; key forces remount on refresh */}
          <LayersControl.Overlay name="Weather Radar">
            <TileLayer
              key={radarEpoch}
              url="https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0r-900913/{z}/{x}/{y}.png"
              attribution='Radar &copy; <a href="https://mesonet.agron.iastate.edu/">IEM/NWS</a>'
              opacity={0.65}
            />
          </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>

      {/* ── Live timestamp ───────────────────────────────────────────────────── */}
      {ago && (
        <div className="absolute top-3 left-1/2 -translate-x-1/2 z-[1001] pointer-events-none">
          <span className="bg-surface/90 border border-line rounded-full px-3 py-1 text-xs text-accent whitespace-nowrap">
            ● Live · {ago}
          </span>
        </div>
      )}

      {/* ── Map action buttons — top-left, below zoom controls ──────────────── */}
      <div className="absolute top-[4.5rem] left-3 z-[1002] flex flex-col gap-1">
        {mapInstance && allPositions.length > 0 && (
          <button
            onClick={handleFitAll}
            title="Fit all markers in view"
            className="w-8 h-8 bg-surface/90 border border-line rounded text-ink text-base leading-none hover:bg-raised transition-colors flex items-center justify-center select-none"
          >
            ⤢
          </button>
        )}
      </div>

      {/* ── Legend — shape-first, both themes. Never a bare colour swatch. ──── */}
      <div className="absolute bottom-8 right-3 z-[1001] bg-surface/90 border border-line rounded-lg px-3 py-2.5 text-xs pointer-events-none space-y-2 max-h-[calc(100%-4rem)] overflow-y-auto">
        <div className="space-y-1">
          <p className="text-ink-muted font-medium text-[10px] uppercase tracking-wide">Severity</p>
          {(["major", "moderate", "minor", "routine"] as Severity[]).map((sev) => (
            <div key={sev} className="flex items-center gap-2">
              <span style={{ width: 16, display: "inline-flex", justifyContent: "center" }}>
                {sev === "major" && (
                  <svg width="12" height="12" viewBox="0 0 16 16"><polygon points="8,1.5 14.5,14.5 1.5,14.5" fill={SEVERITY_COLORS.major} /></svg>
                )}
                {sev === "moderate" && (
                  <svg width="12" height="12" viewBox="0 0 16 16"><polygon points="8,1.5 14.5,14.5 1.5,14.5" fill="none" stroke={SEVERITY_COLORS.moderate} strokeWidth={1.75} /></svg>
                )}
                {sev === "minor" && (
                  <svg width="12" height="12" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="none" stroke={SEVERITY_COLORS.minor} strokeWidth={1.75} /></svg>
                )}
                {sev === "routine" && (
                  <svg width="12" height="12" viewBox="0 0 16 16" style={{ opacity: 0.6 }}><circle cx="8" cy="8" r="6" fill="none" stroke={SEVERITY_COLORS.routine} strokeWidth={1.25} /></svg>
                )}
              </span>
              <span className="text-ink-2">{SEVERITY_LABEL[sev]}</span>
            </div>
          ))}
        </div>
        <div className="border-t border-line pt-1.5 space-y-1">
          <p className="text-ink-muted font-medium text-[10px] uppercase tracking-wide">Nodes</p>
          {([
            ["recording", "Recording"],
            ["online", "Online"],
            ["offline", "Offline"],
            ["unconfigured", "Unconfigured"],
          ] as [NodeStatus, string][]).map(([status, label]) => (
            <div key={status} className="flex items-center gap-2">
              <span style={{ width: 16, display: "inline-flex", justifyContent: "center" }}>
                <svg width="11" height="11" viewBox="0 0 11 11" dangerouslySetInnerHTML={{ __html: nodeDiamondSvg(status, 11) }} />
              </span>
              <span className="text-ink-2">{label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* ── Incident overlay panel ───────────────────────────────────────────── */}
      {incidents.length > 0 && (
        <>
          {/* Desktop: left sidebar — offset below the zoom stack + fit-all button
              so it never overlaps the Leaflet +/- controls (#118). Height is
              capped and the list scrolls on its own, so the rail never reaches
              the bottom-right legend. pointer-events are off on the wrapper and
              back on for the cards, so the map still pans in the gaps. */}
          <div className="absolute top-[9.5rem] left-3 z-[1001] hidden md:flex flex-col w-56 gap-1.5 max-h-[calc(100%-12rem)] pointer-events-none">
            {/* Gate A / A2 (server-26#46) — the rail's titles, locations and
                unit counts are pipeline output. Pinned above the scroll area
                so it cannot be scrolled off the screen it qualifies. */}
            <div className="bg-surface/90 backdrop-blur-sm border border-line rounded-lg px-2 py-1.5 shrink-0 pointer-events-auto">
              <MachineOutputNotice variant="inline" className="text-[10px] leading-snug items-start" />
            </div>
            <div className="flex flex-col gap-1.5 overflow-y-auto min-h-0 pointer-events-auto">
            {incidents.map((inc) => {
              const color = severityColor(inc.severity);
              const age = inc.started_at ? timeAgo(new Date(inc.started_at)) : null;
              const unitCount = inc.units_active?.length ?? inc.units?.length ?? 0;
              const baseClass = "w-full text-left bg-surface/90 backdrop-blur-sm border rounded-lg px-3 py-2 text-xs hover:brightness-110 transition-all";
              const cardBody = (
                <>
                  <div className="flex items-center gap-1.5 mb-0.5">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: TYPE_GLYPH_PATHS[inc.type === "accident" ? "collision" : (inc.type && TYPE_GLYPH_PATHS[inc.type] ? inc.type : "other")] }} />
                    <span className="uppercase tracking-wide font-semibold text-[10px]" style={{ color }}>
                      {isKnownSeverity(inc.severity) ? SEVERITY_LABEL[inc.severity] : "Unknown"}
                    </span>
                  </div>
                  <p className="text-ink font-semibold leading-snug truncate">
                    {inc.title ?? "Incident"}
                  </p>
                  {inc.location && (
                    <p className="text-ink-muted truncate mt-0.5">{inc.location}</p>
                  )}
                  <div className="flex items-center justify-between mt-0.5">
                    {age && <span className="text-ink-muted font-mono">{age}</span>}
                    {unitCount > 0 && (
                      <span className="text-ink-muted font-mono">{unitCount} unit{unitCount !== 1 ? "s" : ""}</span>
                    )}
                  </div>
                  {!inc.location_coords && (
                    <p className="text-[10px] text-accent mt-1">View details →</p>
                  )}
                </>
              );
              if (inc.location_coords) {
                return (
                  <button
                    key={inc.incident_id}
                    onClick={() => handleIncidentSelect(inc)}
                    className={baseClass}
                    style={{ borderColor: color + "55" }}
                  >
                    {cardBody}
                  </button>
                );
              }
              return (
                <a
                  key={inc.incident_id}
                  href={`/incidents/${inc.incident_id}`}
                  className={`block ${baseClass}`}
                  style={{ borderColor: color + "55" }}
                >
                  {cardBody}
                </a>
              );
            })}
            </div>
          </div>

          {/* Mobile: bottom drawer */}
          <div className="absolute bottom-0 left-0 right-0 z-[1001] md:hidden">
            <button
              onClick={() => setDrawerOpen((v: boolean) => !v)}
              className="w-full bg-surface/95 border-t border-line px-4 py-2 text-xs text-ink-2 flex items-center justify-between"
            >
              <span>Incidents ({incidents.length})</span>
              <span>{drawerOpen ? "▼" : "▲"}</span>
            </button>
            {drawerOpen && (
              <div className="bg-surface/95 border-t border-line max-h-52 overflow-y-auto px-3 py-2 space-y-1.5">
                {/* Gate A / A2 (server-26#46) */}
                <MachineOutputNotice variant="inline" className="text-[10px] items-start" />
                {incidents.map((inc) => {
                  const color = severityColor(inc.severity);
                  const label = (
                    <>
                      <span className="font-semibold" style={{ color }}>
                        {isKnownSeverity(inc.severity) ? SEVERITY_LABEL[inc.severity] : "Unknown"}
                      </span>
                      {" — "}
                      <span className="text-ink">{inc.title ?? "Incident"}</span>
                    </>
                  );
                  if (inc.location_coords) {
                    return (
                      <button
                        key={inc.incident_id}
                        onClick={() => {
                          setDrawerOpen(false);
                          handleIncidentSelect(inc);
                        }}
                        className="w-full text-left border rounded px-2 py-1.5 text-xs"
                        style={{ borderColor: color + "55" }}
                      >
                        {label}
                      </button>
                    );
                  }
                  return (
                    <a
                      key={inc.incident_id}
                      href={`/incidents/${inc.incident_id}`}
                      className="block w-full text-left border rounded px-2 py-1.5 text-xs"
                      style={{ borderColor: color + "55" }}
                    >
                      {label}
                    </a>
                  );
                })}
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
}