"use client";

import React, { useState, useEffect, useCallback, useRef } from "react";
import {
  Box,
  Typography,
  Chip,
  CircularProgress,
  IconButton,
  Tooltip,
} from "@mui/material";
import { LocationOn as LocationIcon } from "@mui/icons-material";
import axios from "axios";
import { config, NETWORK_NAME } from "@config/config";
import { ValveIsolationResult } from "./types";
import { useNotification } from "@refinedev/core";
import { queryFeaturesByIds } from "@/utils/mapQueryService";
import { useMap } from "@app/OlMap/MapComponent";
import { GeoJSON } from "ol/format";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from "ol/style";
import Feature, { FeatureLike } from "ol/Feature";
import {
  bbox,
  featureCollection,
  along,
  lineString,
  length,
  toMercator,
} from "@turf/turf";
import { Point } from "ol/geom";
import { toLonLat } from "ol/proj";

interface ValveIsolationProps {
  initialPipeIds?: string[];
  shouldFetch?: boolean;
  onFetchComplete?: () => void;
  loading?: boolean;
  result?: ValveIsolationResult | null;
  onLoadingChange?: (loading: boolean) => void;
  onResultChange?: (result: ValveIsolationResult | null) => void;
}

const ValveIsolation: React.FC<ValveIsolationProps> = ({
  initialPipeIds,
  shouldFetch = false,
  onFetchComplete,
  loading: externalLoading,
  result: externalResult,
  onLoadingChange,
  onResultChange,
}) => {
  const [internalLoading, setInternalLoading] = useState(false);
  const [internalResult, setInternalResult] =
    useState<ValveIsolationResult | null>(null);

  // 使用外部状态或内部状态
  const loading =
    externalLoading !== undefined ? externalLoading : internalLoading;
  const result = externalResult !== undefined ? externalResult : internalResult;
  const setLoading = onLoadingChange || setInternalLoading;
  const setResult = onResultChange || setInternalResult;
  const [highlightLayer, setHighlightLayer] =
    useState<VectorLayer<VectorSource> | null>(null);
  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
  const [highlightType, setHighlightType] = useState<
    "must_close" | "optional" | "affected_node" | "pipe"
  >("affected_node");
  const { open } = useNotification();
  const lastPipeIdsRef = useRef<string>("");
  const map = useMap();

  const handleLocatePipes = (pipeIds: string[]) => {
    if (pipeIds.length > 0) {
      queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
        if (features.length > 0) {
          // 设置高亮类型为管段
          setHighlightType("pipe");
          // 设置高亮要素
          setHighlightFeatures(features);
          // 将 OpenLayers Feature 转换为 GeoJSON Feature
          const geojsonFormat = new GeoJSON();
          const geojsonFeatures = features.map((feature) =>
            geojsonFormat.writeFeatureObject(feature),
          );

          const extent = bbox(featureCollection(geojsonFeatures as any));

          if (extent) {
            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
          }
        }
      });
    }
  };

  const handleLocateNodes = (nodeIds: string[]) => {
    if (nodeIds.length > 0) {
      queryFeaturesByIds(nodeIds, "geo_junctions").then((features) => {
        if (features.length > 0) {
          // 设置高亮类型为受影响节点
          setHighlightType("affected_node");
          // 设置高亮要素
          setHighlightFeatures(features);
          // 将 OpenLayers Feature 转换为 GeoJSON Feature
          const geojsonFormat = new GeoJSON();
          const geojsonFeatures = features.map((feature) =>
            geojsonFormat.writeFeatureObject(feature),
          );

          const extent = bbox(featureCollection(geojsonFeatures as any));

          if (extent) {
            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
          }
        }
      });
    }
  };

  const handleLocateMustCloseValves = (valveIds: string[]) => {
    if (valveIds.length > 0) {
      queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
        if (features.length > 0) {
          // 设置高亮类型为必关阀门
          setHighlightType("must_close");
          // 设置高亮要素
          setHighlightFeatures(features);
          // 将 OpenLayers Feature 转换为 GeoJSON Feature
          const geojsonFormat = new GeoJSON();
          const geojsonFeatures = features.map((feature) =>
            geojsonFormat.writeFeatureObject(feature),
          );

          const extent = bbox(featureCollection(geojsonFeatures as any));

          if (extent) {
            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
          }
        }
      });
    }
  };

  const handleLocateOptionalValves = (valveIds: string[]) => {
    if (valveIds.length > 0) {
      queryFeaturesByIds(valveIds, "geo_valves").then((features) => {
        if (features.length > 0) {
          // 设置高亮类型为可选阀门
          setHighlightType("optional");
          // 设置高亮要素
          setHighlightFeatures(features);
          // 将 OpenLayers Feature 转换为 GeoJSON Feature
          const geojsonFormat = new GeoJSON();
          const geojsonFeatures = features.map((feature) =>
            geojsonFormat.writeFeatureObject(feature),
          );

          const extent = bbox(featureCollection(geojsonFeatures as any));

          if (extent) {
            map?.getView().fit(extent, { maxZoom: 18, duration: 1000 });
          }
        }
      });
    }
  };

  const fetchAnalysis = useCallback(
    async (ids: string[]) => {
      if (!ids || ids.length === 0) {
        open?.({ type: "error", message: "请提供管段ID" });
        return;
      }
      setLoading(true);
      setResult(null);
      try {
        const response = await axios.get(
          `${config.BACKEND_URL}/api/v1/valve_isolation_analysis/`,
          {
            params: {
              network: NETWORK_NAME,
              accident_element: ids,
            },
            paramsSerializer: {
              indexes: null, // 生成格式: accident_element=P1&accident_element=P2
            },
          },
        );
        setResult(response.data);
        open?.({ type: "success", message: "分析成功" });
      } catch (error) {
        console.error(error);
        open?.({
          type: "error",
          message: "分析失败",
          description: "无法获取关阀分析结果",
        });
      } finally {
        setLoading(false);
        onFetchComplete?.();
      }
    },
    [open, onFetchComplete],
  );

  useEffect(() => {
    // 只有在明确要求获取数据时才调用 API
    if (shouldFetch && initialPipeIds && initialPipeIds.length > 0) {
      // 使用排序后的字符串作为唯一标识，避免数组引用变化导致重复调用
      const pipeIdsKey = [...initialPipeIds].sort().join(",");

      // 只有当 pipeIds 真正改变时才调用 API
      if (pipeIdsKey !== lastPipeIdsRef.current) {
        lastPipeIdsRef.current = pipeIdsKey;
        fetchAnalysis(initialPipeIds);
      } else {
        // 如果 pipeIds 相同，直接调用完成回调
        onFetchComplete?.();
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [shouldFetch, initialPipeIds]);

  // 初始化高亮图层
  useEffect(() => {
    if (!map) return;

    // 动态样式函数，根据 highlightType 返回不同的样式
    const getHighlightStyle = (feature: FeatureLike) => {
      if (highlightType === "pipe") {
        // 管段 - 多层红色线条样式 + 中点图标
        const styles = [];
        // 线条样式（底层发光，主线条，内层高亮线）
        styles.push(
          new Style({
            stroke: new Stroke({
              color: "rgba(255, 0, 0, 0.3)",
              width: 12,
            }),
          }),
          new Style({
            stroke: new Stroke({
              color: "rgba(255, 0, 0, 1)",
              width: 6,
              lineDash: [15, 10],
            }),
          }),
          new Style({
            stroke: new Stroke({
              color: "rgba(255, 102, 102, 1)",
              width: 3,
              lineDash: [15, 10],
            }),
          }),
        );
        const geometry = feature.getGeometry();
        const lineCoords =
          geometry?.getType() === "LineString"
            ? (geometry as any).getCoordinates()
            : null;
        if (geometry && lineCoords) {
          const lineCoordsWGS84 = lineCoords.map((coord: []) => {
            const [lon, lat] = toLonLat(coord);
            return [lon, lat];
          });
          // 计算中点
          const lineStringFeature = lineString(lineCoordsWGS84);
          const lineLength = length(lineStringFeature);
          const midPoint = along(lineStringFeature, lineLength / 2).geometry
            .coordinates;
          // 在中点添加 icon 样式
          const midPointMercator = toMercator(midPoint);
          styles.push(
            new Style({
              geometry: new Point(midPointMercator),
              image: new Icon({
                src: "/icons/burst_pipe.svg",
                scale: 0.2,
                anchor: [0.5, 1],
              }),
            }),
          );
        }
        return styles;
      }

      // 阀门和节点的样式
      let color: string;
      let strokeColor: string;
      let radius: number;

      switch (highlightType) {
        case "must_close":
          // 必关阀门 - 深红色
          color = "rgba(211, 47, 47, 0.6)";
          strokeColor = "rgba(211, 47, 47, 1)";
          radius = 10;
          break;
        case "optional":
          // 可选阀门 - 橙色
          color = "rgba(237, 108, 2, 0.6)";
          strokeColor = "rgba(237, 108, 2, 1)";
          radius = 10;
          break;
        case "affected_node":
        default:
          // 受影响节点 - 蓝色
          color = "rgba(25, 118, 210, 0.6)";
          strokeColor = "rgba(25, 118, 210, 1)";
          radius = 8;
          break;
      }

      return new Style({
        image: new CircleStyle({
          radius: radius,
          fill: new Fill({
            color: color,
          }),
          stroke: new Stroke({
            color: strokeColor,
            width: 3,
          }),
        }),
      });
    };

    // 创建高亮图层
    const highlightLayer = new VectorLayer({
      source: new VectorSource(),
      style: getHighlightStyle,
      maxZoom: 24,
      minZoom: 12,
      properties: {
        name: "阀门节点高亮",
        value: "valve_node_highlight",
      },
    });

    map.addLayer(highlightLayer);
    setHighlightLayer(highlightLayer);

    return () => {
      map.removeLayer(highlightLayer);
    };
  }, [map, highlightType]);

  // 高亮要素的函数
  useEffect(() => {
    if (!highlightLayer) {
      return;
    }
    const source = highlightLayer.getSource();
    if (!source) {
      return;
    }
    // 清除之前的高亮
    source.clear();
    // 添加新的高亮要素
    highlightFeatures.forEach((feature) => {
      if (feature instanceof Feature) {
        source.addFeature(feature);
      }
    });
  }, [highlightFeatures, highlightLayer]);

  return (
    <Box className="flex flex-col h-full">
      {/* Results Section */}
      <Box className="flex-1 overflow-auto bg-white rounded border border-gray-200">
        {loading ? (
          <Box className="flex flex-col items-center justify-center h-full text-gray-500">
            <CircularProgress size={40} className="mb-4" />
            <Typography variant="body2">正在分析...</Typography>
          </Box>
        ) : result ? (
          <Box className="p-5 h-full overflow-auto">
            {/* 头部：状态信息 */}
            <Box className="mb-5">
              <Box className="flex items-center gap-2 mb-1">
                <Typography variant="h6" className="font-bold text-gray-900">
                  关阀分析结果
                </Typography>
                <Chip
                  label={result.isolatable ? "可隔离" : "不可隔离"}
                  size="small"
                  color={result.isolatable ? "success" : "error"}
                  variant="outlined"
                  sx={{
                    fontWeight: 600,
                    fontSize: "0.75rem",
                    height: "24px",
                  }}
                />
              </Box>
              <Box className="bg-gradient-to-r from-red-50 via-pink-50 to-red-50 rounded-lg p-3 border border-red-200 shadow-sm">
                <Box className="flex items-center justify-between mb-2">
                  <Box className="flex items-center gap-2">
                    <Box className="w-2 h-2 rounded-full bg-red-600 animate-pulse"></Box>
                    <Typography
                      variant="caption"
                      className="text-red-700 font-semibold uppercase tracking-wide"
                      sx={{ fontSize: "0.7rem" }}
                    >
                      爆管管段
                    </Typography>
                  </Box>
                  {result.accident_elements &&
                    result.accident_elements.length > 0 && (
                      <Tooltip title="定位所有管段">
                        <IconButton
                          size="small"
                          onClick={() =>
                            handleLocatePipes(result.accident_elements!)
                          }
                          sx={{
                            backgroundColor: "rgba(255, 0, 0, 0.1)",
                            "&:hover": {
                              backgroundColor: "rgba(255, 0, 0, 0.2)",
                            },
                          }}
                        >
                          <LocationIcon
                            sx={{ fontSize: "1rem", color: "rgb(220, 38, 38)" }}
                          />
                        </IconButton>
                      </Tooltip>
                    )}
                </Box>
                <Box className="flex flex-wrap gap-2">
                  {result.accident_elements?.map(
                    (pipeId: string, idx: number) => (
                      <Chip
                        key={idx}
                        label={pipeId}
                        size="small"
                        onClick={() => handleLocatePipes([pipeId])}
                        sx={{
                          backgroundColor: "rgba(255, 255, 255, 0.9)",
                          border: "1.5px solid rgb(248, 113, 113)",
                          color: "rgb(185, 28, 28)",
                          fontWeight: 600,
                          fontSize: "0.8rem",
                          cursor: "pointer",
                          transition: "all 0.2s",
                          "&:hover": {
                            backgroundColor: "rgb(254, 226, 226)",
                            borderColor: "rgb(220, 38, 38)",
                            transform: "translateY(-1px)",
                            boxShadow: "0 2px 4px rgba(220, 38, 38, 0.2)",
                          },
                        }}
                      />
                    ),
                  )}
                </Box>
              </Box>
            </Box>

            {/* 主要信息：三栏卡片布局 */}
            <Box className="grid grid-cols-3 gap-3 mb-5">
              {/* 必关阀门卡片 */}
              <Box className="bg-gradient-to-br from-red-50 to-red-100 rounded-lg p-3 border border-red-200 shadow-sm hover:shadow-md transition-shadow">
                <Box className="flex items-center gap-1.5 mb-2">
                  <Box className="w-1.5 h-1.5 rounded-full bg-red-600"></Box>
                  <Typography
                    variant="caption"
                    className="text-red-700 font-semibold uppercase tracking-wide"
                    sx={{ fontSize: "0.7rem" }}
                  >
                    必关阀门
                  </Typography>
                </Box>
                <Typography
                  variant="body2"
                  className="font-bold text-red-900"
                  sx={{ fontSize: "0.875rem" }}
                >
                  {result.must_close_valves?.length || 0} 个
                </Typography>
              </Box>

              {/* 可选阀门卡片 */}
              <Box className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-3 border border-orange-200 shadow-sm hover:shadow-md transition-shadow">
                <Box className="flex items-center gap-1.5 mb-2">
                  <Box className="w-1.5 h-1.5 rounded-full bg-orange-600"></Box>
                  <Typography
                    variant="caption"
                    className="text-orange-700 font-semibold uppercase tracking-wide"
                    sx={{ fontSize: "0.7rem" }}
                  >
                    可选阀门
                  </Typography>
                </Box>
                <Typography
                  variant="body2"
                  className="font-bold text-orange-900"
                  sx={{ fontSize: "0.875rem" }}
                >
                  {result.optional_valves?.length || 0} 个
                </Typography>
              </Box>

              {/* 受影响节点卡片 */}
              <Box className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3 border border-blue-200 shadow-sm hover:shadow-md transition-shadow">
                <Box className="flex items-center gap-1.5 mb-2">
                  <Box className="w-1.5 h-1.5 rounded-full bg-blue-600"></Box>
                  <Typography
                    variant="caption"
                    className="text-blue-700 font-semibold uppercase tracking-wide"
                    sx={{ fontSize: "0.7rem" }}
                  >
                    受影响节点
                  </Typography>
                </Box>
                <Typography
                  variant="body2"
                  className="font-bold text-blue-900"
                  sx={{ fontSize: "0.875rem" }}
                >
                  {result.affected_nodes?.length || 0} 个
                </Typography>
              </Box>
            </Box>

            {/* 必须关闭阀门详细列表 */}
            {result.must_close_valves &&
              result.must_close_valves.length > 0 && (
                <Box className="bg-white rounded-lg p-4 border-2 border-red-200 shadow-sm mb-4">
                  <Box className="flex items-center justify-between mb-3">
                    <Typography
                      variant="body1"
                      className="text-gray-900 font-bold"
                      sx={{ fontSize: "0.95rem" }}
                    >
                      必须关闭阀门
                    </Typography>
                    <Tooltip title="定位所有阀门">
                      <IconButton
                        size="small"
                        onClick={() =>
                          handleLocateMustCloseValves(result.must_close_valves!)
                        }
                        color="error"
                        sx={{
                          backgroundColor: "rgba(211, 47, 47, 0.1)",
                          "&:hover": {
                            backgroundColor: "rgba(211, 47, 47, 0.2)",
                          },
                        }}
                      >
                        <LocationIcon sx={{ fontSize: "1.2rem" }} />
                      </IconButton>
                    </Tooltip>
                  </Box>
                  <Box className="grid grid-cols-3 gap-2">
                    {result.must_close_valves.map((valveId, idx) => (
                      <Box
                        key={idx}
                        className="bg-gradient-to-r from-red-50 to-white rounded-lg px-3 py-2 border border-red-200 hover:border-red-400 hover:shadow-md transition-all cursor-pointer group"
                        onClick={() => handleLocateMustCloseValves([valveId])}
                        sx={{
                          "&:active": {
                            transform: "scale(0.98)",
                            boxShadow: "0 1px 2px rgba(211, 47, 47, 0.2)",
                          },
                        }}
                      >
                        <Typography
                          variant="body2"
                          className="font-semibold text-red-700 group-hover:text-red-900"
                        >
                          {valveId}
                        </Typography>
                      </Box>
                    ))}
                  </Box>
                </Box>
              )}

            {/* 可选关闭阀门详细列表 */}
            {result.optional_valves && result.optional_valves.length > 0 && (
              <Box className="bg-white rounded-lg p-4 border-2 border-orange-200 shadow-sm mb-4">
                <Box className="flex items-center justify-between mb-3">
                  <Typography
                    variant="body1"
                    className="text-gray-900 font-bold"
                    sx={{ fontSize: "0.95rem" }}
                  >
                    可选关闭阀门
                  </Typography>
                  <Tooltip title="定位所有阀门">
                    <IconButton
                      size="small"
                      onClick={() =>
                        handleLocateOptionalValves(result.optional_valves!)
                      }
                      color="warning"
                      sx={{
                        backgroundColor: "rgba(237, 108, 2, 0.1)",
                        "&:hover": {
                          backgroundColor: "rgba(237, 108, 2, 0.2)",
                        },
                      }}
                    >
                      <LocationIcon sx={{ fontSize: "1.2rem" }} />
                    </IconButton>
                  </Tooltip>
                </Box>
                <Box className="grid grid-cols-3 gap-2">
                  {result.optional_valves.map((valveId, idx) => (
                    <Box
                      key={idx}
                      className="bg-gradient-to-r from-orange-50 to-white rounded-lg px-3 py-2 border border-orange-200 hover:border-orange-400 hover:shadow-md transition-all cursor-pointer group"
                      onClick={() => handleLocateOptionalValves([valveId])}
                      sx={{
                        "&:active": {
                          transform: "scale(0.98)",
                          boxShadow: "0 1px 2px rgba(237, 108, 2, 0.2)",
                        },
                      }}
                    >
                      <Typography
                        variant="body2"
                        className="font-semibold text-orange-700 group-hover:text-orange-900"
                      >
                        {valveId}
                      </Typography>
                    </Box>
                  ))}
                </Box>
              </Box>
            )}

            {/* 受影响节点详细列表 */}
            {result.affected_nodes && result.affected_nodes.length > 0 && (
              <Box className="bg-white rounded-lg p-4 border-2 border-blue-200 shadow-sm">
                <Box className="flex items-center justify-between mb-3">
                  <Typography
                    variant="body1"
                    className="text-gray-900 font-bold"
                    sx={{ fontSize: "0.95rem" }}
                  >
                    受影响节点
                  </Typography>
                  <Tooltip title="定位所有节点">
                    <IconButton
                      size="small"
                      onClick={() => handleLocateNodes(result.affected_nodes!)}
                      color="primary"
                      sx={{
                        backgroundColor: "rgba(37, 125, 212, 0.1)",
                        "&:hover": {
                          backgroundColor: "rgba(37, 125, 212, 0.2)",
                        },
                      }}
                    >
                      <LocationIcon sx={{ fontSize: "1.2rem" }} />
                    </IconButton>
                  </Tooltip>
                </Box>
                <Box className="grid grid-cols-3 gap-2">
                  {result.affected_nodes.map((nodeId, idx) => (
                    <Box
                      key={idx}
                      className="bg-gradient-to-r from-blue-50 to-white rounded-lg px-3 py-2 border border-blue-200 hover:border-blue-400 hover:shadow-md transition-all cursor-pointer group"
                      onClick={() => handleLocateNodes([nodeId])}
                      sx={{
                        "&:active": {
                          transform: "scale(0.98)",
                          boxShadow: "0 1px 2px rgba(25, 118, 210, 0.2)",
                        },
                      }}
                    >
                      <Typography
                        variant="body2"
                        className="font-semibold text-blue-700 group-hover:text-blue-900"
                      >
                        {nodeId}
                      </Typography>
                    </Box>
                  ))}
                </Box>
              </Box>
            )}
          </Box>
        ) : (
          <Box className="flex flex-col items-center justify-center h-full text-gray-400 p-4">
            <Box className="mb-4">
              <svg
                width="80"
                height="80"
                viewBox="0 0 80 80"
                fill="none"
                className="opacity-40"
              >
                <circle
                  cx="40"
                  cy="40"
                  r="25"
                  stroke="currentColor"
                  strokeWidth="2"
                />
                <path d="M40 25 L40 55" stroke="currentColor" strokeWidth="3" />
                <rect
                  x="30"
                  y="35"
                  width="20"
                  height="10"
                  fill="currentColor"
                  rx="2"
                />
                <path
                  d="M25 40 L30 40 M50 40 L55 40"
                  stroke="currentColor"
                  strokeWidth="2"
                />
              </svg>
            </Box>
            <Typography variant="body2">暂无关阀分析结果</Typography>
            <Typography variant="body2" className="mt-1">
              请先查看定位结果
            </Typography>
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default ValveIsolation;