"use client";

import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Collapse,
  FormControlLabel,
  Checkbox,
  IconButton,
  Tooltip,
  Typography,
  Link,
} from "@mui/material";
import {
  Info as InfoIcon,
  LocationOn as LocationOnIcon,
} 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 { useNotification } from "@refinedev/core";
import { getAnalysisScheme, listAnalysisSchemes } from "@/lib/analysisRuns";
import { NETWORK_NAME } from "@config/config";
import { useControllableObjectState } from "@components/olmap/core/useControllableState";
import { useMap } from "@components/olmap/core/MapComponent";
import { queryFeaturesByIds } from "@/utils/mapQueryService";
import { GeoJSON } from "ol/format";
import Feature from "ol/Feature";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Stroke, Style, Circle, Fill } from "ol/style";
import { bbox, featureCollection } from "@turf/turf";
import {
  BurstLocationResult,
  BurstLocationSchemeDetail,
  BurstSchemeRecord,
} from "./types";
import { FLOW_DISPLAY_UNIT, toM3h } from "@utils/units";
import { useSchemeCreatorName } from "@components/olmap/core/useSchemeCreatorName";
import { SchemeQueryEmptyState } from "@components/olmap/common/PanelEmptyState";

interface Props {
  onViewResult: (result: BurstLocationResult, runId: string) => void;
  schemes?: BurstSchemeRecord[];
  onSchemesChange?: (schemes: BurstSchemeRecord[]) => void;
  state?: BurstLocationSchemeQueryState;
  onStateChange?: (state: BurstLocationSchemeQueryState) => void;
}

export interface BurstLocationSchemeQueryState {
  queryAll: boolean;
  queryDate: Dayjs | null;
  expandedId: string | null;
  simulationBurstIdsByName: Record<string, string[]>;
  hasQueried: boolean;
}

export const createBurstLocationSchemeQueryState =
  (): BurstLocationSchemeQueryState => ({
    queryAll: true,
    queryDate: dayjs(),
    expandedId: null,
    simulationBurstIdsByName: {},
    hasQueried: false,
  });

const SchemeQuery: React.FC<Props> = ({
  onViewResult,
  schemes: externalSchemes,
  onSchemesChange,
  state,
  onStateChange,
}) => {
  const { open } = useNotification();
  const map = useMap();
  const highlightLayerRef = useRef<VectorLayer<VectorSource> | null>(null);
  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
  const [queryState, , setQueryField] = useControllableObjectState(
    state,
    onStateChange,
    createBurstLocationSchemeQueryState(),
  );
  const { queryAll, queryDate, expandedId, hasQueried } = queryState;
  const simulationBurstIdsByName = queryState.simulationBurstIdsByName ?? {};
  const [internalSchemes, setInternalSchemes] = useState<BurstSchemeRecord[]>([]);
  const [loading, setLoading] = useState(false);
  const creatorName = useSchemeCreatorName();
  const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
  const setSchemes = onSchemesChange || setInternalSchemes;
  const sortedSchemes = useMemo(
    () =>
      schemes
        .slice()
        .sort(
          (a, b) =>
            dayjs(b.create_time).valueOf() - dayjs(a.create_time).valueOf(),
        ),
    [schemes],
  );

  useEffect(() => {
    if (!map) return;

    const layer = new VectorLayer({
      source: new VectorSource(),
      style: new Style({
        stroke: new Stroke({
          color: "#a855f7",
          width: 6,
        }),
        image: new Circle({
          radius: 8,
          fill: new Fill({ color: "#a855f7" }),
          stroke: new Stroke({ color: "#fff", width: 2 }),
        }),
      }),
      properties: {
        name: "爆管定位模拟管段高亮",
        value: "burst_location_simulation_pipe_highlight",
        queryable: false,
      },
    });
    map.addLayer(layer);
    highlightLayerRef.current = layer;

    return () => {
      highlightLayerRef.current = null;
      map.removeLayer(layer);
    };
  }, [map]);

  useEffect(() => {
    const source = highlightLayerRef.current?.getSource();
    if (!source) return;
    source.clear();
    highlightFeatures.forEach((feature) => source.addFeature(feature));
  }, [highlightFeatures]);

  const locatePipes = async (pipeIds: string[]) => {
    const uniquePipeIds = Array.from(new Set(pipeIds.filter(Boolean)));
    if (!uniquePipeIds.length || !map) return;

    try {
      const features = await queryFeaturesByIds(uniquePipeIds, "pipes");
      if (features.length === 0) return;

      setHighlightFeatures(features);
      const geojsonFormat = new GeoJSON();
      const geojsonFeatures = features.map((feature) =>
        geojsonFormat.writeFeatureObject(feature),
      );
      // @ts-ignore turf typing with ol geojson objects
      const extent = bbox(featureCollection(geojsonFeatures));
      map.getView().fit(extent, {
        maxZoom: 19,
        duration: 1000,
        padding: [100, 100, 100, 100],
      });
    } catch (error) {
      console.error("Locate failed", error);
    }
  };

  const getSimulationBurstIds = (payload?: BurstLocationResult) => {
    const directIds = payload?.simulation_scheme?.burst_ids ?? [];
    if (directIds.length > 0) return directIds;
    const simulationSchemeName = payload?.simulation_scheme?.name;
    return simulationSchemeName
      ? simulationBurstIdsByName[simulationSchemeName] ?? []
      : [];
  };

  const enrichResultWithSimulationBurstIds = (payload: BurstLocationResult) => {
    const simulationBurstIds = getSimulationBurstIds(payload);
    if (simulationBurstIds.length === 0) return payload;
    return {
      ...payload,
      simulation_scheme: {
        ...payload.simulation_scheme,
        burst_ids: simulationBurstIds,
      },
    };
  };

  const buildDisplayResult = (
    scheme: Pick<BurstSchemeRecord, "scheme_name" | "username" | "create_time">,
    detail?: BurstLocationSchemeDetail,
  ): BurstLocationResult | null => {
    const payload = detail?.result_payload;
    const locatedPipe = payload?.located_pipe ?? detail?.result_summary?.located_pipe;
    if (!locatedPipe) return null;

    return {
      located_pipe: locatedPipe,
      burst_leakage: payload?.burst_leakage ?? detail?.algorithm_params?.burst_leakage ?? 0,
      elapsed_seconds: payload?.elapsed_seconds ?? 0,
      min_dpressure: payload?.min_dpressure ?? detail?.algorithm_params?.min_dpressure,
      basic_pressure: payload?.basic_pressure ?? detail?.algorithm_params?.basic_pressure,
      simulation_times: payload?.simulation_times ?? detail?.result_summary?.simulation_times ?? 0,
      top_candidates: payload?.top_candidates ?? [],
      similarity_mode:
        payload?.similarity_mode ?? detail?.result_summary?.similarity_mode ?? "-",
      scheme_name: payload?.scheme_name ?? scheme.scheme_name,
      username: payload?.username ?? scheme.username,
      network: payload?.network ?? detail?.network,
      data_source: payload?.data_source,
      observed_source: payload?.observed_source ?? detail?.observed_source,
      pressure_scada_ids: payload?.pressure_scada_ids ?? detail?.pressure_scada_ids,
      flow_scada_ids: payload?.flow_scada_ids ?? detail?.flow_scada_ids,
      create_time: payload?.create_time ?? scheme.create_time,
      scada_window: payload?.scada_window ?? detail?.scada_window,
      pressure_samples: payload?.pressure_samples,
      flow_samples: payload?.flow_samples,
      simulation_scheme: payload?.simulation_scheme,
    };
  };

  const handleQuery = async () => {
    setLoading(true);
    try {
      const [nextSchemes, simulationSchemes] = await Promise.all([
        listAnalysisSchemes({
          runType: "burst_location",
          queryDate: !queryAll && queryDate
            ? queryDate.format("YYYY-MM-DD")
            : undefined,
        }),
        listAnalysisSchemes({ runType: "burst_analysis" }),
      ]);
      const nextSimulationBurstIdsByName = Object.fromEntries(
        (simulationSchemes as BurstSimulationSchemeItem[])
          .map((scheme) => [
            scheme.scheme_name,
            normalizeBurstIds(scheme.scheme_detail?.burst_ID),
          ]),
      );
      setQueryField("simulationBurstIdsByName", nextSimulationBurstIdsByName);
      setSchemes(
        nextSchemes.map((scheme) =>
          enrichSchemeWithSimulationBurstIds(
            scheme as BurstSchemeRecord,
            nextSimulationBurstIdsByName,
          ),
        ),
      );
      setQueryField("hasQueried", true);
      open?.({
        type: "success",
        message: "查询成功",
        description: `共找到 ${nextSchemes.length} 条记录`,
      });
    } catch (error: any) {
      console.error(error);
      open?.({
        type: "error",
        message: "查询失败",
        description: error?.response?.data?.detail ?? "无法获取方案列表",
      });
    } finally {
      setLoading(false);
    }
  };

  const handleViewSchemeResult = async (runId: string) => {
    try {
      const schemeRecord = (await getAnalysisScheme(runId)) as BurstSchemeRecord & {
        result_payload?: BurstLocationResult;
      };
      const normalizedResult =
        schemeRecord.result_payload ??
        buildDisplayResult(
          {
            scheme_name: schemeRecord.scheme_name,
            username: schemeRecord.username,
            create_time: schemeRecord.create_time,
          },
          schemeRecord.scheme_detail,
        );
      if (!normalizedResult) {
        throw new Error("方案详情缺少定位结果数据");
      }
      onViewResult(enrichResultWithSimulationBurstIds(normalizedResult), runId);
      open?.({
        type: "success",
        message: "方案加载成功",
        description: `已加载方案: ${schemeRecord.scheme_name}`,
      });
    } catch (error: any) {
      open?.({
        type: "error",
        message: "查看详情失败",
        description: error?.response?.data?.detail ?? "无法获取方案详情",
      });
    }
  };

  return (
    <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
                  size="small"
                  checked={queryAll}
                  onChange={(e) => {
                    setQueryField("queryAll", e.target.checked);
                    setQueryField("hasQueried", false);
                  }}
                />
              }
              label={<Typography variant="body2">查询全部</Typography>}
              className="m-0"
            />
            <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
              <DatePicker
                value={queryDate}
                onChange={(value) => {
                  setQueryField("queryDate", value);
                  setQueryField("hasQueried", false);
                }}
                disabled={queryAll}
                format="YYYY-MM-DD"
                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">
        {sortedSchemes.length === 0 ? (
          <SchemeQueryEmptyState hasQueried={hasQueried} />
        ) : (
          <Box className="space-y-2 p-2">
            <Typography variant="caption" className="text-gray-500 px-2">
              共 {sortedSchemes.length} 条记录
            </Typography>
            {sortedSchemes.map((scheme) => {
              const summary = scheme.scheme_detail?.result_summary;
              const payload = scheme.scheme_detail?.result_payload;
              const locatedPipe = payload?.located_pipe ?? summary?.located_pipe ?? "-";
              const simulationBurstIds = getSimulationBurstIds(payload);
              const leakage =
                payload?.burst_leakage ?? scheme.scheme_detail?.algorithm_params?.burst_leakage;

              return (
                <Card
                  key={scheme.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 gap-2 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.scheme_name}
                          >
                            {scheme.scheme_name}
                          </Typography>
                          <Chip
                            size="small"
                            variant="outlined"
                            color={
                              payload?.data_source === "simulation" ? "secondary" : "primary"
                            }
                            label={
                              payload?.data_source === "simulation" ? "模拟方案" : "监测数据"
                            }
                            className="h-5"
                          />
                        </Box>
                        {payload?.data_source === "simulation" &&
                          payload?.simulation_scheme?.name ? (
                          <Typography
                            variant="caption"
                            className="mb-1 block truncate text-xs text-purple-600"
                            title={payload.simulation_scheme.name}
                          >
                            方案: {payload.simulation_scheme.name}
                          </Typography>
                        ) : null}
                        <Typography variant="caption" className="block text-gray-500">
                          ID: {scheme.scheme_id} · 日期:{" "}
                          {dayjs(scheme.create_time).format("MM-DD HH:mm")}
                        </Typography>
                      </Box>
                      <Box className="flex gap-1 ml-2">
                        <Tooltip title={expandedId === scheme.scheme_id ? "收起详情" : "查看详情"}>
                          <IconButton
                            size="small"
                            onClick={() =>
                              setQueryField(
                                "expandedId",
                                expandedId === scheme.scheme_id ? null : scheme.scheme_id,
                              )
                            }
                            color="primary"
                            className="p-1"
                          >
                            <InfoIcon fontSize="small" />
                          </IconButton>
                        </Tooltip>
                      </Box>
                    </Box>
                    <Collapse in={expandedId === scheme.scheme_id}>
                      <Box className="mt-2 pt-3 border-t border-gray-200">
                        <Box className="mb-3 rounded-md bg-gray-50 px-3 py-2 space-y-2">
                          <Box className="grid grid-cols-[78px_1fr] items-center gap-x-2">
                            <Typography variant="caption" className="text-gray-600">
                              定位管段:
                            </Typography>
                            <Typography variant="caption" className="font-medium text-gray-900">
                              {locatedPipe}
                            </Typography>
                          </Box>
                          {simulationBurstIds.length > 0 ? (
                            <Box className="grid grid-cols-[78px_1fr] items-start gap-x-2">
                              <Typography variant="caption" className="mt-1 text-gray-600">
                                模拟管段:
                              </Typography>
                              <Box className="flex flex-wrap gap-1">
                                {simulationBurstIds.map((pipeId) => (
                                  <Link
                                    key={pipeId}
                                    component="button"
                                    variant="caption"
                                    onClick={() => locatePipes([pipeId])}
                                    title={pipeId}
                                    sx={{
                                      maxWidth: 132,
                                      color: "#7c3aed",
                                      fontSize: "0.75rem",
                                      fontWeight: 700,
                                      lineHeight: "22px",
                                      cursor: "pointer",
                                      overflow: "hidden",
                                      textOverflow: "ellipsis",
                                      whiteSpace: "nowrap",
                                      textDecoration: "underline",
                                      textUnderlineOffset: "2px",
                                      "&:hover": {
                                        color: "#5b21b6",
                                      },
                                    }}
                                  >
                                    {pipeId}
                                  </Link>
                                ))}
                                <Tooltip title="定位全部模拟管段">
                                  <IconButton
                                    size="small"
                                    color="secondary"
                                    onClick={() => locatePipes(simulationBurstIds)}
                                    className="h-6 w-6 p-0"
                                  >
                                    <LocationOnIcon fontSize="small" />
                                  </IconButton>
                                </Tooltip>
                              </Box>
                            </Box>
                          ) : null}
                          <Box className="grid grid-cols-[78px_1fr] items-center gap-x-2">
                            <Typography variant="caption" className="text-gray-600">
                              漏损量:
                            </Typography>
                            <Typography variant="caption" className="font-medium text-gray-900">
                              {typeof leakage === "number" ? `${toM3h(leakage, "m³/s")} ${FLOW_DISPLAY_UNIT}` : "-"}
                            </Typography>
                          </Box>
                          <Box className="grid grid-cols-[78px_1fr] items-center gap-x-2">
                            <Typography variant="caption" className="text-gray-600">
                              用户:
                            </Typography>
                            <Typography variant="caption" className="font-medium text-gray-900">
                              {creatorName(scheme.username)}
                            </Typography>
                          </Box>
                        </Box>
                        <Box className="pt-2 border-t border-gray-100">
                          <Button
                            variant="contained"
                            fullWidth
                            size="small"
                            className="bg-blue-600 hover:bg-blue-700"
                            sx={{ textTransform: "none", fontWeight: 500 }}
                            onClick={() => handleViewSchemeResult(scheme.scheme_id)}
                          >
                            查看定位结果
                          </Button>
                        </Box>
                      </Box>
                    </Collapse>
                  </CardContent>
                </Card>
              );
            })}
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default SchemeQuery;

interface BurstSimulationSchemeItem {
  scheme_name: string;
  scheme_type: string;
  scheme_detail?: {
    burst_ID?: string[] | string;
  };
}

const normalizeBurstIds = (value: string[] | string | undefined) => {
  if (!value) return [];
  const values = Array.isArray(value) ? value : [value];
  return Array.from(
    new Set(values.map((item) => String(item).trim()).filter(Boolean)),
  );
};

const enrichSchemeWithSimulationBurstIds = (
  scheme: BurstSchemeRecord,
  simulationBurstIdsByName: Record<string, string[]>,
) => {
  const payload = scheme.scheme_detail?.result_payload;
  const simulationSchemeName = payload?.simulation_scheme?.name;
  const simulationBurstIds = simulationSchemeName
    ? simulationBurstIdsByName[simulationSchemeName] ?? []
    : [];
  if (!payload || simulationBurstIds.length === 0) return scheme;
  if (payload.simulation_scheme?.burst_ids?.length) return scheme;

  return {
    ...scheme,
    scheme_detail: {
      ...scheme.scheme_detail,
      result_payload: {
        ...payload,
        simulation_scheme: {
          ...payload.simulation_scheme,
          burst_ids: simulationBurstIds,
        },
      },
    },
  };
};