import { useCallback, useEffect, useRef } from "react";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import L from "leaflet";
import type { Feature, FeatureCollection, Geometry, MultiPoint, Point, GeoJsonObject, GeoJsonProperties } from "geojson";
import { activeLayersAtom } from "../state/active-layers";
import { leafletLayerInstancesAtom } from "../state/leaflet-layer-instances";
import { featureInformationAtom, FeatureInformationType } from "../state/feature-information";
import { constructWfsUrl } from "@/shared/utils/wms";
import colorScaleApi from "@/shared/services/color-scale";
import { appConfig } from "@/shared/config/app-config";
import { mergeDataToGeoJSON } from "@/shared/utils/mege-data-geojson";
import jatimGeojson from "@/public/jatim.json";

// -------- Helpers (module scope) --------
const isRecord = (v: unknown): v is Record<string, unknown> => typeof v === "object" && v !== null;

const looksLikeUrl = (s: string): boolean => {
  const t = s.trim();
  if (/^(data:)/i.test(t)) return true;
  if (/^https?:\/\//i.test(t)) return true;
  if (/\.(svg|png|jpg|jpeg|gif)(\?|#|$)/i.test(t)) return true;
  return false;
};

const pickUrl = (node: unknown): string | null => {
  if (typeof node === "string" && looksLikeUrl(node)) return node;
  if (!isRecord(node)) return null;
  const candidates: unknown[] = [node["url"], node["href"], node["externalGraphic"], node["xlink:href"], node["@xlink:href"], node["@href"]];
  for (const c of candidates) {
    if (typeof c === "string" && looksLikeUrl(c)) return c;
  }
  return null;
};

const deepFindUrl = (obj: unknown, depth = 0): string | null => {
  if (!obj || depth > 4) return null;
  const u = pickUrl(obj);
  if (u) return u;
  if (isRecord(obj)) {
    for (const k of Object.keys(obj)) {
      const r = deepFindUrl(obj[k], depth + 1);
      if (r) return r;
    }
  } else if (Array.isArray(obj)) {
    for (const el of obj) {
      const r = deepFindUrl(el, depth + 1);
      if (r) return r;
    }
  }
  return null;
};

const extractLegendRulesFlexible = (json: unknown): unknown[] => {
  if (!json) return [];
  if (isRecord(json)) {
    const rules = json["rules"];
    if (Array.isArray(rules)) return rules as unknown[];

    const legendObj = json["legend"];
    if (isRecord(legendObj) && Array.isArray(legendObj["rules"])) return (legendObj["rules"] as unknown[]) ?? [];
    const legendArr = json["legend"];
    if (Array.isArray(legendArr)) {
      const all = legendArr.flatMap((e) => (isRecord(e) && Array.isArray(e["rules"]) ? (e["rules"] as unknown[]) : []));
      if (all.length) return all;
    }

    const LegendObj = json["Legend"];
    if (isRecord(LegendObj) && Array.isArray(LegendObj["rules"])) return (LegendObj["rules"] as unknown[]) ?? [];
    const LegendArr = json["Legend"];
    if (Array.isArray(LegendArr)) {
      const all = LegendArr.flatMap((e) => (isRecord(e) && Array.isArray(e["rules"]) ? (e["rules"] as unknown[]) : []));
      if (all.length) return all;
    }

    const classesArr = json["classes"];
    if (Array.isArray(classesArr)) return classesArr as unknown[];
  }
  return [];
};

const findIconUrlInRule = (rule: unknown): string | null => {
  if (isRecord(rule)) {
    const sym = rule["symbolizers"];
    if (Array.isArray(sym) && sym.length) {
      for (const s of sym) {
        if (!isRecord(s)) continue;
        const point = (s["pointSymbolizer"] ?? s["PointSymbolizer"] ?? s["Point"]) as unknown;
        const g = isRecord(point) ? point["graphic"] ?? point["Graphic"] ?? point["graphics"] ?? point : point;
        const url = deepFindUrl(g) || deepFindUrl(point) || deepFindUrl(s);
        if (url) return url;
      }
    }
    return deepFindUrl(rule);
  }
  return null;
};

export const LayerManager = ({ map }: { map: L.Map | null }) => {
  const activeLayers = useAtomValue(activeLayersAtom);
  const [layerInstances, setLayerInstances] = useAtom(leafletLayerInstancesAtom);
  const setFeatureInformation = useSetAtom(featureInformationAtom);
  const featureInformation = useAtomValue(featureInformationAtom);
  const previousLayersRef = useRef<Map<string, { visible: boolean; opacity: number; zIndex: number }>>(new Map());
  const highlightRef = useRef<L.Layer | null>(null);
  const backdropRef = useRef<L.Layer | null>(null);

  const clearHighlight = useCallback(() => {
    if (map && highlightRef.current) {
      map.removeLayer(highlightRef.current);
      highlightRef.current = null;
    }
    if (map && backdropRef.current) {
      map.removeLayer(backdropRef.current);
      backdropRef.current = null;
    }
  }, [map]);

  // Ensure custom panes for proper stacking and non-blocking UI
  useEffect(() => {
    if (!map) return;
    if (!map.getPane("backdropPane")) {
      const p = map.createPane("backdropPane");
      p.style.zIndex = "450";
      p.style.pointerEvents = "none";
    }
    if (!map.getPane("highlightPane")) {
      const p = map.createPane("highlightPane");
      p.style.zIndex = "650";
      p.style.pointerEvents = "none";
    }
  }, [map]);

  // Handle map click for feature info
  useEffect(() => {
    if (!map) return;

    const handleMapClick = async (e: L.LeafletMouseEvent) => {
      setFeatureInformation([]);
      clearHighlight();

      // Find all visible WMS layers
      const wmsLayers = activeLayers.filter((layer) => layer.layer.type === "wms" && layer.settings.visible);

      if (wmsLayers.length === 0) return;

      try {
        const allFeatureInfo: FeatureInformationType[] = [];
        const highlightCandidates: Array<{ layer: (typeof wmsLayers)[number]; features: Feature<Geometry>[] }> = [];

        for (const layer of wmsLayers) {
          if (layer.layer.type !== "wms") continue;

          const url = layer.layer.url;
          const layers = layer.layer.layers;

          if (!url || !layers) continue;

          const bounds = map.getBounds();
          const size = map.getSize();

          // Construct GetFeatureInfo URL
          const params = new URLSearchParams({
            service: "WMS",
            version: "1.1.1",
            request: "GetFeatureInfo",
            layers: layers,
            query_layers: layers,
            info_format: "application/json",
            feature_count: "20",
            x: Math.floor(e.containerPoint.x).toString(),
            y: Math.floor(e.containerPoint.y).toString(),
            width: Math.floor(size.x).toString(),
            height: Math.floor(size.y).toString(),
            srs: "EPSG:4326",
            bbox: `${bounds.getSouthWest().lng},${bounds.getSouthWest().lat},${bounds.getNorthEast().lng},${bounds.getNorthEast().lat}`,
          });

          // Respect active CQL_FILTER (if set on the Leaflet WMS instance)
          try {
            const instance = (layerInstances as Map<string, L.Layer>).get(layer.id) as L.TileLayer.WMS | undefined;
            const cql = (instance?.wmsParams as unknown as Record<string, unknown>)?.["CQL_FILTER"] as string | undefined;
            if (cql) params.set("CQL_FILTER", cql);
          } catch {
            // ignore
          }

          const featureInfoUrl = `${url}?${params.toString()}`;

          // Fetch the feature info
          const response = await fetch(featureInfoUrl);
          if (!response.ok) continue;

          const featureData = await response.json();

          if (featureData && featureData.features && featureData.features.length > 0) {
            const layerFeatureInfo = {
              id: layer.id,
              name: layer.name || layer.id,
              info: featureData.features,
            };

            allFeatureInfo.push(layerFeatureInfo);
            highlightCandidates.push({ layer, features: featureData.features as Feature<Geometry>[] });
          }
        }

        // Update state with all found features
        setFeatureInformation(allFeatureInfo.length > 0 ? allFeatureInfo : null);

        // Add geometry-based highlight for the returned features
        if (highlightCandidates.length > 0) {
          try {
            const group = L.layerGroup();
            // selected rule label (if any) from URL (?filter=["label"]) to resolve icon for this layer
            const getSelectedFilterLabelFromUrl = (layerId: string): string | null => {
              try {
                const sp = new URLSearchParams(window.location.search);
                const filterKey = `filter__${String(layerId).replace(/[^a-zA-Z0-9_-]/g, "_")}`;
                const raw = sp.get(filterKey) ?? sp.get("filter");
                if (!raw) return null;
                const arr = JSON.parse(raw);
                return Array.isArray(arr) && arr.length === 1 && typeof arr[0] === "string" ? arr[0] : null;
              } catch {
                return null;
              }
            };
            // selected label for each layer will be resolved within loop

            // Helper within effect: try get legend icon URL for a given layer and selected rule label
            const tryGetIconForLayerRule = (baseUrl: string, layerName: string, ruleLabel: string | null): string | null => {
              if (!baseUrl || !layerName || !ruleLabel) return null;
              try {
                const cacheKey = `legend-json:${baseUrl}:${layerName}`;
                const cached = sessionStorage.getItem(cacheKey);
                const json: unknown = cached ? JSON.parse(cached) : null;
                if (!json) return null;
                const rules = extractLegendRulesFlexible(json);
                const rule = rules.find((r) => {
                  if (!isRecord(r)) return false;
                  const labelVal = r["title"] ?? r["name"];
                  return typeof labelVal === "string" && labelVal.trim() === ruleLabel;
                });
                if (!rule) return null;
                return findIconUrlInRule(rule);
              } catch {
                return null;
              }
            };

            for (const hc of highlightCandidates) {
              const selectedLabel = getSelectedFilterLabelFromUrl(hc.layer.id);
              const fc: FeatureCollection<Geometry> = {
                type: "FeatureCollection",
                features: hc.features as Feature<Geometry>[],
              };
              const lg = L.geoJSON(fc, {
                pane: "highlightPane",
                pointToLayer: (feature: Feature<Point | MultiPoint>, latlng: L.LatLng) => {
                  // Try use icon for selected rule; else circle marker
                  const iconUrl = tryGetIconForLayerRule(hc.layer.layer.url ?? "", hc.layer.layer.layers ?? "", selectedLabel);
                  if (iconUrl) {
                    const icon = L.icon({ iconUrl, iconSize: [24, 24], iconAnchor: [12, 12] });
                    const m = L.marker(latlng, { icon, pane: "highlightPane" });
                    const halo = L.circleMarker(latlng, {
                      radius: 14,
                      color: "#ffcc00",
                      weight: 3,
                      opacity: 1,
                      fillColor: "#ffcc00",
                      fillOpacity: 0.25,
                      pane: "highlightPane",
                    });
                    return L.layerGroup([halo, m]);
                  }
                  return L.circleMarker(latlng, {
                    radius: 10,
                    color: "#ffcc00",
                    weight: 3,
                    opacity: 1,
                    fillColor: "#ffcc00",
                    fillOpacity: 0.5,
                    pane: "highlightPane",
                  });
                },
                style: (feature?: Feature<Geometry, GeoJsonProperties>): L.PathOptions => {
                  const geomType = feature?.geometry?.type;
                  if (geomType && /LineString/i.test(geomType)) {
                    return {
                      color: "#ffcc00",
                      weight: 5,
                      opacity: 1,
                    } as L.PathOptions;
                  }
                  if (geomType && /Polygon/i.test(geomType)) {
                    return {
                      color: "#ffcc00",
                      weight: 3,
                      opacity: 1,
                      fillColor: "#fff2a8",
                      fillOpacity: 0.35,
                    } as L.PathOptions;
                  }
                  // default
                  return {
                    color: "#ffcc00",
                    weight: 3,
                    opacity: 1,
                  } as L.PathOptions;
                },
                interactive: false,
              });
              lg.addTo(group);
            }
            group.addTo(map);
            // bring to front if possible
            (group as unknown as { bringToFront?: () => void }).bringToFront?.();
            highlightRef.current = group;

            // Add backdrop rectangle with current viewport bounds, below highlight
            try {
              const b = map.getBounds();
              const rect = L.rectangle(b, {
                pane: "backdropPane",
                interactive: false,
                stroke: false,
                fillColor: "#000000",
                fillOpacity: 0.25,
              });
              rect.addTo(map);
              (rect as unknown as { bringToBack?: () => void }).bringToBack?.();
              backdropRef.current = rect;
            } catch {}
          } catch (err) {
            console.warn("Failed to add geometry highlight", err);
            // fallback: mark click location
            try {
              const marker = L.circleMarker(e.latlng, {
                radius: 10,
                color: "#ffcc00",
                weight: 3,
                opacity: 1,
                fillColor: "#ffcc00",
                fillOpacity: 0.6,
              });
              marker.addTo(map);
              (marker as unknown as { bringToFront?: () => void }).bringToFront?.();
              highlightRef.current = marker;
            } catch {}
          }
        }
      } catch (error) {
        console.error("Error fetching feature info:", error);
        setFeatureInformation(null);
        clearHighlight();
      }
    };

    map.on("click", handleMapClick);

    return () => {
      map.off("click", handleMapClick);
    };
  }, [map, activeLayers, setFeatureInformation, layerInstances, clearHighlight]);

  // Remove highlight when feature information panel is closed (null or empty array)
  useEffect(() => {
    const empty = !featureInformation || featureInformation.length === 0;
    if (empty) {
      clearHighlight();
    }
  }, [featureInformation, clearHighlight]);

  // Keep backdrop following the viewport while the panel is open
  useEffect(() => {
    if (!map) return;

    const hasInfo = !!featureInformation && featureInformation.length > 0;
    if (!hasInfo) return;

    const updateBackdrop = () => {
      try {
        if (backdropRef.current instanceof L.Rectangle) {
          const b = map.getBounds();
          backdropRef.current.setBounds(b);
        }
      } catch {
        // ignore
      }
    };

    // Initial sync
    updateBackdrop();

    map.on("move", updateBackdrop);
    map.on("zoom", updateBackdrop);
    map.on("moveend", updateBackdrop);
    map.on("zoomend", updateBackdrop);

    return () => {
      map.off("move", updateBackdrop);
      map.off("zoom", updateBackdrop);
      map.off("moveend", updateBackdrop);
      map.off("zoomend", updateBackdrop);
    };
  }, [map, featureInformation]);

  // (helpers moved to module scope)

  // Handle layer creation and removal
  useEffect(() => {
    if (!map) return;

    const instances = layerInstances;
    const currentLayerIds = new Set(activeLayers.map((layer) => layer.id));

    // Remove layers that are no longer in activeLayers
    instances.forEach((layer, id) => {
      if (!currentLayerIds.has(id)) {
        layer.remove();
        instances.delete(id);
      }
    });

    // Create new layers
    const layerPromises: Promise<{
      id: string;
      zIndex: number;
      leafletLayer: L.Layer;
      bounds?: L.LatLngBoundsExpression;
      visible: boolean;
    } | null>[] = [];

    activeLayers.forEach((layer) => {
      if (instances.has(layer.id)) return; // Skip if layer already exists

      const mode = layer.mode || "basic";

      if (mode === "basic" && layer.layer.type === "wms") {
        const leafletLayer = L.tileLayer.wms(layer.layer.url ?? "", {
          layers: layer.layer.layers,
          format: "image/png",
          transparent: true,
          opacity: layer.settings.opacity,
          zIndex: layer.settings.zIndex,
        });

        layerPromises.push(
          Promise.resolve({
            id: layer.id,
            zIndex: layer.settings.zIndex ?? 0,
            leafletLayer,
            bounds: layer.layer.bounds ?? undefined,
            visible: layer.settings.visible,
          })
        );
      } else if (mode === "choropleth") {
        const promise = (async () => {
          try {
            const sourceUrl = constructWfsUrl(layer.layer) as string;
            const colorScale = await colorScaleApi.getColorScale({
              source_url: sourceUrl,
              boundary_file_id: appConfig.boundaryFileId,
            });
            if (!colorScale?.data) return null;

            const enrichedGeoJSON = mergeDataToGeoJSON(jatimGeojson as unknown as FeatureCollection<Geometry>, colorScale.data);

            const leafletLayer = L.geoJSON(enrichedGeoJSON, {
              style: (feature?: Feature<Geometry, GeoJsonProperties>) => ({
                fillColor: String((feature?.properties as Record<string, unknown> | null)?.["color"] ?? "#cccccc"),
                weight: 2,
                color: "#333333",
                // Initialize with current layer opacity
                fillOpacity: layer.settings.opacity,
                opacity: layer.settings.opacity,
              }),
              onEachFeature: (feature: Feature<Geometry, GeoJsonProperties>, layerInstance) => {
                const props = (feature.properties ?? {}) as Record<string, unknown>;
                const wadmkk = String(props["WADMKK"] ?? "");
                const wadmpr = String(props["WADMPR"] ?? "");
                const value = String(props["value"] ?? "");
                layerInstance.bindPopup(`<strong>${wadmkk}, ${wadmpr}</strong><br>Value: ${value}`);
              },
            });

            return {
              id: layer.id,
              zIndex: layer.settings.zIndex ?? 0,
              leafletLayer,
              visible: layer.settings.visible,
            };
          } catch (err) {
            console.error("Failed to add choropleth layer", err);
            return null;
          }
        })();
        layerPromises.push(promise);
      }
    });

    // Add new layers to map and instances
    Promise.all(layerPromises).then((results) => {
      results
        .filter((r): r is NonNullable<typeof r> => !!r)
        .sort((a, b) => a.zIndex - b.zIndex)
        .forEach(({ id, leafletLayer, visible, bounds }) => {
          instances.set(id, leafletLayer);

          // Only add to map if visible
          if (visible) {
            leafletLayer.addTo(map);
            // Only fit bounds for newly added layers
            if (bounds && !previousLayersRef.current.has(id)) {
              map.fitBounds(bounds);
            }
          }
        });

      setLayerInstances(instances);
    });
  }, [activeLayers, map, setLayerInstances, layerInstances]);

  // Handle visibility, opacity, and zIndex changes separately
  useEffect(() => {
    if (!map) return;

    const instances = layerInstances;

    activeLayers.forEach((layer) => {
      const leafletLayer = instances.get(layer.id);
      if (!leafletLayer) return;

      const previousLayer = previousLayersRef.current.get(layer.id);
      const currentSettings = layer.settings;

      // Handle visibility changes
      if (!previousLayer || previousLayer.visible !== currentSettings.visible) {
        if (currentSettings.visible) {
          if (!map.hasLayer(leafletLayer)) {
            leafletLayer.addTo(map);
          }
        } else {
          if (map.hasLayer(leafletLayer)) {
            map.removeLayer(leafletLayer);
          }
        }
      }

      // Handle opacity changes
      if (!previousLayer || previousLayer.opacity !== currentSettings.opacity) {
        // Try WMS/Tile-like layers
        const asTile = leafletLayer as unknown as { setOpacity?: (n: number) => void };
        if (asTile.setOpacity) {
          asTile.setOpacity(currentSettings.opacity);
        } else if ((leafletLayer as L.GeoJSON<GeoJsonObject>).setStyle) {
          // Fallback for GeoJSON/vector layers
          try {
            (leafletLayer as L.GeoJSON<GeoJsonObject>).setStyle({
              fillOpacity: currentSettings.opacity,
              opacity: currentSettings.opacity,
            });
          } catch {
            // ignore
          }
        }
      }

      // Handle zIndex changes
      if (!previousLayer || previousLayer.zIndex !== currentSettings.zIndex) {
        (leafletLayer as unknown as { setZIndex?: (n: number) => void }).setZIndex?.(currentSettings.zIndex);
      }

      // Update previous layer state
      previousLayersRef.current.set(layer.id, {
        visible: currentSettings.visible,
        opacity: currentSettings.opacity,
        zIndex: currentSettings.zIndex,
      });
    });

    // Clean up previous layer references for removed layers
    const currentLayerIds = new Set(activeLayers.map((l) => l.id));
    previousLayersRef.current.forEach((_, id) => {
      if (!currentLayerIds.has(id)) {
        previousLayersRef.current.delete(id);
      }
    });
  }, [activeLayers, map, layerInstances]);

  return null;
};