"use client";

import React, { useState, useRef, useEffect } from "react";

export interface QuestionWheelProps {
    questions: string[];
    soundUrl?: string;
    colors?: string[];
}

const DEFAULT_COLORS = [
    "#3369e8", // Blue
    "#d50f25", // Red
    "#eeb211", // Yellow
    "#009925", // Green
    "#ff6600", // Orange
    "#9933cc", // Purple
    "#00ccff", // Cyan
    "#ff3399", // Pink
];

export function SpinningPickerWheel({ questions, soundUrl, colors = DEFAULT_COLORS }: QuestionWheelProps) {
    const [isSpinning, setIsSpinning] = useState(false);
    const [selectedQuestion, setSelectedQuestion] = useState<string | null>(null);
    const [isWaitingForModal, setIsWaitingForModal] = useState(false);
    const [isClosing, setIsClosing] = useState(false);
    const [isMounted, setIsMounted] = useState(false);
    const [isSoundEnabled, setIsSoundEnabled] = useState(true);
    const wheelRef = useRef<HTMLDivElement>(null);
    const idleRotationRef = useRef(0);
    const audioRef = useRef<HTMLAudioElement | null>(null);
    const animationFrameRef = useRef<number | undefined>(undefined);

    const safeColors = colors.length > 0 ? colors : DEFAULT_COLORS;
    const displayQuestions = questions.slice(0, 24);
    const numSegments = displayQuestions.length;

    if (numSegments === 0) {
        return <div className="text-center p-4 text-gray-500">No questions provided</div>;
    }

    const anglePerSegment = 360 / numSegments;

    useEffect(() => {
        if (soundUrl) {
            audioRef.current = new Audio(soundUrl);
            audioRef.current.loop = false;
        }

        const timer = setTimeout(() => setIsMounted(true), 0);
        return () => clearTimeout(timer);
    }, [soundUrl]);

    useEffect(() => {
        if (!isMounted || isSpinning || selectedQuestion || isWaitingForModal) return;

        const rotateIdle = () => {
            idleRotationRef.current += 0.1;

            if (wheelRef.current) {
                wheelRef.current.style.transform = `rotate(${idleRotationRef.current}deg)`;
            }

            animationFrameRef.current = requestAnimationFrame(rotateIdle);
        };

        animationFrameRef.current = requestAnimationFrame(rotateIdle);

        return () => {
            if (animationFrameRef.current) {
                cancelAnimationFrame(animationFrameRef.current);
            }
        };
    }, [isMounted, isSpinning, selectedQuestion, isWaitingForModal]);

    const spinWheel = () => {
        if (isSpinning || selectedQuestion || isWaitingForModal) return;

        setIsSpinning(true);
        setSelectedQuestion(null);

        if (animationFrameRef.current) {
            cancelAnimationFrame(animationFrameRef.current);
        }

        if (isSoundEnabled && audioRef.current) {
            audioRef.current.currentTime = 0;
            audioRef.current.play().catch(e => console.log("Audio play failed:", e));
        }

        const winnerIndex = Math.floor(Math.random() * numSegments);
        const extraSpins = 5;
        const baseSpin = 360 * extraSpins;

        const segmentCenter = (winnerIndex * anglePerSegment) + (anglePerSegment / 2);
        const currentRotation = idleRotationRef.current;

        const targetAngle = (180 - segmentCenter);
        const normalizedTargetAngle = ((targetAngle % 360) + 360) % 360;

        const currentAngle = currentRotation % 360;
        const normalizedCurrentAngle = ((currentAngle % 360) + 360) % 360;

        let rotationNeeded = normalizedTargetAngle - normalizedCurrentAngle;
        if (rotationNeeded < 0) {
            rotationNeeded += 360;
        }

        const newRotation = currentRotation + rotationNeeded + baseSpin;
        idleRotationRef.current = newRotation;

        if (wheelRef.current) {
            wheelRef.current.style.transition = "transform 2.5s cubic-bezier(0.25, 0.1, 0.25, 1)";
            wheelRef.current.style.transform = `rotate(${newRotation}deg)`;
        }

        setTimeout(() => {
            setIsSpinning(false);

            if (wheelRef.current) {
                wheelRef.current.style.transition = "none";
            }

            if (audioRef.current) {
                audioRef.current.pause();
                audioRef.current.currentTime = 0;
            }

            setIsWaitingForModal(true);

            setTimeout(() => {
                setSelectedQuestion(displayQuestions[winnerIndex]);
                setIsWaitingForModal(false);
            }, 1000);
        }, 2700);
    };

    const closeModal = () => {
        setIsClosing(true);
        setTimeout(() => {
            setSelectedQuestion(null);
            setIsClosing(false);
        }, 300);
    };

    const getSegmentPath = (index: number) => {
        const startAngle = index * anglePerSegment;
        const endAngle = (index + 1) * anglePerSegment;

        const startRad = (Math.PI / 180) * startAngle;
        const endRad = (Math.PI / 180) * endAngle;

        const radius = 200;
        const center = 200;

        const x1 = center + radius * Math.cos(startRad);
        const y1 = center + radius * Math.sin(startRad);
        const x2 = center + radius * Math.cos(endRad);
        const y2 = center + radius * Math.sin(endRad);

        return `M ${center} ${center} L ${x1} ${y1} A ${radius} ${radius} 0 0 1 ${x2} ${y2} Z`;
    };

    return (
        <section className="flex flex-col items-center justify-center py-8" aria-label="Interactive question wheel">
            <div
                className="relative w-[600px] h-[600px] max-w-full max-h-[90vw] cursor-pointer"
                onClick={spinWheel}
                role="img"
                aria-label={isSpinning ? "Wheel is spinning" : "Question wheel, click to spin"}
            >
                <div className="absolute top-1/2 left-[-28px] transform -translate-y-1/2 z-10 w-0 h-0 border-t-[20px] border-t-transparent border-b-[20px] border-b-transparent border-l-[40px] border-l-stone-600" aria-hidden="true"></div>

                <div
                    ref={wheelRef}
                    className="w-full h-full"
                >
                    <svg viewBox="0 0 400 400" className="w-full h-full">
                        {isMounted && displayQuestions.map((q, i) => (
                            <g key={i}>
                                <path
                                    d={getSegmentPath(i)}
                                    fill={safeColors[i % safeColors.length]}
                                    stroke="white"
                                    strokeWidth="2"
                                />
                                <text
                                    x="10"
                                    y="200"
                                    fill="white"
                                    fontSize="12"
                                    fontWeight="bold"
                                    textAnchor="start"
                                    alignmentBaseline="middle"
                                    transform={`rotate(${(i * anglePerSegment) + (anglePerSegment / 2) + 180}, 200, 200)`}
                                >
                                    {q.slice(0, 22) + (q.length > 22 ? "..." : "")}
                                </text>
                            </g>
                        ))}
                    </svg>
                </div>

                <button
                    onClick={(e) => { e.stopPropagation(); spinWheel(); }}
                    disabled={isSpinning}
                    className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-white rounded-full shadow-lg flex items-center justify-center border-4 border-gray-200 z-20 font-bold text-gray-800 hover:bg-gray-50 disabled:opacity-50 text-sm text-center leading-tight p-2 cursor-pointer"
                    aria-label={isSpinning ? "Wheel is spinning, please wait" : "Spin the wheel to select a random question"}
                >
                    {isSpinning ? "..." : "Click to Spin"}
                </button>

                <button
                    onClick={(e) => {
                        e.stopPropagation();
                        setIsSoundEnabled(!isSoundEnabled);
                    }}
                    className="absolute bottom-0 right-0 m-4 p-3 bg-slate-800/80 backdrop-blur-sm rounded-full text-amber-400 hover:bg-slate-700 hover:text-amber-300 transition-all shadow-lg border border-amber-500/30 z-30"
                    aria-label={isSoundEnabled ? "Mute sound" : "Enable sound"}
                >
                    {isSoundEnabled ? (
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                        </svg>
                    ) : (
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
                        </svg>
                    )}
                </button>
            </div>

            {selectedQuestion && (
                <div
                    className={`fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 px-4 transition-opacity duration-300 ${isClosing ? 'opacity-0' : 'opacity-100'}`}
                    onClick={closeModal}
                    role="dialog"
                    aria-modal="true"
                    aria-labelledby="question-modal-title"
                    aria-describedby="question-modal-description"
                >
                    <div
                        className={`bg-gradient-to-br from-slate-900 to-red-950 p-4 sm:p-6 md:p-8 rounded-2xl shadow-[0_0_50px_rgba(251,191,36,0.2)] max-w-lg w-full text-center border border-amber-500/30 ${isClosing ? 'animate-modal-pop-out' : 'animate-modal-pop'}`}
                        onClick={e => e.stopPropagation()}
                    >
                        <h3 className="text-xl sm:text-2xl md:text-3xl font-bold mb-3 sm:mb-4 md:mb-6 bg-gradient-to-r from-yellow-400 via-amber-500 to-yellow-600 bg-clip-text text-transparent drop-shadow-sm" id="question-modal-title">
                            The Question Is:
                        </h3>
                        <p className="text-lg sm:text-xl md:text-2xl text-amber-50 mb-6 sm:mb-8 md:mb-10 font-medium leading-relaxed" id="question-modal-description">
                            {selectedQuestion}
                        </p>
                        <button
                            onClick={closeModal}
                            className="w-full sm:w-auto px-8 py-3 sm:py-3.5 bg-gradient-to-r from-yellow-500 to-amber-600 text-slate-900 rounded-full font-bold text-base sm:text-lg hover:from-yellow-400 hover:to-amber-500 transition-all shadow-lg hover:shadow-amber-500/50 cursor-pointer"
                            aria-label="Close question modal"
                        >
                            Close
                        </button>
                    </div>
                </div>
            )}
        </section>
    );
}