/**
 * 环境光效果组件
 * James Turrell 风格的背景光晕效果
 */

import React, { memo } from 'react';
import { Box, BoxProps } from '@chakra-ui/react';

export interface AmbientGlowProps extends Omit<BoxProps, 'bg'> {
  /** 预设主题 */
  variant?: 'default' | 'gold' | 'blue' | 'purple' | 'warm';
  /** 自定义渐变（覆盖 variant） */
  customGradient?: string;
}

// 预设光效配置
const GLOW_VARIANTS = {
  default: `
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(212, 175, 55, 0.08), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(100, 200, 255, 0.04), transparent 40%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(255, 200, 100, 0.04), transparent 40%)
  `,
  gold: `
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(212, 175, 55, 0.12), transparent 50%),
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(212, 175, 55, 0.06), transparent 40%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(255, 200, 100, 0.05), transparent 40%)
  `,
  blue: `
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(100, 200, 255, 0.1), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(60, 160, 255, 0.06), transparent 40%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(140, 220, 255, 0.05), transparent 40%)
  `,
  purple: `
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(160, 100, 255, 0.1), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(200, 150, 255, 0.05), transparent 40%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(120, 80, 255, 0.05), transparent 40%)
  `,
  warm: `
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(255, 150, 100, 0.1), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(255, 200, 150, 0.05), transparent 40%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(255, 180, 120, 0.05), transparent 40%)
  `,
};

/**
 * 环境光效果组件
 * 创建 James Turrell 风格的微妙背景光晕
 *
 * @example
 * ```tsx
 * <Box position="relative">
 *   <AmbientGlow variant="gold" />
 *   {children}
 * </Box>
 * ```
 */
const AmbientGlow = memo<AmbientGlowProps>(({
  variant = 'default',
  customGradient,
  ...boxProps
}) => {
  const gradient = customGradient || GLOW_VARIANTS[variant];

  return (
    <Box
      position="fixed"
      top={0}
      left={0}
      right={0}
      bottom={0}
      pointerEvents="none"
      zIndex={0}
      bg={gradient}
      {...boxProps}
    />
  );
});

AmbientGlow.displayName = 'AmbientGlow';

export default AmbientGlow;