const { motion, AnimatePresence } = window.Motion || window.framerMotion || { motion: { div: 'div' }, AnimatePresence: ({ children }) => <>{children}</> };

function DailyPopup({ showDailyPopup, setShowDailyPopup, dailyPopupData, t, formatMoney, Icons }) {
    if (!showDailyPopup) return null;

    return (
        <AnimatePresence>
            <motion.div
                key="daily-popup-overlay"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.3 }}
                className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-xl"
                onClick={() => setShowDailyPopup(false)}
            >
                <motion.div
                    key="daily-popup-card"
                    initial={{ scale: 0.7, opacity: 0, y: 40 }}
                    animate={{ scale: 1, opacity: 1, y: 0 }}
                    exit={{ scale: 0.8, opacity: 0, y: 20 }}
                    transition={{ type: 'spring', stiffness: 300, damping: 24 }}
                    className="relative w-full max-w-sm overflow-hidden rounded-[2.5rem] shadow-2xl"
                    style={{
                        background: 'linear-gradient(145deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%)',
                        border: '1px solid rgba(99,102,241,0.35)'
                    }}
                    onClick={e => e.stopPropagation()}
                >
                    <div className="absolute inset-0 pointer-events-none" style={{
                        background: 'radial-gradient(ellipse at 50% -10%, rgba(99,102,241,0.25) 0%, transparent 65%)'
                    }} />

                    <div className="relative z-10 p-8 flex flex-col items-center gap-6">

                        <div className="relative">
                            <motion.div
                                animate={{ rotate: [0, -8, 8, -8, 8, 0], scale: [1, 1.15, 1.15, 1.15, 1.15, 1] }}
                                transition={{ delay: 0.5, duration: 0.7, ease: 'easeInOut' }}
                                className="w-20 h-20 flex items-center justify-center rounded-2xl text-5xl"
                                style={{ background: 'linear-gradient(135deg, #4f46e5, #06b6d4)', boxShadow: '0 0 40px rgba(99,102,241,0.5)' }}
                            >
                                🌅
                            </motion.div>
                            <motion.div
                                initial={{ scale: 0, opacity: 0 }}
                                animate={{ scale: 1, opacity: 1 }}
                                transition={{ delay: 0.9, type: 'spring', stiffness: 400, damping: 15 }}
                                className="absolute -top-2 -right-2 w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center text-sm shadow-lg shadow-emerald-500/40"
                            >
                                ✓
                            </motion.div>
                        </div>

                        <div className="text-center">
                            <p className="text-[10px] font-black text-indigo-400 uppercase tracking-[0.25em] mb-1">{t.dailyWelcome}</p>
                            <h2 className="text-2xl font-black text-white">{t.dailyTitle}</h2>
                        </div>

                        <div className="w-full space-y-3">
                            <motion.div
                                initial={{ x: -20, opacity: 0 }}
                                animate={{ x: 0, opacity: 1 }}
                                transition={{ delay: 0.4 }}
                                className="flex items-center justify-between p-4 rounded-2xl"
                                style={{ background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.25)' }}
                            >
                                <div className="flex items-center gap-3">
                                    <span className="text-2xl">🎟️</span>
                                    <div>
                                        <p className="text-xs font-black text-emerald-400 uppercase tracking-wider">{t.dailyTokenLabel}</p>
                                        <p className="text-[10px] text-slate-400">{t.dailyTokenDesc}</p>
                                    </div>
                                </div>
                                <motion.p
                                    initial={{ scale: 0.5, opacity: 0 }}
                                    animate={{ scale: 1, opacity: 1 }}
                                    transition={{ delay: 0.6, type: 'spring', stiffness: 350 }}
                                    className="text-3xl font-black text-emerald-400"
                                >
                                    +{dailyPopupData.tokensGranted}
                                </motion.p>
                            </motion.div>

                        </div>

                        <motion.button
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 1 }}
                            whileHover={{ scale: 1.03 }}
                            whileTap={{ scale: 0.97 }}
                            onClick={() => setShowDailyPopup(false)}
                            className="w-full py-4 rounded-2xl font-black uppercase tracking-widest text-white text-sm shadow-lg transition-all"
                            style={{ background: 'linear-gradient(135deg, #4f46e5, #06b6d4)', boxShadow: '0 8px 32px rgba(99,102,241,0.35)' }}
                        >
                            {t.dailyStartBtn} 🎲
                        </motion.button>
                    </div>
                </motion.div>
            </motion.div>
        </AnimatePresence>
    );
}

window.DailyPopup = DailyPopup;