import React, { useState, useEffect, useCallback } from "react";
import { useData, useMap } from "../MapComponent";
import ToolbarButton from "@/components/olmap/common/ToolbarButton";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import PaletteOutlinedIcon from "@mui/icons-material/PaletteOutlined";
import PropertyPanel from "./PropertyPanel"; // 引入属性面板组件
import DrawPanel from "./DrawPanel"; // 引入绘图面板组件

import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { Style, Stroke, Fill, Circle } from "ol/style";
import { FeatureLike } from "ol/Feature";
import Feature from "ol/Feature";
import StyleEditorPanel from "./StyleEditorPanel";
import StyleLegend from "./StyleLegend"; // 引入图例组件

import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";

import { config } from "@/config/config";
const backendUrl = config.backendUrl;

// 图层样式状态接口
interface StyleConfig {
  property: string;
  classificationMethod: string;
  segments: number;
  minSize: number;
  maxSize: number;
  minStrokeWidth: number;
  maxStrokeWidth: number;
  fixedStrokeWidth: number;
  colorType: string;
  startColor: string;
  endColor: string;
  showLabels: boolean;
  opacity: number;
  adjustWidthByProperty: boolean;
}

interface LegendStyleConfig {
  layerId: string;
  layerName: string;
  property: string;
  colors: string[];
  type: string;
  dimensions: number[];
  breaks: number[];
}

interface LayerStyleState {
  layerId: string;
  layerName: string;
  styleConfig: StyleConfig;
  legendConfig: LegendStyleConfig;
  isActive: boolean;
}

// 添加接口定义隐藏按钮的props
interface ToolbarProps {
  hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
  queryType?: string; // 可选的查询类型参数
}
const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
  const map = useMap();
  const data = useData();
  if (!data) return null;
  const { currentTime, selectedDate, schemeName } = data;
  const [activeTools, setActiveTools] = useState<string[]>([]);
  const [highlightFeature, setHighlightFeature] = useState<FeatureLike | null>(
    null
  );
  const [showPropertyPanel, setShowPropertyPanel] = useState<boolean>(false);
  const [showDrawPanel, setShowDrawPanel] = useState<boolean>(false);
  const [showStyleEditor, setShowStyleEditor] = useState<boolean>(false);
  const [highlightLayer, setHighlightLayer] =
    useState<VectorLayer<VectorSource> | null>(null);

  // 样式状态管理 - 在 Toolbar 中管理，带有默认样式
  const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>([
    {
      isActive: false, // 默认不激活，不显示图例
      layerId: "junctions",
      layerName: "节点图层",
      styleConfig: {
        property: "pressure",
        classificationMethod: "pretty_breaks",
        segments: 6,
        minSize: 4,
        maxSize: 12,
        minStrokeWidth: 2,
        maxStrokeWidth: 8,
        fixedStrokeWidth: 3,
        colorType: "gradient",
        startColor: "rgba(51, 153, 204, 0.9)",
        endColor: "rgba(204, 51, 51, 0.9)",
        showLabels: false,
        opacity: 0.9,
        adjustWidthByProperty: true,
      },
      legendConfig: {
        layerId: "junctions",
        layerName: "节点图层",
        property: "压力", // 暂时为空，等计算后更新
        colors: [],
        type: "point",
        dimensions: [],
        breaks: [],
      },
    },
    {
      isActive: false, // 默认不激活，不显示图例
      layerId: "pipes",
      layerName: "管道图层",
      styleConfig: {
        property: "flow",
        classificationMethod: "pretty_breaks",
        segments: 6,
        minSize: 4,
        maxSize: 12,
        minStrokeWidth: 2,
        maxStrokeWidth: 8,
        fixedStrokeWidth: 3,
        colorType: "gradient",
        startColor: "rgba(51, 153, 204, 0.9)",
        endColor: "rgba(204, 51, 51, 0.9)",
        showLabels: false,
        opacity: 0.9,
        adjustWidthByProperty: true,
      },
      legendConfig: {
        layerId: "pipes",
        layerName: "管道图层",
        property: "流量", // 暂时为空，等计算后更新
        colors: [],
        type: "linestring",
        dimensions: [],
        breaks: [],
      },
    },
  ]);

  // 计算激活的图例配置
  const activeLegendConfigs = layerStyleStates
    .filter((state) => state.isActive && state.legendConfig.property)
    .map((state) => ({
      ...state.legendConfig,
      layerName: state.layerName,
      layerId: state.layerId,
    }));

  // 创建高亮图层
  useEffect(() => {
    if (!map) return;

    const highLightSource = new VectorSource();
    const highLightLayer = new VectorLayer({
      source: highLightSource,
      style: new Style({
        stroke: new Stroke({
          color: `rgba(255, 0, 0, 1)`,
          width: 5,
        }),
        fill: new Fill({
          color: `rgba(255, 0, 0, 0.2)`,
        }),
        image: new Circle({
          radius: 7,
          stroke: new Stroke({
            color: `rgba(255, 0, 0, 1)`,
            width: 3,
          }),
          fill: new Fill({
            color: `rgba(255, 0, 0, 0.2)`,
          }),
        }),
      }),
    });

    map.addLayer(highLightLayer);
    setHighlightLayer(highLightLayer);

    return () => {
      map.removeLayer(highLightLayer);
    };
  }, [map]);
  // 高亮要素的函数
  useEffect(() => {
    if (!highlightLayer) {
      return;
    }
    const source = highlightLayer.getSource();
    if (!source) {
      return;
    }
    // 清除之前的高亮
    source.clear();
    // 添加新的高亮要素
    if (highlightFeature instanceof Feature) {
      source.addFeature(highlightFeature);
    }
  }, [highlightFeature]);
  // 地图点击选择要素事件处理函数
  const handleMapClickSelectFeatures = useCallback(
    async (event: { coordinate: number[] }) => {
      if (!map) return;
      const feature = await mapClickSelectFeatures(event, map); // 调用导入的函数
      setHighlightFeature(feature);
    },
    [map, setHighlightFeature]
  );
  // 添加矢量属性查询事件监听器
  useEffect(() => {
    if (!activeTools.includes("info") || !map) return;
    map.on("click", handleMapClickSelectFeatures);

    return () => {
      map.un("click", handleMapClickSelectFeatures);
    };
  }, [activeTools, map, handleMapClickSelectFeatures]);

  // 处理工具栏按钮点击事件
  const handleToolClick = (tool: string) => {
    // 样式工具的特殊处理 - 只有再次点击时才会取消激活和关闭
    if (tool === "style") {
      if (activeTools.includes("style")) {
        // 如果样式工具已激活，点击时关闭
        setShowStyleEditor(false);
        setActiveTools((prev) => prev.filter((t) => t !== "style"));
      } else {
        // 激活样式工具，打开样式面板
        setActiveTools((prev) => [...prev, "style"]);
        setShowStyleEditor(true);
      }
      return;
    }

    // 其他工具的处理逻辑
    if (activeTools.includes(tool)) {
      // 如果当前工具已激活，再次点击时取消激活并关闭面板
      deactivateTool(tool);
      setActiveTools((prev) => prev.filter((t) => t !== tool));
    } else {
      // 如果当前工具未激活，先关闭所有其他工具，然后激活当前工具
      // 关闭所有面板（但保持样式编辑器状态）
      closeAllPanelsExceptStyle();

      // 取消激活所有非样式工具
      setActiveTools((prev) => {
        const styleActive = prev.includes("style");
        return styleActive ? ["style", tool] : [tool];
      });

      // 激活当前工具并打开对应面板
      activateTool(tool);
    }
  };

  // 取消激活指定工具并关闭对应面板
  const deactivateTool = (tool: string) => {
    switch (tool) {
      case "info":
        setShowPropertyPanel(false);
        setHighlightFeature(null);
        break;
      case "draw":
        setShowDrawPanel(false);
        break;
    }
  };

  // 激活指定工具并打开对应面板
  const activateTool = (tool: string) => {
    switch (tool) {
      case "info":
        setShowPropertyPanel(true);
        break;
      case "draw":
        setShowDrawPanel(true);
        break;
    }
  };

  // 关闭所有面板（除了样式编辑器）
  const closeAllPanelsExceptStyle = () => {
    setShowPropertyPanel(false);
    setHighlightFeature(null);
    setShowDrawPanel(false);
    // 样式编辑器保持其当前状态，不自动关闭
  };
  const [computedProperties, setComputedProperties] = useState<
    Record<string, any>
  >({});
  // 添加 useEffect 来查询计算属性
  useEffect(() => {
    if (!highlightFeature || !selectedDate) {
      setComputedProperties({});
      return;
    }

    const id = highlightFeature.getProperties().id;
    if (!id) {
      setComputedProperties({});
      return;
    }

    const queryComputedProperties = async () => {
      try {
        const properties = highlightFeature?.getProperties?.() || {};
        const type =
          properties.geometry?.getType?.() === "LineString" ? "link" : "node";
        // selectedDate 格式化为 YYYY-MM-DD
        let dateObj: Date;
        if (selectedDate instanceof Date) {
          dateObj = new Date(selectedDate);
        } else {
          dateObj = new Date(selectedDate);
        }
        const minutes = Number(currentTime) || 0;
        dateObj.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
        // 转为 UTC ISO 字符串
        const querytime = dateObj.toISOString(); // 例如 "2025-09-16T16:30:00.000Z"
        let response;
        if (queryType === "scheme") {
          response = await fetch(
            `${backendUrl}/queryschemesimulationrecordsbyidtime/?scheme_name=${schemeName}&id=${id}&querytime=${querytime}&type=${type}`
          );
        } else {
          response = await fetch(
            `${backendUrl}/querysimulationrecordsbyidtime/?id=${id}&querytime=${querytime}&type=${type}`
          );
        }
        if (!response.ok) {
          throw new Error("API request failed");
        }
        const data = await response.json();
        setComputedProperties(data.results[0] || {});
      } catch (error) {
        console.error("Error querying computed properties:", error);
        setComputedProperties({});
      }
    };
    // 仅当 currentTime 有效时查询
    if (currentTime !== -1 && queryType) queryComputedProperties();
  }, [highlightFeature, currentTime, selectedDate]);

  // 从要素属性中提取属性面板需要的数据
  const getFeatureProperties = useCallback(() => {
    if (!highlightFeature) return {};

    const properties = highlightFeature.getProperties();
    // 计算属性字段，增加 key 字段
    const pipeComputedFields = [
      { key: "flow", label: "流量", unit: "m³/s" },
      { key: "friction", label: "摩阻", unit: "" },
      { key: "headloss", label: "水头损失", unit: "m" },
      { key: "quality", label: "水质", unit: "mg/L" },
      { key: "reaction", label: "反应", unit: "1/s" },
      { key: "setting", label: "设置", unit: "" },
      { key: "status", label: "状态", unit: "" },
      { key: "velocity", label: "流速", unit: "m/s" },
    ];
    const nodeComputedFields = [
      { key: "actualdemand", label: "实际需水量", unit: "m³/s" },
      { key: "head", label: "水头", unit: "m" },
      { key: "pressure", label: "压力", unit: "kPa" },
      { key: "quality", label: "水质", unit: "mg/L" },
    ];

    if (properties.geometry.getType() === "LineString") {
      let result = {
        id: properties.id,
        type: "管道",
        properties: [
          { label: "起始节点ID", value: properties.node1 },
          { label: "终点节点ID", value: properties.node2 },
          { label: "长度", value: properties.length?.toFixed?.(1), unit: "m" },
          {
            label: "管径",
            value: properties.diameter?.toFixed?.(1),
            unit: "mm",
          },
          { label: "粗糙度", value: properties.roughness },
          { label: "局部损失", value: properties.minor_loss },
          { label: "初始状态", value: "开" },
        ],
      };
      // 追加计算属性
      if (computedProperties) {
        pipeComputedFields.forEach(({ key, label, unit }) => {
          if (computedProperties[key] !== undefined) {
            result.properties.push({
              label,
              value:
                computedProperties[key].toFixed?.(2) || computedProperties[key],
              unit,
            });
          }
        });
      }
      return result;
    }
    if (properties.geometry.getType() === "Point") {
      let result = {
        id: properties.id,
        type: "节点",
        properties: [
          {
            label: "海拔",
            value: properties.elevation?.toFixed?.(1),
            unit: "m",
          },
          {
            label: "需求量",
            value: properties.demand?.toFixed?.(1),
            unit: "m³/s",
          },
        ],
      };
      // 追加计算属性
      if (computedProperties) {
        nodeComputedFields.forEach(({ key, label, unit }) => {
          if (computedProperties[key] !== undefined) {
            result.properties.push({
              label,
              value:
                computedProperties[key].toFixed?.(2) || computedProperties[key],
              unit,
            });
          }
        });
      }
      return result;
    }
    return {};
  }, [highlightFeature, computedProperties]);

  return (
    <>
      <div className="absolute top-4 left-4 bg-white p-1 rounded-xl shadow-lg flex opacity-85 hover:opacity-100 transition-opacity">
        {!hiddenButtons?.includes("info") && (
          <ToolbarButton
            icon={<InfoOutlinedIcon />}
            name="查看属性"
            isActive={activeTools.includes("info")}
            onClick={() => handleToolClick("info")}
          />
        )}
        {!hiddenButtons?.includes("draw") && (
          <ToolbarButton
            icon={<EditOutlinedIcon />}
            name="矢量编辑"
            isActive={activeTools.includes("draw")}
            onClick={() => handleToolClick("draw")}
          />
        )}
        {!hiddenButtons?.includes("style") && (
          <ToolbarButton
            icon={<PaletteOutlinedIcon />}
            name="图层样式"
            isActive={activeTools.includes("style")}
            onClick={() => handleToolClick("style")}
          />
        )}
      </div>
      {showPropertyPanel && <PropertyPanel {...getFeatureProperties()} />}
      {showDrawPanel && map && <DrawPanel />}
      {showStyleEditor && (
        <StyleEditorPanel
          layerStyleStates={layerStyleStates}
          setLayerStyleStates={setLayerStyleStates}
        />
      )}

      {/* 图例显示 */}
      {activeLegendConfigs.length > 0 && (
        <div className="absolute bottom-40 right-4 drop-shadow-xl flex flex-row items-end max-w-screen-lg overflow-x-auto z-10">
          <div className="flex flex-row gap-3">
            {activeLegendConfigs.map((config, index) => (
              <StyleLegend key={`${config.layerId}-${index}`} {...config} />
            ))}
          </div>
        </div>
      )}
    </>
  );
};

export default Toolbar;