import { Box, Skeleton, CircularProgress } from "@mui/material";

/**
 * 地图页面骨架屏组件
 * 提供即时视觉反馈,模拟地图界面布局
 */
export function MapSkeleton() {
  return (
    <Box
      sx={{
        width: "100%",
        height: "100%",
        position: "relative",
        bgcolor: "background.default",
        overflow: "hidden",
      }}
    >
      {/* 主地图区域骨架 */}
      <Skeleton
        variant="rectangular"
        animation="wave"
        sx={{
          width: "100%",
          height: "100%",
          bgcolor: "action.hover",
        }}
      />

      {/* 中央加载指示器 */}
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          zIndex: 10,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 2,
        }}
      >
        <CircularProgress size={48} thickness={4} color="primary" />
      </Box>

      {/* 左侧工具栏骨架 (垂直) */}
      <Box
        sx={{
          position: "absolute",
          top: 20,
          left: 20,
          display: "flex",
          flexDirection: "column",
          gap: 1.5,
          zIndex: 5,
        }}
      >
        {[1, 2, 3, 4].map((i) => (
          <Skeleton
            key={i}
            variant="circular"
            width={40}
            height={40}
            animation="wave"
            sx={{ boxShadow: 1 }}
          />
        ))}
      </Box>

      {/* 右侧控制面板骨架 (抽屉式) */}
      <Box
        sx={{
          position: "absolute",
          top: 0,
          right: 0,
          width: { xs: "100%", sm: 360 },
          height: "100%",
          bgcolor: "background.paper",
          borderLeft: 1,
          borderColor: "divider",
          p: 3,
          zIndex: 5,
          display: { xs: "none", md: "flex" },
          flexDirection: "column",
          boxShadow: -2,
        }}
      >
        <Skeleton variant="text" width="60%" height={40} sx={{ mb: 3 }} />
        
        {/* 面板内容区块 */}
        <Box sx={{ flex: 1, overflow: "hidden" }}>
          <Skeleton variant="rectangular" width="100%" height={100} sx={{ mb: 2, borderRadius: 1 }} />
          <Skeleton variant="text" width="40%" height={24} sx={{ mb: 1 }} />
          <Skeleton variant="rectangular" width="100%" height={180} sx={{ mb: 2, borderRadius: 1 }} />
          
          <Box sx={{ mt: 2 }}>
            {[1, 2, 3].map((i) => (
              <Box key={i} sx={{ display: "flex", gap: 2, mb: 2 }}>
                <Skeleton variant="circular" width={36} height={36} />
                <Box sx={{ flex: 1 }}>
                  <Skeleton variant="text" width="80%" />
                  <Skeleton variant="text" width="50%" />
                </Box>
              </Box>
            ))}
          </Box>
        </Box>
      </Box>

      {/* 底部时间轴/控制条骨架 */}
      <Box
        sx={{
          position: "absolute",
          bottom: 30,
          left: "50%",
          transform: "translateX(-50%)",
          width: { xs: "90%", md: "60%" },
          height: 64,
          bgcolor: "background.paper",
          borderRadius: 4,
          boxShadow: 3,
          p: 2,
          display: "flex",
          alignItems: "center",
          gap: 2,
          zIndex: 5,
        }}
      >
        <Skeleton variant="circular" width={32} height={32} />
        <Skeleton variant="rectangular" width="100%" height={8} sx={{ borderRadius: 4 }} />
        <Skeleton variant="text" width={40} />
      </Box>

      {/* 缩放控制骨架 (右下) */}
      <Box
        sx={{
          position: "absolute",
          bottom: 110,
          right: { xs: 20, md: 380 }, // Adjust if drawer is open
          display: "flex",
          flexDirection: "column",
          gap: 1,
          zIndex: 4,
        }}
      >
        <Skeleton variant="rectangular" width={36} height={36} sx={{ borderRadius: 1 }} />
        <Skeleton variant="rectangular" width={36} height={36} sx={{ borderRadius: 1 }} />
      </Box>
    </Box>
  );
}

/**
 * 简化版骨架屏 - 用于非地图页面
 */
export function SimpleSkeleton() {
  return (
    <Box
      sx={{
        width: "100%",
        height: "100%",
        p: 3,
        bgcolor: "background.default",
      }}
    >
      <Skeleton width="40%" height={40} animation="wave" sx={{ mb: 3 }} />
      <Skeleton width="100%" height={60} animation="wave" sx={{ mb: 2 }} />
      <Skeleton width="100%" height={300} animation="wave" sx={{ mb: 2 }} />
      <Box sx={{ display: "flex", gap: 2, mb: 2 }}>
        <Skeleton
          variant="rectangular"
          width="30%"
          height={150}
          animation="wave"
        />
        <Skeleton
          variant="rectangular"
          width="30%"
          height={150}
          animation="wave"
        />
        <Skeleton
          variant="rectangular"
          width="30%"
          height={150}
          animation="wave"
        />
      </Box>
    </Box>
  );
}