import React, { useState, useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';

// --- Data from the PDF ---
const QUESTIONS = [
    {
        q: "What does the Saffron colour in our National Flag stand for?",
        options: ["Peace and Truth", "Growth and Prosperity", "Strength and Courage", "Duty (Dharma)"],
        correct: "Strength and Courage"
    },
    {
        q: "When did India adopt its Constitution (Republic Day)?",
        options: ["15 August 1947", "26 January 1950", "2 October 1869", "26 November 1949"],
        correct: "26 January 1950"
    },
    {
        q: "What does the Ashoka Chakra in the center of the flag represent?",
        options: ["Wealth", "Duty (Dharma)", "Nature", "Victory"],
        correct: "Duty (Dharma)"
    },
    {
        q: "Which colour in the flag stands for Growth and Prosperity?",
        options: ["Saffron", "White", "Green", "Blue"],
        correct: "Green"
    },
    {
        q: "Where are the lions of the National Emblem found in the wild?",
        options: ["Sundarbans", "Jim Corbett", "Gir Forests (Gujarat)", "Kaziranga"],
        correct: "Gir Forests (Gujarat)"
    },
    {
        q: "What is the National Animal of India?",
        options: ["Lion", "Elephant", "Tiger", "Leopard"],
        correct: "Tiger"
    },
    {
        q: "What is the National Bird of India?",
        options: ["Parrot", "Eagle", "Peacock", "Swan"],
        correct: "Peacock"
    },
    {
        q: "Whose image is found on Indian currency notes?",
        options: ["Jawaharlal Nehru", "Subhash Chandra Bose", "Mahatma Gandhi", "Sardar Patel"],
        correct: "Mahatma Gandhi"
    },
    {
        q: "What symbol on the currency note promotes the 'Clean India Mission'?",
        options: ["A Broom", "Spectacles", "A Dustbin", "A Tree"],
        correct: "Spectacles"
    },
    {
        q: "What is the world's tallest statue, located in India?",
        options: ["Statue of Liberty", "Spring Temple Buddha", "Statue of Unity", "Christ the Redeemer"],
        correct: "Statue of Unity"
    },
    {
        q: "What is the 'book of rules' for our country called?",
        options: ["The Law Book", "The Constitution", "The Penal Code", "The Rule Book"],
        correct: "The Constitution"
    },
    {
        q: "The National Emblem represents Strength, Courage, and...?",
        options: ["Confidence", "Peace", "Kindness", "Honesty"],
        correct: "Confidence"
    },
    {
        q: "In which state do men traditionally wear a colorful 'Saafa' or 'Pagri'?",
        options: ["Kerala", "Rajasthan", "Assam", "Goa"],
        correct: "Rajasthan"
    },
    {
        q: "India has the world's largest digital ID system known as...?",
        options: ["PAN Card", "Voter ID", "Aadhaar", "Passport"],
        correct: "Aadhaar"
    },
    {
        q: "When is Independence Day celebrated in India?",
        options: ["26 January", "15 August", "2 October", "14 November"],
        correct: "15 August"
    }
];

// --- Components ---

const Modal = ({ isOpen, question, onClose, onAnswer }) => {
    if (!isOpen || !question) return null;

    return (
        <div className="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
            <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 border-4 border-orange-500 animate-bounce-short">
                <h3 className="text-xl font-bold mb-4 text-orange-700">Quiz Time!</h3>
                <p className="text-lg mb-6 font-medium text-gray-700">{question.q}</p>
                <div className="grid gap-3">
                    {question.options.map((opt, idx) => (
                        <button
                            key={idx}
                            onClick={() => onAnswer(opt)}
                            className="p-3 text-left bg-orange-50 hover:bg-orange-200 border border-orange-200 rounded-lg transition-colors font-medium text-slate-700"
                        >
                            {opt}
                        </button>
                    ))}
                </div>
                <button 
                    onClick={onClose}
                    className="mt-4 text-sm text-gray-500 hover:text-gray-700 underline w-full text-center"
                >
                    Cancel (Forfeit Turn)
                </button>
            </div>
        </div>
    );
};

export default function App() {
    const [board, setBoard] = useState(Array(9).fill(null));
    const [isXNext, setIsXNext] = useState(true);
    const [gameMode, setGameMode] = useState('single'); // 'single' or 'multi'
    const [winner, setWinner] = useState(null);
    const [winningLine, setWinningLine] = useState([]);
    const [activeQuestion, setActiveQuestion] = useState(null);
    const [pendingIndex, setPendingIndex] = useState(null);
    const [toast, setToast] = useState(null);
    const containerRef = useRef(null);

    useEffect(() => {
        checkWinner(board);
    }, [board]);

    useEffect(() => {
        if (gameMode === 'single' && !isXNext && !winner) {
            // Computer's turn
            const timer = setTimeout(() => {
                makeComputerMove();
            }, 1000);
            return () => clearTimeout(timer);
        }
    }, [isXNext, gameMode, winner]);

    const checkWinner = (currentBoard) => {
        const lines = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // Cols
            [0, 4, 8], [2, 4, 6]             // Diagonals
        ];

        for (let i = 0; i < lines.length; i++) {
            const [a, b, c] = lines[i];
            if (currentBoard[a] && currentBoard[a] === currentBoard[b] && currentBoard[a] === currentBoard[c]) {
                setWinner(currentBoard[a]);
                setWinningLine(lines[i]);
                return currentBoard[a];
            }
        }
        
        if (!currentBoard.includes(null)) {
            setWinner('draw');
            return 'draw';
        }
        return null;
    };

    const getRandomQuestion = () => {
        const randomIndex = Math.floor(Math.random() * QUESTIONS.length);
        return QUESTIONS[randomIndex];
    };

    const handleCellClick = (index) => {
        if (board[index] || winner || (gameMode === 'single' && !isXNext)) return;

        // Set pending move and open question modal
        setPendingIndex(index);
        setActiveQuestion(getRandomQuestion());
    };

    const handleAnswer = (answer) => {
        if (answer === activeQuestion.correct) {
            // Correct Answer
            const newBoard = [...board];
            newBoard[pendingIndex] = isXNext ? 'X' : 'O';
            setBoard(newBoard);
            setIsXNext(!isXNext);
            setToast({ msg: "Correct! Good Job!", type: "success" });
        } else {
            // Incorrect Answer
            setIsXNext(!isXNext); // Turn passes
            setToast({ msg: "Incorrect! Turn passed.", type: "error" });
        }
        setActiveQuestion(null);
        setPendingIndex(null);
        
        // Clear toast after 2s
        setTimeout(() => setToast(null), 2000);
    };

    const makeComputerMove = () => {
        // Simple AI: 1. Win, 2. Block, 3. Random
        const emptyIndices = board.map((val, idx) => val === null ? idx : null).filter(val => val !== null);
        
        if (emptyIndices.length === 0) return;

        let moveIndex = -1;

        // Helper to check if a move results in a win for 'player'
        const checkPotentialWin = (player) => {
            const lines = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];
            for (let line of lines) {
                const [a, b, c] = line;
                const cells = [board[a], board[b], board[c]];
                if (cells.filter(c => c === player).length === 2 && cells.includes(null)) {
                    if (board[a] === null) return a;
                    if (board[b] === null) return b;
                    if (board[c] === null) return c;
                }
            }
            return -1;
        };

        // 1. Try to win
        moveIndex = checkPotentialWin('O');
        
        // 2. Block X
        if (moveIndex === -1) {
            moveIndex = checkPotentialWin('X');
        }

        // 3. Random
        if (moveIndex === -1) {
            moveIndex = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];
        }

        const newBoard = [...board];
        newBoard[moveIndex] = 'O';
        setBoard(newBoard);
        setIsXNext(true);
    };

    const resetGame = () => {
        setBoard(Array(9).fill(null));
        setIsXNext(true);
        setWinner(null);
        setWinningLine([]);
        setToast(null);
    };

    // Confetti Effect for Winner
    useEffect(() => {
        if (winner && winner !== 'draw' && containerRef.current) {
            const colors = ['#FF9933', '#FFFFFF', '#138808', '#000080']; // Saffron, White, Green, Blue
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + '%'; // Relative to container
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.animationDuration = Math.random() * 3 + 2 + 's';
                containerRef.current.appendChild(confetti);
                
                // Cleanup individual confetti
                setTimeout(() => {
                    if (confetti && confetti.parentNode) confetti.remove();
                }, 5000);
            }
        }
    }, [winner]);

    return (
        <div ref={containerRef} className="min-h-screen flex flex-col items-center justify-center p-4 relative overflow-hidden bg-gradient-to-b from-orange-100 via-white to-green-100 font-sans text-slate-800">
            <style>{`
                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');
                .font-sans { font-family: 'Poppins', sans-serif; }
                .confetti {
                    position: absolute;
                    top: 0;
                    width: 10px;
                    height: 10px;
                    background-color: #f00;
                    animation: fall linear forwards;
                    z-index: 50;
                }
                @keyframes fall {
                    to { transform: translateY(100vh) rotate(720deg); }
                }
                .animate-bounce-short {
                    animation: bounce 0.5s infinite;
                }
                @keyframes bounce {
                    0%, 100% { transform: translateY(-5%); }
                    50% { transform: translateY(0); }
                }
                .animate-fade-in {
                    animation: fadeIn 0.3s ease-out;
                }
                @keyframes fadeIn {
                    from { opacity: 0; transform: scale(0.9); }
                    to { opacity: 1; transform: scale(1); }
                }
            `}</style>
            
            {/* Header */}
            <header className="mb-8 text-center z-10">
                <div className="flex items-center justify-center gap-2 mb-2">
                     <span className="text-4xl">🇮🇳</span>
                     <h1 className="text-3xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 via-blue-600 to-green-600 drop-shadow-sm">
                        Vibrant India
                    </h1>
                     <span className="text-4xl">🇮🇳</span>
                </div>
                <p className="text-gray-600 font-medium">Republic Day Edition • Tic-Tac-Toe</p>
            </header>

            {/* Mode Selection */}
            <div className="flex bg-white p-1 rounded-xl shadow-md mb-6 z-10 border border-gray-200">
                <button 
                    className={`px-6 py-2 rounded-lg font-bold transition-all ${gameMode === 'single' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
                    onClick={() => { setGameMode('single'); resetGame(); }}
                >
                    1 Player
                </button>
                <button 
                    className={`px-6 py-2 rounded-lg font-bold transition-all ${gameMode === 'multi' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
                    onClick={() => { setGameMode('multi'); resetGame(); }}
                >
                    2 Players
                </button>
            </div>

            {/* Turn Indicator */}
            {!winner && (
                <div className="mb-6 px-6 py-2 bg-white rounded-full shadow-lg border-2 border-blue-100 flex items-center gap-3 z-10">
                    <span className="text-gray-500 text-sm font-semibold uppercase tracking-wider">Turn:</span>
                    <div className={`flex items-center gap-2 font-bold text-xl ${isXNext ? 'text-orange-500' : 'text-green-600'}`}>
                        {isXNext ? 'Player X' : (gameMode === 'single' ? 'Computer (O)' : 'Player O')}
                        <span className={`w-3 h-3 rounded-full ${isXNext ? 'bg-orange-500' : 'bg-green-600'} animate-pulse`}></span>
                    </div>
                </div>
            )}

            {/* Toast Notification */}
            {toast && (
                <div className={`fixed top-4 left-1/2 transform -translate-x-1/2 px-6 py-3 rounded-lg shadow-xl text-white font-bold z-50 transition-all ${toast.type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
                    {toast.msg}
                </div>
            )}

            {/* Board */}
            <div className="bg-white p-4 rounded-2xl shadow-2xl border-4 border-blue-900/10 z-10 relative">
                <div className="grid grid-cols-3 gap-3">
                    {board.map((cell, idx) => {
                        const isWinningCell = winningLine.includes(idx);
                        return (
                            <button
                                key={idx}
                                onClick={() => handleCellClick(idx)}
                                disabled={!!cell || !!winner || (gameMode === 'single' && !isXNext)}
                                className={`
                                    w-20 h-20 md:w-24 md:h-24 rounded-xl text-4xl md:text-5xl font-black flex items-center justify-center transition-all duration-300
                                    ${!cell && !winner ? 'hover:bg-blue-50 active:scale-95' : ''}
                                    ${isWinningCell ? 'bg-yellow-200 scale-105 shadow-inner' : 'bg-slate-50'}
                                    ${cell === 'X' ? 'text-orange-500' : 'text-green-600'}
                                `}
                            >
                                {cell}
                            </button>
                        );
                    })}
                </div>
                
                {/* Winner Overlay */}
                {winner && (
                    <div className="absolute inset-0 bg-white/90 backdrop-blur-sm rounded-2xl flex flex-col items-center justify-center animate-fade-in z-20">
                        <h2 className="text-4xl font-black mb-2 text-blue-800">
                            {winner === 'draw' ? "It's a Draw!" : `${winner === 'X' ? 'Player X' : (gameMode === 'single' ? 'Computer' : 'Player O')} Wins!`}
                        </h2>
                        <p className="text-gray-500 mb-6 font-medium">
                            {winner === 'X' ? "Great knowledge of India!" : winner === 'draw' ? "Well played both!" : "Better luck next time!"}
                        </p>
                        <button 
                            onClick={resetGame}
                            className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full font-bold shadow-lg transform transition hover:scale-105 active:scale-95"
                        >
                            Play Again
                        </button>
                    </div>
                )}
            </div>

            {/* Footer Fact */}
            <div className="mt-8 text-center text-xs text-gray-400 z-10 max-w-md px-4">
                Did you know? The Constitution of India is the longest written constitution in the world!
            </div>

            {/* Question Modal */}
            <Modal 
                isOpen={!!activeQuestion} 
                question={activeQuestion} 
                onClose={() => { setActiveQuestion(null); setPendingIndex(null); setIsXNext(!isXNext); }}
                onAnswer={handleAnswer} 
            />

        </div>
    );
}