"use client";

import React, { useState } from "react";
import {
  Box,
  TextField,
  Button,
  Typography,
  MenuItem,
  Stack,
} from "@mui/material";
import { PlayArrow as PlayArrowIcon } from "@mui/icons-material";
import { useNotification } from "@refinedev/core";
import { useGetIdentity } from "@refinedev/core";
import { api } from "@/lib/api";
import { config, NETWORK_NAME } from "@/config/config";

type IUser = {
  id: string;
  name?: string;
};

const OptimizationParameters: React.FC = () => {
  const { open } = useNotification();
  const { data: user } = useGetIdentity<IUser>();

  // 表单状态
  const [sensorType, setSensorType] = useState<string>("pressure");
  const [method, setMethod] = useState<string>("kmeans");
  const [sensorCount, setSensorCount] = useState<number>(5);
  const [minDiameter, setMinDiameter] = useState<number>(5);
  const [schemeName, setSchemeName] = useState<string>(
    "Fangan" + new Date().getTime()
  );
  const [network] = useState<string>(NETWORK_NAME);
  const [analyzing, setAnalyzing] = useState<boolean>(false);

  // 传感器类型选项
  const sensorTypeOptions = [
    { value: "pressure", label: "压力" },
    { value: "flow", label: "流量" },
  ];

  // 方法选项
  const methodOptions = [
    { value: "kmeans", label: "聚类分析" },
    { value: "sensitivity", label: "灵敏度分析" },
  ];

  // 获取传感器类型的中文标签
  const getSensorTypeLabel = (value: string) => {
    return (
      sensorTypeOptions.find((option) => option.value === value)?.label || value
    );
  };

  // 创建方案
  const handleCreateScheme = async () => {
    // 验证输入
    if (!schemeName.trim()) {
      open?.({
        type: "error",
        message: "请输入方案名称",
      });
      return;
    }

    if (sensorCount <= 0) {
      open?.({
        type: "error",
        message: "监测点数目必须大于0",
      });
      return;
    }

    if (minDiameter < 0) {
      open?.({
        type: "error",
        message: "最小管径不能为负数",
      });
      return;
    }

    setAnalyzing(true);

    if (!user || !user.id) {
      open?.({
        type: "error",
        message: "用户信息无效",
      });
      return;
    }

    try {
      // 发送优化请求
      const response = await api.post(
        `${config.BACKEND_URL}/api/v1/sensorplacementscheme/create`,
        null,
        {
          params: {
            network: network,
            scheme_name: schemeName,
            sensor_type: sensorType,
            method: method,
            sensor_count: sensorCount,
            min_diameter: minDiameter,
            user_id: user.id,
            user_name: user.name,
          },
        }
      );

      console.log("响应数据:", response.data); // 添加日志以便调试

      // 兼容后端返回字符串 "success" 或对象 { success: true }
      if (response.data.success === true || response.data === "success") {
        open?.({
          type: "success",
          message: "方案创建成功",
          description: `方案 "${schemeName}" 已完成优化分析`,
        });

        // 重置方案名称
        setSchemeName("Fangan" + new Date().getTime());
      } else {
        throw new Error(response.data?.message || "创建失败");
      }
    } catch (error: any) {
      console.error("创建方案失败:", error);
      open?.({
        type: "error",
        message: "创建方案失败",
        description:
          error.response?.data?.message || error.message || "未知错误",
      });
    } finally {
      setAnalyzing(false);
    }
  };

  return (
    <Box className="flex flex-col gap-4">
      {/* 类型选择 */}
      <Box>
        <Typography
          variant="subtitle2"
          className="mb-2 font-semibold text-gray-700"
        >
          类型
        </Typography>
        <TextField
          select
          fullWidth
          size="small"
          value={sensorType}
          onChange={(e) => setSensorType(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              "&:hover fieldset": {
                borderColor: "#257DD4",
              },
              "&.Mui-focused fieldset": {
                borderColor: "#257DD4",
              },
            },
          }}
        >
          {sensorTypeOptions.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </Box>

      {/* 方法选择 */}
      <Box>
        <Typography
          variant="subtitle2"
          className="mb-2 font-semibold text-gray-700"
        >
          方法
        </Typography>
        <TextField
          select
          fullWidth
          size="small"
          value={method}
          onChange={(e) => setMethod(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              "&:hover fieldset": {
                borderColor: "#257DD4",
              },
              "&.Mui-focused fieldset": {
                borderColor: "#257DD4",
              },
            },
          }}
        >
          {methodOptions.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </Box>

      {/* 监测点数目 */}
      <Box>
        <Typography
          variant="subtitle2"
          className="mb-2 font-semibold text-gray-700"
        >
          监测点数目
        </Typography>
        <TextField
          fullWidth
          size="small"
          type="number"
          value={sensorCount}
          onChange={(e) => setSensorCount(parseInt(e.target.value) || 0)}
          slotProps={{
            htmlInput: { min: 1 },
          }}
          sx={{
            "& .MuiOutlinedInput-root": {
              "&:hover fieldset": {
                borderColor: "#257DD4",
              },
              "&.Mui-focused fieldset": {
                borderColor: "#257DD4",
              },
            },
          }}
        />
      </Box>

      {/* 压力监测点安装最小管径（可选） */}
      <Box>
        <Typography
          variant="subtitle2"
          className="mb-2 font-semibold text-gray-700"
        >
          {getSensorTypeLabel(sensorType)}监测点安装最小管径（可选）
        </Typography>
        <TextField
          fullWidth
          size="small"
          type="number"
          value={minDiameter}
          onChange={(e) => setMinDiameter(parseInt(e.target.value) || 0)}
          slotProps={{
            htmlInput: { min: 0 },
          }}
          sx={{
            "& .MuiOutlinedInput-root": {
              "&:hover fieldset": {
                borderColor: "#257DD4",
              },
              "&.Mui-focused fieldset": {
                borderColor: "#257DD4",
              },
            },
          }}
        />
      </Box>

      {/* 方案名称 */}
      <Box>
        <Typography
          variant="subtitle2"
          className="mb-2 font-semibold text-gray-700"
        >
          方案名称
        </Typography>
        <TextField
          fullWidth
          size="small"
          value={schemeName}
          onChange={(e) => setSchemeName(e.target.value)}
          placeholder="请输入方案名称"
          sx={{
            "& .MuiOutlinedInput-root": {
              "&:hover fieldset": {
                borderColor: "#257DD4",
              },
              "&.Mui-focused fieldset": {
                borderColor: "#257DD4",
              },
            },
          }}
        />
      </Box>

      {/* 创建方案按钮 */}
      <Box className="flex justify-end mt-2">
        <Button
          variant="contained"
          startIcon={<PlayArrowIcon />}
          onClick={handleCreateScheme}
          disabled={analyzing}
          sx={{
            backgroundColor: "#257DD4",
            textTransform: "none",
            px: 4,
            py: 1,
            "&:hover": {
              backgroundColor: "#1e6bb8",
            },
            "&:disabled": {
              backgroundColor: "#ccc",
            },
          }}
        >
          {analyzing ? "分析中..." : "创建方案"}
        </Button>
      </Box>
    </Box>
  );
};

export default OptimizationParameters;