import {
	AbsoluteFill,
	Img,
	interpolate,
	spring,
	useCurrentFrame,
	useVideoConfig,
} from 'remotion';

// Clay Devlin style - bold, vibrant, expressive with smooth motion
export const ClayDevlinGratitude = ({title, message}) => {
	const frame = useCurrentFrame();
	const {fps, width, height} = useVideoConfig();

	// Spring animation for smooth entrance
	const entrance = spring({
		frame,
		fps,
		config: {damping: 12, stiffness: 80},
	});

	// Opacity animation
	const opacity = interpolate(frame, [0, 30], [0, 1], {extrapolateRight: 'clamp'});

	// Scale animation for title
	const titleScale = spring({
		frame: frame - 20,
		fps,
		config: {damping: 15, stiffness: 100},
	});

	// Message slide in
	const messageY = interpolate(
		frame,
		[60, 120],
		[height * 0.6, height * 0.5],
		{extrapolateRight: 'clamp'}
	);

	// Background gradient animation
	const gradientRotation = interpolate(frame, [0, 360], [0, 360], {
		extrapolateRight: 'clamp',
	});

	// Particle sparkle effect
	const sparkleCount = 20;
	const sparkles = Array.from({length: sparkleCount}, (_, i) => {
		const sparkleX = interpolate(frame, [0, 360], [i * (width / sparkleCount), (i + 1) * (width / sparkleCount)], {
			extrapolateRight: 'clamp',
		});
		const sparkleY = Math.sin(frame / 20 + i) * 100 + height / 2;
		const sparkleScale = spring({
			frame: frame - i * 15,
			fps,
			config: {damping: 10, stiffness: 120},
		});

		return (
			<div
				key={i}
				style={{
					position: 'absolute',
					left: sparkleX,
					top: sparkleY,
					width: 8,
					height: 8,
					borderRadius: '50%',
					backgroundColor: `hsl(${(i * 18) % 360}, 80%, 70%)`,
					transform: `scale(${Math.max(0, sparkleScale * 1.5)})`,
					opacity: interpolate(frame, [i * 15, i * 15 + 20, i * 15 + 40], [0, 1, 0], {
						extrapolateRight: 'clamp',
					}),
					filter: 'blur(1px)',
				}}
			/>
		);
	});

	// Decorative circles
	const circles = [
		{cx: width * 0.2, cy: height * 0.3, r: 150, color: '#FF6B6B', delay: 0},
		{cx: width * 0.8, cy: height * 0.7, r: 200, color: '#4ECDC4', delay: 30},
		{cx: width * 0.5, cy: height * 0.2, r: 100, color: '#FFE66D', delay: 60},
		{cx: width * 0.1, cy: height * 0.8, r: 120, color: '#95E1D3', delay: 90},
	];

	const circleElements = circles.map((circle, i) => {
		const scale = spring({
			frame: frame - circle.delay,
			fps,
			config: {damping: 15, stiffness: 80},
		});
		const rotation = (frame * 0.5 + i * 45) % 360;

		return (
			<div
				key={i}
				style={{
					position: 'absolute',
					left: circle.cx,
					top: circle.cy,
					width: circle.r,
					height: circle.r,
					borderRadius: '50%',
					backgroundColor: circle.color,
					transform: `translate(-50%, -50%) scale(${scale}) rotate(${rotation}deg)`,
					opacity: interpolate(frame, [circle.delay, circle.delay + 30], [0, 0.15], {
						extrapolateRight: 'clamp',
					}),
					filter: 'blur(40px)',
				}}
			/>
		);
	});

	return (
		<AbsoluteFill
			style={{
				background: `linear-gradient(${gradientRotation}deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)`,
				fontFamily: 'Arial, sans-serif',
				overflow: 'hidden',
			}}
		>
			{/* Background decoration */}
			{circleElements}
			{sparkles}

			{/* Main content */}
			<AbsoluteFill
				style={{
					display: 'flex',
					flexDirection: 'column',
					alignItems: 'center',
					justifyContent: 'center',
					padding: 80,
					opacity,
				}}
			>
				{/* Title */}
				<h1
					style={{
						fontSize: 72,
						fontWeight: 900,
						textAlign: 'center',
						color: '#ffffff',
						textShadow: '0 4px 20px rgba(255, 107, 107, 0.5)',
						marginBottom: 40,
						transform: `scale(${titleScale})`,
						letterSpacing: '2px',
						background: 'linear-gradient(135deg, #FF6B6B, #FFE66D, #4ECDC4)',
						WebkitBackgroundClip: 'text',
						WebkitTextFillColor: 'transparent',
						backgroundClip: 'text',
					}}
				>
					{title}
				</h1>

				{/* Subtitle */}
				<p
					style={{
						fontSize: 36,
						fontWeight: 600,
						textAlign: 'center',
						color: '#ffffff',
						opacity: interpolate(frame, [40, 80], [0, 1], {extrapolateRight: 'clamp'}),
						maxWidth: 1200,
						lineHeight: 1.6,
						textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)',
					}}
				>
					{message}
				</p>

				{/* Decorative line */}
				<div
					style={{
						marginTop: 40,
						width: interpolate(frame, [80, 150], [0, 300], {extrapolateRight: 'clamp'}),
						height: 4,
						background: 'linear-gradient(90deg, #FF6B6B, #FFE66D, #4ECDC4, #95E1D3)',
						borderRadius: 2,
						opacity: interpolate(frame, [80, 100], [0, 1], {extrapolateRight: 'clamp'}),
					}}
				/>

				{/* Thank you text */}
				<p
					style={{
						fontSize: 24,
						fontWeight: 700,
						color: '#FF6B6B',
						marginTop: 30,
						opacity: interpolate(frame, [120, 160], [0, 1], {extrapolateRight: 'clamp'}),
						textShadow: '0 2px 10px rgba(255, 107, 107, 0.5)',
					}}
				>
					✨ So grateful to meet you! ✨
				</p>
			</AbsoluteFill>
		</AbsoluteFill>
	);
};
