Module.register("MMM-CombinedMap", {
  defaults: {
    // Map settings
    lat: 49.8833,
    lng: 8.8333,
    zoom: 7,
    width: "300px",
    height: "300px",
    
    // Marker
    showMarker: true,
    markerColor: "#3388ff",
    
    // Layers
    showTraffic: true,
    showRadar: true,
    
    // TomTom API key (get free at developer.tomtom.com)
    tomtomApiKey: "",
    
    // Animation settings
    animationSpeed: 500,      // ms per frame
    radarOpacity: 0.7,
    trafficOpacity: 0.7,
    
    // Update interval (ms) - how often to refresh radar data
    updateInterval: 5 * 60 * 1000,  // 5 minutes
  },

  getStyles: function() {
    return [
      "MMM-CombinedMap.css",
      "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    ];
  },

  getScripts: function() {
    return [
      "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    ];
  },

  start: function() {
    Log.info("Starting module: " + this.name);
    this.loaded = false;
    this.map = null;
    this.radarLayers = [];
    this.currentRadarIndex = 0;
    this.animationTimer = null;
    this.radarTimestamps = [];
  },

  getDom: function() {
    const wrapper = document.createElement("div");
    wrapper.id = "mmm-combinedmap-" + this.identifier;
    wrapper.className = "mmm-combinedmap-wrapper";
    wrapper.style.width = this.config.width;
    wrapper.style.height = this.config.height;
    
    if (!this.loaded) {
      wrapper.innerHTML = "Loading map...";
      // Initialize map after DOM is ready
      setTimeout(() => this.initMap(wrapper), 100);
    }
    
    return wrapper;
  },

  initMap: function(container) {
    if (this.map) return;
    
    const mapId = "mmm-combinedmap-" + this.identifier;
    const mapContainer = document.getElementById(mapId);
    if (!mapContainer) return;
    
    mapContainer.innerHTML = "";
    
    // Create map
    this.map = L.map(mapId, {
      zoomControl: false,
      attributionControl: false,
      dragging: false,
      scrollWheelZoom: false,
      doubleClickZoom: false,
      boxZoom: false,
      keyboard: false,
      touchZoom: false
    }).setView([this.config.lat, this.config.lng], this.config.zoom);
    
    // Dark base map (CartoDB Dark Matter)
    L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", {
      maxZoom: 19,
      opacity: 1
    }).addTo(this.map);
    
    // Traffic layer (TomTom)
    if (this.config.showTraffic && this.config.tomtomApiKey) {
      this.addTrafficLayer();
    }
    
    // Radar layer (DWD)
    if (this.config.showRadar) {
      this.initRadarLayers();
    }
    
    // Marker
    if (this.config.showMarker) {
      const markerIcon = L.divIcon({
        className: "mmm-combinedmap-marker",
        html: `<div style="background-color: ${this.config.markerColor}; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 4px rgba(0,0,0,0.5);"></div>`,
        iconSize: [16, 16],
        iconAnchor: [8, 8]
      });
      L.marker([this.config.lat, this.config.lng], { icon: markerIcon }).addTo(this.map);
    }
    
    this.loaded = true;
    
    // Set up periodic refresh
    setInterval(() => this.refreshRadar(), this.config.updateInterval);
  },

  addTrafficLayer: function() {
    // TomTom Traffic Flow tiles
    const trafficLayer = L.tileLayer(
      `https://api.tomtom.com/traffic/map/4/tile/flow/relative0/{z}/{x}/{y}.png?key=${this.config.tomtomApiKey}&tileSize=256`,
      {
        maxZoom: 18,
        opacity: this.config.trafficOpacity
      }
    );
    trafficLayer.addTo(this.map);
    
    // Also add traffic incidents overlay
    const incidentsLayer = L.tileLayer(
      `https://api.tomtom.com/traffic/map/4/tile/incidents/s3/{z}/{x}/{y}.png?key=${this.config.tomtomApiKey}&tileSize=256`,
      {
        maxZoom: 18,
        opacity: this.config.trafficOpacity
      }
    );
    incidentsLayer.addTo(this.map);
  },

  initRadarLayers: function() {
    // Fetch available radar timestamps from DWD
    this.fetchRadarTimestamps();
  },

  fetchRadarTimestamps: function() {
    // DWD WMS GetCapabilities to find available times
    // For simplicity, we'll generate timestamps for the last 2 hours + 2 hours forecast
    // DWD updates every 5 minutes
    
    const now = new Date();
    const timestamps = [];
    
    // Past 2 hours (every 5 minutes = 24 frames)
    for (let i = 24; i >= 0; i--) {
      const t = new Date(now.getTime() - i * 5 * 60 * 1000);
      // Round to nearest 5 minutes
      t.setMinutes(Math.floor(t.getMinutes() / 5) * 5, 0, 0);
      timestamps.push(t);
    }
    
    // Future 2 hours (nowcast) - every 5 minutes = 24 frames
    for (let i = 1; i <= 24; i++) {
      const t = new Date(now.getTime() + i * 5 * 60 * 1000);
      t.setMinutes(Math.floor(t.getMinutes() / 5) * 5, 0, 0);
      timestamps.push(t);
    }
    
    this.radarTimestamps = timestamps;
    this.createRadarLayers();
  },

  createRadarLayers: function() {
    // Clear existing layers
    this.radarLayers.forEach(layer => {
      if (this.map.hasLayer(layer.leafletLayer)) {
        this.map.removeLayer(layer.leafletLayer);
      }
    });
    this.radarLayers = [];
    
    // DWD WMS for radar
    // Using RV (Radar Vorhersage/Forecast) product for nowcast
    // and standard radar for past
    
    const now = new Date();
    
    this.radarTimestamps.forEach((timestamp, index) => {
      const isForecast = timestamp > now;
      const timeStr = timestamp.toISOString();
      
      // DWD WMS layer - using Niederschlagsradar (precipitation radar)
      const layer = L.tileLayer.wms("https://maps.dwd.de/geoserver/dwd/wms", {
        layers: isForecast ? "dwd:RV-Produkt" : "dwd:Niederschlagsradar",
        format: "image/png",
        transparent: true,
        opacity: 0,  // Start hidden
        time: timeStr,
        styles: "",
        version: "1.3.0",
        crs: L.CRS.EPSG3857
      });
      
      layer.addTo(this.map);
      
      this.radarLayers.push({
        leafletLayer: layer,
        timestamp: timestamp,
        isForecast: isForecast
      });
    });
    
    // Start animation
    if (this.radarLayers.length > 0) {
      this.startAnimation();
    }
  },

  startAnimation: function() {
    if (this.animationTimer) {
      clearInterval(this.animationTimer);
    }
    
    // Show first frame
    this.showRadarFrame(0);
    
    this.animationTimer = setInterval(() => {
      this.currentRadarIndex = (this.currentRadarIndex + 1) % this.radarLayers.length;
      this.showRadarFrame(this.currentRadarIndex);
    }, this.config.animationSpeed);
  },

  showRadarFrame: function(index) {
    this.radarLayers.forEach((layer, i) => {
      if (i === index) {
        layer.leafletLayer.setOpacity(this.config.radarOpacity);
      } else {
        layer.leafletLayer.setOpacity(0);
      }
    });
    
    // Update timestamp display if needed
    this.updateTimestampDisplay(this.radarLayers[index]);
  },

  updateTimestampDisplay: function(layer) {
    const container = document.getElementById("mmm-combinedmap-" + this.identifier);
    if (!container) return;
    
    let timestampEl = container.querySelector(".radar-timestamp");
    if (!timestampEl) {
      timestampEl = document.createElement("div");
      timestampEl.className = "radar-timestamp";
      container.appendChild(timestampEl);
    }
    
    const time = layer.timestamp;
    const now = new Date();
    const diffMinutes = Math.round((time - now) / 60000);
    
    let label;
    if (diffMinutes === 0) {
      label = "Now";
    } else if (diffMinutes > 0) {
      label = `+${diffMinutes} min`;
    } else {
      label = `${diffMinutes} min`;
    }
    
    timestampEl.textContent = label;
    timestampEl.classList.toggle("forecast", layer.isForecast);
  },

  refreshRadar: function() {
    Log.info("MMM-CombinedMap: Refreshing radar data");
    this.fetchRadarTimestamps();
  },

  suspend: function() {
    if (this.animationTimer) {
      clearInterval(this.animationTimer);
      this.animationTimer = null;
    }
  },

  resume: function() {
    if (this.radarLayers.length > 0) {
      this.startAnimation();
    }
  }
});