import { useState, useEffect, useCallback, useRef } from 'react';
import { Rocket } from 'lucide-react';
import { getWordPressConfig } from '@/api/client';

const SCENARIO_ORDER = ['just-started', 'making-progress', 'well-advanced', 'nearly-done', 'insights-ready'];

/**
 * TimeTravel Component
 *
 * Floating button that triggers an epic transition between dashboard demo scenarios.
 * Animation: soft overlay with blur → Flavio isotipo spins in place then accelerates out → reveals next state.
 *
 * Phases: 0=idle, 1=overlay-in, 2=rolling, 3=overlay-out
 */
const TimeTravel = ({ currentScenario, onTravel }) => {
	const [phase, setPhase] = useState(0);
	const [overlayVisible, setOverlayVisible] = useState(false);
	const targetRef = useRef(null);
	const config = getWordPressConfig();

	const currentIndex = SCENARIO_ORDER.indexOf(currentScenario);
	const nextScenario = SCENARIO_ORDER[currentIndex + 1];
	const isLast = !nextScenario;

	const handleClick = useCallback(() => {
		if (phase !== 0 || isLast) return;
		targetRef.current = nextScenario;
		setPhase(1);
	}, [phase, isLast, nextScenario]);

	useEffect(() => {
		if (phase === 0) return;

		const timers = [];

		if (phase === 1) {
			// Mount overlay at opacity 0, then trigger transition on next frame
			requestAnimationFrame(() => {
				requestAnimationFrame(() => {
					setOverlayVisible(true);
				});
			});
			// Wait for fade-in to complete, then start rolling
			timers.push(setTimeout(() => setPhase(2), 500));
		} else if (phase === 2) {
			// Switch scenario while isotipo is still rolling
			timers.push(
				setTimeout(() => onTravel(targetRef.current), 1000)
			);
			// Then start fade out after roll completes
			timers.push(setTimeout(() => setPhase(3), 1500));
		} else if (phase === 3) {
			// Fade out overlay
			setOverlayVisible(false);
			timers.push(setTimeout(() => setPhase(0), 500));
		}

		return () => timers.forEach(clearTimeout);
	}, [phase, onTravel]);

	// Hide when at last scenario and idle
	if (isLast && phase === 0) return null;

	return (
		<>
			{/* Floating "travel to future" button */}
			{phase === 0 && (
				<button
					type="button"
					onClick={handleClick}
					className="fixed right-6 bottom-6 z-[9998] group cursor-pointer"
					title="Travel to the future"
				>
					<div className="w-14 h-14 rounded-full bg-gradient-to-br from-magenta-500 to-magenta-700 text-white shadow-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
						<Rocket className="w-6 h-6" />
					</div>
				</button>
			)}

			{/* Full-screen animation overlay */}
			{phase > 0 && (
				<div className="fixed inset-0 z-[10000] overflow-hidden">
					{/* Soft backdrop with blur */}
					<div
						className="absolute inset-0 bg-black/50 backdrop-blur-md transition-all duration-500 ease-in-out"
						style={{ opacity: overlayVisible ? 1 : 0 }}
					/>

					{/* Rolling isotipo — spins in place, then accelerates out */}
					{phase === 2 && (
						<div className="absolute inset-0 flex items-center justify-center">
							<img
								src={`${config.pluginUrl}js/public/onboarding.svg`}
								alt=""
								className="w-32 h-32 brightness-0 invert animate-roll-across"
							/>
						</div>
					)}
				</div>
			)}
		</>
	);
};

export default TimeTravel;