/**
 * Karte für Fahrtdetails.
 *
 * Leaflet kommt hier **aus dem Bündel**, nicht von einem CDN. Im alten Panel
 * wurde es zur Laufzeit nachgeladen, was auf einem Handy ohne eigenen
 * Internetzugang (nur über den VPN-Tunnel erreichbar) stillschweigend nichts
 * anzeigte — ein offener Befund des Audits. Die Kacheln selbst bleiben
 * zwangsläufig entfernt; fehlen sie, bleibt wenigstens die Karte samt Markern
 * bedienbar statt leer.
 */

import { useEffect, useRef } from "react"

import "leaflet/dist/leaflet.css"

import { useTheme } from "../theme"

export interface Punkt {
  lat: number
  lon: number
}

const KACHELN = {
  nacht: {
    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
    zusatz: "© OpenStreetMap, © CARTO",
  },
  tag: {
    url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
    zusatz: "© OpenStreetMap, © CARTO",
  },
} as const

export function Karte({ start, ziel }: { start: Punkt; ziel?: Punkt }) {
  const behaelter = useRef<HTMLDivElement | null>(null)
  const [theme] = useTheme()

  useEffect(() => {
    const element = behaelter.current
    if (!element) return

    let karte: import("leaflet").Map | null = null
    let abgebrochen = false

    // Dynamisch geladen, damit Leaflet nicht im Startbündel jeder Seite liegt —
    // gebündelt wird es trotzdem, es kommt aus node_modules, nicht aus dem Netz.
    void import("leaflet").then((L) => {
      if (abgebrochen) return
      karte = L.map(element, { attributionControl: true, scrollWheelZoom: false })
      const kachel = KACHELN[theme]
      L.tileLayer(kachel.url, { attribution: kachel.zusatz, maxZoom: 19 }).addTo(karte)

      const punkte: [number, number][] = [[start.lat, start.lon]]
      L.circleMarker([start.lat, start.lon], { radius: 6, color: "#F50537" })
        .bindTooltip("Start")
        .addTo(karte)

      if (ziel) {
        punkte.push([ziel.lat, ziel.lon])
        L.circleMarker([ziel.lat, ziel.lon], { radius: 6, color: "#F50537", fill: true })
          .bindTooltip("Ziel")
          .addTo(karte)
        // Verbindungslinie NUR zwischen echten Punkten, kein erfundener Verlauf.
        L.polyline(punkte, { color: "#F50537", weight: 2, dashArray: "4 6" }).addTo(karte)
      }

      if (punkte.length > 1) {
        karte.fitBounds(punkte, { padding: [24, 24] })
      } else {
        karte.setView(punkte[0]!, 14)
      }
    })

    return () => {
      abgebrochen = true
      karte?.remove()
    }
  }, [start, ziel, theme])

  return <div ref={behaelter} className="dm-karte" role="img" aria-label="Karte der Fahrt" />
}
