"use client";

import React, { useEffect, useMemo, useState } from "react";
import {
  Box,
  Button,
  Typography,
  Checkbox,
  FormControlLabel,
  IconButton,
  Card,
  CardContent,
  Chip,
  Tooltip,
  Collapse,
  Link,
} from "@mui/material";
import {
  Info as InfoIcon,
  EditLocationAlt as EditIcon,
} 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 { useMap } from "@components/olmap/core/MapComponent";
import { queryFeaturesByIds } from "@/utils/mapQueryService";
import { useControllableObjectState } from "@components/olmap/core/useControllableState";
import { GeoJSON } from "ol/format";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Style, Icon, Circle, Fill, Stroke } from "ol/style";
import Feature, { FeatureLike } from "ol/Feature";
import { bbox, featureCollection } from "@turf/turf";
import type { SchemeRecord } from "./types";
import { useSchemeCreatorName } from "@components/olmap/core/useSchemeCreatorName";
import { SchemeQueryEmptyState } from "@components/olmap/common/PanelEmptyState";

interface SchemaItem {
  id: number;
  scheme_name: string;
  sensor_number: number;
  min_diameter: number;
  username: string;
  create_time: string;
  sensor_location?: string[];
}

interface SchemeQueryProps {
  schemes?: SchemeRecord[];
  onSchemesChange?: (schemes: SchemeRecord[]) => void;
  onEdit?: (id: number) => void;
  network?: string;
  state?: MonitoringSchemeQueryState;
  onStateChange?: (state: MonitoringSchemeQueryState) => void;
}

export interface MonitoringSchemeQueryState {
  queryAll: boolean;
  queryDate: Dayjs | null;
  expandedId: number | null;
  hasQueried: boolean;
}

export const createMonitoringSchemeQueryState =
  (): MonitoringSchemeQueryState => ({
    queryAll: true,
    queryDate: dayjs(new Date()),
    expandedId: null,
    hasQueried: false,
  });

const SchemeQuery: React.FC<SchemeQueryProps> = ({
  schemes: externalSchemes,
  onSchemesChange,
  onEdit,
  network = NETWORK_NAME,
  state,
  onStateChange,
}) => {
  const [queryState, , setQueryField] = useControllableObjectState(
    state,
    onStateChange,
    createMonitoringSchemeQueryState(),
  );
  const { queryAll, queryDate, expandedId, hasQueried } = queryState;
  const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const creatorName = useSchemeCreatorName();

  const { open } = useNotification();
  const map = useMap();

  const [highlightLayer, setHighlightLayer] =
    useState<VectorLayer<VectorSource> | null>(null);
  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
  // 使用外部提供的 schemes 或内部状态
  const schemes =
    externalSchemes !== undefined ? externalSchemes : internalSchemes;
  const setSchemes = onSchemesChange || setInternalSchemes;
  const sortedSchemes = useMemo(
    () =>
      schemes
        .slice()
        .sort(
          (a, b) =>
            moment(b.create_time).valueOf() - moment(a.create_time).valueOf(),
        ),
    [schemes],
  );

  // 格式化简短日期
  const formatShortDate = (timeStr: string) => {
    const time = moment(timeStr);
    return time.format("MM-DD");
  };
  // 初始化管道图层和高亮图层
  useEffect(() => {
    if (!map) return;
    // 定义传感器样式
    const sensorStyle = new Style({
      image: new Icon({
        src: "/icons/sensor.svg",
        scale: 0.2,
        anchor: [0.5, 1],
      }),
    });
    // 创建高亮图层
    const highlightLayer = new VectorLayer({
      source: new VectorSource(),
      style: sensorStyle,
      maxZoom: 24,
      minZoom: 12,
      properties: {
        name: "传感器高亮",
        value: "sensor_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]);
  
  // 查询方案
  const handleQuery = async () => {
    if (!queryAll && !queryDate) return;

    setLoading(true);
    try {
      const response = await api.get(
        `${config.BACKEND_URL}/api/v1/sensor-placement-schemes`,
      );

      let filteredResults = response.data;

      // 按日期过滤
      if (!queryAll && queryDate) {
        const formattedDate = queryDate.format("YYYY-MM-DD");
        filteredResults = filteredResults.filter((item: SchemaItem) => {
          const itemDate = moment(item.create_time).format("YYYY-MM-DD");
          return itemDate === formattedDate;
        });
      }

      const nextSchemes = filteredResults.map((item: SchemaItem) => ({
        id: item.id,
        schemeName: item.scheme_name,
        sensorNumber: item.sensor_number,
        minDiameter: item.min_diameter,
        username: item.username,
        create_time: item.create_time,
        sensorLocation: item.sensor_location,
      }));
      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 handleLocateSensors = (sensorIds: string[]) => {
    if (!map) {
      open?.({
        type: "error",
        message: "地图未加载",
      });
      return;
    }

    if (sensorIds.length > 0) {
      queryFeaturesByIds(sensorIds, "geo_junctions_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 });
          }
        }
      });
    }
  };

  // 查看详情（展开/收起）
  const handleViewDetails = (id: number) => {
    setQueryField("expandedId", expandedId === id ? null : id);
  };

  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
                  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">
        {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) => (
              <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.sensorNumber}`}
                          size="small"
                          className="h-5"
                          color="primary"
                          variant="outlined"
                        />
                      </Box>
                      <Typography
                        variant="caption"
                        className="text-gray-500 block"
                      >
                        最小管径: {scheme.minDiameter} · 用户:{" "}
                        {creatorName(scheme.username)} · 日期:{" "}
                        {formatShortDate(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>
                    </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-center gap-2">
                              <Typography
                                variant="caption"
                                className="text-gray-600 min-w-[70px]"
                              >
                                传感器数量:
                              </Typography>
                              <Typography
                                variant="caption"
                                className="font-medium text-gray-900"
                              >
                                {scheme.sensorNumber}
                              </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.minDiameter}
                              </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>
                        </Box>
                      </Box>

                      {/* 传感器位置列表 */}
                      {scheme.sensorLocation &&
                        scheme.sensorLocation.length > 0 && (
                          <Box className="mb-3">
                            <Typography
                              variant="caption"
                              className="text-gray-600 block mb-2"
                            >
                              传感器位置 ({scheme.sensorLocation.length}个):
                            </Typography>
                            <Box className="max-h-40 overflow-auto bg-gray-50 rounded p-2">
                              <Box className="flex flex-wrap gap-2">
                                {scheme.sensorLocation.map(
                                  (sensorId, 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();
                                        handleLocateSensors([sensorId]);
                                      }}
                                    >
                                      {sensorId}
                                    </Link>
                                  ),
                                )}
                              </Box>
                            </Box>
                          </Box>
                        )}

                      {/* 操作按钮区域 */}
                      <Box className="pt-2 border-t border-gray-100 flex gap-2">
                        {scheme.sensorLocation &&
                          scheme.sensorLocation.length > 0 && (
                            <Button
                              variant="outlined"
                              fullWidth
                              size="small"
                              className="border-blue-600 text-blue-600 hover:bg-blue-50"
                              onClick={() =>
                                handleLocateSensors(scheme.sensorLocation!)
                              }
                              sx={{
                                textTransform: "none",
                                fontWeight: 500,
                              }}
                            >
                              定位全部传感器
                            </Button>
                          )}
                        <Button
                          variant="contained"
                          fullWidth
                          size="small"
                          className="bg-blue-600 hover:bg-blue-700"
                          startIcon={<EditIcon />}
                          onClick={() => onEdit?.(scheme.id)}
                          sx={{
                            textTransform: "none",
                            fontWeight: 500,
                          }}
                        >
                          打开结果编辑
                        </Button>
                      </Box>
                    </Box>
                  </Collapse>
                </CardContent>
              </Card>
            ))}
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default SchemeQuery;