"use client";
import { config } from "@/config/config";
import { useProject } from "@/contexts/ProjectContext";
import React, {
  createContext,
  useContext,
  useState,
  useEffect,
  useMemo,
  useCallback,
  useRef,
} from "react";
import { Map as OlMap } from "ol";
import View from "ol/View.js";
import "ol/ol.css";
import MapTools from "./MapTools";

// 导入 DeckLayer
import { DeckLayer } from "@utils/layers";
import { toLonLat } from "ol/proj";
import { along, bearing, lineString, length } from "@turf/turf";
import { Deck } from "@deck.gl/core";
import { TextLayer } from "@deck.gl/layers";
import { TripsLayer } from "@deck.gl/geo-layers";
import { CollisionFilterExtension } from "@deck.gl/extensions";
import { ContourLayer } from "deck.gl";
import { isLpsFlowProperty, toM3h } from "@utils/units";
import { usePathname } from "next/navigation";
import {
  cleanupTransientMapResources,
  disposeMapResources,
  markMapResourcePersistent,
} from "./mapLifecycle";
import {
  createOperationalMapResources,
  createOperationalMapSources,
} from "./operationalLayers";
import { getRoundedCurrentTimelineMinutes } from "./Controls/timelineTime";
import { useTimelineTimeConfig } from "./Controls/useTimelineTimeConfig";
import {
  TileFeatureIndex,
  clipLineStringPartsToExtent,
  coordinatesToLonLat,
  lineStringFromFlatCoordinates,
  type TileFeatureInstance,
} from "./tileFeatureIndex";

interface MapComponentProps {
  children?: React.ReactNode;
}

const COMPARE_OPEN_START_MARK = "tjwater:compare-open-start";
const COMPARE_OPEN_READY_MARK = "tjwater:compare-open-ready";
const COMPARE_OPEN_MEASURE = "tjwater:compare-open";

const markCompareOpenStart = () => {
  performance.clearMarks(COMPARE_OPEN_START_MARK);
  performance.clearMarks(COMPARE_OPEN_READY_MARK);
  performance.clearMeasures(COMPARE_OPEN_MEASURE);
  performance.mark(COMPARE_OPEN_START_MARK);
};

const markCompareOpenReady = () => {
  if (performance.getEntriesByName(COMPARE_OPEN_START_MARK).length === 0) {
    return;
  }
  performance.mark(COMPARE_OPEN_READY_MARK);
  performance.measure(
    COMPARE_OPEN_MEASURE,
    COMPARE_OPEN_START_MARK,
    COMPARE_OPEN_READY_MARK,
  );
};

interface DataContextType {
  currentTime?: number; // 当前时间
  setCurrentTime?: React.Dispatch<React.SetStateAction<number>>;
  selectedDate?: Date; // 选择的日期
  schemeName?: string; // 当前方案名称
  setSchemeName?: React.Dispatch<React.SetStateAction<string>>;
  setSelectedDate?: React.Dispatch<React.SetStateAction<Date>>;
  currentJunctionCalData?: any[]; // 当前计算结果
  setCurrentJunctionCalData?: React.Dispatch<React.SetStateAction<any[]>>;
  currentPipeCalData?: any[]; // 当前计算结果
  setCurrentPipeCalData?: React.Dispatch<React.SetStateAction<any[]>>;
  compareJunctionCalData?: any[];
  setCompareJunctionCalData?: React.Dispatch<React.SetStateAction<any[]>>;
  comparePipeCalData?: any[];
  setComparePipeCalData?: React.Dispatch<React.SetStateAction<any[]>>;
  isCompareMode?: boolean;
  setCompareMode?: React.Dispatch<React.SetStateAction<boolean>>;
  toggleCompareMode?: () => void;
  showJunctionText?: boolean; // 是否显示节点文本
  showPipeText?: boolean; // 是否显示管道文本
  showJunctionId?: boolean; // 是否显示节点ID
  showPipeId?: boolean; // 是否显示管道ID
  setShowJunctionTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
  setShowPipeTextLayer?: React.Dispatch<React.SetStateAction<boolean>>;
  setShowJunctionId?: React.Dispatch<React.SetStateAction<boolean>>;
  setShowPipeId?: React.Dispatch<React.SetStateAction<boolean>>;
  showContourLayer?: boolean;
  setShowContourLayer?: React.Dispatch<React.SetStateAction<boolean>>;
  isContourLayerAvailable?: boolean;
  showWaterflowLayer?: boolean;
  setShowWaterflowLayer?: React.Dispatch<React.SetStateAction<boolean>>;
  setContourLayerAvailable?: React.Dispatch<React.SetStateAction<boolean>>;
  isWaterflowLayerAvailable?: boolean;
  setWaterflowLayerAvailable?: React.Dispatch<React.SetStateAction<boolean>>;
  junctionText: string;
  pipeText: string;
  setJunctionText?: React.Dispatch<React.SetStateAction<string>>;
  setPipeText?: React.Dispatch<React.SetStateAction<string>>;
  setContours?: React.Dispatch<React.SetStateAction<any[]>>;
  deckLayer?: DeckLayer;
  compareDeckLayer?: DeckLayer;
  deckLayers?: DeckLayer[];
  compareMap?: OlMap;
  maps?: OlMap[];
  diameterRange?: [number, number];
  elevationRange?: [number, number];
  forceStyleAutoApplyVersion?: number;
  setForceStyleAutoApplyVersion?: React.Dispatch<React.SetStateAction<number>>;
}

// 跨组件传递
const MapContext = createContext<OlMap | undefined>(undefined);
const DataContext = createContext<DataContextType | undefined>(undefined);

// 添加防抖函数
type DebouncedFunction<F extends (...args: any[]) => any> = ((
  ...args: Parameters<F>
) => void) & {
  cancel: () => void;
};

function debounce<F extends (...args: any[]) => any>(
  func: F,
  waitFor: number
): DebouncedFunction<F> {
  let timeout: ReturnType<typeof setTimeout> | null = null;

  const debounced = (...args: Parameters<F>): void => {
    if (timeout !== null) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => func(...args), waitFor);
  };

  debounced.cancel = () => {
    if (timeout !== null) {
      clearTimeout(timeout);
      timeout = null;
    }
  };

  return debounced;
}

const indexCalculationRecords = (records: any[]) =>
  new Map(records.map((record) => [String(record.ID), record]));

const mergeJunctionValues = (
  features: any[],
  records: any[],
  property: string,
) => {
  const recordsById = indexCalculationRecords(records);
  return features.map((feature) => {
    const record = recordsById.get(String(feature.id));
    if (!record) return feature;
    const value = isLpsFlowProperty(property)
      ? toM3h(record.value, "lps")
      : record.value;
    return { ...feature, [property]: value };
  });
};

const mergePipeValues = (
  features: any[],
  records: any[],
  property: string,
) => {
  const recordsById = indexCalculationRecords(records);
  const isFlow = property === "flow";
  return features.map((feature) => {
    const record = recordsById.get(String(feature.id));
    if (!record) return feature;
    const value = isFlow ? toM3h(record.value, "lps") : record.value;
    const reverseFlow = isFlow && record.value < 0;
    return {
      ...feature,
      [property]: isFlow ? Math.abs(value) : value,
      flowFlag: reverseFlow ? -1 : 1,
      path: reverseFlow ? [...feature.path].reverse() : feature.path,
    };
  });
};

const getNumericRange = (values: number[]): [number, number] | undefined => {
  let min = Infinity;
  let max = -Infinity;
  values.forEach((value) => {
    if (!Number.isFinite(value)) return;
    min = Math.min(min, value);
    max = Math.max(max, value);
  });
  return min === Infinity ? undefined : [min, max];
};

export const useMap = () => {
  return useContext(MapContext);
};
export const useData = () => {
  return useContext(DataContext);
};

const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
  const pathname = usePathname();
  const project = useProject();
  const MAP_WORKSPACE = project?.workspace || config.MAP_WORKSPACE;
  const MAP_EXTENT = (project?.extent || config.MAP_EXTENT) as [
    number,
    number,
    number,
    number,
  ];
  const MAP_URL = config.MAP_URL;
  const MAP_VIEW_STORAGE_KEY = `${MAP_WORKSPACE}_map_view`; // 持久化 key
  const { durationMinutes, stepMinutes } = useTimelineTimeConfig();

  const mapRef = useRef<HTMLDivElement | null>(null);
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const compareMapRef = useRef<HTMLDivElement | null>(null);
  const compareCanvasRef = useRef<HTMLCanvasElement | null>(null);
  const deckLayerRef = useRef<DeckLayer | null>(null);
  const compareDeckLayerRef = useRef<DeckLayer | null>(null);
  const isDisposingRef = useRef(false);
  const isCompareDisposingRef = useRef(false);

  const [map, setMap] = useState<OlMap>();
  const [deckLayer, setDeckLayer] = useState<DeckLayer>();
  const [compareMap, setCompareMap] = useState<OlMap>();
  const [compareDeckLayer, setCompareDeckLayer] = useState<DeckLayer>();
  // currentCalData 用于存储当前计算结果
  const [currentTime, setCurrentTime] = useState<number>(
    getRoundedCurrentTimelineMinutes,
  ); // 默认选择当前时间
  // const [selectedDate, setSelectedDate] = useState<Date>(new Date("2025-9-17"));
  const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 默认今天
  const [schemeName, setSchemeName] = useState<string>(""); // 当前方案名称
  // 记录 id、对应属性的计算值
  const [currentJunctionCalData, setCurrentJunctionCalData] = useState<any[]>(
    [],
  );
  const [currentPipeCalData, setCurrentPipeCalData] = useState<any[]>([]);
  const [compareJunctionCalData, setCompareJunctionCalData] = useState<any[]>(
    [],
  );
  const [comparePipeCalData, setComparePipeCalData] = useState<any[]>([]);
  const [isCompareMode, setCompareMode] = useState(false);
  // junctionData 为当前层级和视口内按 ID 去重的节点数据；pipeData 为管道标签数据。
  // pipeFragments 保留当前层级和视口内每个瓦片管道片段，水流动画按 instanceKey 渲染，不能按业务 ID 去重。
  const [junctionData, setJunctionDataState] = useState<any[]>([]);
  const [pipeData, setPipeDataState] = useState<any[]>([]);
  const [pipeFragments, setPipeFragments] = useState<any[]>([]);
  const junctionIndexRef = useRef<TileFeatureIndex | null>(null);
  const pipeIndexRef = useRef<TileFeatureIndex | null>(null);

  const [showJunctionTextLayer, setShowJunctionTextLayer] = useState(false); // 控制节点文本图层显示
  const [showPipeTextLayer, setShowPipeTextLayer] = useState(false); // 控制管道文本图层显示
  const [showJunctionId, setShowJunctionId] = useState(false); // 控制节点ID显示
  const [showPipeId, setShowPipeId] = useState(false); // 控制管道ID显示
  const [showContourLayer, setShowContourLayer] = useState(false); // 控制等高线图层显示
  const [junctionText, setJunctionText] = useState("pressure");
  const [pipeText, setPipeText] = useState("velocity");
  const [contours, setContours] = useState<any[]>([]);
  const [isContourLayerAvailable, setContourLayerAvailable] = useState(false); // 控制等高线图层显示
  const [isWaterflowLayerAvailable, setWaterflowLayerAvailable] =
    useState(false); // 控制等高线图层显示
  const [showWaterflowLayer, setShowWaterflowLayer] = useState(false); // 控制等高线图层显示
  const [currentZoom, setCurrentZoom] = useState(11); // 当前缩放级别

  // 实时合并计算结果到基础地理数据中
  const mergedJunctionData = useMemo(
    () =>
      mergeJunctionValues(junctionData, currentJunctionCalData, junctionText),
    [junctionData, currentJunctionCalData, junctionText],
  );
  const mergedPipeData = useMemo(
    () => mergePipeValues(pipeData, currentPipeCalData, pipeText),
    [pipeData, currentPipeCalData, pipeText],
  );
  const mergedPipeFragments = useMemo(
    () => mergePipeValues(pipeFragments, currentPipeCalData, pipeText),
    [pipeFragments, currentPipeCalData, pipeText],
  );
  const mergedCompareJunctionData = useMemo(
    () =>
      isCompareMode
        ? mergeJunctionValues(junctionData, compareJunctionCalData, junctionText)
        : [],
    [isCompareMode, junctionData, compareJunctionCalData, junctionText],
  );
  const mergedComparePipeData = useMemo(
    () =>
      isCompareMode
        ? mergePipeValues(pipeData, comparePipeCalData, pipeText)
        : [],
    [isCompareMode, pipeData, comparePipeCalData, pipeText],
  );
  const mergedComparePipeFragments = useMemo(
    () =>
      isCompareMode
        ? mergePipeValues(pipeFragments, comparePipeCalData, pipeText)
        : [],
    [isCompareMode, pipeFragments, comparePipeCalData, pipeText],
  );

  const [diameterRange, setDiameterRange] = useState<
    [number, number] | undefined
  >();
  const [elevationRange, setElevationRange] = useState<
    [number, number] | undefined
  >();
  const [forceStyleAutoApplyVersion, setForceStyleAutoApplyVersion] =
    useState(0);

  const toggleCompareMode = useCallback(() => {
    setCompareMode((prev) => {
      if (!prev) markCompareOpenStart();
      return !prev;
    });
  }, []);

  const maps = useMemo(
    () =>
      [map, isCompareMode ? compareMap : undefined].filter(Boolean) as OlMap[],
    [compareMap, isCompareMode, map],
  );

  const deckLayers = useMemo(
    () =>
      [deckLayer, isCompareMode ? compareDeckLayer : undefined].filter(
        Boolean,
      ) as DeckLayer[],
    [compareDeckLayer, deckLayer, isCompareMode],
  );

  const buildPipeFragments = useCallback((instance: TileFeatureInstance) => {
    const tileCoordinates = lineStringFromFlatCoordinates(
      instance.flatCoordinates,
      instance.stride,
    );
    const clippedParts = clipLineStringPartsToExtent(
      tileCoordinates,
      instance.tileExtent,
    );
    return clippedParts.flatMap((clippedCoordinates, partIndex) => {
      const path = coordinatesToLonLat(clippedCoordinates);
      const lineStringFeature = lineString(path);
      const fragmentLength = length(lineStringFeature);
      if (fragmentLength <= 0) return [];

      const timestamps = [0];
      let cumulativeLength = 0;
      for (let i = 1; i < path.length; i += 1) {
        cumulativeLength += length(lineString([path[i - 1], path[i]]));
        timestamps.push((cumulativeLength / fragmentLength) * 10);
      }

      const midPoint = along(lineStringFeature, fragmentLength / 2).geometry
        .coordinates;
      const prevPoint = along(lineStringFeature, fragmentLength * 0.49).geometry
        .coordinates;
      const nextPoint = along(lineStringFeature, fragmentLength * 0.51).geometry
        .coordinates;
      let lineAngle = bearing(prevPoint, nextPoint);
      lineAngle = -lineAngle + 90;
      if (lineAngle < -90 || lineAngle > 90) {
        lineAngle += 180;
      }

      return [
        {
          instanceKey: `${instance.instanceKey}/${partIndex}`,
          id: instance.featureId,
          diameter: instance.properties.diameter || 0,
          length: instance.properties.length || fragmentLength * 1000,
          path,
          position: midPoint,
          angle: lineAngle,
          timestamps,
          fragmentLength,
        },
      ];
    });
  }, []);

  const publishActiveTileSnapshot = useCallback(
    (targetMap: OlMap) => {
      const zoom = targetMap.getView().getZoom() ?? 0;
      const junctionSnapshot = junctionIndexRef.current?.getSnapshot(
        targetMap,
        zoom,
      );
      const pipeSnapshot = pipeIndexRef.current?.getSnapshot(targetMap, zoom);

      const nextJunctionData = Array.from(
        junctionSnapshot?.instancesById.values() ?? [],
      )
        .map((instances) => instances[0])
        .filter(Boolean)
        .map((instance) => {
          const [x, y] = lineStringFromFlatCoordinates(
            instance.flatCoordinates,
            instance.stride,
          )[0];
          return {
            id: instance.featureId,
            instanceKey: instance.instanceKey,
            position: toLonLat([x, y]),
            elevation: instance.properties.elevation || 0,
            demand: instance.properties.demand || 0,
          };
        })
        .sort((a, b) => String(a.id).localeCompare(String(b.id)));

      const nextPipeFragments = (pipeSnapshot?.instances ?? [])
        .filter((instance) => instance.geometryType.includes("Line"))
        .flatMap(buildPipeFragments)
        .sort((a, b) => a.instanceKey.localeCompare(b.instanceKey));

      const labelById = new Map<string, any>();
      nextPipeFragments.forEach((fragment) => {
        const previous = labelById.get(fragment.id);
        if (
          !previous ||
          fragment.fragmentLength > previous.fragmentLength ||
          (fragment.fragmentLength === previous.fragmentLength &&
            fragment.instanceKey.localeCompare(previous.instanceKey) < 0)
        ) {
          labelById.set(fragment.id, fragment);
        }
      });
      const nextPipeLabels = Array.from(labelById.values()).sort((a, b) =>
        String(a.id).localeCompare(String(b.id)),
      );

      setJunctionDataState(nextJunctionData);
      setPipeFragments(nextPipeFragments);
      setPipeDataState(nextPipeLabels);
      setElevationRange(
        getNumericRange(nextJunctionData.map((item) => item.elevation)),
      );
      setDiameterRange(
        getNumericRange(nextPipeLabels.map((item) => item.diameter)),
      );
    },
    [buildPipeFragments],
  );
  const operationalSources = useMemo(
    () =>
      createOperationalMapSources({
        mapUrl: MAP_URL,
        workspace: MAP_WORKSPACE,
      }),
    [MAP_URL, MAP_WORKSPACE],
  );
  const operationalResources = useMemo(
    () =>
      createOperationalMapResources({
        mapUrl: MAP_URL,
        workspace: MAP_WORKSPACE,
        extent: MAP_EXTENT,
        persistent: true,
        sources: operationalSources,
      }),
    [MAP_URL, MAP_WORKSPACE, MAP_EXTENT, operationalSources],
  );
  const { junctions: junctionSource, pipes: pipeSource } =
    operationalResources.sources;
  const { junctions: junctionsLayer, pipes: pipesLayer } =
    operationalResources.layers;

  // The map and layer instances are intentionally rebuilt only when workspace or extent changes.
  useEffect(() => {
    if (!mapRef.current) return;
    if (!canvasRef.current) {
      return;
    }
    isDisposingRef.current = false;

    junctionIndexRef.current = new TileFeatureIndex("junctions", junctionSource);
    pipeIndexRef.current = new TileFeatureIndex("pipes", pipeSource);

    const handleJunctionTileLoadEnd = (event: any) => {
      if (isDisposingRef.current) return;
      try {
        junctionIndexRef.current?.registerTile(event.tile);
        scheduleActiveTileSnapshot();
      } catch (error) {
        console.error("Junction tile load error:", error);
      }
    };
    const handlePipeTileLoadEnd = (event: any) => {
      if (isDisposingRef.current) return;
      try {
        pipeIndexRef.current?.registerTile(event.tile);
        scheduleActiveTileSnapshot();
      } catch (error) {
        console.error("Pipe tile load error:", error);
      }
    };
    // 监听 junctionsLayer 的 visible 变化
    const handleJunctionVisibilityChange = () => {
      const isVisible = junctionsLayer.getVisible();
      setShowJunctionTextLayer(isVisible);
    };
    // 监听 pipesLayer 的 visible 变化
    const handlePipeVisibilityChange = () => {
      const isVisible = pipesLayer.getVisible();
      setShowPipeTextLayer(isVisible);
    };
    // 添加事件监听器
    junctionsLayer.on("change:visible", handleJunctionVisibilityChange);
    pipesLayer.on("change:visible", handlePipeVisibilityChange);
    const map = new OlMap({
      target: mapRef.current,
      view: new View({
        maxZoom: 24,
        projection: "EPSG:3857",
      }),
      // 图层依面、线、点、标注次序添加
      layers: operationalResources.orderedLayers.slice(),
      controls: [],
    });
    const scheduleActiveTileSnapshot = debounce(
      () => publishActiveTileSnapshot(map),
      50,
    );
    junctionSource.on("tileloadend", handleJunctionTileLoadEnd);
    pipeSource.on("tileloadend", handlePipeTileLoadEnd);
    map.getInteractions().forEach(markMapResourcePersistent);
    setMap(map);

    // 恢复上次视图；如果没有则适配 MAP_EXTENT
    try {
      const stored = localStorage.getItem(MAP_VIEW_STORAGE_KEY);
      if (stored) {
        const viewState = JSON.parse(stored);
        if (
          viewState &&
          Array.isArray(viewState.center) &&
          viewState.center.length === 2 &&
          typeof viewState.zoom === "number" &&
          viewState.zoom >= 11 &&
          viewState.zoom <= 24
        ) {
          map.getView().setCenter(viewState.center);
          map.getView().setZoom(viewState.zoom);
        } else {
          map.getView().fit(MAP_EXTENT, {
            padding: [50, 50, 50, 50],
            duration: 1000,
          });
        }
      } else {
        map.getView().fit(MAP_EXTENT, {
          padding: [50, 50, 50, 50],
          duration: 1000,
        });
      }
    } catch (err) {
      console.warn("Restore map view failed", err);
      map.getView().fit(MAP_EXTENT, {
        padding: [50, 50, 50, 50],
        duration: 1000,
      });
    }
    // 视图稳定后同步 Deck 数据并持久化，避免移动过程中重复扫描瓦片。
    const handleViewChange = debounce(() => {
      if (isDisposingRef.current) return;
      const view = map.getView();
      const zoom = view.getZoom() || 0;
      setCurrentZoom(zoom);
      junctionIndexRef.current?.scanLoadedTiles();
      pipeIndexRef.current?.scanLoadedTiles();
      scheduleActiveTileSnapshot();
      try {
        const center = view.getCenter();
        if (center) {
          localStorage.setItem(
            MAP_VIEW_STORAGE_KEY,
            JSON.stringify({ center, zoom }),
          );
        }
      } catch (err) {
        console.warn("Save map view failed", err);
      }
    }, 250);
    map.getView().on("change", handleViewChange);

    // 初始化当前缩放级别并强制触发瓦片加载
    const initializeTimer = window.setTimeout(() => {
      if (isDisposingRef.current) return;
      const initialZoom = map.getView().getZoom() || 11;
      setCurrentZoom(initialZoom);
      junctionIndexRef.current?.scanLoadedTiles();
      pipeIndexRef.current?.scanLoadedTiles();
      scheduleActiveTileSnapshot();
      // 强制触发地图渲染，让瓦片加载事件触发
      map.render();
    }, 100);

    // 初始化 deck.gl
    const deck = new Deck({
      initialViewState: {
        longitude: 0,
        latitude: 0,
        zoom: 1,
      },
      canvas: canvasRef.current,
      controller: false, // 由 OpenLayers 控制视图
      layers: [],
    });
    const deckLayer = markMapResourcePersistent(
      new DeckLayer(deck, canvasRef.current, {
        name: "deckLayer",
        value: "deckLayer",
      }),
    );
    deckLayerRef.current = deckLayer;
    setDeckLayer(deckLayer);
    map.addLayer(deckLayer);

    // 清理函数
    return () => {
      isDisposingRef.current = true;
      window.clearTimeout(initializeTimer);
      scheduleActiveTileSnapshot.cancel();
      handleViewChange.cancel();
      junctionSource.un("tileloadend", handleJunctionTileLoadEnd);
      pipeSource.un("tileloadend", handlePipeTileLoadEnd);
      map.getView().un("change", handleViewChange);
      junctionsLayer.un("change:visible", handleJunctionVisibilityChange);
      pipesLayer.un("change:visible", handlePipeVisibilityChange);
      if (deckLayerRef.current && !deckLayerRef.current.isDisposedLayer()) {
        try {
          map.removeLayer(deckLayerRef.current);
        } catch {
          // Layer may have already been removed during teardown.
        }
        deckLayerRef.current.disposeDeck();
      }
      deckLayerRef.current = null;
      setDeckLayer(undefined);
      // React Strict Mode re-runs effects with the same memoized layer instances.
      // Detach and clear them here, but leave final layer/source disposal to GC.
      disposeMapResources(map, { disposeLayers: false });
      junctionIndexRef.current = null;
      pipeIndexRef.current = null;
      setJunctionDataState([]);
      setPipeDataState([]);
      setPipeFragments([]);
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [MAP_WORKSPACE, MAP_EXTENT]);

  useEffect(() => {
    if (!isCompareMode) {
      isCompareDisposingRef.current = true;
      setCompareJunctionCalData([]);
      setComparePipeCalData([]);
      return;
    }
    if (!map || !compareMapRef.current || !compareCanvasRef.current) return;

    isCompareDisposingRef.current = false;
    const compareResources = createOperationalMapResources({
      mapUrl: MAP_URL,
      workspace: MAP_WORKSPACE,
      extent: MAP_EXTENT,
      sources: operationalSources,
    });
    const nextCompareMap = new OlMap({
      target: compareMapRef.current,
      view: map.getView(),
      layers: compareResources.orderedLayers.slice(),
      controls: [],
    });
    const handleCompareRenderComplete = () => markCompareOpenReady();
    nextCompareMap.once("rendercomplete", handleCompareRenderComplete);
    nextCompareMap.getAllLayers().forEach((layer) => {
      const layerId = layer.get("value");
      if (!layerId) return;
      const primaryLayer = map
        .getAllLayers()
        .find((currentLayer) => currentLayer.get("value") === layerId);
      if (primaryLayer) {
        layer.setVisible(primaryLayer.getVisible());
      }
    });
    setCompareMap(nextCompareMap);

    const compareDeck = new Deck({
      initialViewState: {
        longitude: 0,
        latitude: 0,
        zoom: 1,
      },
      canvas: compareCanvasRef.current,
      controller: false,
      layers: [],
    });
    const nextCompareDeckLayer = new DeckLayer(
      compareDeck,
      compareCanvasRef.current,
      {
        name: "compareDeckLayer",
        value: "deckLayer",
      },
    );
    compareDeckLayerRef.current = nextCompareDeckLayer;
    setCompareDeckLayer(nextCompareDeckLayer);
    nextCompareMap.addLayer(nextCompareDeckLayer);

    const resizeTimerId = window.setTimeout(() => {
      map.updateSize();
      nextCompareMap.updateSize();
    }, 0);

    return () => {
      isCompareDisposingRef.current = true;
      window.clearTimeout(resizeTimerId);
      nextCompareMap.un("rendercomplete", handleCompareRenderComplete);
      if (
        compareDeckLayerRef.current &&
        !compareDeckLayerRef.current.isDisposedLayer()
      ) {
        try {
          nextCompareMap.removeLayer(compareDeckLayerRef.current);
        } catch {
          // Layer may have already been removed during teardown.
        }
        compareDeckLayerRef.current.disposeDeck();
      }
      compareDeckLayerRef.current = null;
      setCompareDeckLayer(undefined);
      setCompareMap(undefined);
      disposeMapResources(nextCompareMap, { disposeSources: false });
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isCompareMode, map]);

  useEffect(() => {
    const resizeTimerId = window.setTimeout(() => {
      map?.updateSize();
      compareMap?.updateSize();
    }, 0);

    return () => {
      window.clearTimeout(resizeTimerId);
    };
  }, [compareMap, isCompareMode, map]);

  useEffect(() => {
    setCurrentTime(
      getRoundedCurrentTimelineMinutes(new Date(), stepMinutes, durationMinutes),
    );
    setSelectedDate(new Date());
    setSchemeName("");
    setCurrentJunctionCalData([]);
    setCurrentPipeCalData([]);
    setCompareJunctionCalData([]);
    setComparePipeCalData([]);
    setCompareMode(false);
    setShowJunctionTextLayer(false);
    setShowPipeTextLayer(false);
    setShowJunctionId(false);
    setShowPipeId(false);
    setShowContourLayer(false);
    setContours([]);
    setContourLayerAvailable(false);
    setWaterflowLayerAvailable(false);
    setShowWaterflowLayer(false);
    setForceStyleAutoApplyVersion(0);

    return () => {
      if (!map) return;
      cleanupTransientMapResources(map);
      deckLayerRef.current?.resetSessionLayers();
      operationalResources.resetStyles();
    };
  }, [durationMinutes, pathname, map, operationalResources, stepMinutes]);

  // 当数据变化时，更新 deck.gl 图层
  useEffect(() => {
    const syncDeckOverlay = (
      targetDeckLayer: DeckLayer | null,
      targetJunctionData: any[],
      targetPipeData: any[],
      disposing: boolean,
    ) => {
      if (disposing || !targetDeckLayer || targetDeckLayer.isDisposedLayer()) {
        return;
      }
      const shouldShowJunctionText =
        (showJunctionTextLayer || showJunctionId) &&
        currentZoom >= 15 &&
        currentZoom <= 24 &&
        targetJunctionData.length > 0;
      const shouldShowPipeText =
        (showPipeTextLayer || showPipeId) &&
        currentZoom >= 15 &&
        currentZoom <= 24 &&
        targetPipeData.length > 0;
      const shouldShowContour =
        showContourLayer &&
        currentZoom >= 11 &&
        currentZoom <= 24 &&
        targetJunctionData.length > 0;

      if (!shouldShowJunctionText) {
        targetDeckLayer.removeDeckLayer("junctionTextLayer");
      }
      if (!shouldShowPipeText) {
        targetDeckLayer.removeDeckLayer("pipeTextLayer");
      }
      if (!shouldShowContour) {
        targetDeckLayer.removeDeckLayer("junctionContourLayer");
      }
      if (!shouldShowJunctionText && !shouldShowPipeText && !shouldShowContour) {
        return;
      }

      const junctionTextLayer = shouldShowJunctionText
        ? new TextLayer({
            id: "junctionTextLayer",
            name: "节点文字",
            zIndex: 10,
            data: targetJunctionData,
            getPosition: (d: any) => d.position,
            fontFamily: "Monaco, monospace",
            getText: (d: any) => {
              let idPart = showJunctionId ? d.id : "";
              let propPart = "";
              if (showJunctionTextLayer && d[junctionText] !== undefined) {
                const value = (d[junctionText] as number).toFixed(3);
                propPart = `${value}`;
              }
              if (idPart && propPart) return `${idPart} - ${propPart}`;
              return idPart || propPart;
            },
            getSize: 14,
            fontWeight: "bold",
            getColor: [33, 37, 41],
            getAngle: 0,
            getTextAnchor: "middle",
            getAlignmentBaseline: "center",
            getPixelOffset: [0, -10],
            visible: true,
            updateTriggers: {
              getText: [showJunctionId, showJunctionTextLayer, junctionText],
            },
            extensions: [new CollisionFilterExtension()],
            collisionTestProps: {
              sizeScale: 3,
            },
            characterSet: "auto",
            fontSettings: {
              sdf: true,
              fontSize: 64,
              buffer: 6,
            },
          })
        : null;

      const pipeTextLayer = shouldShowPipeText
        ? new TextLayer({
            id: "pipeTextLayer",
            name: "管道文字",
            zIndex: 10,
            data: targetPipeData,
            getPosition: (d: any) => d.position,
            fontFamily: "Monaco, monospace",
            getText: (d: any) => {
              let idPart = showPipeId ? d.id : "";
              let propPart = "";
              if (showPipeTextLayer && d[pipeText] !== undefined) {
                let value;
                if (pipeText === "unit_headloss") {
                  value = (
                    (d["unit_headloss"] / (d["length"] / 1000)) as number
                  ).toFixed(3);
                } else {
                  value = Math.abs(d[pipeText] as number).toFixed(3);
                }
                propPart = `${value}`;
              }
              if (idPart && propPart) return `${idPart} - ${propPart}`;
              return idPart || propPart;
            },
            getSize: 14,
            fontWeight: "bold",
            getColor: [33, 37, 41],
            getAngle: (d: any) => d.angle || 0,
            getPixelOffset: [0, -8],
            getTextAnchor: "middle",
            getAlignmentBaseline: "bottom",
            visible: true,
            updateTriggers: {
              getText: [showPipeId, showPipeTextLayer, pipeText],
            },
            extensions: [new CollisionFilterExtension()],
            collisionTestProps: {
              sizeScale: 3,
            },
            characterSet: "auto",
            fontSettings: {
              sdf: true,
              fontSize: 64,
              buffer: 6,
            },
          })
        : null;

      const contourLayer = shouldShowContour
        ? new ContourLayer({
            id: "junctionContourLayer",
            name: "等值线",
            data: targetJunctionData,
            aggregation: "MEAN",
            cellSize: 600,
            strokeWidth: 0,
            contours: contours,
            getPosition: (d) => d.position,
            getWeight: (d: any) =>
              (d[junctionText] as number) < 0 ? 0 : (d[junctionText] as number),
            opacity: 1,
            visible: true,
            updateTriggers: {
              getWeight: [targetJunctionData, junctionText],
            },
          })
        : null;

      if (
        junctionTextLayer &&
        targetDeckLayer.getDeckLayerById("junctionTextLayer")
      ) {
        targetDeckLayer.updateDeckLayer("junctionTextLayer", junctionTextLayer);
      } else if (junctionTextLayer) {
        targetDeckLayer.addDeckLayer(junctionTextLayer);
      }
      if (pipeTextLayer && targetDeckLayer.getDeckLayerById("pipeTextLayer")) {
        targetDeckLayer.updateDeckLayer("pipeTextLayer", pipeTextLayer);
      } else if (pipeTextLayer) {
        targetDeckLayer.addDeckLayer(pipeTextLayer);
      }
      if (
        contourLayer &&
        targetDeckLayer.getDeckLayerById("junctionContourLayer")
      ) {
        targetDeckLayer.updateDeckLayer("junctionContourLayer", contourLayer);
      } else if (contourLayer) {
        targetDeckLayer.addDeckLayer(contourLayer);
      }
    };

    syncDeckOverlay(
      deckLayerRef.current,
      mergedJunctionData,
      mergedPipeData,
      isDisposingRef.current,
    );
    if (isCompareMode) {
      syncDeckOverlay(
        compareDeckLayerRef.current,
        mergedCompareJunctionData,
        mergedComparePipeData,
        isCompareDisposingRef.current,
      );
    }
  }, [
    mergedJunctionData,
    mergedPipeData,
    mergedCompareJunctionData,
    mergedComparePipeData,
    isCompareMode,
    junctionText,
    pipeText,
    currentZoom,
    showJunctionTextLayer,
    showPipeTextLayer,
    showJunctionId,
    showPipeId,
    showContourLayer,
    contours,
  ]);

  // 控制流动动画开关
  useEffect(() => {
    const hasFlowData = pipeText === "flow" && currentPipeCalData.length > 0;
    const shouldShowWaterflow =
      isWaterflowLayerAvailable &&
      showWaterflowLayer &&
      hasFlowData &&
      currentZoom >= 12 &&
      currentZoom <= 24;

    let animationFrameId: number;

    const syncWaterflowLayer = (
      targetDeckLayer: DeckLayer | null,
      targetPipeFragments: any[],
      disposing: boolean,
    ) => {
      if (disposing || !targetDeckLayer || targetDeckLayer.isDisposedLayer()) {
        return;
      }
      if (!shouldShowWaterflow || targetPipeFragments.length === 0) {
        targetDeckLayer.removeDeckLayer("waterflowLayer");
        return;
      }
      const animationDuration = 10;
      const bufferTime = 2;
      const loopLength = animationDuration + bufferTime;
      const currentFrameTime = (Date.now() / 1000) % loopLength;

      const waterflowLayer = new TripsLayer({
        id: "waterflowLayer",
        name: "水流",
        data: targetPipeFragments,
        getObjectId: (d: any) => d.instanceKey,
        getPath: (d) => d.path,
        getTimestamps: (d) => d.timestamps,
        getColor: [0, 220, 255],
        opacity: 0.8,
        visible: true,
        widthMinPixels: 5,
        jointRounded: true,
        trailLength: 2,
        currentTime: currentFrameTime,
      });

      if (targetDeckLayer.getDeckLayerById("waterflowLayer")) {
        targetDeckLayer.updateDeckLayer("waterflowLayer", waterflowLayer);
      } else {
        targetDeckLayer.addDeckLayer(waterflowLayer);
      }
    };

    const animate = () => {
      syncWaterflowLayer(
        deckLayerRef.current,
        mergedPipeFragments,
        isDisposingRef.current,
      );
      if (isCompareMode) {
        syncWaterflowLayer(
          compareDeckLayerRef.current,
          mergedComparePipeFragments,
          isCompareDisposingRef.current,
        );
      }
      if (shouldShowWaterflow) {
        animationFrameId = requestAnimationFrame(animate);
      }
    };
    animate();

    // 清理函数:取消动画帧
    return () => {
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
      }
    };
  }, [
    currentPipeCalData,
    currentZoom,
    mergedPipeFragments,
    mergedComparePipeFragments,
    isCompareMode,
    pipeText,
    isWaterflowLayerAvailable,
    showWaterflowLayer,
  ]);

  return (
    <>
      <DataContext.Provider
        value={{
          currentTime,
          setCurrentTime,
          selectedDate,
          setSelectedDate,
          schemeName,
          setSchemeName,
          currentJunctionCalData,
          setCurrentJunctionCalData,
          currentPipeCalData,
          setCurrentPipeCalData,
          compareJunctionCalData,
          setCompareJunctionCalData,
          comparePipeCalData,
          setComparePipeCalData,
          isCompareMode,
          setCompareMode,
          toggleCompareMode,
          setShowJunctionTextLayer,
          setShowPipeTextLayer,
          setShowJunctionId,
          setShowPipeId,
          showJunctionId,
          showPipeId,
          showContourLayer,
          setShowContourLayer,
          isContourLayerAvailable,
          showWaterflowLayer,
          setContourLayerAvailable,
          isWaterflowLayerAvailable,
          setWaterflowLayerAvailable,
          setShowWaterflowLayer,
          setJunctionText,
          setPipeText,
          junctionText,
          pipeText,
          setContours,
          deckLayer,
          compareDeckLayer,
          deckLayers,
          compareMap,
          maps,
          diameterRange,
          elevationRange,
          forceStyleAutoApplyVersion,
          setForceStyleAutoApplyVersion,
        }}
      >
        <MapContext.Provider value={map}>
          <div className="relative w-full h-full">
            <div className="flex w-full h-full">
              <div
                className={`relative h-full ${isCompareMode ? "w-1/2" : "w-full"}`}
              >
                <div ref={mapRef} className="w-full h-full"></div>
                <canvas
                  ref={canvasRef}
                  className="pointer-events-none absolute inset-0"
                />
                {isCompareMode && (
                  <div className="pointer-events-none absolute right-4 top-4 rounded-md bg-black/55 px-3 py-1 text-sm font-medium text-white">
                    方案模拟
                  </div>
                )}
              </div>
              {isCompareMode && (
                <div className="relative h-full w-1/2 border-l border-white/40">
                  <div ref={compareMapRef} className="w-full h-full"></div>
                  <canvas
                    ref={compareCanvasRef}
                    className="pointer-events-none absolute inset-0"
                  />
                  <div className="pointer-events-none absolute left-4 top-4 rounded-md bg-black/55 px-3 py-1 text-sm font-medium text-white">
                    实时模拟
                  </div>
                </div>
              )}
            </div>
            {isCompareMode && (
              <div className="pointer-events-none absolute inset-y-0 left-1/2 z-10 w-px -translate-x-1/2 bg-white/85 shadow-[0_0_0_1px_rgba(15,23,42,0.18)]" />
            )}
            <MapTools />
            {children}
          </div>
        </MapContext.Provider>
      </DataContext.Provider>
    </>
  );
};

export default MapComponent;