"use client";

import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
  Box,
  Button,
  Chip,
  CircularProgress,
  Divider,
  IconButton,
  Stack,
  Tab,
  Tabs,
  Tooltip,
  Typography,
  Drawer,
} from "@mui/material";
import {
  Refresh,
  ShowChart,
  TableChart,
  CleaningServices,
  Close,
  ChevronLeft,
  ChevronRight,
} from "@mui/icons-material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { zhCN } from "@mui/x-data-grid/locales";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import "dayjs/locale/zh-cn"; // 引入中文包
import dayjs, { Dayjs } from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
import config from "@/config/config";
import { useGetIdentity } from "@refinedev/core";
import { useNotification } from "@refinedev/core";
import { api } from "@/lib/api";
import { apiFetch } from "@/lib/apiFetch";
import PanelEmptyState from "@components/olmap/common/PanelEmptyState";
import {
  ElementHistoryResult,
  ElementHistorySeries,
  ElementHistoryTarget,
  fetchElementHistory,
  historySeriesKey,
  TimeSeriesPoint,
  toTimeSeriesPoints,
} from "@/lib/elementHistory";
import {
  FLOW_DISPLAY_UNIT,
  PRESSURE_DISPLAY_UNIT,
} from "@/utils/units";

dayjs.extend(utc);
dayjs.extend(timezone);

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

export interface SCADADataPanelProps {
  /** 选中的设备 ID 列表 */
  deviceIds: string[];
  /** 可选：控制浮窗显示 */
  visible?: boolean;
  /** 默认展示的选项卡 */
  defaultTab?: "chart" | "table";
  /** Y 轴数值的小数位数 */
  fractionDigits?: number;
  /** 是否显示清洗功能 */
  showCleaning?: boolean;
  /** 清洗数据的回调 */
  onCleanData?: () => void;
  /** 外部传入开始时间（ISO8601 字符串），用于初始化并触发查询 */
  start_time?: string;
  /** 外部传入结束时间（ISO8601 字符串），用于初始化并触发查询 */
  end_time?: string;
  /** 关闭面板 */
  onClose?: () => void;
}

type PanelTab = "chart" | "table";

type LoadingState = "idle" | "loading" | "success" | "error";

const panelHeaderActionSx = {
  color: "primary.contrastText",
  backgroundColor: "rgba(255,255,255,0.08)",
  "&:hover": {
    backgroundColor: "rgba(255,255,255,0.18)",
  },
};

interface ScadaDeviceMetadata {
  device_id: string;
  device_type: string;
  node_id: string | null;
  link_id: string | null;
}

/** 用设备元数据组装统一元素历史查询，一次返回监测与模拟数据。 */
const fetchFromBackend = async (
  deviceIds: string[],
  range: { from: Date; to: Date },
): Promise<ElementHistoryResult> => {
  if (deviceIds.length === 0) {
    return { points: [], series: [] };
  }
  const metadataResponse = await apiFetch(
    `${config.BACKEND_URL}/api/v1/scada-devices`,
  );
  if (!metadataResponse.ok) {
    throw new Error(`SCADA 设备信息请求失败: HTTP ${metadataResponse.status}`);
  }
  const allDevices = (await metadataResponse.json()) as ScadaDeviceMetadata[];
  const requested = new Set(deviceIds);
  const devices = allDevices.filter((device) => requested.has(device.device_id));
  const missing = deviceIds.filter(
    (deviceId) => !devices.some((device) => device.device_id === deviceId),
  );
  if (missing.length > 0) {
    throw new Error(`SCADA 设备不存在: ${missing.join(", ")}`);
  }

  const targetsByElement = new Map<string, ElementHistoryTarget>();
  devices.forEach((device) => {
    const isFlow = ["pipe_flow", "flow"].includes(
      device.device_type.toLowerCase(),
    );
    const elementId = isFlow ? device.link_id : device.node_id;
    const elementType = isFlow ? "pipe" : "junction";
    if (!elementId) {
      throw new Error(`SCADA 设备 ${device.device_id} 未关联管网元素`);
    }
    const key = `${elementType}:${elementId}`;
    const target = targetsByElement.get(key) ?? {
      element_id: elementId,
      element_type: elementType,
      device_ids: [],
    };
    target.device_ids!.push(device.device_id);
    targetsByElement.set(key, target);
  });
  const targets = Array.from(targetsByElement.values());
  const result = await fetchElementHistory(
    targets,
    range,
    "realtime_comparison",
  );
  const expandedSeries = result.series.flatMap((series) => {
    if (series.device_id || series.source.startsWith("scada_")) return [series];
    const target = targets.find(
      (item) =>
        item.element_id === series.element_id &&
        item.element_type === series.element_type,
    );
    return (target?.device_ids ?? []).map((deviceId) => ({
      ...series,
      device_id: deviceId,
    }));
  });
  return { series: expandedSeries, points: toTimeSeriesPoints(expandedSeries) };
};

const formatTimestamp = (timestamp: string) =>
  dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm");

const ensureValidRange = (
  from: Dayjs,
  to: Dayjs,
): { from: Dayjs; to: Dayjs } => {
  if (from.isAfter(to)) {
    return { from: to, to: from };
  }
  return { from, to };
};

const buildDataset = (
  points: TimeSeriesPoint[],
  deviceIds: string[],
  fractionDigits: number,
  showCleaning: boolean,
) => {
  return points.map((point) => {
    const entry: Record<string, any> = {
      time: dayjs(point.timestamp).toDate(),
      label: formatTimestamp(point.timestamp),
    };

    if (showCleaning) {
      deviceIds.forEach((id) => {
        ["raw", "clean", "sim"].forEach((suffix) => {
          const key = `${id}_${suffix}`;
          const value = point.values[key];
          entry[key] =
            typeof value === "number"
              ? Number.isFinite(value)
                ? parseFloat(value.toFixed(fractionDigits))
                : null
              : value ?? null;
        });
      });
    } else {
      deviceIds.forEach((id) => {
        ["raw", "clean", "sim"].forEach((suffix) => {
          const key = `${id}_${suffix}`;
          const value = point.values[key];
          if (value !== undefined && value !== null) {
            entry[key] =
              typeof value === "number"
                ? Number.isFinite(value)
                  ? parseFloat(value.toFixed(fractionDigits))
                  : null
                : value ?? null;
          }
        });
      });
    }

    return entry;
  });
};

const emptyStateMessages: Record<
  PanelTab,
  { title: string; subtitle: string }
> = {
  chart: {
    title: "暂无时序数据",
    subtitle: "请调整时间范围，或确认所选设备在该时段已有数据。",
  },
  table: {
    title: "暂无表格数据",
    subtitle: "请调整时间范围，或确认所选设备在该时段已有数据。",
  },
};

const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
  deviceIds,
  visible = true,
  defaultTab = "chart",
  fractionDigits = 2,
  showCleaning = false,
  onCleanData,
  start_time,
  end_time,
  onClose,
}) => {
  const { open } = useNotification();
  const { data: user } = useGetIdentity<IUser>();

  const customFetcher = fetchFromBackend;

  const [from, setFrom] = useState<Dayjs>(() => {
    if (start_time) {
      const parsedStart = dayjs(start_time);
      if (parsedStart.isValid()) {
        return parsedStart;
      }
    }
    return dayjs().subtract(1, "day");
  });
  const [to, setTo] = useState<Dayjs>(() => {
    if (end_time) {
      const parsedEnd = dayjs(end_time);
      if (parsedEnd.isValid()) {
        return parsedEnd;
      }
    }
    return dayjs();
  });
  const [activeTab, setActiveTab] = useState<PanelTab>(defaultTab);
  const [timeSeries, setTimeSeries] = useState<TimeSeriesPoint[]>([]);
  const [historySeries, setHistorySeries] = useState<ElementHistorySeries[]>([]);
  const [loadingState, setLoadingState] = useState<LoadingState>("idle");
  const [error, setError] = useState<string | null>(null);
  const [isExpanded, setIsExpanded] = useState<boolean>(true);
  const [isCleaning, setIsCleaning] = useState<boolean>(false);
  const [selectedSource, setSelectedSource] = useState<
    "raw" | "clean" | "sim" | "all"
  >(() => (deviceIds.length === 1 ? "all" : "clean"));

  useEffect(() => {
    setActiveTab(defaultTab);
  }, [defaultTab]);

  useEffect(() => {
    if (!start_time && !end_time) return;
    if (start_time) {
      const parsedStart = dayjs(start_time);
      if (parsedStart.isValid()) {
        setFrom((prev) => (parsedStart.isSame(prev) ? prev : parsedStart));
      }
    }
    if (end_time) {
      const parsedEnd = dayjs(end_time);
      if (parsedEnd.isValid()) {
        setTo((prev) => (parsedEnd.isSame(prev) ? prev : parsedEnd));
      }
    }
  }, [start_time, end_time]);

  const normalizedRange = useMemo(() => ensureValidRange(from, to), [from, to]);

  // Parent map updates can pass a new array with identical IDs. Keep the
  // request dependency tied to the IDs themselves, not the array identity.
  const deviceIdsKey = JSON.stringify(deviceIds);
  const requestedDeviceIds = useMemo(
    () => JSON.parse(deviceIdsKey) as string[],
    [deviceIdsKey],
  );
  const hasDevices = requestedDeviceIds.length > 0;
  const hasData = timeSeries.length > 0;

  const dataset = useMemo(
    () => buildDataset(timeSeries, deviceIds, fractionDigits, showCleaning),
    [timeSeries, deviceIds, fractionDigits, showCleaning],
  );
  const seriesByKey = useMemo(
    () =>
      new Map(historySeries.map((series) => [historySeriesKey(series), series])),
    [historySeries],
  );
  const hasFlowSeries = historySeries.some((item) => item.metric === "flow");
  const hasPressureSeries = historySeries.some(
    (item) => item.metric === "pressure",
  );
  const unitForKey = useCallback(
    (key: string) => seriesByKey.get(key)?.display_unit ?? "",
    [seriesByKey],
  );
  const axisForKey = useCallback(
    (key: string) =>
      seriesByKey.get(key)?.metric === "pressure" && hasFlowSeries ? 1 : 0,
    [hasFlowSeries, seriesByKey],
  );

  const handleFetch = useCallback(
    async (reason: string) => {
      if (!hasDevices) {
        setTimeSeries([]);
        setHistorySeries([]);
        setLoadingState("idle");
        setError(null);
        return;
      }

      setLoadingState("loading");
      setError(null);
      try {
        const { from: rangeFrom, to: rangeTo } = normalizedRange;
        const result = await customFetcher(requestedDeviceIds, {
          from: rangeFrom.toDate(),
          to: rangeTo.toDate(),
        });
        setTimeSeries(result.points);
        setHistorySeries(result.series);
        setLoadingState("success");
      } catch (err) {
        setError(err instanceof Error ? err.message : "未知错误");
        setLoadingState("error");
      }
    },
    [requestedDeviceIds, customFetcher, hasDevices, normalizedRange],
  );

  // 处理数据清洗
  const handleCleanData = useCallback(async () => {
    if (!hasDevices) {
      open?.({
        type: "error",
        message: "请先选择设备",
      });
      return;
    }

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

    setIsCleaning(true);

    try {
      const { from: rangeFrom, to: rangeTo } = normalizedRange;
      const startTime = dayjs(rangeFrom).toISOString();
      const endTime = dayjs(rangeTo).toISOString();

      // 调用后端清洗接口
      const response = await api.post(
        `${
          config.BACKEND_URL
        }/api/v1/timeseries/scada-cleaning-runs?device_ids=${deviceIds.join(
          ",",
        )}&start_time=${startTime}&end_time=${endTime}`,
      );

      console.log("[SCADADataPanel] 清洗响应:", response.data);

      // 处理成功响应
      if (response.data === "success" || response.data?.success === true) {
        open?.({
          type: "success",
          message: "数据清洗成功",
          description: `已完成 ${deviceIds.length} 个设备的数据清洗`,
        });

        // 清洗完成后自动刷新数据
        await handleFetch("after-cleaning");

        // 如果父组件提供了回调，也调用它
        onCleanData?.();
      } else {
        throw new Error(response.data?.message || "清洗失败");
      }
    } catch (err: any) {
      console.error("[SCADADataPanel] 数据清洗失败:", err);
      open?.({
        type: "error",
        message: "数据清洗失败",
        description:
          err.response?.data?.detail ||
          err.response?.data?.message ||
          err.message ||
          "未知错误",
      });
    } finally {
      setIsCleaning(false);
    }
  }, [
    deviceIds,
    hasDevices,
    normalizedRange,
    user,
    open,
    onCleanData,
    handleFetch,
  ]);

  // 设备变化时自动查询
  useEffect(() => {
    if (hasDevices) {
      handleFetch("device-change");
    } else {
      setTimeSeries([]);
      setHistorySeries([]);
    }
  }, [handleFetch, hasDevices]);

  // 当设备数量变化时，调整数据源选择
  useEffect(() => {
    if (deviceIds.length > 1 && selectedSource === "all") {
      setSelectedSource("clean");
    }
  }, [deviceIds.length, selectedSource]);

  const columns: GridColDef[] = useMemo(() => {
    const base: GridColDef[] = [
      {
        field: "label",
        headerName: "时间",
        minWidth: 180,
        flex: 1,
      },
    ];

    const dynamic = (() => {
      if (showCleaning) {
        if (selectedSource === "all") {
          // 全部模式：显示所有设备的三种数据
          return deviceIds.flatMap<GridColDef>((id) => [
            {
              field: `${id}_raw`,
              headerName: `${id} (原始) [${unitForKey(`${id}_raw`)}]`,
              minWidth: 140,
              flex: 1,
              valueFormatter: (value: any) => {
                if (value === null || value === undefined) return "--";
                if (Number.isFinite(Number(value))) {
                  return Number(value).toFixed(fractionDigits);
                }
                return String(value);
              },
            },
            {
              field: `${id}_clean`,
              headerName: `${id} (清洗) [${unitForKey(`${id}_clean`)}]`,
              minWidth: 140,
              flex: 1,
              valueFormatter: (value: any) => {
                if (value === null || value === undefined) return "--";
                if (Number.isFinite(Number(value))) {
                  return Number(value).toFixed(fractionDigits);
                }
                return String(value);
              },
            },
            {
              field: `${id}_sim`,
              headerName: `${id} (模拟) [${unitForKey(`${id}_sim`)}]`,
              minWidth: 140,
              flex: 1,
              valueFormatter: (value: any) => {
                if (value === null || value === undefined) return "--";
                if (Number.isFinite(Number(value))) {
                  return Number(value).toFixed(fractionDigits);
                }
                return String(value);
              },
            },
          ]);
        } else {
          // 单一数据源模式：只显示选中的数据源
          return deviceIds.map<GridColDef>((id) => ({
            field: `${id}_${selectedSource}`,
            headerName: `${id} [${unitForKey(`${id}_${selectedSource}`)}]`,
            minWidth: 140,
            flex: 1,
            valueFormatter: (value: any) => {
              if (value === null || value === undefined) return "--";
              if (Number.isFinite(Number(value))) {
                return Number(value).toFixed(fractionDigits);
              }
              return String(value);
            },
          }));
        }
      } else {
        // 非清洗模式：显示所有设备的所有有数据的列
        const cols: GridColDef[] = [];

        deviceIds.forEach((id) => {
          const deviceName = id;

          // 为每个设备的每种数据类型创建列
          const suffixes = [
            { key: "raw", name: "原始值" },
            { key: "clean", name: "清洗值" },
            { key: "sim", name: "模拟值" },
          ];

          suffixes.forEach(({ key, name }) => {
            const fieldKey = `${id}_${key}`;
            // 检查是否有该字段的数据
            const hasData = dataset.some(
              (item) => item[fieldKey] !== null && item[fieldKey] !== undefined,
            );

            if (hasData) {
              cols.push({
                field: fieldKey,
                headerName: `${deviceName} (${name}) [${unitForKey(fieldKey)}]`,
                minWidth: 140,
                flex: 1,
                valueFormatter: (value: any) => {
                  if (value === null || value === undefined) return "--";
                  if (Number.isFinite(Number(value))) {
                    return Number(value).toFixed(fractionDigits);
                  }
                  return String(value);
                },
              });
            }
          });
        });

        return cols;
      }
    })();

    return [...base, ...dynamic];
  }, [
    deviceIds,
    fractionDigits,
    showCleaning,
    selectedSource,
    dataset,
    unitForKey,
  ]);

  const rows = useMemo(
    () =>
      dataset.map((item, index) => ({
        id: `${
          item.time instanceof Date ? item.time.getTime() : index
        }-${index}`,
        ...item,
      })),
    [dataset],
  );

  const renderEmpty = () => {
    if (!hasDevices) {
      return (
        <PanelEmptyState
          icon={<ShowChart />}
          title="尚未选择设备"
          description="请先在设备列表中选择需要查看的 SCADA 设备。"
        />
      );
    }

    const message = emptyStateMessages[activeTab];
    return (
      <PanelEmptyState
        icon={activeTab === "chart" ? <ShowChart /> : <TableChart />}
        title={message.title}
        description={message.subtitle}
      />
    );
  };

  const renderChart = () => {
    if (!hasData) return renderEmpty();

    // 为每个设备生成独特的颜色和样式
    const colors = [
      "#1976d2", // 蓝色
      "#dc004e", // 粉红色
      "#ff9800", // 橙色
      "#4caf50", // 绿色
      "#9c27b0", // 紫色
      "#00bcd4", // 青色
      "#f44336", // 红色
      "#8bc34a", // 浅绿色
      "#ff5722", // 深橙色
      "#3f51b5", // 靛蓝色
    ];

    const xData = dataset.map((item) => item.label);

    const getSeries = () => {
      if (showCleaning) {
        if (selectedSource === "all") {
          return deviceIds.flatMap((id, index) => [
            {
              name: `${id} (原始) [${unitForKey(`${id}_raw`)}]`,
              type: "line",
              yAxisIndex: axisForKey(`${id}_raw`),
              symbol: "none",
              connectNulls: true,
              sampling: "lttb",
              itemStyle: { color: colors[index % colors.length] },
              data: dataset.map((item) => item[`${id}_raw`]),
            },
            {
              name: `${id} (清洗) [${unitForKey(`${id}_clean`)}]`,
              type: "line",
              yAxisIndex: axisForKey(`${id}_clean`),
              symbol: "none",
              connectNulls: true,
              sampling: "lttb",
              itemStyle: { color: colors[(index + 3) % colors.length] },
              data: dataset.map((item) => item[`${id}_clean`]),
            },
            {
              name: `${id} (模拟) [${unitForKey(`${id}_sim`)}]`,
              type: "line",
              yAxisIndex: axisForKey(`${id}_sim`),
              symbol: "none",
              connectNulls: true,
              sampling: "lttb",
              itemStyle: { color: colors[(index + 6) % colors.length] },
              data: dataset.map((item) => item[`${id}_sim`]),
            },
          ]);
        } else {
          return deviceIds.map((id, index) => ({
            name: `${id} [${unitForKey(`${id}_${selectedSource}`)}]`,
            type: "line",
            yAxisIndex: axisForKey(`${id}_${selectedSource}`),
            symbol: "none",
            connectNulls: true,
            sampling: "lttb",
            itemStyle: { color: colors[index % colors.length] },
            data: dataset.map((item) => item[`${id}_${selectedSource}`]),
          }));
        }
      } else {
        return deviceIds.flatMap((id, index) => {
          const series = [];
          ["raw", "clean", "sim"].forEach((suffix, sIndex) => {
            const key = `${id}_${suffix}`;
            const hasData = dataset.some(
              (item) => item[key] !== null && item[key] !== undefined,
            );
            if (hasData) {
              series.push({
                name: `${id} (${
                  suffix === "raw"
                    ? "原始"
                    : suffix === "clean"
                    ? "清洗"
                    : "模拟"
                }) [${unitForKey(key)}]`,
                type: "line",
                yAxisIndex: axisForKey(key),
                symbol: "none",
                connectNulls: true,
                sampling: "lttb",
                itemStyle: {
                  color: colors[(index * 3 + sIndex) % colors.length],
                },
                data: dataset.map((item) => item[key]),
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colors[(index * 3 + sIndex) % colors.length],
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 255, 255, 0)",
                    },
                  ]),
                  opacity: 0.3,
                },
              });
            }
          });
          // 如果没有clean/raw/sim数据，则使用fallback
          if (series.length === 0) {
            series.push({
              name: id,
              type: "line",
              symbol: "none",
              connectNulls: true,
              sampling: "lttb",
              itemStyle: { color: colors[index % colors.length] },
              data: dataset.map((item) => item[id]),
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colors[index % colors.length],
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 255, 255, 0)",
                  },
                ]),
                opacity: 0.3,
              },
            });
          }
          return series;
        });
      }
    };

    const option = {
      // animation: false,
      animationDuration: 500,
      tooltip: {
        trigger: "axis",
        confine: true,
        position: function (pt: any[]) {
          return [pt[0], "10%"];
        },
      },
      legend: {
        top: "top",
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "11%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          restore: {},
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: xData,
      },
      yAxis: [
        ...(hasFlowSeries
          ? [
              {
                type: "value",
                scale: true,
                name: `流量 (${FLOW_DISPLAY_UNIT})`,
              },
            ]
          : []),
        ...(hasPressureSeries
          ? [
              {
                type: "value",
                scale: true,
                name: `压力 (${PRESSURE_DISPLAY_UNIT})`,
              },
            ]
          : []),
      ],
      dataZoom: [
        {
          type: "inside",
          start: 0,
          end: 100,
        },
        {
          start: 0,
          end: 100,
        },
      ],
      series: getSeries(),
    };

    return (
      <Box
        sx={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
        }}
      >
        <ReactECharts
          option={option}
          style={{ height: "100%", width: "100%" }}
          notMerge={true}
          lazyUpdate={true}
        />
      </Box>
    );
  };

  const renderTable = () => {
    if (!hasData) return renderEmpty();

    console.debug("[SCADADataPanel] 表格数据:", {
      rowsCount: rows.length,
      columnsCount: columns.length,
      sampleRow: rows[0],
      columns: columns.map((c) => c.field),
    });

    return (
      <DataGrid
        rows={rows}
        columns={columns}
        columnBufferPx={100}
        localeText={zhCN.components.MuiDataGrid.defaultProps.localeText}
        initialState={{
          pagination: {
            paginationModel: { pageSize: 50, page: 0 },
          },
        }}
        pageSizeOptions={[25, 50, 100]}
        sx={{
          border: "none",
          height: "100%",
          "& .MuiDataGrid-cell": {
            borderColor: "#f0f0f0",
          },
          "& .MuiDataGrid-columnHeaders": {
            backgroundColor: "#fafafa",
            fontWeight: 600,
            fontSize: "0.875rem",
          },
          "& .MuiDataGrid-row:hover": {
            backgroundColor: "#f5f5f5",
          },
          "& .MuiDataGrid-columnHeaderTitle": {
            fontWeight: 600,
          },
        }}
        disableRowSelectionOnClick
      />
    );
  };

  return (
    <>
      {/* 收起时的触发按钮 */}
      {!isExpanded && hasDevices && (
        <Box
          className="absolute top-20 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
          onClick={() => setIsExpanded(true)}
          sx={{ zIndex: 1290 }}
        >
          <Box className="flex flex-col items-center py-3 px-3 gap-1">
            <ShowChart className="text-[#257DD4] w-5 h-5" />
            <Typography
              variant="caption"
              className="text-gray-700 font-semibold my-1 text-xs"
              style={{ writingMode: "vertical-rl" }}
            >
              历史数据
            </Typography>
            <ChevronLeft className="text-gray-600 w-4 h-4" />
          </Box>
        </Box>
      )}

      {/* 主面板 */}
      <Drawer
        anchor="right"
        open={isExpanded && visible}
        variant="persistent"
        hideBackdrop
        sx={{
          width: 0,
          flexShrink: 0,
          "& .MuiDrawer-paper": {
            width: "min(920px, calc(100vw - 2rem))",
            boxSizing: "border-box",
            position: "absolute",
            top: 80,
            right: 16,
            height: "860px",
            borderRadius: "12px",
            boxShadow:
              "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
            backdropFilter: "blur(8px)",
            opacity: 0.95,
            transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
            border: "none",
            "&:hover": {
              opacity: 1,
            },
          },
        }}
      >
        <Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
          {/* Header */}
          <Box
            sx={{
              p: 2,
              borderBottom: 1,
              borderColor: "divider",
              backgroundColor: "primary.main",
              color: "primary.contrastText",
            }}
          >
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
            >
              <Stack direction="row" spacing={1} alignItems="center">
                <ShowChart fontSize="small" />
                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                  SCADA 历史数据
                </Typography>
                <Chip
                  size="small"
                  label={`${deviceIds.length}`}
                  sx={{
                    backgroundColor: "rgba(255,255,255,0.2)",
                    color: "primary.contrastText",
                    fontWeight: "bold",
                  }}
                />
              </Stack>
              <Stack direction="row" spacing={1}>
                {onClose && (
                  <Tooltip title="关闭">
                    <IconButton
                      size="small"
                      onClick={onClose}
                      aria-label="关闭 SCADA 历史数据面板"
                      sx={panelHeaderActionSx}
                    >
                      <Close fontSize="small" />
                    </IconButton>
                  </Tooltip>
                )}
                <Tooltip title="收起">
                  <IconButton
                    size="small"
                    onClick={() => setIsExpanded(false)}
                    aria-label="收起 SCADA 历史数据面板"
                    sx={panelHeaderActionSx}
                  >
                    <ChevronRight fontSize="small" />
                  </IconButton>
                </Tooltip>
              </Stack>
            </Stack>
          </Box>

          {/* Controls */}
          <Box sx={{ p: 2, backgroundColor: "grey.50" }}>
            <LocalizationProvider
              dateAdapter={AdapterDayjs}
              adapterLocale="zh-cn"
              localeText={
                pickerZhCN.components.MuiLocalizationProvider.defaultProps
                  .localeText
              }
            >
              <Stack spacing={1.5}>
                <Stack direction="row" spacing={1} alignItems="center">
                  <DateTimePicker
                    label="开始时间"
                    value={from}
                    onChange={(value) => {
                      if (value && dayjs.isDayjs(value) && value.isValid()) {
                        setFrom(value);
                      }
                    }}
                    onAccept={(value) => {
                      if (
                        value &&
                        dayjs.isDayjs(value) &&
                        value.isValid() &&
                        hasDevices
                      ) {
                        handleFetch("date-change");
                      }
                    }}
                    maxDateTime={to}
                    slotProps={{
                      textField: { fullWidth: true, size: "small" },
                    }}
                  />
                  <DateTimePicker
                    label="结束时间"
                    value={to}
                    onChange={(value) => {
                      if (value && dayjs.isDayjs(value) && value.isValid()) {
                        setTo(value);
                      }
                    }}
                    onAccept={(value) => {
                      if (
                        value &&
                        dayjs.isDayjs(value) &&
                        value.isValid() &&
                        hasDevices
                      ) {
                        handleFetch("date-change");
                      }
                    }}
                    minDateTime={from}
                    slotProps={{
                      textField: { fullWidth: true, size: "small" },
                    }}
                  />
                </Stack>
                <Stack
                  direction="row"
                  spacing={1}
                  alignItems="center"
                  justifyContent="space-between"
                >
                  <Tabs
                    value={activeTab}
                    onChange={(_, value: PanelTab) => setActiveTab(value)}
                    variant="fullWidth"
                  >
                    <Tab
                      value="chart"
                      icon={<ShowChart fontSize="small" />}
                      iconPosition="start"
                      label="曲线"
                    />
                    <Tab
                      value="table"
                      icon={<TableChart fontSize="small" />}
                      iconPosition="start"
                      label="表格"
                    />
                  </Tabs>
                  <Stack direction="row" spacing={1}>
                    {showCleaning && (
                      <Tooltip title="清洗数据">
                        <span>
                          <Button
                            variant="outlined"
                            size="small"
                            color="secondary"
                            startIcon={
                              isCleaning ? (
                                <CircularProgress size={16} />
                              ) : (
                                <CleaningServices fontSize="small" />
                              )
                            }
                            disabled={
                              !hasDevices ||
                              loadingState === "loading" ||
                              isCleaning
                            }
                            onClick={handleCleanData}
                          >
                            {isCleaning ? "清洗中..." : "清洗"}
                          </Button>
                        </span>
                      </Tooltip>
                    )}
                    <Tooltip title="刷新数据">
                      <span>
                        <Button
                          variant="outlined"
                          size="small"
                          color="primary"
                          startIcon={<Refresh fontSize="small" />}
                          disabled={!hasDevices || loadingState === "loading"}
                          onClick={() => handleFetch("manual")}
                        >
                          刷新
                        </Button>
                      </span>
                    </Tooltip>
                  </Stack>
                </Stack>
                {showCleaning && hasDevices && (
                  <Stack direction="row" spacing={1} alignItems="center">
                    <Typography variant="body2" sx={{ fontWeight: 500 }}>
                      数据源:
                    </Typography>
                    <Tabs
                      value={selectedSource}
                      onChange={(_, value: "raw" | "clean" | "sim" | "all") =>
                        setSelectedSource(value)
                      }
                    >
                      {deviceIds.length === 1 && (
                        <Tab value="all" label="全部" />
                      )}
                      <Tab value="clean" label="清洗" />
                      <Tab value="raw" label="原始" />
                      <Tab value="sim" label="模拟" />
                    </Tabs>
                  </Stack>
                )}
              </Stack>
            </LocalizationProvider>

            {error && (
              <Typography
                variant="caption"
                color="error"
                sx={{ mt: 1, display: "block" }}
              >
                获取数据失败：{error}
              </Typography>
            )}
          </Box>

          <Divider />

          {/* Content */}
          <Box sx={{ flex: 1, position: "relative", p: 2, overflow: "auto" }}>
            {loadingState === "loading" && (
              <Box
                sx={{
                  position: "absolute",
                  inset: 0,
                  backgroundColor: "rgba(255,255,255,0.6)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  zIndex: 1,
                }}
              >
                <CircularProgress size={48} />
              </Box>
            )}

            {activeTab === "chart" ? renderChart() : renderTable()}
          </Box>
        </Box>
      </Drawer>
    </>
  );
};

export default SCADADataPanel;