teecup/frontend/components/shot/map-point-picker.tsx

"use client"

import { useEffect, useRef, useState } from "react"
import mapboxgl from "mapbox-gl"
import "mapbox-gl/dist/mapbox-gl.css"
import { MapPin } from "lucide-react"

type LngLat = { lng: number; lat: number }

/**
 * MapPointPicker
 *
 * Rendered ONLY when the user chooses "Velg punkt på kart", and always via
 * next/dynamic(..., { ssr: false }) from the parent. It mounts once per
 * sheet-open and stays mounted until the sheet closes, so the Mapbox map is
 * created exactly once (empty-deps useEffect) — taps, pans and marker drags
 * never re-initialise it. This keeps Mapbox map loads (which are billed) to a
 * single load per sheet-open.
 */
export function MapPointPicker({ onConfirm }: { onConfirm: (lngLat: LngLat) => void }) {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const mapRef = useRef<mapboxgl.Map | null>(null)
  const markerRef = useRef<mapboxgl.Marker | null>(null)

  const [loaded, setLoaded] = useState(false)
  const [point, setPoint] = useState<LngLat | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const token = process.env.NEXT_PUBLIC_MAPBOX_TOKEN
    const container = containerRef.current
    if (!container) return

    if (!token) {
      setError("Kartet er ikke tilgjengelig akkurat nå. Bruk «Min posisjon nå» i stedet.")
      return
    }

    let cancelled = false

    // Reell bug funnet 2026-08-08: kartet sentrerte ALLTID på en hardkodet
    // Oslo-koordinat -- en kommentar her hevdet "real app centers on
    // last-known position", men den logikken fantes aldri, kun påstanden.
    // Henter nå brukerens faktiske GPS-posisjon FØR kartet initialiseres
    // (kun ETT kall, samme som "Min posisjon nå"-veien -- ingen løpende
    // watchPosition), med Oslo som fallback KUN hvis posisjon ikke kan
    // hentes (avslått tillatelse, tidsavbrudd, ingen støtte).
    function initMap(center: [number, number]) {
      if (cancelled || !container) return
      mapboxgl.accessToken = token as string
      const map = new mapboxgl.Map({
        container,
        style: "mapbox://styles/mapbox/satellite-v9",
        center,
        zoom: 16,
        attributionControl: false,
      })
      mapRef.current = map

      map.on("load", () => setLoaded(true))
      map.on("error", () => setError("Kunne ikke laste kartet."))

      // Tap to place/move a single draggable marker — never re-inits the map.
      map.on("click", (e) => {
        const lngLat = { lng: e.lngLat.lng, lat: e.lngLat.lat }
        if (!markerRef.current) {
          const marker = new mapboxgl.Marker({ draggable: true, color: "#d2551a" })
            .setLngLat(e.lngLat)
            .addTo(map)
          marker.on("dragend", () => {
            const p = marker.getLngLat()
            setPoint({ lng: p.lng, lat: p.lat })
          })
          markerRef.current = marker
        } else {
          markerRef.current.setLngLat(e.lngLat)
        }
        setPoint(lngLat)
      })
    }

    const OSLO_FALLBACK: [number, number] = [10.7522, 59.9139]
    if (typeof navigator !== "undefined" && navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (pos) => initMap([pos.coords.longitude, pos.coords.latitude]),
        () => initMap(OSLO_FALLBACK),
        { enableHighAccuracy: true, timeout: 8000 },
      )
    } else {
      initMap(OSLO_FALLBACK)
    }

    return () => {
      cancelled = true
      markerRef.current?.remove()
      markerRef.current = null
      mapRef.current?.remove()
      mapRef.current = null
    }
  }, [])

  return (
    <div className="flex h-full flex-col">
      <div className="relative flex-1">
        {/* Map canvas host — kept mounted for the map's whole lifetime.
            `h-full w-full`, IKKE `absolute inset-0`: mapbox-gl.css sin egen
            `.mapboxgl-map { position: relative }`-regel overstyrer en
            `absolute`-Tailwind-klasse her (samme klasse-navn, senere i
            cascade siden mapbox-gl.css importeres i denne komponentfilen)
            -- når posisjonen dermed blir `relative` i stedet for
            `absolute`, mister `inset-0` all effekt på størrelsen (den
            styrer kun posisjon/størrelse for absolutt/fixed-plasserte
            elementer), og beholderen kollapser til 0 høyde uansett hvilken
            posisjonsverdi som vinner kappløpet. `h-full`/`w-full` løser
            størrelsen via prosent-arv i stedet, som fungerer likt for
            både `relative` og `absolute`. Reell bug funnet 2026-08-08,
            se CHANGELOG.md. */}
        <div ref={containerRef} className="absolute inset-0 h-full w-full" aria-label="Satellittkart" role="application" />

        {!loaded && !error ? (
          <div className="absolute inset-0 flex items-center justify-center bg-background">
            <div className="flex flex-col items-center gap-4">
              <div className="size-8 animate-spin rounded-full border-4 border-primary/20 border-t-primary" />
              <p className="text-base text-muted-foreground">Laster kart …</p>
            </div>
          </div>
        ) : null}

        {error ? (
          <div className="absolute inset-0 flex items-center justify-center p-6">
            <p role="alert" className="max-w-sm text-center text-base text-destructive">
              {error}
            </p>
          </div>
        ) : null}

        {loaded && !point && !error ? (
          <div className="pointer-events-none absolute inset-x-0 top-4 flex justify-center px-4">
            <p className="flex items-center gap-2 rounded-full bg-card/95 px-4 py-2 text-sm font-semibold text-foreground shadow-md">
              <MapPin className="size-4 shrink-0" aria-hidden="true" />
              Trykk på kartet for å plassere punktet
            </p>
          </div>
        ) : null}
      </div>

      <div className="shrink-0 border-t border-border bg-background p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
        <button
          type="button"
          disabled={!point}
          onClick={() => point && onConfirm(point)}
          className="inline-flex min-h-14 w-full items-center justify-center rounded-xl bg-primary px-6 text-lg font-bold text-primary-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
        >
          Bekreft punkt
        </button>
      </div>
    </div>
  )
}

export default MapPointPicker