"use client";

import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
  Box,
  Button,
  Chip,
  CircularProgress,
  Divider,
  IconButton,
  Stack,
  Tab,
  Tabs,
  Tooltip,
  Typography,
  Drawer,
  Slider,
} from "@mui/material";
import {
  Refresh,
  ShowChart,
  TableChart,
  ChevronLeft,
  ChevronRight,
} from "@mui/icons-material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { LineChart } from "@mui/x-charts";
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 config, { NETWORK_NAME } from "@/config/config";
import { GeoJSON } from "ol/format";

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

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

export interface TimeSeriesPoint {
  /** ISO8601 时间戳 */
  timestamp: string;
  /** 每个设备对应的值 */
  values: Record<string, number | null | undefined>;
}

export interface HistoryDataPanelProps {
  /** 选中的设备 ID 列表（使用 `ids` 代替，组件不再接收 `deviceIds`） */
  /** 设备列表：每项包含 id 与可选的 type（例如 'scada' / 'simulation'） */
  devices?: { id: string; type?: string }[];
  /** 可选：外部传入的开始时间（若传入会作为默认值） */
  starttime?: string | Date;
  /** 可选：外部传入的结束时间（若传入会作为默认值） */
  endtime?: string | Date;
  /** 可选：方案名（用于 scheme 类型的查询） */
  schemeName?: string;
  /** 自定义数据获取器，默认使用后端 API */
  fetchTimeSeriesData?: (
    deviceIds: string[],
    range: { from: Date; to: Date }
  ) => Promise<TimeSeriesPoint[]>;
  /** 可选：控制浮窗显示 */
  visible?: boolean;
  /** 默认展示的选项卡 */
  defaultTab?: "chart" | "table";
  /** Y 轴数值的小数位数 */
  fractionDigits?: number;
  // 清洗功能已移除，相关参数请通过外部面板/服务清洗后再传入
}

type PanelTab = "chart" | "table";

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

/**
 * 从后端 API 获取 SCADA 数据
 */
const fetchFromBackend = async (
  deviceIds: string[],
  range: { from: Date; to: Date }
): Promise<TimeSeriesPoint[]> => {
  if (deviceIds.length === 0) {
    return [];
  }

  const ids = deviceIds.join(",");
  const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss");
  const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss");
  // 原始数据接口（清洗功能已移除）
  const rawSCADAUrl = `${config.BACKEND_URL}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
  // 模拟数据接口（备用）
  const simulationSCADAUrl = `${config.BACKEND_URL}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;

  try {
    // 先使用原始数据接口
    let response = await fetch(rawSCADAUrl);
    if (!response.ok) {
      console.warn(
        `[SCADADataPanel] 原始数据接口返回非 OK：${response.status}, 尝试模拟接口`
      );
      // 尝试模拟接口
      response = await fetch(simulationSCADAUrl);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    }
    const data = await response.json();
    const transformedData = transformBackendData(data, deviceIds);
    return transformedData;
  } catch (error) {
    console.error("[SCADADataPanel] 从后端获取数据失败:", error);
    throw error;
  }
};

/**
 * 转换后端数据格式
 * 根据实际后端返回的数据结构进行调整
 */
const transformBackendData = (
  backendData: any,
  deviceIds: string[]
): TimeSeriesPoint[] => {
  // 处理后端返回的对象格式: { deviceId: [{time: "...", value: ...}] }
  if (backendData && !Array.isArray(backendData)) {
    // 检查是否是设备ID为键的对象格式
    const hasDeviceKeys = deviceIds.some((id) => id in backendData);

    if (hasDeviceKeys) {
      // 获取所有时间点的集合
      const timeMap = new Map<string, Record<string, number | null>>();

      deviceIds.forEach((deviceId) => {
        const deviceData = backendData[deviceId];
        if (Array.isArray(deviceData)) {
          deviceData.forEach((item: any) => {
            const timestamp = item.time || item.timestamp || item._time;
            if (timestamp) {
              if (!timeMap.has(timestamp)) {
                timeMap.set(timestamp, {});
              }
              const values = timeMap.get(timestamp)!;
              values[deviceId] =
                typeof item.value === "number" ? item.value : null;
            }
          });
        }
      });

      // 转换为 TimeSeriesPoint 数组并按时间排序
      const result = Array.from(timeMap.entries()).map(
        ([timestamp, values]) => ({
          timestamp,
          values,
        })
      );

      result.sort(
        (a, b) =>
          new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
      );

      return result;
    }
  }
  // 默认返回空数组
  console.warn("[SCADADataPanel] 未知的后端数据格式:", backendData);
  return [];
};

const defaultFetcher = fetchFromBackend;

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
) => {
  return points.map((point) => {
    const entry: Record<string, any> = {
      time: dayjs(point.timestamp).toDate(),
      label: formatTimestamp(point.timestamp),
    };

    deviceIds.forEach((id) => {
      const value = point.values[id];
      entry[id] =
        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 HistoryDataPanel: React.FC<HistoryDataPanelProps> = ({
  devices = [],
  starttime,
  endtime,
  schemeName,
  fetchTimeSeriesData = defaultFetcher,
  visible = true,
  defaultTab = "chart",
  fractionDigits = 2,
}) => {
  // 从 devices 中提取 id 列表用于渲染与查询
  const deviceIds = devices?.map((d) => d.id) ?? [];

  // 清洗功能已移除，直接使用传入的 fetcher
  const customFetcher = fetchTimeSeriesData;

  const [from, setFrom] = useState<Dayjs>(() =>
    starttime ? dayjs(starttime) : dayjs().subtract(1, "day")
  );
  const [to, setTo] = useState<Dayjs>(() =>
    endtime ? dayjs(endtime) : dayjs()
  );
  const [activeTab, setActiveTab] = useState<PanelTab>(defaultTab);
  const [timeSeries, setTimeSeries] = useState<TimeSeriesPoint[]>([]);
  const [loadingState, setLoadingState] = useState<LoadingState>("idle");
  const [error, setError] = useState<string | null>(null);
  const [isExpanded, setIsExpanded] = useState<boolean>(true);
  const [deviceLabels, setDeviceLabels] = useState<Record<string, string>>({});
  // 清洗相关状态移除

  // 滑块状态：用于图表缩放
  const [zoomRange, setZoomRange] = useState<[number, number]>([0, 100]);

  // 获取 SCADA 设备信息，生成 deviceLabels
  useEffect(() => {
    const fetchDeviceLabels = async () => {
      try {
        const url = `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:geo_scada&outputFormat=application/json`;
        const response = await fetch(url);
        if (!response.ok) return;

        const json = await response.json();
        const features = new GeoJSON().readFeatures(json);

        const labels = features.reduce<Record<string, string>>(
          (acc, feature) => {
            const id = feature.get("id") || feature.getId();
            const name = feature.get("name") || id;
            acc[id] = name;
            return acc;
          },
          {}
        );

        setDeviceLabels(labels);
      } catch (error) {
        console.error("[SCADADataPanel] 获取设备标签失败:", error);
      }
    };

    fetchDeviceLabels();
  }, []);

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

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

  const hasDevices = deviceIds.length > 0;
  const hasData = timeSeries.length > 0;

  const dataset = useMemo(
    () => buildDataset(timeSeries, deviceIds, fractionDigits),
    [timeSeries, deviceIds, fractionDigits]
  );

  // 根据滑块范围过滤数据集
  const filteredDataset = useMemo(() => {
    if (dataset.length === 0) return dataset;

    const startIndex = Math.floor((zoomRange[0] / 100) * dataset.length);
    const endIndex = Math.ceil((zoomRange[1] / 100) * dataset.length);

    return dataset.slice(startIndex, endIndex);
  }, [dataset, zoomRange]);

  // 重置滑块范围当数据变化时
  useEffect(() => {
    setZoomRange([0, 100]);
  }, [timeSeries]);

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

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

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

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

    const dynamic = deviceIds.map<GridColDef>((id) => ({
      field: id,
      headerName: deviceLabels?.[id] ?? id,
      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 [...base, ...dynamic];
  }, [deviceIds, deviceLabels, fractionDigits]);

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

  const renderEmpty = () => {
    const message = emptyStateMessages[activeTab];
    return (
      <Box
        sx={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          py: 8,
          color: "text.secondary",
          height: "100%",
        }}
      >
        <ShowChart sx={{ fontSize: 64, mb: 2, opacity: 0.3 }} />
        <Typography variant="h6" gutterBottom sx={{ fontWeight: 500 }}>
          {message.title}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {message.subtitle}
        </Typography>
      </Box>
    );
  };

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

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

    // 获取当前显示范围的时间边界
    const getTimeRangeLabel = () => {
      if (filteredDataset.length === 0) return "";
      const firstTime = filteredDataset[0].time;
      const lastTime = filteredDataset[filteredDataset.length - 1].time;
      if (firstTime instanceof Date && lastTime instanceof Date) {
        return `${dayjs(firstTime).format("MM-DD HH:mm")} ~ ${dayjs(
          lastTime
        ).format("MM-DD HH:mm")}`;
      }
      return "";
    };

    return (
      <Box
        sx={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Box sx={{ flex: 1 }}>
          <LineChart
            dataset={filteredDataset}
            height={480}
            margin={{ left: 70, right: 40, top: 30, bottom: 90 }}
            xAxis={[
              {
                dataKey: "time",
                scaleType: "time",
                valueFormatter: (value) =>
                  value instanceof Date
                    ? dayjs(value).format("MM-DD HH:mm")
                    : String(value),
                tickLabelStyle: {
                  angle: -45,
                  textAnchor: "end",
                  fontSize: 11,
                  fill: "#666",
                },
              },
            ]}
            yAxis={[
              {
                label: "压力/流量值",
                labelStyle: {
                  fontSize: 13,
                  fill: "#333",
                  fontWeight: 500,
                },
                tickLabelStyle: {
                  fontSize: 11,
                  fill: "#666",
                },
              },
            ]}
            series={deviceIds.map((id, index) => ({
              dataKey: id,
              label: deviceLabels?.[id] ?? id,
              showMark: dataset.length < 50,
              curve: "catmullRom",
              color: colors[index % colors.length],
              valueFormatter: (value: number | null) =>
                value !== null ? value.toFixed(fractionDigits) : "--",
              area: false,
              stack: undefined,
            }))}
            grid={{ vertical: true, horizontal: true }}
            sx={{
              "& .MuiLineElement-root": {
                strokeWidth: 2.5,
                strokeLinecap: "round",
                strokeLinejoin: "round",
              },
              "& .MuiMarkElement-root": {
                scale: "0.8",
                strokeWidth: 2,
              },
              "& .MuiChartsAxis-line": {
                stroke: "#e0e0e0",
                strokeWidth: 1,
              },
              "& .MuiChartsAxis-tick": {
                stroke: "#e0e0e0",
                strokeWidth: 1,
              },
              "& .MuiChartsGrid-line": {
                stroke: "#d0d0d0",
                strokeWidth: 0.8,
                strokeDasharray: "4 4",
              },
            }}
            slotProps={{
              legend: {
                direction: "row",
                position: { horizontal: "middle", vertical: "bottom" },
                padding: { bottom: 2, left: 0, right: 0 },
                itemMarkWidth: 16,
                itemMarkHeight: 3,
                markGap: 8,
                itemGap: 16,
                labelStyle: {
                  fontSize: 12,
                  fill: "#333",
                  fontWeight: 500,
                },
              },
              loadingOverlay: {
                style: { backgroundColor: "rgba(255, 255, 255, 0.7)" },
              },
            }}
            tooltip={{
              trigger: "axis",
            }}
          />
        </Box>

        {/* 时间范围滑块 */}
        <Box sx={{ px: 3, pb: 2, pt: 1 }}>
          <Stack direction="row" spacing={2} alignItems="center">
            <Typography
              variant="body2"
              sx={{ minWidth: 60, color: "text.secondary", fontSize: "0.8rem" }}
            >
              时间范围
            </Typography>
            <Slider
              value={zoomRange}
              onChange={(_, newValue) =>
                setZoomRange(newValue as [number, number])
              }
              valueLabelDisplay="auto"
              valueLabelFormat={(value) => {
                const index = Math.floor((value / 100) * dataset.length);
                if (dataset[index] && dataset[index].time instanceof Date) {
                  return dayjs(dataset[index].time).format("MM-DD HH:mm");
                }
                return `${value}%`;
              }}
              marks={[
                {
                  value: 0,
                  label:
                    dataset.length > 0 && dataset[0].time instanceof Date
                      ? dayjs(dataset[0].time).format("MM-DD HH:mm")
                      : "起始",
                },
                {
                  value: 100,
                  label:
                    dataset.length > 0 &&
                    dataset[dataset.length - 1].time instanceof Date
                      ? dayjs(dataset[dataset.length - 1].time).format(
                          "MM-DD HH:mm"
                        )
                      : "结束",
                },
              ]}
              sx={{
                flex: 1,
                "& .MuiSlider-thumb": {
                  width: 16,
                  height: 16,
                },
                "& .MuiSlider-markLabel": {
                  fontSize: "0.7rem",
                  color: "text.secondary",
                },
              }}
            />
            <Button
              size="small"
              variant="outlined"
              onClick={() => setZoomRange([0, 100])}
              sx={{ minWidth: 60, fontSize: "0.75rem" }}
            >
              重置
            </Button>
          </Stack>
          {getTimeRangeLabel() && (
            <Typography
              variant="caption"
              sx={{
                color: "primary.main",
                display: "block",
                textAlign: "center",
                mt: 0.5,
              }}
            >
              当前显示: {getTimeRangeLabel()} (共 {filteredDataset.length}{" "}
              个数据点)
            </Typography>
          )}
        </Box>
      </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}
        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: 1300 }}
        >
          <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}>
                <Tooltip title="收起">
                  <IconButton
                    size="small"
                    onClick={() => setIsExpanded(false)}
                    sx={{ color: "primary.contrastText" }}
                  >
                    <ChevronRight fontSize="small" />
                  </IconButton>
                </Tooltip>
              </Stack>
            </Stack>
          </Box>

          {/* Controls */}
          <Box sx={{ p: 2, backgroundColor: "grey.50" }}>
            <LocalizationProvider
              dateAdapter={AdapterDayjs}
              adapterLocale="zh-cn"
            >
              <Stack spacing={1.5}>
                <Stack direction="row" spacing={1} alignItems="center">
                  <DateTimePicker
                    label="开始时间"
                    value={from}
                    onChange={(value) =>
                      value && dayjs.isDayjs(value) && setFrom(value)
                    }
                    onAccept={(value) => {
                      if (value && dayjs.isDayjs(value) && hasDevices) {
                        handleFetch("date-change");
                      }
                    }}
                    maxDateTime={to}
                    slotProps={{
                      textField: { fullWidth: true, size: "small" },
                    }}
                  />
                  <DateTimePicker
                    label="结束时间"
                    value={to}
                    onChange={(value) =>
                      value && dayjs.isDayjs(value) && setTo(value)
                    }
                    onAccept={(value) => {
                      if (value && dayjs.isDayjs(value) && 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}>
                    <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>
                {/* 清洗功能已移除，数据源选择请通过后端或外部参数控制 */}
              </Stack>
            </LocalizationProvider>

            {!hasDevices && (
              <Typography
                variant="caption"
                color="warning.main"
                sx={{ mt: 1, display: "block" }}
              >
                未选择任何设备，无法获取数据。
              </Typography>
            )}
            {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 HistoryDataPanel;