import React, { useState, useEffect, useRef, useCallback } from 'react';

// Main App component
const App = () => {
    // Game State
    const [stardust, setStardust] = useState(0); // Current stardust
    const [stardustPerClick, setStardustPerClick] = useState(1); // Stardust gained per click
    const [stardustPerSecond, setStardustPerSecond] = useState(0); // Stardust gained passively per second
    const [upgrades, setUpgrades] = useState({
        // Initial upgrade definitions
        'miningLaser': { name: 'Mining Laser', cost: 10, production: 1, type: 'perSecond', level: 0, description: 'Harvests 1 Stardust per second.' },
        'automatedDrill': { name: 'Automated Drill', cost: 100, production: 10, type: 'perSecond', level: 0, description: 'Automates harvesting, 10 Stardust per second.' },
        'planetaryExtractor': { name: 'Planetary Extractor', cost: 1000, production: 100, type: 'perSecond', level: 0, description: 'Extracts Stardust from entire planets, 100 Stardust per second.' },
        'cosmicHarvester': { name: 'Cosmic Harvester', cost: 5000, production: 500, type: 'perSecond', level: 0, description: 'Gathers Stardust across solar systems, 500 Stardust per second.' },
        'clickEnhancer': { name: 'Click Enhancer', cost: 50, production: 1, type: 'perClick', level: 0, description: 'Increases Stardust per click by 1.' },
        'warpDrive': { name: 'Warp Drive', cost: 2000, production: 0, type: 'prestigeMultiplier', level: 0, description: 'Increases Stardust production from all sources by 2x.', multiplier: 2},
    });
    const [prestigeLevel, setPrestigeLevel] = useState(0); // Prestige level
    const [prestigeMultiplier, setPrestigeMultiplier] = useState(1); // Global multiplier from prestige
    const [message, setMessage] = useState(''); // Game messages (e.g., insufficient funds)
    const [showPrestigeModal, setShowPrestigeModal] = useState(false); // State for prestige confirmation modal

    // Ref for click animation
    const clickAnimationRef = useRef(null);

    // Calculate total stardust per second
    const calculateStardustPerSecond = useCallback(() => {
        let totalSPS = 0;
        for (const key in upgrades) {
            if (upgrades[key].type === 'perSecond') {
                totalSPS += upgrades[key].production * upgrades[key].level;
            }
        }
        return totalSPS * prestigeMultiplier; // Apply prestige multiplier
    }, [upgrades, prestigeMultiplier]);

    // Game loop for passive stardust generation
    useEffect(() => {
        const interval = setInterval(() => {
            setStardust(prevStardust => {
                const currentSPS = calculateStardustPerSecond();
                return prevStardust + currentSPS;
            });
        }, 1000); // Every second

        return () => clearInterval(interval);
    }, [calculateStardustPerSecond]);

    // Update stardust per second display when upgrades change
    useEffect(() => {
        setStardustPerSecond(calculateStardustPerSecond());
    }, [upgrades, calculateStardustPerSecond]);

    // Handle a click event
    const handleHarvestClick = () => {
        setStardust(prevStardust => prevStardust + stardustPerClick * prestigeMultiplier); // Apply prestige multiplier to clicks
        // Show click animation
        if (clickAnimationRef.current) {
            clickAnimationRef.current.classList.remove('animate-ping-once'); // Reset animation
            void clickAnimationRef.current.offsetWidth; // Trigger reflow
            clickAnimationRef.current.classList.add('animate-ping-once'); // Re-add animation
        }
    };

    // Handle buying an upgrade
    const handleBuyUpgrade = (upgradeId) => {
        const upgrade = upgrades[upgradeId];
        if (stardust >= upgrade.cost) {
            setStardust(prevStardust => prevStardust - upgrade.cost);
            setUpgrades(prevUpgrades => {
                const newUpgrades = { ...prevUpgrades };
                const newUpgradeLevel = newUpgrades[upgradeId].level + 1;
                newUpgrades[upgradeId].level = newUpgradeLevel;

                // Increase cost for next level (e.g., 1.15x)
                newUpgrades[upgradeId].cost = Math.floor(upgrade.cost * 1.15);

                // Apply special effects for certain upgrade types
                if (newUpgrades[upgradeId].type === 'perClick') {
                    setStardustPerClick(prevSPC => prevSPC + newUpgrades[upgradeId].production);
                }
                if (newUpgrades[upgradeId].type === 'prestigeMultiplier') {
                    setPrestigeMultiplier(prevMultiplier => prevMultiplier * newUpgrades[upgradeId].multiplier);
                }

                return newUpgrades;
            });
            setMessage(`${upgrade.name} purchased!`);
        } else {
            setMessage('Not enough Stardust!');
        }
    };

    // Handle prestige (galaxy reset)
    const handlePrestige = () => {
        setShowPrestigeModal(true);
    };

    const confirmPrestige = () => {
        setPrestigeLevel(prevLevel => prevLevel + 1);
        setPrestigeMultiplier(prevMultiplier => prevMultiplier * 1.5); // Increase global multiplier by 1.5x for next prestige
        setStardust(0); // Reset stardust
        setStardustPerClick(1); // Reset click production
        // Reset all upgrades (except the prestige multiplier itself if desired, or reset everything)
        setUpgrades({
            'miningLaser': { name: 'Mining Laser', cost: 10, production: 1, type: 'perSecond', level: 0, description: 'Harvests 1 Stardust per second.' },
            'automatedDrill': { name: 'Automated Drill', cost: 100, production: 10, type: 'perSecond', level: 0, description: 'Automates harvesting, 10 Stardust per second.' },
            'planetaryExtractor': { name: 'Planetary Extractor', cost: 1000, production: 100, type: 'perSecond', level: 0, description: 'Extracts Stardust from entire planets, 100 Stardust per second.' },
            'cosmicHarvester': { name: 'Cosmic Harvester', cost: 5000, production: 500, type: 'perSecond', level: 0, description: 'Gathers Stardust across solar systems, 500 Stardust per second.' },
            'clickEnhancer': { name: 'Click Enhancer', cost: 50, production: 1, type: 'perClick', level: 0, description: 'Increases Stardust per click by 1.' },
            'warpDrive': { name: 'Warp Drive', cost: 2000, production: 0, type: 'prestigeMultiplier', level: 0, description: 'Increases Stardust production from all sources by 2x.', multiplier: 2},
        });
        setMessage('Galaxy Reset initiated! New cosmic journey begins with increased power!');
        setShowPrestigeModal(false);
    };

    const cancelPrestige = () => {
        setShowPrestigeModal(false);
    };

    // Helper to format numbers (e.g., 1000 -> 1K, 1000000 -> 1M)
    const formatNumber = (num) => {
        if (num >= 1000000000) return (num / 1000000000).toFixed(2) + 'B';
        if (num >= 1000000) return (num / 1000000).toFixed(2) + 'M';
        if (num >= 1000) return (num / 1000).toFixed(2) + 'K';
        return num.toFixed(0);
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-900 to-indigo-900 text-white font-inter flex flex-col items-center justify-center p-4">
            {/* Header */}
            <h1 className="text-5xl md:text-6xl font-extrabold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 animate-pulse">
                Cosmic Harvest
            </h1>

            {/* Main Game Area */}
            <div className="bg-gray-800 bg-opacity-70 rounded-3xl shadow-2xl p-6 md:p-10 w-full max-w-4xl flex flex-col md:flex-row gap-8 relative overflow-hidden">
                {/* Background "Stardust" animation */}
                <div className="absolute inset-0 z-0 overflow-hidden">
                    {[...Array(50)].map((_, i) => (
                        <div
                            key={i}
                            className="absolute bg-yellow-300 rounded-full opacity-0 animate-stardust"
                            style={{
                                width: `${Math.random() * 5 + 2}px`,
                                height: `${Math.random() * 5 + 2}px`,
                                top: `${Math.random() * 100}%`,
                                left: `${Math.random() * 100}%`,
                                animationDuration: `${Math.random() * 5 + 3}s`,
                                animationDelay: `${Math.random() * 5}s`,
                            }}
                        ></div>
                    ))}
                </div>

                {/* Left Panel: Stats and Click Button */}
                <div className="flex-1 z-10 flex flex-col items-center justify-center bg-gray-700 bg-opacity-60 rounded-2xl p-6 border border-gray-600 shadow-lg">
                    <div className="text-center mb-6">
                        <p className="text-2xl text-gray-300">Stardust Collected:</p>
                        <p className="text-6xl font-bold text-yellow-300 tracking-wider">
                            {formatNumber(stardust)}
                        </p>
                        <p className="text-lg text-gray-400 mt-2">
                            ({formatNumber(stardustPerClick * prestigeMultiplier)}/click, {formatNumber(stardustPerSecond)}/sec)
                        </p>
                        <p className="text-md text-gray-400 mt-1">
                            Prestige Multiplier: {prestigeMultiplier.toFixed(2)}x (Level {prestigeLevel})
                        </p>
                    </div>

                    <button
                        onClick={handleHarvestClick}
                        className="relative bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold py-5 px-10 rounded-full text-2xl shadow-xl hover:shadow-3xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75 overflow-hidden group"
                    >
                        Harvest Stardust
                        <span ref={clickAnimationRef} className="absolute inset-0 bg-white opacity-0 rounded-full blur-lg group-hover:opacity-10 group-hover:scale-150 transition-all duration-300"></span>
                    </button>

                    {message && (
                        <p className="mt-4 text-center text-lg text-yellow-400 animate-fade-in-out">
                            {message}
                        </p>
                    )}
                </div>

                {/* Right Panel: Upgrades */}
                <div className="flex-1 z-10 bg-gray-700 bg-opacity-60 rounded-2xl p-6 border border-gray-600 shadow-lg">
                    <h2 className="text-3xl font-bold mb-6 text-center text-purple-300">Upgrades</h2>
                    <div className="grid grid-cols-1 gap-4 max-h-[calc(100vh-250px)] overflow-y-auto pr-2">
                        {Object.keys(upgrades).map((id) => (
                            <div key={id} className="bg-gray-800 rounded-xl p-4 shadow-md flex flex-col justify-between">
                                <div>
                                    <h3 className="text-xl font-semibold text-blue-300">{upgrades[id].name} (Level {upgrades[id].level})</h3>
                                    <p className="text-gray-400 text-sm mt-1">{upgrades[id].description}</p>
                                    <p className="text-gray-200 mt-2">Cost: <span className="font-bold text-yellow-300">{formatNumber(upgrades[id].cost)} Stardust</span></p>
                                </div>
                                <button
                                    onClick={() => handleBuyUpgrade(id)}
                                    disabled={stardust < upgrades[id].cost}
                                    className={`mt-3 py-2 px-4 rounded-lg font-semibold transition-all duration-200
                                        ${stardust >= upgrades[id].cost
                                            ? 'bg-green-600 hover:bg-green-700 text-white shadow-md'
                                            : 'bg-gray-600 text-gray-400 cursor-not-allowed'
                                        }`}
                                >
                                    Buy
                                </button>
                            </div>
                        ))}
                    </div>
                    {/* Prestige Button - conditionally shown */}
                    {stardust >= 10000 && ( // Example condition: allow prestige after 10,000 stardust
                        <button
                            onClick={handlePrestige}
                            className="mt-6 w-full bg-gradient-to-r from-red-600 to-orange-500 text-white font-bold py-3 px-6 rounded-xl text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"
                        >
                            Initiate Galaxy Reset (Prestige)
                        </button>
                    )}
                </div>
            </div>

            {/* Prestige Confirmation Modal */}
            {showPrestigeModal && (
                <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4">
                    <div className="bg-gray-800 rounded-xl p-8 shadow-2xl text-center border border-gray-700">
                        <h3 className="text-2xl font-bold text-red-400 mb-4">Confirm Galaxy Reset?</h3>
                        <p className="text-gray-300 mb-6">
                            This will reset all your progress but give you a permanent boost for future journeys!
                        </p>
                        <div className="flex justify-center gap-4">
                            <button
                                onClick={confirmPrestige}
                                className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg shadow-md transition-all duration-200"
                            >
                                Confirm
                            </button>
                            <button
                                onClick={cancelPrestige}
                                className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg shadow-md transition-all duration-200"
                            >
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* Tailwind CSS Customization - DO NOT REMOVE */}
            <style>{`
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
                .font-inter {
                    font-family: 'Inter', sans-serif;
                }
                .animate-fade-in-out {
                    animation: fadeInOut 3s forwards;
                }
                @keyframes fadeInOut {
                    0% { opacity: 0; transform: translateY(10px); }
                    10% { opacity: 1; transform: translateY(0); }
                    90% { opacity: 1; transform: translateY(0); }
                    100% { opacity: 0; transform: translateY(-10px); }
                }
                .animate-ping-once {
                    animation: pingOnce 0.75s cubic-bezier(0, 0, 0.2, 1) forwards;
                }
                @keyframes pingOnce {
                    0% { transform: scale(0.2); opacity: 0.8; }
                    80% { transform: scale(1.5); opacity: 0; }
                    100% { transform: scale(0); opacity: 0; }
                }
                .animate-stardust {
                    animation: moveStardust linear infinite;
                }
                @keyframes moveStardust {
                    0% { transform: translate(0, 0); opacity: 0; }
                    25% { opacity: 0.7; }
                    50% { transform: translate(10vw, 50vh); opacity: 0.4; }
                    75% { opacity: 0.7; }
                    100% { transform: translate(-10vw, 100vh); opacity: 0; }
                }
            `}</style>
        </div>
    );
};

export default App;