"use client";

import React, { useEffect, useMemo, useState } from "react";
import ReactDOM from "react-dom"; // 添加这行

import {
  Box,
  Button,
  Typography,
  Checkbox,
  FormControlLabel,
  IconButton,
  Card,
  CardContent,
  Chip,
  Tooltip,
  Collapse,
  Link,
} from "@mui/material";
import {
  DescriptionOutlined as ReportIcon,
  Info as InfoIcon,
  LocationOn as LocationIcon,
} from "@mui/icons-material";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import "dayjs/locale/zh-cn"; // 引入中文包
import dayjs, { Dayjs } from "dayjs";
import { api } from "@/lib/api";
import moment from "moment";
import { config, NETWORK_NAME } from "@config/config";
import { useNotification } from "@refinedev/core";
import { useControllableObjectState } from "@components/olmap/core/useControllableState";

import { queryFeaturesByIds } from "@/utils/mapQueryService";
import { useData, useMap } from "@components/olmap/core/MapComponent";
import { GeoJSON } from "ol/format";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Stroke, Style, Icon } from "ol/style";
import Feature, { FeatureLike } from "ol/Feature";
import {
  along,
  lineString,
  length,
  toMercator,
  bbox,
  featureCollection,
} from "@turf/turf";
import { Point } from "ol/geom";
import { toLonLat } from "ol/proj";
import Timeline from "@components/olmap/core/Controls/Timeline";
import { SchemaItem, SchemeRecord } from "./types";
import {
  getCachedPipeDiameters,
  getPipeDiameterDisplay,
  loadPipeDiameters,
  type PipeDiameterMap,
} from "./schemePipeDiameters";
import { useSchemeCreatorName } from "@components/olmap/core/useSchemeCreatorName";
import { SchemeQueryEmptyState } from "@components/olmap/common/PanelEmptyState";

interface SchemeQueryProps {
  schemes?: SchemeRecord[];
  onSchemesChange?: (schemes: SchemeRecord[]) => void;
  onViewReport?: (scheme: SchemeRecord) => void;
  network?: string;
  state?: BurstSchemeQueryState;
  onStateChange?: (state: BurstSchemeQueryState) => void;
}

const SCHEME_TYPE = "burst_analysis";

export interface BurstSchemeQueryState {
  queryAll: boolean;
  queryDate: Dayjs | null;
  showTimeline: boolean;
  selectedDate: Date | undefined;
  timeRange: { start: Date; end: Date } | undefined;
  expandedId: number | null;
  hasQueried: boolean;
}

export const createBurstSchemeQueryState = (): BurstSchemeQueryState => ({
  queryAll: true,
  queryDate: dayjs(new Date()),
  showTimeline: false,
  selectedDate: undefined,
  timeRange: undefined,
  expandedId: null,
  hasQueried: false,
});

const SchemeQuery: React.FC<SchemeQueryProps> = ({
  schemes: externalSchemes,
  onSchemesChange,
  onViewReport,
  network = NETWORK_NAME,
  state,
  onStateChange,
}) => {
  const [queryState, setQueryState, setQueryField] = useControllableObjectState(
    state,
    onStateChange,
    createBurstSchemeQueryState(),
  );
  const {
    queryAll,
    queryDate,
    showTimeline,
    selectedDate,
    timeRange,
    expandedId,
    hasQueried,
  } = queryState;
  const [highlightLayer, setHighlightLayer] =
    useState<VectorLayer<VectorSource> | null>(null);
  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);

  const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const creatorName = useSchemeCreatorName();
  const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null); // 地图容器元素
  const [pipeDiametersByScheme, setPipeDiametersByScheme] = useState<
    Record<number, PipeDiameterMap>
  >({});
  const [loadingDiameterByScheme, setLoadingDiameterByScheme] = useState<
    Record<number, boolean>
  >({});

  const { open } = useNotification();

  const map = useMap();
  const data = useData();
  const { schemeName, setSchemeName } = data || {};

  // 使用外部提供的 schemes 或内部状态
  const schemes =
    externalSchemes !== undefined ? externalSchemes : internalSchemes;
  const setSchemes = onSchemesChange || setInternalSchemes;

  // 格式化日期为简短格式
  const formatTime = (timeStr: string) => {
    const time = moment(timeStr);
    return time.format("MM-DD");
  };

  const filteredSchemes = useMemo(() => {
    return schemes
      .filter((scheme) => scheme.type === SCHEME_TYPE)
      .slice()
      .sort(
        (a, b) =>
          moment(b.create_time).valueOf() - moment(a.create_time).valueOf(),
      );
  }, [schemes]);

  const handleQuery = async () => {
    if (!queryAll && !queryDate) return;

    setLoading(true);
    try {
      const params: Record<string, string> = {
        scheme_type: SCHEME_TYPE,
      };
      if (!queryAll && queryDate) {
        params.query_date = queryDate.startOf("day").toISOString();
      }
      const response = await api.get(`${config.BACKEND_URL}/api/v1/schemes`, {
        params,
      });
      let filteredResults = response.data;

      if (!queryAll) {
        const formattedDate = queryDate!.format("YYYY-MM-DD");
        filteredResults = response.data.filter((item: SchemaItem) => {
          const itemDate = moment(item.create_time).format("YYYY-MM-DD");
          return itemDate === formattedDate;
        });
      }

      const nextSchemes = filteredResults.map((item: SchemaItem) => ({
        id: item.scheme_id,
        schemeName: item.scheme_name,
        type: item.scheme_type,
        username: item.username,
        create_time: item.create_time,
        startTime: item.scheme_start_time,
        schemeDetail: item.scheme_detail,
      }));
      setSchemes(nextSchemes);
      setQueryField("hasQueried", true);

      if (filteredResults.length === 0) {
        open?.({
          type: "success",
          message: "查询结果",
          description: queryAll
            ? "没有找到任何方案"
            : `${queryDate!.format("YYYY-MM-DD")} 没有找到相关方案`,
        });
      } else {
        open?.({
          type: "success",
          message: "查询成功",
          description: `共找到 ${filteredResults.length} 条方案记录`,
        });
      }
    } catch (error) {
      console.error("查询请求失败:", error);
      open?.({
        type: "error",
        message: "查询失败",
        description: "获取方案列表失败，请稍后重试",
      });
    } finally {
      setLoading(false);
    }
  };

  const handleLocatePipes = (pipeIds: string[]) => {
    if (pipeIds.length > 0) {
      queryFeaturesByIds(pipeIds, "geo_pipes_mat").then((features) => {
        if (features.length > 0) {
          // 设置高亮要素
          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 });
          }
        }
      });
    }
  };

  useEffect(() => {
    if (expandedId === null || pipeDiametersByScheme[expandedId]) {
      return;
    }

    const scheme = filteredSchemes.find((scheme) => scheme.id === expandedId);
    const pipeIds = scheme?.schemeDetail?.burst_ID ?? [];
    if (pipeIds.length === 0) {
      return;
    }

    const cachedDiameters = getCachedPipeDiameters(pipeIds);
    if (cachedDiameters) {
      setPipeDiametersByScheme((previous) => ({
        ...previous,
        [expandedId]: cachedDiameters,
      }));
      return;
    }

    let cancelled = false;
    setLoadingDiameterByScheme((previous) => ({
      ...previous,
      [expandedId]: true,
    }));

    const applyPipeDiameters = async () => {
      const nextDiameters = await loadPipeDiameters(pipeIds);
      if (cancelled) {
        return;
      }

      setPipeDiametersByScheme((previous) => ({
        ...previous,
        [expandedId]: nextDiameters,
      }));
      setLoadingDiameterByScheme((previous) => ({
        ...previous,
        [expandedId]: false,
      }));
    };

    applyPipeDiameters().catch((error) => {
      console.error("查询管径失败:", error);
      if (!cancelled) {
        setLoadingDiameterByScheme((previous) => ({
          ...previous,
          [expandedId]: false,
        }));
      }
    });

    return () => {
      cancelled = true;
    };
  }, [expandedId, filteredSchemes, pipeDiametersByScheme]);

  // 内部的方案查询函数
  const handleViewDetails = (id: number) => {
    const scheme = filteredSchemes.find((s) => s.id === id);
    if (!scheme) return;

    setQueryState((previous) => ({ ...previous, showTimeline: true }));
    // 计算时间范围
    const schemeDate = scheme.startTime
      ? new Date(scheme.startTime)
      : undefined;
    if (scheme.startTime && scheme.schemeDetail?.modify_total_duration) {
      const start = new Date(scheme.startTime);
      const end = new Date(
        start.getTime() + scheme.schemeDetail.modify_total_duration * 1000,
      );
      setQueryState((previous) => ({
        ...previous,
        showTimeline: true,
        selectedDate: schemeDate,
        timeRange: { start, end },
      }));
    }
    setSchemeName?.(scheme.schemeName);
    handleLocatePipes(scheme.schemeDetail?.burst_ID || []);
  };

  // 初始化管道图层和高亮图层
  useEffect(() => {
    if (!map) return;
    // 获取地图的目标容器
    const target = map.getTargetElement();
    if (target) {
      setMapContainer(target);
    }
    const burstPipeStyle = function (feature: FeatureLike) {
      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) {
        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;
    };
    // 创建高亮图层
    const highlightLayer = new VectorLayer({
      source: new VectorSource(),
      style: burstPipeStyle,
      maxZoom: 24,
      minZoom: 12,
      properties: {
        name: "爆管管段高亮",
        value: "burst_pipe_highlight",
        queryable: false,
      },
    });

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

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

  // 高亮要素的函数
  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 (
    <>
      {/* 将时间轴渲染到地图容器中 */}
      {showTimeline &&
        mapContainer &&
        ReactDOM.createPortal(
          <Timeline
            schemeDate={selectedDate}
            timeRange={timeRange}
            disableDateSelection={!!timeRange}
            schemeName={schemeName}
            schemeType={SCHEME_TYPE}
          />,
          mapContainer, // 渲染到地图容器中，而不是 body
        )}
      <Box className="flex flex-col h-full">
        {/* 查询条件 - 单行布局 */}
        <Box className="mb-2 p-2 bg-gray-50 rounded">
          <Box className="flex items-center gap-2 justify-between">
            <Box className="flex items-center gap-2">
              <FormControlLabel
                control={
                  <Checkbox
                    checked={queryAll}
                    onChange={(e) => {
                      setQueryField("queryAll", e.target.checked);
                      setQueryField("hasQueried", false);
                    }}
                    size="small"
                  />
                }
                label={<Typography variant="body2">查询全部</Typography>}
                className="m-0"
              />
              <LocalizationProvider
                dateAdapter={AdapterDayjs}
                adapterLocale="zh-cn"
              >
                <DatePicker
                  value={queryDate}
                  onChange={(value) => {
                    if (value && dayjs.isDayjs(value)) {
                      setQueryField("queryDate", value);
                      setQueryField("hasQueried", false);
                    }
                  }}
                  format="YYYY-MM-DD"
                  disabled={queryAll}
                  slotProps={{
                    textField: {
                      size: "small",
                      sx: { width: 200 },
                    },
                  }}
                />
              </LocalizationProvider>
            </Box>
            <Button
              variant="contained"
              onClick={handleQuery}
              disabled={loading}
              size="small"
              className="bg-blue-600 hover:bg-blue-700"
              sx={{ minWidth: 80 }}
            >
              {loading ? "查询中..." : "查询"}
            </Button>
          </Box>
        </Box>

        {/* 结果列表 */}
        <Box className="flex-1 overflow-auto">
          {filteredSchemes.length === 0 ? (
            <SchemeQueryEmptyState hasQueried={hasQueried} />
          ) : (
            <Box className="space-y-2 p-2">
              <Typography variant="caption" className="text-gray-500 px-2">
                共 {filteredSchemes.length} 条记录
              </Typography>
              {filteredSchemes.map((scheme) => (
                <Card
                  key={scheme.id}
                  variant="outlined"
                  className="hover:shadow-md transition-shadow"
                >
                  <CardContent className="p-3 pb-2 last:pb-3">
                    {/* 主要信息行 */}
                    <Box className="flex items-start justify-between mb-2">
                      <Box className="flex-1 min-w-0">
                        <Box className="flex items-center gap-2 mb-1">
                          <Typography
                            variant="body2"
                            className="font-medium truncate"
                            title={scheme.schemeName}
                          >
                            {scheme.schemeName}
                          </Typography>
                          <Chip
                            label={
                              scheme.type === "burst_analysis"
                                ? "爆管模拟"
                                : scheme.type
                            }
                            size="small"
                            className="h-5"
                            color="primary"
                            variant="outlined"
                          />
                        </Box>
                        <Typography
                          variant="caption"
                          className="text-gray-500 block"
                        >
                          ID: {scheme.id} · 日期:{" "}
                          {formatTime(scheme.create_time)}
                        </Typography>
                      </Box>
                      {/* 操作按钮 */}
                      <Box className="flex gap-1 ml-2">
                        <Tooltip
                          title={
                            expandedId === scheme.id ? "收起详情" : "查看详情"
                          }
                        >
                            <IconButton
                              size="small"
                              onClick={() =>
                                setQueryField(
                                  "expandedId",
                                  expandedId === scheme.id ? null : scheme.id,
                                )
                              }
                            color="primary"
                            className="p-1"
                          >
                            <InfoIcon fontSize="small" />
                          </IconButton>
                        </Tooltip>
                        <Tooltip title="查看分析报告">
                          <IconButton
                            size="small"
                            onClick={() => onViewReport?.(scheme)}
                            color="primary"
                            className="p-1"
                          >
                            <ReportIcon fontSize="small" />
                          </IconButton>
                        </Tooltip>
                      </Box>
                    </Box>

                    {/* 可折叠的详细信息 */}
                    <Collapse in={expandedId === scheme.id}>
                      <Box className="mt-2 pt-3 border-t border-gray-200">
                        {/* 信息网格布局 */}
                        <Box className="grid grid-cols-2 gap-x-4 gap-y-3 mb-3">
                          {/* 爆管详情列 */}
                          <Box className="space-y-2">
                            <Box className="space-y-1.5 pl-2">
                              <Box className="flex items-start gap-2">
                                <Typography
                                  variant="caption"
                                  className="text-gray-600 min-w-[70px] mt-0.5"
                                >
                                  管段ID:
                                </Typography>
                                <Box className="flex-1 flex flex-wrap gap-1">
                                  {scheme.schemeDetail?.burst_ID?.length ? (
                                    scheme.schemeDetail.burst_ID.map(
                                      (pipeId, index) => (
                                        <Link
                                          key={index}
                                          component="button"
                                          variant="caption"
                                          className="font-medium text-blue-600 hover:text-blue-800 underline cursor-pointer"
                                          onClick={(e) => {
                                            e.preventDefault();
                                            handleLocatePipes?.([pipeId]);
                                          }}
                                        >
                                          {pipeId}
                                        </Link>
                                      ),
                                    )
                                  ) : (
                                    <Typography
                                      variant="caption"
                                      className="font-medium text-gray-900"
                                    >
                                      N/A
                                    </Typography>
                                  )}
                                </Box>
                              </Box>
                              <Box className="flex items-center gap-2">
                                <Typography
                                  variant="caption"
                                  className="text-gray-600 min-w-[70px]"
                                >
                                  管径:
                                </Typography>
                                <Typography
                                  variant="caption"
                                  className="font-medium text-gray-900"
                                >
                                  {getPipeDiameterDisplay(
                                    scheme.schemeDetail?.burst_ID,
                                    pipeDiametersByScheme[scheme.id],
                                    !!loadingDiameterByScheme[scheme.id],
                                  )}
                                </Typography>
                              </Box>
                              <Box className="flex items-center gap-2">
                                <Typography
                                  variant="caption"
                                  className="text-gray-600 min-w-[70px]"
                                >
                                  爆管面积:
                                </Typography>
                                <Typography
                                  variant="caption"
                                  className="font-medium text-gray-900"
                                >
                                  {scheme.schemeDetail?.burst_size?.[0] ||
                                    "N/A"}{" "}
                                  cm²
                                </Typography>
                              </Box>
                              <Box className="flex items-center gap-2">
                                <Typography
                                  variant="caption"
                                  className="text-gray-600 min-w-[70px]"
                                >
                                  持续时间:
                                </Typography>
                                <Typography
                                  variant="caption"
                                  className="font-medium text-gray-900"
                                >
                                  {scheme.schemeDetail?.modify_total_duration ||
                                    "N/A"}{" "}
                                  秒
                                </Typography>
                              </Box>
                            </Box>
                          </Box>

                          {/* 方案信息列 */}
                          <Box className="space-y-2">
                            <Box className="space-y-1.5 pl-2">
                              <Box className="flex items-center gap-2">
                                <Typography
                                  variant="caption"
                                  className="text-gray-600 min-w-[70px]"
                                >
                                  用户:
                                </Typography>
                                <Typography
                                  variant="caption"
                                  className="font-medium text-gray-900"
                                >
                                  {creatorName(scheme.username)}
                                </Typography>
                              </Box>
                              <Box className="flex items-center gap-2">
                                <Typography
                                  variant="caption"
                                  className="text-gray-600 min-w-[70px]"
                                >
                                  创建时间:
                                </Typography>
                                <Typography
                                  variant="caption"
                                  className="font-medium text-gray-900"
                                >
                                  {moment(scheme.create_time).format(
                                    "YYYY-MM-DD HH:mm",
                                  )}
                                </Typography>
                              </Box>
                              <Box className="flex items-center gap-2">
                                <Typography
                                  variant="caption"
                                  className="text-gray-600 min-w-[70px]"
                                >
                                  开始时间:
                                </Typography>
                                <Typography
                                  variant="caption"
                                  className="font-medium text-gray-900"
                                >
                                  {moment(scheme.startTime).format(
                                    "YYYY-MM-DD HH:mm",
                                  )}
                                </Typography>
                              </Box>
                            </Box>
                          </Box>
                        </Box>

                        {/* 操作按钮区域 */}
                        <Box className="pt-2 border-t border-gray-100 flex gap-5">
                          {scheme.schemeDetail?.burst_ID?.length ? (
                            <Button
                              variant="outlined"
                              fullWidth
                              size="small"
                              className="border-blue-600 text-blue-600 hover:bg-blue-50"
                              onClick={() =>
                                handleLocatePipes?.(
                                  scheme.schemeDetail!.burst_ID,
                                )
                              }
                              sx={{
                                textTransform: "none",
                                fontWeight: 500,
                              }}
                            >
                              定位全部管道
                            </Button>
                          ) : null}
                          <Button
                            variant="contained"
                            fullWidth
                            size="small"
                            className="bg-blue-600 hover:bg-blue-700"
                            onClick={() => handleViewDetails(scheme.id)}
                            sx={{
                              textTransform: "none",
                              fontWeight: 500,
                            }}
                          >
                            查看分析结果
                          </Button>
                        </Box>
                      </Box>
                    </Collapse>
                  </CardContent>
                </Card>
              ))}
            </Box>
          )}
        </Box>
      </Box>
    </>
  );
};

export default SchemeQuery;
