import type { CSSProperties } from 'react';
import { styled } from '@mui/material/styles';

import type { SeasonalTemplate } from '../../config/defaultStoreConfig';

function getSeasonParticleCount(season: SeasonalTemplate) {
	if (season.decoration.intensity === 'high') {
		return 28;
	}

	if (season.decoration.intensity === 'medium') {
		return 18;
	}

	return 10;
}

function SeasonalDecorations({ season }: { season?: SeasonalTemplate }) {
	if (!season || season.decoration.type === 'none') {
		return null;
	}

	const particles = Array.from({ length: getSeasonParticleCount(season) }, (_, index) => ({
		id: index,
		left: `${(index * 37) % 100}%`,
		delay: `${(index * 0.45) % 8}s`,
		duration: `${8 + (index % 7)}s`,
		size: `${14 + (index % 4) * 3}px`,
		top: `${(index * 19) % 88}%`
	}));
	const decorationSymbols = {
		snow: '❄',
		summer: '✦',
		spring: '✿',
		autumn: '◆',
		none: ''
	};
	const symbol = decorationSymbols[season.decoration.type];

	return (
		<SeasonLayer
			aria-hidden="true"
			data-decoration={season.decoration.type}
		>
			{particles.map((particle) => (
				<span
					key={particle.id}
					style={
						{
							left: particle.left,
							top: particle.top,
							animationDelay: particle.delay,
							animationDuration: particle.duration,
							fontSize: particle.size
						} as CSSProperties
					}
				>
					{symbol}
				</span>
			))}
		</SeasonLayer>
	);
}

const SeasonLayer = styled('div')({
	position: 'fixed',
	inset: 0,
	zIndex: 3,
	pointerEvents: 'none',
	overflow: 'hidden',
	'& span': {
		position: 'absolute',
		top: -28,
		color: 'rgba(255, 255, 255, 0.92)',
		textShadow: '0 1px 10px rgba(29, 78, 216, 0.3)',
		animationName: 'seasonSnowFall',
		animationTimingFunction: 'linear',
		animationIterationCount: 'infinite'
	},
	'&[data-decoration="summer"] span': {
		color: 'color-mix(in srgb, var(--store-accent) 72%, #ffffff)',
		textShadow: '0 4px 16px rgba(249, 115, 22, 0.24)',
		animationName: 'seasonSummerFloat',
		animationTimingFunction: 'ease-in-out'
	},
	'&[data-decoration="spring"] span': {
		color: 'color-mix(in srgb, var(--store-accent) 68%, #ffffff)',
		textShadow: '0 4px 16px rgba(236, 72, 153, 0.2)',
		animationName: 'seasonSummerFloat',
		animationTimingFunction: 'ease-in-out'
	},
	'&[data-decoration="autumn"] span': {
		color: 'color-mix(in srgb, var(--store-accent) 70%, #ffffff)',
		textShadow: '0 4px 16px rgba(217, 119, 6, 0.22)',
		animationName: 'seasonSummerFloat',
		animationTimingFunction: 'ease-in-out'
	},
	'@keyframes seasonSnowFall': {
		'0%': {
			transform: 'translate3d(0, -40px, 0) rotate(0deg)',
			opacity: 0
		},
		'12%': {
			opacity: 0.9
		},
		'100%': {
			transform: 'translate3d(28px, 110vh, 0) rotate(360deg)',
			opacity: 0
		}
	},
	'@keyframes seasonSummerFloat': {
		'0%, 100%': {
			transform: 'translate3d(0, 0, 0) scale(0.8)',
			opacity: 0.2
		},
		'50%': {
			transform: 'translate3d(18px, -18px, 0) scale(1.08)',
			opacity: 0.75
		}
	},
	'@media (prefers-reduced-motion: reduce)': {
		display: 'none'
	}
});

export default SeasonalDecorations;