/**
 * 首页骨架屏组件
 * 匹配首页深色科技风格，减少白屏感知时间
 *
 * @module views/Home/components/HomePageSkeleton
 */

import React from 'react';
import {
  Box,
  Container,
  SimpleGrid,
  Skeleton,
  SkeletonText,
  VStack,
} from '@chakra-ui/react';

// ============================================================
// 类型定义
// ============================================================

interface HomePageSkeletonProps {
  /** 骨架屏速度（秒） */
  speed?: number;
}

// ============================================================
// 单个卡片骨架 - 深色风格
// ============================================================

const FeatureCardSkeleton: React.FC<{ isFeatured?: boolean; speed?: number }> = ({
  isFeatured = false,
  speed = 0.8,
}) => {
  return (
    <Box
      bg="rgba(255, 255, 255, 0.03)"
      borderRadius="2xl"
      borderWidth="1px"
      borderColor="whiteAlpha.100"
      p={{ base: 5, md: isFeatured ? 8 : 6 }}
      h={isFeatured ? { base: '280px', md: '320px' } : { base: '200px', md: '240px' }}
      backdropFilter="blur(10px)"
    >
      <VStack align="start" spacing={4} h="full">
        {/* 图标骨架 */}
        <Skeleton
          height={isFeatured ? '56px' : '44px'}
          width={isFeatured ? '56px' : '44px'}
          borderRadius="xl"
          startColor="whiteAlpha.100"
          endColor="whiteAlpha.200"
          speed={speed}
        />

        {/* 标题骨架 */}
        <Skeleton
          height="24px"
          width="60%"
          borderRadius="md"
          startColor="whiteAlpha.100"
          endColor="whiteAlpha.200"
          speed={speed}
        />

        {/* 描述骨架 */}
        <SkeletonText
          mt="2"
          noOfLines={isFeatured ? 3 : 2}
          spacing="3"
          skeletonHeight="3"
          width="90%"
          startColor="whiteAlpha.50"
          endColor="whiteAlpha.100"
          speed={speed}
        />
      </VStack>
    </Box>
  );
};

// ============================================================
// Hero 区域骨架
// ============================================================

const HeroSkeleton: React.FC<{ speed?: number }> = ({ speed = 0.8 }) => {
  return (
    <VStack spacing={{ base: 4, md: 6 }} align="center" py={{ base: 8, md: 12 }}>
      {/* 主标题骨架 */}
      <Skeleton
        height={{ base: '48px', md: '72px' }}
        width={{ base: '280px', md: '400px' }}
        borderRadius="lg"
        startColor="whiteAlpha.100"
        endColor="whiteAlpha.200"
        speed={speed}
      />

      {/* 副标题骨架 */}
      <Skeleton
        height={{ base: '20px', md: '24px' }}
        width={{ base: '200px', md: '300px' }}
        borderRadius="md"
        startColor="whiteAlpha.50"
        endColor="whiteAlpha.100"
        speed={speed}
      />
    </VStack>
  );
};

// ============================================================
// 主骨架组件
// ============================================================

export const HomePageSkeleton: React.FC<HomePageSkeletonProps> = ({
  speed = 0.8,
}) => {
  return (
    <Box
      w="full"
      minH="100vh"
      bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)"
      position="relative"
      overflow="hidden"
    >
      {/* 背景装饰 - 模拟光晕效果 */}
      <Box
        position="absolute"
        top="-20%"
        left="50%"
        transform="translateX(-50%)"
        w="800px"
        h="800px"
        bg="radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%)"
        pointerEvents="none"
      />

      <Container maxW="7xl" position="relative" zIndex={10} px={{ base: 4, md: 6 }}>
        <VStack
          spacing={{ base: 8, md: 12, lg: 16 }}
          align="stretch"
          minH="100vh"
          justify="center"
        >
          {/* Hero 区域骨架 */}
          <HeroSkeleton speed={speed} />

          {/* 功能卡片区域骨架 */}
          <Box pb={{ base: 8, md: 12 }}>
            <VStack spacing={{ base: 6, md: 8 }}>
              {/* 特色功能卡片骨架 */}
              <Box w="100%">
                <FeatureCardSkeleton isFeatured speed={speed} />
              </Box>

              {/* 其他功能卡片骨架 */}
              <SimpleGrid
                columns={{ base: 1, md: 2, lg: 3 }}
                spacing={{ base: 4, md: 5, lg: 6 }}
                w="100%"
              >
                {[1, 2, 3, 4, 5].map((index) => (
                  <FeatureCardSkeleton key={index} speed={speed} />
                ))}
              </SimpleGrid>
            </VStack>
          </Box>
        </VStack>
      </Container>
    </Box>
  );
};

// ============================================================
// 默认导出
// ============================================================

export default HomePageSkeleton;