// src/views/Company/components/LoadingState.tsx
// 统一的加载状态组件 - 黑金主题

import React, { memo } from "react";
import { Center, VStack, Spinner, Text, Box, Skeleton, SimpleGrid } from "@chakra-ui/react";

// 黑金主题配置
const THEME = {
  gold: "#D4AF37",
  goldLight: "rgba(212, 175, 55, 0.3)",
  bgInset: "rgba(26, 32, 44, 0.6)",
  borderGlass: "rgba(212, 175, 55, 0.2)",
  textSecondary: "gray.400",
  radiusSM: "md",
  radiusMD: "lg",
};

interface LoadingStateProps {
  message?: string;
  height?: string;
  /** 使用骨架屏模式（更好的视觉体验） */
  variant?: "spinner" | "skeleton";
  /** 骨架屏行数 */
  skeletonRows?: number;
}

/**
 * 骨架屏组件（黑金主题）
 */
const SkeletonContent: React.FC<{ rows: number }> = memo(({ rows }) => (
  <VStack align="stretch" spacing={4} w="100%">
    {/* 头部骨架 */}
    <Box display="flex" justifyContent="space-between" alignItems="center">
      <Skeleton
        height="28px"
        width="180px"
        startColor={THEME.bgInset}
        endColor={THEME.borderGlass}
        borderRadius={THEME.radiusSM}
      />
      <Skeleton
        height="24px"
        width="100px"
        startColor={THEME.bgInset}
        endColor={THEME.borderGlass}
        borderRadius={THEME.radiusSM}
      />
    </Box>

    {/* 内容骨架行 */}
    <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
      {Array.from({ length: Math.min(rows, 8) }).map((_, i) => (
        <Skeleton
          key={i}
          height="60px"
          startColor={THEME.bgInset}
          endColor={THEME.borderGlass}
          borderRadius={THEME.radiusMD}
        />
      ))}
    </SimpleGrid>

    {/* 图表区域骨架 */}
    <Skeleton
      height="200px"
      startColor={THEME.bgInset}
      endColor={THEME.borderGlass}
      borderRadius={THEME.radiusMD}
    />
  </VStack>
));

SkeletonContent.displayName = "SkeletonContent";

/**
 * 统一的加载状态组件（黑金主题）
 *
 * 用于所有一级 Tab 的 loading 状态展示
 * @param variant - "spinner"（默认）或 "skeleton"（骨架屏）
 */
const LoadingState: React.FC<LoadingStateProps> = memo(({
  message = "加载中...",
  height = "300px",
  variant = "spinner",
  skeletonRows = 4,
}) => {
  if (variant === "skeleton") {
    return (
      <Box h={height} p={4}>
        <SkeletonContent rows={skeletonRows} />
      </Box>
    );
  }

  return (
    <Center h={height}>
      <VStack spacing={4}>
        <Spinner
          size="xl"
          color={THEME.gold}
          thickness="4px"
          speed="0.65s"
        />
        <Text fontSize="sm" color={THEME.textSecondary}>
          {message}
        </Text>
      </VStack>
    </Center>
  );
});

LoadingState.displayName = "LoadingState";

export default LoadingState;