/* mapsLoader.ts – einzige zentrale Leaflet-Initialisierung */
import 'leaflet/dist/leaflet.css';
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';

import L from 'leaflet';
import 'leaflet.markercluster';

/* --- Standard-Icon überschreiben --------------------------------------- */
delete (L.Icon.Default.prototype as any)._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: '/images/leaflet/marker-icon-2x.png',
  iconUrl:       '/images/leaflet/marker-icon.png',
  shadowUrl:     '/images/leaflet/marker-shadow.png',
});

/* --- Gateway-Spezifikationen ------------------------------------------- */
export const GATEWAY_COVERAGE = 5000;
export const gatewayIcon = L.icon({
  iconUrl:   '/images/leaflet/wifi-router.png',
  iconSize:  [28, 28],
  iconAnchor:[14, 28],
});

/* --- Factory für dynamischen Import (SSR-safe) ------------------------- */
export const loadLeaflet = async () => {
  /*
   * Wenn du Server-Side-Rendering einsetzt, kann es passieren,
   * dass L im globalen Scope nicht definiert ist (window fehlt).
   * Mit einem dynamischen Import vermeidest du das Problem.
   */
  if (typeof window === 'undefined') return null;      // SSR-Guard
  return Promise.resolve(L);
};
export const getColoredMarkerIcon = (color: 'green' | 'orange' | 'red' | 'grey') =>
  L.icon({
    iconUrl: `/images/leaflet/marker-${color}.png`,
    shadowUrl: '/images/leaflet/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41],
  });