"use client";

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

import { MapPageSkeletonContent } from "./MapComponentSkeletonLayouts";
import {
  MAP_SKELETON_CONFIGS,
  type MapSkeletonVariant,
} from "./mapComponentSkeletonConfig";

export { MapTimelineSkeleton } from "./MapComponentSkeletonLayouts";

export interface MapPanelSkeletonProps {
  variant: MapSkeletonVariant;
}

/**
 * 地图业务面板的组件级加载占位。
 * 只占据最终面板区域，不替换地图、工具栏或其他已经完成加载的组件。
 */
export function MapPanelSkeleton({ variant }: MapPanelSkeletonProps) {
  const config = MAP_SKELETON_CONFIGS[variant];
  const horizontalPosition =
    config.side === "left"
      ? { left: { xs: 12, md: 16 }, right: "auto" }
      : { right: { xs: 12, md: 16 }, left: "auto" };

  return (
    <Box
      role="status"
      aria-live="polite"
      aria-label={`正在加载${config.title}`}
      data-component-skeleton="map-panel"
      data-testid="map-panel-skeleton"
      data-panel-side={config.side}
      data-panel-width={config.panelWidth}
      sx={{
        position: "absolute",
        top: { xs: 12, md: config.panelTop },
        width: {
          xs: "calc(100% - 24px)",
          sm: `min(${Math.min(config.panelWidth, 640)}px, calc(100% - 32px))`,
          md: config.panelWidth,
        },
        height: {
          xs: "calc(100% - 24px)",
          md: `min(${config.panelMaxHeight}px, calc(100% - ${config.panelTop + 16}px))`,
        },
        zIndex: 1300,
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
        bgcolor: "rgba(255, 255, 255, 0.97)",
        borderRadius: 1.5,
        boxShadow:
          "0 20px 34px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08)",
        pointerEvents: "none",
        ...horizontalPosition,
      }}
    >
      <Box
        data-testid="map-panel-header"
        sx={{
          minHeight: 64,
          display: "flex",
          alignItems: "center",
          gap: 1.25,
          px: 2.5,
          py: 1.5,
          bgcolor: "#257DD4",
          color: "#fff",
        }}
      >
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography
            component="span"
            lang="zh-CN"
            sx={{
              display: "block",
              fontSize: 18,
              fontWeight: 600,
              lineHeight: 1.4,
            }}
          >
            {config.panelTitle}
          </Typography>
        </Box>
        <CircularProgress
          aria-label={`正在加载${config.title}`}
          size={20}
          thickness={4}
          sx={{ color: "rgba(255, 255, 255, 0.90)" }}
        />
      </Box>

      {config.tabLabels.length > 0 && (
        <Box
          data-testid="map-panel-tabs"
          sx={{
            minHeight: 48,
            display: "grid",
            gridTemplateColumns: `repeat(${config.tabLabels.length}, minmax(0, 1fr))`,
            alignItems: "center",
            gap: 1,
            px: 2,
            bgcolor: "#fff",
            boxShadow: "inset 0 -1px 0 rgba(15, 23, 42, 0.08)",
          }}
        >
          {config.tabLabels.map((label, index) => (
            <Box
              key={label}
              data-testid="map-panel-tab-label"
              sx={{ display: "grid", justifyItems: "center", gap: 0.5 }}
            >
              <Typography
                component="span"
                lang="zh-CN"
                sx={{
                  fontSize: 14,
                  fontWeight: 500,
                  lineHeight: 1.5,
                  color: index === 0 ? "#257DD4" : "text.secondary",
                }}
              >
                {label}
              </Typography>
              {index === 0 && (
                <Box
                  sx={{
                    width: "78%",
                    height: 2,
                    bgcolor: "rgba(37, 125, 212, 0.34)",
                    borderRadius: 999,
                  }}
                />
              )}
            </Box>
          ))}
        </Box>
      )}

      <Box
        sx={{
          flex: 1,
          minHeight: 0,
          overflow: "hidden",
          p: variant === "health-risk-analysis" ? 2 : 2.5,
          bgcolor:
            variant === "network-simulation" ||
            variant === "scada-data-cleaning"
              ? "rgba(248, 250, 252, 0.98)"
              : "#fff",
        }}
      >
        <MapPageSkeletonContent variant={variant} />
      </Box>
    </Box>
  );
}
