"use client";

import React, { useState, useEffect, useCallback } from "react";
import {
  Box,
  TextField,
  Button,
  Typography,
  IconButton,
  Stack,
  Alert,
  Divider,
} from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import "dayjs/locale/zh-cn";
import dayjs, { Dayjs } from "dayjs";
import { useMap } from "@components/olmap/core/MapComponent";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Style, Stroke, Fill, Circle as CircleStyle } from "ol/style";
import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
import Feature, { FeatureLike } from "ol/Feature";
import { useNotification } from "@refinedev/core";
import { api } from "@/lib/api";
import { config, NETWORK_NAME } from "@/config/config";

interface ValveItem {
  id: string;
  k: number;
  feature?: any;
}

const AnalysisParameters: React.FC = () => {
  const map = useMap();
  const { open } = useNotification();

  // State
  const [schemeName, setSchemeName] = useState<string>(
    "Flushing_" + new Date().getTime(),
  );
  const [valves, setValves] = useState<ValveItem[]>([]);
  const [drainageNode, setDrainageNode] = useState<string | null>(null);
  const [drainageFeature, setDrainageFeature] = useState<Feature | null>(null);

  const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
  const [flushFlow, setFlushFlow] = useState<number>(200);
  const [duration, setDuration] = useState<number>(3600);

  const [selectionMode, setSelectionMode] = useState<'none' | 'valve' | 'drainage'>('none');
  const [analyzing, setAnalyzing] = useState<boolean>(false);

  const [highlightLayer, setHighlightLayer] = useState<VectorLayer<VectorSource> | null>(null);

  // Map click handler
  const handleMapClickSelectFeatures = useCallback(
    async (event: { coordinate: number[] }) => {
      if (!map || selectionMode === 'none') return;

      const feature = await mapClickSelectFeatures(event, map);
      if (!feature) return;

      const layer = feature.getId()?.toString().split(".")[0];
      const featureId = feature.getProperties().id;

      if (selectionMode === 'valve') {
        if (layer !== 'geo_valves') {
          open?.({
            type: "error",
            message: "请选择阀门要素",
          });
          return;
        }

        setValves((prev) => {
          if (prev.some((v) => v.id === featureId)) {
            open?.({
              type: "error",
              message: "该阀门已添加",
            });
            return prev;
          }
          return [...prev, { id: featureId, k: 1.0, feature }];
        });

      } else if (selectionMode === 'drainage') {
        if (layer !== 'geo_junctions') {
          open?.({
            type: "error",
            message: "请选择节点要素作为排水点",
          });
          return;
        }
        setDrainageNode(featureId);
        setDrainageFeature(feature);
        setSelectionMode('none');
        map.un("click", handleMapClickSelectFeatures);
      }
    },
    [map, selectionMode, open]
  );

  // Initialize highlight layer
  useEffect(() => {
    if (!map) return;

    const highlightStyle = function (feature: FeatureLike) {
      const styles = [];
      const type = feature.get("type"); // We will set this property when adding to source

      if (type === "valve") {
        styles.push(
          new Style({
            image: new CircleStyle({
              radius: 8,
              fill: new Fill({ color: "rgba(255, 165, 0, 0.8)" }), // Orange for valves
              stroke: new Stroke({ color: "white", width: 2 }),
            }),
          })
        );
      } else if (type === "drainage") {
        styles.push(
          new Style({
            image: new CircleStyle({
              radius: 8,
              fill: new Fill({ color: "rgba(0, 0, 255, 0.8)" }), // Blue for drainage
              stroke: new Stroke({ color: "white", width: 2 }),
            }),
          })
        );
      }
      return styles;
    };

    const layer = new VectorLayer({
      source: new VectorSource(),
      style: highlightStyle,
      zIndex: 1000,
      properties: {
        name: "FlushingHighlight",
      },
    });

    map.addLayer(layer);
    setHighlightLayer(layer);

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

  // Update highlight layer features
  useEffect(() => {
    if (!highlightLayer) return;
    const source = highlightLayer.getSource();
    if (!source) return;

    source.clear();

    // Add valves
    valves.forEach((v) => {
      if (v.feature) {
        const f = v.feature.clone(); // Clone to avoid modifying original
        f.set("type", "valve");
        // Ensure geometry is present (it should be for features from map)
        if (f.getGeometry()) {
          source.addFeature(f);
        }
      }
    });

    // Add drainage node
    if (drainageFeature) {
      const f = drainageFeature.clone();
      f.set("type", "drainage");
      source.addFeature(f);
    }

  }, [highlightLayer, valves, drainageFeature]);

  // Bind click event based on selection mode
  useEffect(() => {
    if (!map || selectionMode === "none") return;

    map.on("click", handleMapClickSelectFeatures);

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

  // Toggle selection
  const toggleSelection = (mode: 'valve' | 'drainage') => {
    // If clicking same mode, turn off
    if (selectionMode === mode) {
      setSelectionMode('none');
    } else {
      setSelectionMode(mode);
    }
  };

  const handleRemoveValve = (id: string) => {
    setValves((prev) => prev.filter((v) => v.id !== id));
  };

  const handleValveKChange = (id: string, k: string) => {
    const numK = parseFloat(k);
    setValves(prev => prev.map(v => v.id === id ? { ...v, k: isNaN(numK) ? 0 : numK } : v));
  };

  const handleAnalyze = async () => {
    if (!startTime || !drainageNode || !schemeName.trim()) {
      open?.({
        type: "error",
        message: "请填写完整参数",
        description: "方案名称、开始时间和排水点为必填项",
      });
      return;
    }

    setAnalyzing(true);

    try {
      const formattedTime = startTime.format("YYYY-MM-DDTHH:mm:00Z"); // ISO format with seconds set to 00

      const params = {
        scheme_name: schemeName,
        network: NETWORK_NAME,
        start_time: formattedTime,
        valves: valves.map(v => v.id),
        valves_k: valves.map(v => v.k),
        drainage_node_ID: drainageNode,
        flush_flow: flushFlow,
        duration: duration
      };

      // Use params serializer to handle array params correctly if needed, 
      // but axios usually handles array as valves[]=1&valves[]=2
      // FastAPI default expects repeated query params.

      const response = await api.get(`${config.BACKEND_URL}/api/v1/flushing_analysis/`, {
        params,
        // Ensure arrays are sent as repeated keys: valves=1&valves=2
        paramsSerializer: {
          indexes: null // Result: valves=1&valves=2
        }
      });
      if (response.status !== 200) {
        throw new Error(`分析请求失败，状态码: ${response.status}`);
      }
      open?.({
        type: "success",
        message: "方案分析成功",
        description: "管道冲洗模拟完成，请在方案查询中查看结果。",
      });
    } catch (error) {
      console.error("提交分析失败", error);
      open?.({
        type: "error",
        message: "提交分析失败",
        description: error instanceof Error ? error.message : "未知错误",
      });
    } finally {
      setAnalyzing(false);
    }
  };

  return (
    <Box className="flex flex-col h-full gap-4 pb-4">
      {/* 1. Valve Selection */}
      <Box>
        <Box className="flex items-center justify-between mb-2">
          <Typography variant="subtitle2" className="font-medium">
            参与阀门
          </Typography>
          <Button
            variant={selectionMode === 'valve' ? "contained" : "outlined"}
            color={selectionMode === 'valve' ? "error" : "primary"}
            size="small"
            onClick={() => toggleSelection('valve')}
          >
            {selectionMode === 'valve' ? "停止选择" : "选择阀门"}
          </Button>
        </Box>
        {selectionMode === 'valve' && (
          <Box className="mb-2 p-2 bg-blue-50 text-xs text-blue-700 rounded">
            💡 点击地图上的阀门进行添加
          </Box>
        )}
        <Stack spacing={1} className="max-h-50 h-48 overflow-auto">
          {valves.map((valve) => (
            <Box key={valve.id} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
              <Typography className="text-sm flex-1 pl-1">{valve.id}</Typography>
              <TextField
                label="开度"
                size="small"
                type="number"
                value={valve.k}
                onChange={(e) => handleValveKChange(valve.id, e.target.value)}
                className="w-20"
                slotProps={{ htmlInput: { step: 0.1, min: 0, max: 1 } }}
              />
              <IconButton size="small" onClick={() => handleRemoveValve(valve.id)}>
                <CloseIcon fontSize="small" />
              </IconButton>
            </Box>
          ))}
          {valves.length === 0 && (
            <Typography variant="caption" className="text-gray-400 text-center py-20">
              暂无选中阀门
            </Typography>
          )}
        </Stack>
      </Box>

      <Divider />

      {/* 2. Drainage Node Selection */}
      <Box>
        <Box className="flex items-center justify-between mb-2">
          <Typography variant="subtitle2" className="font-medium">
            排水节点
          </Typography>
          <Button
            variant={selectionMode === 'drainage' ? "contained" : "outlined"}
            color={selectionMode === 'drainage' ? "error" : "primary"}
            size="small"
            onClick={() => toggleSelection('drainage')}
          >
            {selectionMode === 'drainage' ? "停止选择" : "选择节点"}
          </Button>
        </Box>
        {selectionMode === 'drainage' && (
          <Box className="mb-2 p-2 bg-blue-50 text-xs text-blue-700 rounded">
            💡 点击地图上的节点作为排水点
          </Box>
        )}
        <Stack spacing={1} className="h-12 overflow-auto">
          {drainageNode && (
            <Box className="flex items-center gap-2 p-2 bg-gray-50 rounded">
              <Typography className="text-sm flex-1 pl-1">{drainageNode}</Typography>
              <IconButton
                size="small"
                onClick={() => {
                  setDrainageNode(null);
                  setDrainageFeature(null);
                }}
              >
                <CloseIcon fontSize="small" />
              </IconButton>
            </Box>
          )}
          {!drainageNode && (
            <Typography variant="caption" className="text-gray-400 text-center py-2">
              暂无选中排水节点
            </Typography>
          )}
        </Stack>
      </Box>

      <Divider />

      {/* 3. Parameters */}
      <Box className="flex flex-col gap-3">
        <Box>
          <Typography variant="subtitle2" className="mb-1 font-medium">
            开始时间
          </Typography>
          <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
            <DateTimePicker
              value={startTime}
              onChange={(newValue) => setStartTime(newValue)}
              format="YYYY-MM-DD HH:mm"
              slotProps={{ textField: { size: "small", fullWidth: true } }}
              localeText={
                pickerZhCN.components.MuiLocalizationProvider.defaultProps
                  .localeText
              }
            />
          </LocalizationProvider>
        </Box>

        {/* Scheme Name */}
        <Box>
          <Typography variant="subtitle2" className="mb-1 font-medium">
            方案名称
          </Typography>
          <TextField
            fullWidth
            size="small"
            value={schemeName}
            onChange={(e) => setSchemeName(e.target.value)}
            placeholder="请输入方案名称"
          />
        </Box>

        <Box className="flex gap-2">
          <Box className="flex-1">
            <Typography variant="subtitle2" className="mb-1 font-medium">
              冲洗流量 (CMH)
            </Typography>
            <TextField
              fullWidth
              size="small"
              type="number"
              value={flushFlow}
              onChange={(e) => setFlushFlow(parseFloat(e.target.value) || 0)}
            />
          </Box>
          <Box className="flex-1">
            <Typography variant="subtitle2" className="mb-1 font-medium">
              持续时长 (秒)
            </Typography>
            <TextField
              fullWidth
              size="small"
              type="number"
              value={duration}
              onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
            />
          </Box>
        </Box>
      </Box>

      <Box className="mt-auto pt-2">
        <Button
          fullWidth
          variant="contained"
          onClick={handleAnalyze}
          disabled={
            analyzing ||
            !schemeName.trim() ||
            !drainageNode ||
            !startTime ||
            // !flushFlow ||
            !duration
          }
          className="bg-blue-600 hover:bg-blue-700"
        >
          {analyzing ? "分析中..." : "开始分析"}
        </Button>
      </Box>
    </Box>
  );
};

export default AnalysisParameters;