import Logo from '../../assets/chowman-bg-logo.avif';
import Feather from '../../assets/feather.avif';
import { useQuizFlow, useQuiz } from '@/features/quiz/hooks';
import { QuizRouteGuard } from '@/features/quiz/components';
import { Spinner } from '@/components/ui/spinner';
import { ArrowRight } from 'lucide-react';
import { useEffect, useLayoutEffect, useRef } from 'react';
import confetti from 'canvas-confetti';
import Congratulating from '../../assets/congratulating.avif';

const SlideUpImage = ({
    src,
    delay = 200,
}: {
    src: string;
    delay?: number;
}) => {
    const ref = useRef<HTMLImageElement>(null);

    useLayoutEffect(() => {
        const el = ref.current;
        if (!el) return;
        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
            return;

        const animation = el.animate(
            [{ transform: 'translateY(100%)' }, { transform: 'translateY(0)' }],
            {
                duration: 900,
                delay,
                easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
                fill: 'backwards',
            },
        );

        return () => animation.cancel();
    }, [delay]);

    return (
        <div className="absolute inset-0 flex items-end justify-center">
            <img
                ref={ref}
                src={src}
                alt=""
                className="pointer-events-none block h-full max-h-48 w-auto max-w-full object-contain select-none"
            />
        </div>
    );
};

const Score = () => {
    const { session, isSubmitting } = useQuiz();
    const { unlockOffer } = useQuizFlow();

    const score = session?.score ?? 0;
    const bandMessage = session?.band_message ?? 'Well played!';

    const handleUnlock = async () => {
        try {
            await unlockOffer();
        } catch (err) {
            // Error is handled by useQuizFlow
        }
    };

    useEffect(() => {
        // Effects run after paint, so confetti starts only after a real score
        // has rendered on screen—not while the final session is still loading.
        if (session?.score === null || session?.score === undefined) return;

        const timer = setTimeout(() => {
            confetti({
                particleCount: 35,
                angle: 60,
                spread: 55,
                startVelocity: 38,
                gravity: 0.9,
                scalar: 1.2,
                origin: {
                    x: 0.25,
                    y: 0.52,
                },
                colors: [
                    '#B8860B', // dark gold
                    '#C9972B', // antique gold
                    '#D4A24E', // Chowman gold
                    '#E7C27A', // light gold
                    '#F0D28E', // champagne gold
                    '#FFD98A', // bright gold
                ],
            });

            confetti({
                particleCount: 35,
                angle: 120,
                spread: 55,
                startVelocity: 38,
                gravity: 0.9,
                scalar: 1.2,
                origin: {
                    x: 0.75,
                    y: 0.52,
                },
                colors: ['#D4A24E', '#E7C27A', '#FFF8EA'],
            });
        }, 150);

        return () => clearTimeout(timer);
    }, [session?.score]);

    if (!session) {
        return (
            <main className="min-h-[100dvh] px-4 py-8 sm:px-8 lg:px-12">
                <div className="mx-auto flex min-h-[calc(100dvh-64px)] w-full max-w-full flex-col items-center justify-center">
                    <Spinner
                        size="lg"
                        className="text-[#D4A24E]"
                    />
                </div>
            </main>
        );
    }

    return (
        <QuizRouteGuard allowedStates={['completed', 'unlocked']}>
            <main className="flex min-h-[100dvh] flex-col overflow-x-hidden px-4 py-[clamp(12px,2.5dvh,32px)] sm:px-8 lg:px-12">
                <div className="mx-auto flex w-full max-w-full flex-1 flex-col items-center">
                    {/* Logo */}
                    <div className="flex shrink-0 justify-center">
                        <img
                            src={Logo}
                            alt="Chowman Logo"
                            className="h-[clamp(28px,5dvh,48px)] w-auto"
                        />
                    </div>

                    {/* Score Heading */}
                    <div className="mt-[clamp(12px,4dvh,80px)] w-full shrink-0">
                        <div className="flex items-center justify-center gap-5 sm:gap-7">
                            <span className="h-px w-16 bg-[#D4A24E] sm:w-28" />
                            <span className="font-montserrat text-sm font-bold tracking-[0.12em] text-[#D4A24E] sm:text-[18px]">
                                YOUR SCORE
                            </span>
                            <span className="h-px w-16 bg-[#D4A24E] sm:w-28" />
                        </div>
                    </div>

                    {/* Score / Feather */}
                    <div className="relative mt-[clamp(10px,3dvh,48px)] h-[clamp(130px,26dvh,340px)] max-w-full shrink-0">
                        <img
                            src={Feather}
                            alt=""
                            className="block h-full w-auto max-w-full object-contain"
                        />

                        <div className="absolute inset-0 flex items-center justify-center">
                            <div className="flex flex-col items-center">
                                <span className="font-amethyst text-[clamp(44px,10dvh,108px)] leading-none text-[#FFF8EA]">
                                    {score}
                                </span>
                                <span className="mt-1 font-montserrat text-[clamp(0.7rem,1.8dvh,1.3rem)] font-bold text-[#D4A24E]">
                                    OUT OF 10
                                </span>
                            </div>
                        </div>
                    </div>

                    {/* Score Message */}
                    <div className="mt-[clamp(8px,2.5dvh,40px)] shrink-0 px-4 text-center">
                        <h1 className="font-amethyst text-[clamp(1.875rem,6dvh,4.5rem)] leading-none bg-gradient-to-b from-[#E7C27A] to-[#CEA052] bg-clip-text text-transparent">
                            <span className="tracking-wide uppercase">{bandMessage}</span>
                        </h1>

                        <p className="mx-auto mt-[clamp(8px,2dvh,32px)] max-w-[650px] font-montserrat text-[clamp(0.8125rem,2dvh,1.4375rem)] leading-[1.4] text-[#C5A98B]">
                            Your knowledge of Sharodiya traditions&nbsp;
                            <br className="hidden sm:block" />
                            shines bright. Keep the festive spirit&nbsp;
                            <br className="hidden sm:block" />
                            going.
                        </p>
                    </div>

                    {/* Flexible image area: takes ALL leftover space */}
                    <div className="relative mt-2 min-h-0 w-full max-w-[700px] flex-1 overflow-hidden">
                        <SlideUpImage src={Congratulating} />
                    </div>

                    {/* Button */}
                    <div className="relative z-10 w-full max-w-[700px] shrink-0">
                        <button
                            onClick={handleUnlock}
                            disabled={isSubmitting}
                            className={`flex h-[clamp(44px,7dvh,84px)] w-full items-center justify-center gap-2 rounded-xl border border-[#F0D28E] bg-gradient-to-b from-[#E7C27A] to-[#CEA052] font-montserrat text-sm font-bold text-[#230505] transition-transform active:scale-[0.99] sm:text-[22px] lg:text-[27px] ${
                                isSubmitting
                                    ? 'cursor-not-allowed opacity-50'
                                    : 'opacity-100'
                            }`}
                        >
                            {isSubmitting ? 'Unlocking...' : 'Unlock My Reward'}
                            {!isSubmitting && (
                                <ArrowRight className="h-5 w-5" />
                            )}
                        </button>
                    </div>
                </div>
            </main>
        </QuizRouteGuard>
    );
};

export default Score;