import React from 'react';
import styled, { keyframes } from 'styled-components';

// 背景柔和脉冲动画（亮度轻微变化）
const bgPulse = keyframes`
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
`;

// Logo 轻微上下浮动
const float = keyframes`
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
`;

// 扩散圆环动画
const ringPulse = keyframes`
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
`;

// 底部三个圆点缩放动画
const dotPulse = keyframes`
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
`;

const SplashWrapper = styled.div`
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, rgba(232, 245, 233, 0.9), rgba(200, 230, 201, 0.9)),
              radial-gradient(circle at bottom right, rgba(255, 255, 224, 0.8), rgba(240, 255, 240, 0.9));
  animation: ${bgPulse} 6s ease-in-out infinite;
`;

const SplashInner = styled.div`
  position: relative;
  text-align: center;
  padding: 32px 40px 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 18px 45px rgba(129, 199, 132, 0.35),
    0 0 40px rgba(129, 199, 132, 0.25);
  backdrop-filter: blur(12px);
`;

const LogoWrapper = styled.div`
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
  border-radius: 28px;
  background: radial-gradient(circle at 30% 20%, #ffffff, #e8f5e9);
  box-shadow:
    0 10px 26px rgba(67, 160, 71, 0.35),
    0 0 25px rgba(129, 199, 132, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${float} 3s ease-in-out infinite;
  overflow: hidden;
`;

const LogoImage = styled.img`
  width: 76px;
  height: 76px;
  border-radius: 22px;
  object-fit: cover;
`;

const Ring = styled.div`
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(129, 199, 132, 0.7);
  animation: ${ringPulse} 2.6s ease-out infinite;
  animation-delay: ${({ $delay }) => $delay || '0s'};
`;

const Title = styled.h2`
  font-size: 1.5rem;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 6px;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 6px rgba(76, 175, 80, 0.35);
`;

const Subtitle = styled.p`
  font-size: 0.95rem;
  color: #4caf50;
  margin-bottom: 16px;
`;

const Dots = styled.div`
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
`;

const Dot = styled.span`
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #66bb6a;
  animation: ${dotPulse} 1.4s ease-in-out infinite;
  animation-delay: ${({ $delay }) => $delay || '0s'};
`;

const LOGO_SRC = `${process.env.PUBLIC_URL || ''}/assets/icon.png`;

const LoadingSpinner = ({ text = '加载中...' }) => {
  return (
    <SplashWrapper>
      <SplashInner>
        <LogoWrapper>
          <Ring $delay="0s" />
          <Ring $delay="0.5s" />
          <Ring $delay="1s" />
          <LogoImage src={LOGO_SRC} alt="萌芽作品集 Logo" />
        </LogoWrapper>
        <Title>✨ 萌芽作品集 ✨</Title>
        <Subtitle>{text}</Subtitle>
        <Dots>
          <Dot $delay="0s" />
          <Dot $delay="0.15s" />
          <Dot $delay="0.3s" />
        </Dots>
      </SplashInner>
    </SplashWrapper>
  );
};

export default LoadingSpinner;
