server-26/drb-frontend/components/MapView.tsx

"use client";

import { MapContainer, TileLayer, Marker, Popup, LayersControl, FeatureGroup } from "react-leaflet";
import L from "leaflet";
import type { NodeRecord, CallRecord, IncidentRecord } from "@/lib/types";

// Fix Leaflet default icon paths broken by webpack
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",
});

const nodeIcon = (status: string) =>
  L.divIcon({
    className: "",
    html: `<div style="
      width:14px;height:14px;border-radius:50%;
      background:${status === "online" || status === "recording" ? "#4ade80" : status === "unconfigured" ? "#818cf8" : "#6b7280"};
      border:2px solid #111827;
      box-shadow:0 0 6px ${status === "recording" ? "#fb923c" : "transparent"};
    "></div>`,
    iconSize: [14, 14],
    iconAnchor: [7, 7],
  });

const INCIDENT_COLORS: Record<string, string> = {
  fire:     "#ef4444",
  police:   "#3b82f6",
  ems:      "#eab308",
  accident: "#f97316",
  other:    "#6b7280",
};

const incidentIcon = (type: string | null) => {
  const color = INCIDENT_COLORS[type ?? "other"] ?? INCIDENT_COLORS.other;
  return L.divIcon({
    className: "",
    html: `<div style="
      width:16px;height:16px;border-radius:3px;
      background:${color};border:2px solid #111827;
      display:flex;align-items:center;justify-content:center;
      font-size:9px;color:#111827;font-weight:bold;line-height:1;
    ">!</div>`,
    iconSize: [16, 16],
    iconAnchor: [8, 8],
  });
};

interface Props {
  nodes: NodeRecord[];
  activeCalls: CallRecord[];
  incidents?: IncidentRecord[];
}

export default function MapView({ nodes, activeCalls, incidents = [] }: Props) {
  const activeByNode = Object.fromEntries(
    activeCalls.map((c) => [c.node_id, c])
  );

  const plottedIncidents = incidents.flatMap((inc) =>
    inc.location_coords
      ? [{ inc, pos: [inc.location_coords.lat, inc.location_coords.lng] as [number, number] }]
      : []
  );

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

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

  return (
    <div className="relative w-full h-full">
      <MapContainer
        center={center}
        zoom={zoom}
        className="w-full h-full rounded-lg"
        style={{ background: "#111827" }}
      >
        <LayersControl position="topright">
          {/* Base layers */}
          <LayersControl.BaseLayer checked name="Dark">
            <TileLayer
              url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
              attribution='&copy; <a href="https://carto.com/">CARTO</a>'
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer name="Light">
            <TileLayer
              url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
              attribution='&copy; <a href="https://carto.com/">CARTO</a>'
            />
          </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>
              {nodes.map((node) => (
                <Marker
                  key={node.node_id}
                  position={[node.lat, node.lon]}
                  icon={nodeIcon(node.status)}
                >
                  <Popup className="font-mono">
                    <div className="text-gray-900">
                      <p className="font-bold">{node.name}</p>
                      <p className="text-xs text-gray-500">{node.node_id}</p>
                      <p className="text-xs mt-1 capitalize">{node.status}</p>
                      {activeByNode[node.node_id] && (
                        <p className="text-xs text-orange-600 mt-1">
                          ● TG {activeByNode[node.node_id].talkgroup_id ?? "—"}{" "}
                          {activeByNode[node.node_id].talkgroup_name}
                        </p>
                      )}
                    </div>
                  </Popup>
                </Marker>
              ))}
            </FeatureGroup>
          </LayersControl.Overlay>

          {/* Overlay: Active Incidents */}
          <LayersControl.Overlay checked name="Active Incidents">
            <FeatureGroup>
              {plottedIncidents.map(({ inc, pos }) => (
                <Marker
                  key={inc.incident_id}
                  position={pos}
                  icon={incidentIcon(inc.type)}
                >
                  <Popup className="font-mono">
                    <div className="text-gray-900">
                      <p className="font-bold">{inc.title ?? "Incident"}</p>
                      <p className="text-xs capitalize" style={{ color: INCIDENT_COLORS[inc.type ?? "other"] ?? INCIDENT_COLORS.other }}>
                        {inc.type ?? "other"}
                      </p>
                      <p className="text-xs mt-1 capitalize">{inc.status}</p>
                      {inc.location && <p className="text-xs text-gray-600 mt-1">{inc.location}</p>}
                      <p className="text-xs text-gray-500">{inc.call_ids.length} call{inc.call_ids.length !== 1 ? "s" : ""}</p>
                      {inc.summary && <p className="text-xs mt-1">{inc.summary}</p>}
                      <a href={`/incidents/${inc.incident_id}`} className="text-xs text-blue-600 hover:underline mt-1 block">
                        View incident →
                      </a>
                    </div>
                  </Popup>
                </Marker>
              ))}
            </FeatureGroup>
          </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>

      {/* Legend overlay — inside the map wrapper, above tiles */}
      <div className="absolute bottom-8 left-3 z-[1001] bg-gray-950/90 border border-gray-800 rounded-lg px-3 py-2 text-xs font-mono pointer-events-none space-y-1">
        <div className="flex items-center gap-2"><span className="text-green-400">●</span> Online</div>
        <div className="flex items-center gap-2"><span className="text-orange-400">●</span> Recording</div>
        <div className="flex items-center gap-2"><span className="text-indigo-400">●</span> Unconfigured</div>
        <div className="flex items-center gap-2"><span className="text-gray-500">●</span> Offline</div>
        <div className="border-t border-gray-800 my-0.5" />
        <div className="flex items-center gap-2"><span className="text-red-500">■</span> Fire</div>
        <div className="flex items-center gap-2"><span className="text-blue-500">■</span> Police</div>
        <div className="flex items-center gap-2"><span className="text-yellow-500">■</span> EMS</div>
        <div className="flex items-center gap-2"><span className="text-orange-500">■</span> Accident</div>
      </div>
    </div>
  );
}