{"id":"68b4c950a14b75d1d461b68c","created_date":"2025-08-31T22:14:40.428000","updated_date":"2026-03-18T02:57:54.899000","organization_id":"68b4c94e00d26619fb83f327","app_type":"user_app","name":"GlowQuest","user_description":"Worlds First and #1 Femboy Web-App, Go find yourself a Femboy or just simply become one yourself with our Feminization AI. See you there cutie <3","logo_url":"https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/bfe8be7a9_logo.png","avatar_index":null,"pages":{"Shop":"import React, { useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Sparkles, Clock, Star, Heart } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\n\n// Countdown Component for the Skirt\nfunction SkirtCountdown() {\n  const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });\n\n  useEffect(() => {\n    // Set fixed target date - set to a future date (halved from previous)\n    const targetDate = new Date('2025-11-02T12:00:00');\n\n    const updateCountdown = () => {\n      const now = new Date().getTime();\n      const target = targetDate.getTime();\n      const difference = target - now;\n\n      if (difference > 0) {\n        const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));\n        const seconds = Math.floor((difference % (1000 * 60)) / 1000);\n        setTimeLeft({ days, hours, minutes, seconds });\n      } else {\n        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });\n      }\n    };\n\n    updateCountdown();\n    const interval = setInterval(updateCountdown, 1000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"bg-gradient-to-r from-purple-100/70 to-pink-100/70 border-2 border-purple-200/50 rounded-2xl p-4 my-4\">\n      <div className=\"text-center\">\n        <p className=\"text-sm font-bold text-purple-800 mb-2\">Dropping in:</p>\n        <div className=\"grid grid-cols-4 gap-2\">\n          <div className=\"bg-white/70 rounded-xl p-2\">\n            <div className=\"text-lg font-bold text-purple-700\">{timeLeft.days}</div>\n            <div className=\"text-xs text-purple-600\">Days</div>\n          </div>\n          <div className=\"bg-white/70 rounded-xl p-2\">\n            <div className=\"text-lg font-bold text-purple-700\">{timeLeft.hours}</div>\n            <div className=\"text-xs text-purple-600\">Hours</div>\n          </div>\n          <div className=\"bg-white/70 rounded-xl p-2\">\n            <div className=\"text-lg font-bold text-purple-700\">{timeLeft.minutes}</div>\n            <div className=\"text-xs text-purple-600\">Minutes</div>\n          </div>\n          <div className=\"bg-white/70 rounded-xl p-2\">\n            <div className=\"text-lg font-bold text-purple-700\">{timeLeft.seconds}</div>\n            <div className=\"text-xs text-purple-600\">Seconds</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n\nexport default function Shop() {\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Mock limited edition product\n  const limitedProduct = {\n    id: \"glow-quest-skirt-limited\",\n    name: \"GlowQuest Skirt\",\n    description: \"\",\n    long_description: \"This isn't just any skirt - it's THE skirt every GlowQuest member will want. Crafted with premium materials and designed with love for your feminine journey. Only 100 pieces will ever be made - each one individually numbered from 1 to 100, making yours truly unique! ✨\",\n    price: 59.99,\n    image_urls: [\n      \"https://res.cloudinary.com/dsgdn56wa/image/upload/v1757680815/Design_ohne_Titel_fm16fn.png\",\n      \"https://images.unsplash.com/photo-1594633312681-ca13fe660116?w=600&h=800&fit=crop&crop=center\",\n      \"https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?w=600&h=800&fit=crop&crop=center\"\n    ],\n    category: \"skirt\",\n    dropping_soon: true\n  };\n\n  if (isLoading) {\n    return (\n      <div className=\"p-6 md:p-8 animate-pulse\">\n        <div className=\"h-32 bg-pink-100 rounded-xl mb-8\"></div>\n        <div className=\"aspect-square bg-pink-100 rounded-3xl mx-auto max-w-md\"></div>\n        <div className=\"h-48 bg-pink-100 rounded-xl mt-8 max-w-md mx-auto\"></div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-4 md:p-6 lg:p-8 w-full max-w-full overflow-hidden\">\n      <div className=\"text-center mb-8 md:mb-12 relative px-4 w-full\">\n        <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-6 md:-translate-y-8\">\n          <span className=\"text-3xl md:text-4xl bounce-cute\">🎀</span>\n        </div>\n        <h1 className=\"text-3xl md:text-4xl lg:text-5xl font-bold gradient-text mb-4\">💖 GlowQuest Boutique 💖</h1>\n        <p className=\"text-gray-600 text-lg md:text-xl mt-4 max-w-2xl mx-auto font-medium\">\n          Something magical is coming... ✨\n        </p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 10 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, delay: 0.2 }}\n          className=\"mt-8\"\n        >\n          <Card className=\"max-w-2xl mx-auto bg-gradient-to-r from-green-100/70 to-blue-100/70 border-2 border-green-200/50 cute-shadow\">\n            <CardContent className=\"p-4 text-center\">\n              <div className=\"flex items-center justify-center gap-3\">\n                <Heart className=\"w-6 h-6 text-green-600 animate-pulse\" />\n                <div>\n                  <h3 className=\"font-bold text-base text-green-800\">Your Purchase Supports Us!</h3>\n                  <p className=\"text-sm text-green-700\">\n                    Every purchase in our boutique helps fund the development and maintenance of the GlowQuest app! Thank you for your support! 💖\n                  </p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </motion.div>\n      </div>\n\n      <div className=\"max-w-xl mx-auto px-4 w-full flex flex-col items-center text-center mt-8\">\n        {/* Product Details */}\n        <motion.div\n          initial={{ opacity: 0, y: 30 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6, delay: 0.2 }}\n          className=\"w-full\"\n        >\n          <Card className=\"glassmorphism cute-shadow border-2 border-pink-200/50 rounded-3xl\">\n            <CardContent className=\"p-8 space-y-6\">\n              <div className=\"flex flex-wrap justify-center gap-4\">\n                <Badge className=\"bg-gradient-to-r from-yellow-400 to-orange-500 text-white font-bold px-4 py-2 rounded-full cute-shadow text-sm flex items-center gap-2\">\n                  <Star className=\"w-4 h-4 fill-current\" />\n                  LIMITED EDITION\n                </Badge>\n                <Badge className=\"bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold px-4 py-2 rounded-full cute-shadow text-sm flex items-center gap-2\">\n                  <Clock className=\"w-4 h-4\" />\n                  DROPPING SOON!\n                </Badge>\n              </div>\n\n              <h2 className=\"text-3xl md:text-4xl font-bold text-gray-800 tracking-tight\">\n                {limitedProduct.name}\n              </h2>\n              \n              {/* Prominent piece count */}\n              <div className=\"bg-gradient-to-r from-red-400 to-pink-500 text-white font-bold py-2 px-4 rounded-full inline-block cute-shadow\">\n                🔥 Only 100 Pieces Ever Made! 🔥\n              </div>\n\n              {/* Product Description */}\n              <p className=\"text-gray-700 font-medium text-center leading-relaxed\">\n                {limitedProduct.long_description}\n              </p>\n              \n              {/* Product Image in the middle */}\n              <motion.div\n                initial={{ opacity: 0, scale: 0.9 }}\n                animate={{ opacity: 1, scale: 1 }}\n                transition={{ duration: 0.7, type: \"spring\" }}\n                className=\"w-full max-w-sm mx-auto\"\n              >\n                <img \n                  src={limitedProduct.image_urls[0]} \n                  alt={limitedProduct.name} \n                  className=\"w-full h-auto object-cover rounded-2xl cute-shadow\"\n                />\n              </motion.div>\n              \n              <SkirtCountdown />\n\n              {/* Early Access Notice for Ultra Members */}\n              <div className=\"bg-gradient-to-r from-purple-100 to-pink-100 border-2 border-purple-300/50 rounded-2xl p-4 mb-4\">\n                <div className=\"flex items-center gap-3 mb-2\">\n                  <Clock className=\"w-6 h-6 text-purple-600 bounce-cute\" />\n                  <h3 className=\"font-bold text-lg text-purple-800\">Ultra Early Access! 👑</h3>\n                </div>\n                <p className=\"text-purple-700 font-medium mb-2\">\n                  Ultra Glow members get exclusive 30-minute early access before the public drop!\n                </p>\n                <p className=\"text-sm text-purple-600\">\n                  ⏰ Ultra Access: TBA | 🌟 Public Drop: TBA\n                </p>\n              </div>\n\n              <div className=\"text-4xl md::text-5xl font-bold gradient-text\">\n                ${limitedProduct.price}\n              </div>\n              \n              <Button \n                disabled\n                size=\"lg\"\n                className=\"w-full bg-white/90 text-purple-600 font-bold py-6 px-8 rounded-2xl cute-shadow text-lg opacity-90 cursor-not-allowed\"\n              >\n                <Clock className=\"w-5 h-5 mr-2\" />\n                Coming Very Soon! 🌟\n              </Button>\n            </CardContent>\n          </Card>\n        </motion.div>\n      </div>\n      \n      <div className=\"text-center mt-12 md:mt-16 px-4 w-full\">\n        <div className=\"max-w-2xl mx-auto space-y-4\">\n          <h3 className=\"text-2xl font-bold gradient-text\">Get Ready, Gorgeous! 💕</h3>\n          <p className=\"text-lg text-gray-600 font-medium\">\n            This exclusive piece is going to be absolutely stunning. Make sure you're following our updates so you don't miss the launch! \n          </p>\n          <div className=\"flex justify-center gap-3 mt-6\">\n            <span className=\"text-2xl bounce-cute\">🛍️</span>\n            <span className=\"text-2xl bounce-cute\">💖</span>\n            <span className=\"text-2xl bounce-cute\">🛍️</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}","Premium":"\nimport React, { useState, useEffect } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { motion } from \"framer-motion\";\nimport { Crown, Star, Sparkles, Heart, Camera, Users, Zap, Clock, Filter, ShoppingBag, MessageSquare, Video, Shield, Loader2, CheckCircle } from \"lucide-react\";\nimport { createMollieCheckout } from \"@/functions/createMollieCheckout\";\nimport { User } from \"@/entities/User\"; // Updated import path for User\n\nexport default function Premium() {\n  const [isLoadingPremium, setIsLoadingPremium] = useState(false);\n  const [isLoadingUltra, setIsLoadingUltra] = useState(false);\n  const [user, setUser] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n\n  useEffect(() => {\n    const fetchUser = async () => {\n      try {\n        const currentUser = await User.me();\n        setUser(currentUser);\n      } catch (error) {\n        console.error('Error loading user:', error);\n        // Optionally, handle error state or show a message to the user\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    fetchUser();\n  }, []);\n\n  const handleSubscribe = async (plan) => {\n    // Prevent double subscription or subscribing to a lower tier if a higher one is active\n    if (user?.is_ultra) {\n      alert('You already have Ultra subscription! 💎');\n      return;\n    }\n    \n    if (plan === 'premium' && user?.is_premium) {\n      alert('You already have Premium subscription! 👑');\n      return;\n    }\n\n    if (plan === 'premium') {\n      setIsLoadingPremium(true);\n    } else { // plan === 'ultra'\n      setIsLoadingUltra(true);\n    }\n\n    try {\n      const result = await createMollieCheckout({ plan });\n      \n      if (result.data.success) {\n        // Redirect to Mollie checkout\n        window.location.href = result.data.checkoutUrl;\n      } else {\n        alert('Checkout creation failed. Please try again!');\n      }\n    } catch (error) {\n      console.error('Checkout error:', error);\n      alert('Something went wrong. Please try again!');\n    } finally {\n      setIsLoadingPremium(false);\n      setIsLoadingUltra(false);\n    }\n  };\n\n  const premiumFeatures = [\n    {\n      icon: Sparkles,\n      title: \"Glow-AI Companion 💖\",\n      description: \"Chat with your personal AI guide for support and motivation!\",\n      emoji: \"🤖\"\n    },\n    {\n      icon: Camera,\n      title: \"AI Photo Analyzer! 📸\",\n      description: \"Get personalized feedback on your glow-up photos with our advanced AI!\",\n      emoji: \"✨\"\n    },\n    {\n      icon: Crown,\n      title: \"Exclusive Premium Challenges\",\n      description: \"Access 50+ exclusive challenges designed for advanced growth.\",\n      emoji: \"👑\"\n    },\n    {\n      icon: Users,\n      title: \"Unlimited Chats in GlowConnect\",\n      description: \"Enjoy unlimited daily chats in GlowConnect to meet more people.\",\n      emoji: \"💕\"\n    },\n    {\n      icon: Filter,\n      title: \"GlowConnect Advanced Filters\",\n      description: \"Use advanced filters (country, language) in GlowConnect.\",\n      emoji: \"🚀\"\n    },\n    {\n      icon: MessageSquare,\n      title: \"GlowConnect Voice Chat 🎤\",\n      description: \"Talk to other cuties with your voice! Anonymous audio chat for deeper connections.\",\n      emoji: \"🔊\"\n    },\n    {\n      icon: Video,\n      title: \"GlowConnect Video Chat 📹\",\n      description: \"Connect face-to-face in live, anonymous video calls! The ultimate connection experience.\",\n      emoji: \"🎥\"\n    }\n  ];\n\n  const ultraFeatures = [\n    {\n      icon: Zap,\n      title: \"GlowBoost Activation! 🚀\",\n      description: \"Activate a boost in GlowConnect to get matched with other top users first!\",\n      emoji: \"⚡\",\n      highlight: true\n    },\n    {\n      icon: Clock,\n      title: \"Early Drop Access! ⏰\",\n      description: \"Get exclusive 30-minute early access to all new clothing drops before everyone else!\",\n      emoji: \"🛍️\",\n      highlight: true\n    },\n    {\n      icon: Shield,\n      title: \"Real Domina Chat! 👑\",\n      description: \"Exclusive access to live chat with real, verified Dominas. The ultimate premium experience!\",\n      emoji: \"💎\",\n      highlight: true\n    },\n    ...premiumFeatures\n  ];\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Loader2 className=\"w-12 h-12 animate-spin text-pink-500\" />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-4 md:p-6 lg:p-8 w-full max-w-full overflow-hidden\">\n      <div className=\"text-center mb-8 md:mb-12 relative px-4 w-full\">\n        <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-6 md:-translate-y-8\">\n          <span className=\"text-3xl md:text-4xl bounce-cute\">👑</span>\n        </div>\n        <h1 className=\"text-3xl md:text-4xl lg:text-5xl font-bold gradient-text mb-4\">💖 Choose Your Glow Level 💖</h1>\n        <p className=\"text-gray-600 text-lg md:text-xl mt-4 max-w-2xl mx-auto font-medium\">\n          Unlock your full potential with exclusive features designed to accelerate your beautiful journey! ✨\n        </p>\n        \n        <motion.div\n          initial={{ opacity: 0, y: 10 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, delay: 0.2 }}\n          className=\"mt-8\"\n        >\n          <Card className=\"max-w-2xl mx-auto bg-gradient-to-r from-green-100/70 to-blue-100/70 border-2 border-green-200/50 cute-shadow\">\n            <CardContent className=\"p-4 text-center\">\n              <div className=\"flex items-center justify-center gap-3\">\n                <Heart className=\"w-6 h-6 text-green-600 animate-pulse\" />\n                <div>\n                  <h3 className=\"font-bold text-base text-green-800\">Your Support Matters!</h3>\n                  <p className=\"text-sm text-green-700\">\n                    100% of all subscription and shop revenue goes directly into improving GlowQuest and keeping our community safe & magical! 💖\n                  </p>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </motion.div>\n        \n        <div className=\"flex justify-center gap-2 mt-8\">\n          <span className=\"text-xl md:text-2xl bounce-cute\">🌟</span>\n          <span className=\"text-xl md:text-2xl bounce-cute\">💎</span>\n          <span className=\"text-xl md:text-2xl bounce-cute\">🌟</span>\n        </div>\n      </div>\n\n      {/* Pricing Cards */}\n      <div className=\"grid md:grid-cols-2 gap-8 max-w-5xl mx-auto mb-12 px-4\">\n        {/* Premium Tier */}\n        <motion.div\n          initial={{ opacity: 0, x: -30 }}\n          animate={{ opacity: 1, x: 0 }}\n          transition={{ duration: 0.6 }}\n        >\n          <Card className={`glassmorphism cute-shadow hover:shadow-xl transition-all duration-500 rounded-3xl overflow-hidden h-full flex flex-col ${\n            user?.is_premium && !user?.is_ultra ? 'border-3 border-green-400/70' : 'border-2 border-pink-300/60'\n          }`}>\n            <div className=\"bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 p-6 text-white text-center relative\">\n              {user?.is_premium && !user?.is_ultra && (\n                <Badge className=\"absolute top-4 right-4 bg-green-500 text-white font-bold\">\n                  ✅ Active\n                </Badge>\n              )}\n              <Sparkles className=\"w-10 h-10 mx-auto mb-3 bounce-cute\" />\n              <h2 className=\"text-xl font-bold mb-2\">Premium</h2>\n              <div className=\"text-3xl font-bold mb-1\">€19.99<span className=\"text-sm font-medium\">/month</span></div>\n            </div>\n            <CardContent className=\"p-6 flex-grow flex flex-col\">\n              <div className=\"space-y-3 mb-6\">\n                {premiumFeatures.map((feature, index) => (\n                  <div key={index} className=\"flex items-start gap-3\">\n                    <span className=\"text-lg mt-1\">{feature.emoji}</span>\n                    <div>\n                      <p className=\"font-semibold text-gray-800 text-sm\">{feature.title}</p>\n                      <p className=\"text-xs text-gray-600\">{feature.description}</p>\n                    </div>\n                  </div>\n                ))}\n              </div>\n              \n              {user?.is_ultra ? (\n                <Button \n                  disabled\n                  className=\"w-full mt-auto bg-gray-400 text-white font-bold py-3 rounded-2xl cursor-not-allowed\"\n                >\n                  <CheckCircle className=\"w-4 h-4 mr-2\" />\n                  You have Ultra! 💎\n                </Button>\n              ) : user?.is_premium ? (\n                <Button \n                  disabled\n                  className=\"w-full mt-auto bg-green-500 text-white font-bold py-3 rounded-2xl cursor-not-allowed\"\n                >\n                  <CheckCircle className=\"w-4 h-4 mr-2\" />\n                  Already Active! ✅\n                </Button>\n              ) : (\n                <Button \n                  onClick={() => handleSubscribe('premium')}\n                  disabled={isLoadingPremium}\n                  className=\"w-full mt-auto bg-gradient-to-r from-pink-400 to-purple-400 hover:from-pink-500 hover:to-purple-500 text-white font-bold py-3 rounded-2xl cute-shadow\"\n                >\n                  {isLoadingPremium ? (\n                    <>\n                      <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                      Loading...\n                    </>\n                  ) : (\n                    <>\n                      <Crown className=\"w-4 h-4 mr-2\" />\n                      Get Premium\n                    </>\n                  )}\n                </Button>\n              )}\n            </CardContent>\n          </Card>\n        </motion.div>\n\n        {/* Ultra Tier */}\n        <motion.div\n          initial={{ opacity: 0, x: 30 }}\n          animate={{ opacity: 1, x: 0 }}\n          transition={{ duration: 0.6, delay: 0.2 }}\n        >\n          <Card className={`glassmorphism cute-shadow hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden h-full relative flex flex-col ${\n            user?.is_ultra ? 'border-3 border-green-400/70' : 'border-3 border-purple-400/70'\n          }`}>\n            <div className=\"absolute top-4 right-4 z-10\">\n              {user?.is_ultra ? (\n                <Badge className=\"bg-green-500 text-white font-bold px-3 py-1 rounded-full cute-shadow\">\n                  ✅ Active\n                </Badge>\n              ) : (\n                <Badge className=\"bg-gradient-to-r from-yellow-400 to-orange-400 text-white font-bold px-3 py-1 rounded-full cute-shadow bounce-cute\">\n                  🌟 BEST VALUE 🌟\n                </Badge>\n              )}\n            </div>\n            <div className=\"bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 p-6 text-white text-center\">\n              <div className=\"flex items-center justify-center gap-2 mb-3\">\n                <Zap className=\"w-10 h-10 bounce-cute\" />\n                <Camera className=\"w-10 h-10 wiggle\" />\n              </div>\n              <h2 className=\"text-xl font-bold mb-2\">Ultra Glow</h2>\n              <div className=\"text-3xl font-bold mb-2\">€29.99<span className=\"text-sm font-medium\">/month</span></div>\n              <Badge className=\"bg-white/20 text-white border-white/30 font-bold px-3 py-1\">\n                All Premium + More! 💎\n              </Badge>\n            </div>\n            <CardContent className=\"p-6 flex-grow flex flex-col\">\n              <div className=\"space-y-3 mb-6\">\n                {ultraFeatures.map((feature, index) => (\n                  <div key={index} className={`flex items-start gap-3 ${feature.highlight ? 'bg-gradient-to-r from-pink-100/60 to-purple-100/60 p-3 rounded-xl border-2 border-pink-200/40' : ''}`}>\n                    <span className=\"text-lg mt-1\">{feature.emoji}</span>\n                    <div>\n                      <p className={`font-semibold text-gray-800 text-sm ${feature.highlight ? 'text-purple-800' : ''}`}>\n                        {feature.title}\n                      </p>\n                      <p className=\"text-xs text-gray-600\">{feature.description}</p>\n                    </div>\n                  </div>\n                ))}\n              </div>\n              \n              {user?.is_ultra ? (\n                <Button \n                  disabled\n                  className=\"w-full mt-auto bg-green-500 text-white font-bold py-3 rounded-2xl cursor-not-allowed text-lg\"\n                >\n                  <CheckCircle className=\"w-4 h-4 mr-2\" />\n                  Already Active! ✅\n                </Button>\n              ) : (\n                <Button \n                  onClick={() => handleSubscribe('ultra')}\n                  disabled={isLoadingUltra}\n                  className=\"w-full mt-auto bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 hover:from-purple-600 hover:via-pink-600 hover:to-orange-600 text-white font-bold py-3 rounded-2xl cute-shadow text-lg\"\n                >\n                  {isLoadingUltra ? (\n                    <>\n                      <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                      Loading...\n                    </>\n                  ) : (\n                    <>\n                      <Zap className=\"w-4 h-4 mr-2\" />\n                      {user?.is_premium ? 'Upgrade to Ultra Glow' : 'Get Ultra Glow'}\n                    </>\n                  )}\n                </Button>\n              )}\n            </CardContent>\n          </Card>\n        </motion.div>\n      </div>\n\n      {/* Testimonial Section */}\n      <div className=\"max-w-4xl mx-auto mt-16 px-4 text-center\">\n        <h3 className=\"text-2xl font-bold gradient-text mb-8\">💕 What Our Members Say 💕</h3>\n        <div className=\"grid md:grid-cols-3 gap-6\">\n          <Card className=\"glassmorphism border-2 border-pink-200/50 cute-shadow rounded-2xl\">\n            <CardContent className=\"p-6\">\n              <div className=\"flex items-center justify-center mb-4\">\n                <div className=\"flex gap-1\">\n                  {[...Array(5)].map((_, i) => (\n                    <Star key={i} className=\"w-4 h-4 text-yellow-400 fill-current\" />\n                  ))}\n                </div>\n              </div>\n              <p className=\"text-gray-700 font-medium mb-4 italic text-sm\">\n                \"Premium challenges helped me discover confidence I never knew I had! 💖\"\n              </p>\n              <p className=\"text-xs text-gray-500 font-bold\">- Sarah M. ✨</p>\n            </CardContent>\n          </Card>\n          \n          <Card className=\"glassmorphism border-2 border-pink-200/50 cute-shadow rounded-2xl\">\n            <CardContent className=\"p-6\">\n              <div className=\"flex items-center justify-center mb-4\">\n                <div className=\"flex gap-1\">\n                  {[...Array(5)].map((_, i) => (\n                    <Star key={i} className=\"w-4 h-4 text-yellow-400 fill-current\" />\n                  ))}\n                </div>\n              </div>\n              <p className=\"text-gray-700 font-medium mb-4 italic text-sm\">\n                \"The community support is incredible! I've made so many amazing friends! 💕\"\n              </p>\n              <p className=\"text-xs text-gray-500 font-bold\">- Alex R. 🦋</p>\n            </CardContent>\n          </Card>\n\n          <Card className=\"glassmorphism border-2 border-pink-200/50 cute-shadow rounded-2xl\">\n            <CardContent className=\"p-6\">\n              <div className=\"flex items-center justify-center mb-4\">\n                <div className=\"flex gap-1\">\n                  {[...Array(5)].map((_, i) => (\n                    <Star key={i} className=\"w-4 h-4 text-yellow-400 fill-current\" />\n                  ))}\n                </div>\n              </div>\n              <p className=\"text-gray-700 font-medium mb-4 italic text-sm\">\n                \"Glow-AI Companion is a game-changer for daily motivation and support! 🤖\"\n              </p>\n              <p className=\"text-xs text-gray-500 font-bold\">- Maya L. 🌟</p>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n\n      {/* Final CTA */}\n      <div className=\"max-w-md mx-auto mt-12 text-center px-4\">\n        <Card className=\"glassmorphism border-2 border-pink-200/50 cute-shadow rounded-3xl\">\n          <CardContent className=\"p-8\">\n            <Heart className=\"w-12 h-12 text-pink-500 mx-auto mb-4 bounce-cute\" />\n            <h3 className=\"text-xl font-bold gradient-text mb-3\">Ready to Glow? ✨</h3>\n            <p className=\"text-gray-600 font-medium mb-6\">\n              Join thousands of amazing people and directly support the app's growth with your subscription!\n            </p>\n            <div className=\"space-y-3\">\n              {user?.is_ultra ? (\n                <Button\n                  disabled\n                  className=\"w-full bg-gray-400 text-white font-bold py-3 rounded-2xl cursor-not-allowed\"\n                >\n                  <CheckCircle className=\"w-4 h-4 mr-2\" />\n                  You have Ultra! 💎\n                </Button>\n              ) : user?.is_premium ? (\n                <Button\n                  disabled\n                  className=\"w-full bg-green-500 text-white font-bold py-3 rounded-2xl cursor-not-allowed\"\n                >\n                  <CheckCircle className=\"w-4 h-4 mr-2\" />\n                  Premium Active! ✅\n                </Button>\n              ) : (\n                <Button \n                  onClick={() => handleSubscribe('premium')}\n                  disabled={isLoadingPremium}\n                  className=\"w-full bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 hover:from-pink-600 hover:via-purple-600 hover:to-blue-600 text-white font-bold py-3 rounded-2xl cute-shadow\"\n                >\n                  {isLoadingPremium ? (\n                    <>\n                      <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                      Loading...\n                    </>\n                  ) : (\n                    <>\n                      <Crown className=\"w-4 h-4 mr-2\" />\n                      Get Premium\n                    </>\n                  )}\n                </Button>\n              )}\n\n              {user?.is_ultra ? (\n                <Button\n                  disabled\n                  className=\"w-full bg-green-500 text-white font-bold py-3 rounded-2xl cursor-not-allowed\"\n                >\n                  <CheckCircle className=\"w-4 h-4 mr-2\" />\n                  Ultra Active! ✅\n                </Button>\n              ) : (\n                <Button \n                  onClick={() => handleSubscribe('ultra')}\n                  disabled={isLoadingUltra}\n                  className=\"w-full bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 hover:from-purple-600 hover:via-pink-600 hover:to-orange-600 text-white font-bold py-3 rounded-2xl cute-shadow\"\n                >\n                  {isLoadingUltra ? (\n                    <>\n                      <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                      Loading...\n                    </>\n                  ) : (\n                    <>\n                      <Zap className=\"w-4 h-4 mr-2\" />\n                      {user?.is_premium ? 'Upgrade to Ultra Glow' : 'Get Ultra Glow'}\n                    </>\n                  )}\n                </Button>\n              )}\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n}\n","Profile":"\nimport React, { useState, useEffect } from \"react\";\nimport { User } from \"@/entities/User\"; // Changed from \"@/entities/all\" to specific User entity\nimport { UploadFile } from \"@/integrations/Core\"; // Added UploadFile import\nimport { updateMyProfile } from \"@/functions/updateMyProfile\"; // Added new import for controlled profile updates\nimport { cancelMollieSubscription } from \"@/functions/cancelMollieSubscription\"; // Added import for Mollie cancellation\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"; // Added AvatarImage\nimport { Input } from \"@/components/ui/input\"; // Added Input import\nimport { LogOut, Mail, Calendar, ShoppingBag, Crown, Settings, Camera, Edit3, Save, X, Loader2 } from \"lucide-react\"; // Added new icons, including Loader2\nimport { format } from \"date-fns\";\nimport { motion } from \"framer-motion\";\nimport { Link } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\n\nexport default function Profile() {\n  const [user, setUser] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState(null);\n  \n  // New state for editing\n  const [isEditingName, setIsEditingName] = useState(false);\n  const [newName, setNewName] = useState('');\n  const [isUploadingImage, setIsUploadingImage] = useState(false);\n  const [isSavingName, setIsSavingName] = useState(false);\n  // New state for cancellation\n  const [isCancelling, setIsCancelling] = useState(false);\n\n  useEffect(() => {\n    const loadProfileData = async () => {\n      setIsLoading(true);\n\n      try {\n        const currentUser = await User.me();\n        setUser(currentUser);\n        setNewName(currentUser.full_name || ''); // Initialize newName\n        setError(null);\n        \n      } catch (error) {\n        console.error(\"Error loading profile data:\", error);\n        setError(\"Could not load profile data. Please try again later.\");\n        setUser(null);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    loadProfileData();\n  }, []);\n\n  const handleImageUpload = async (event) => {\n    const file = event.target.files[0];\n    if (!file) return;\n\n    if (file.size > 4 * 1024 * 1024) { // 4MB limit\n      setError(\"Image is too large! Please choose one under 4MB.\");\n      event.target.value = ''; // Clear the input\n      return;\n    }\n\n    setIsUploadingImage(true);\n    setError(null); // Clear previous errors\n\n    try {\n      const { file_url } = await UploadFile({ file });\n      // Changed to use the controlled updateMyProfile function\n      await updateMyProfile({ profile_image_url: file_url });\n      \n      // Update local state\n      setUser(prev => ({ ...prev, profile_image_url: file_url }));\n      \n    } catch (err) {\n      console.error(\"Error uploading image:\", err);\n      setError(\"Could not upload image. Please try again.\");\n    } finally {\n      setIsUploadingImage(false);\n      // Clear the input\n      event.target.value = '';\n    }\n  };\n\n  const handleNameSave = async () => {\n    if (!newName.trim()) {\n      setError(\"Name cannot be empty!\");\n      return;\n    }\n\n    if (newName.trim() === user.full_name) { // No change\n      setIsEditingName(false);\n      return;\n    }\n\n    setIsSavingName(true);\n    setError(null); // Clear previous errors\n\n    try {\n      // Name is a built-in field, we need to use User.update through admin\n      // For now, users can't change their name (only profile picture)\n      setError(\"Name changes require admin approval. Please contact support.\");\n      setNewName(user.full_name); // Revert to original name\n      \n    } catch (err) {\n      // This catch block might not be reached with the current logic,\n      // but it's good practice to keep for potential future changes.\n      console.error(\"Error updating name:\", err);\n      setError(\"Could not update name. Please try again.\");\n    } finally {\n      setIsSavingName(false);\n      setIsEditingName(false); // Exit editing mode after showing error\n    }\n  };\n\n  const handleNameCancel = () => {\n    setNewName(user.full_name || ''); // Revert to original name\n    setIsEditingName(false);\n  };\n\n  const handleLogout = async () => {\n    try {\n      await User.logout();\n      // The page will automatically reload to a logged-out state\n    } catch (error) {\n      console.error(\"Logout failed:\", error);\n    }\n  };\n\n  const handleCancelSubscription = async () => {\n    const confirmCancel = window.confirm(\n      \"Are you sure you want to cancel your subscription? You'll lose access to all premium features. 😢\"\n    );\n    \n    if (!confirmCancel) return;\n\n    setIsCancelling(true);\n    setError(null); // Clear any previous errors\n\n    try {\n      const result = await cancelMollieSubscription();\n      \n      if (result.data.success) {\n        alert(\"Subscription cancelled successfully. We're sad to see you go! 💔\");\n        // Reload page to update UI\n        window.location.reload();\n      } else {\n        setError(result.data.message || \"Failed to cancel subscription. Please try again or contact support.\");\n        alert(result.data.message || \"Failed to cancel subscription. Please try again or contact support.\");\n      }\n    } catch (err) {\n      console.error('Cancellation error:', err);\n      setError(\"An error occurred during cancellation. Please try again or contact support.\");\n      alert(\"An error occurred during cancellation. Please try again or contact support.\");\n    } finally {\n      setIsCancelling(false);\n    }\n  };\n\n  const getInitials = (name) => {\n    if (!name) return \"?\";\n    const names = name.split(' ');\n    if (names.length === 1) return names[0][0];\n    return names[0][0] + names[names.length - 1][0];\n  };\n  \n  if (isLoading) {\n    return (\n        <div className=\"p-6 md:p-8 animate-pulse space-y-8\">\n            <div className=\"h-40 bg-pink-100 rounded-xl\"></div>\n            <div className=\"h-24 bg-pink-100 rounded-xl\"></div> {/* Adjusted height for new \"Discover More\" card */}\n            <div className=\"h-40 bg-pink-100 rounded-xl\"></div> {/* Subscription Management */}\n            <div className=\"h-20 bg-pink-100 rounded-xl\"></div> {/* Account Actions */}\n        </div>\n    );\n  }\n\n  if (error && !user) { // Only show full error page if initial load failed and no user data is available\n    return (\n      <div className=\"p-8 text-center\">\n        <div className=\"w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4\">\n          <span className=\"text-2xl\">😅</span>\n        </div>\n        <h3 className=\"text-xl font-bold text-gray-700 mb-2\">Oops!</h3>\n        <p className=\"text-gray-600 mb-4\">{error || \"Could not load user profile.\"}</p>\n        <Button \n          onClick={() => { \n            window.location.reload(); \n          }}\n          className=\"bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold py-3 px-6 rounded-xl cute-shadow\"\n        >\n          Try Again ✨\n        </Button>\n      </div>\n    );\n  }\n  \n  // If user is null but not due to an explicit error (e.g., initial load race condition), show a simple message\n  if (!user && !error) {\n    return <div className=\"p-8 text-center text-gray-600\">Could not load user profile. Please try again.</div>;\n  }\n\n  return (\n    <div className=\"p-4 md:p-6 lg:p-8 space-y-6 md:space-y-8 w-full max-w-4xl mx-auto\">\n      <div className=\"text-center relative\">\n        <h1 className=\"text-3xl md:text-4xl font-bold gradient-text\">Your Cute Profile 💖</h1>\n      </div>\n\n      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>\n        <Card className=\"glassmorphism cute-shadow overflow-hidden\">\n          <CardContent className=\"p-8 flex flex-col md:flex-row items-center gap-8\">\n            <div className=\"relative\">\n              <Avatar className=\"w-24 h-24 text-3xl cute-shadow\">\n                {user.profile_image_url ? (\n                  <AvatarImage src={user.profile_image_url} alt=\"Profile\" />\n                ) : (\n                  <AvatarFallback className=\"bg-gradient-to-br from-pink-400 to-purple-400 text-white font-bold\">\n                    {getInitials(user.full_name)}\n                  </AvatarFallback>\n                )}\n              </Avatar>\n              <label className=\"absolute bottom-0 right-0 bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-full p-2 cursor-pointer cute-shadow hover:scale-110 transition-transform flex items-center justify-center\">\n                {isUploadingImage ? (\n                  <Loader2 className=\"w-4 h-4 animate-spin\" />\n                ) : (\n                  <Camera className=\"w-4 h-4\" />\n                )}\n                <input \n                  type=\"file\" \n                  accept=\"image/*\" \n                  onChange={handleImageUpload} \n                  className=\"hidden\"\n                  disabled={isUploadingImage}\n                />\n              </label>\n            </div>\n            \n            <div className=\"text-center md:text-left flex-1\">\n              {isEditingName ? (\n                <div className=\"space-y-4\">\n                  <Input\n                    value={newName}\n                    onChange={(e) => setNewName(e.target.value)}\n                    className=\"text-2xl font-bold text-center md:text-left border-pink-200/80 focus:border-pink-400\"\n                    disabled={isSavingName}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter') {\n                        handleNameSave();\n                      } else if (e.key === 'Escape') {\n                        handleNameCancel();\n                      }\n                    }}\n                  />\n                  <div className=\"flex justify-center md:justify-start gap-2\">\n                    <Button \n                      onClick={handleNameSave}\n                      disabled={isSavingName || !newName.trim() || newName.trim() === user.full_name}\n                      size=\"sm\"\n                      className=\"bg-gradient-to-r from-green-500 to-emerald-500 text-white\"\n                    >\n                      {isSavingName ? <Loader2 className=\"w-4 h-4 animate-spin\" /> : <Save className=\"w-4 h-4\" />}\n                    </Button>\n                    <Button \n                      onClick={handleNameCancel}\n                      disabled={isSavingName}\n                      variant=\"outline\" \n                      size=\"sm\"\n                      className=\"border-gray-300\"\n                    >\n                      <X className=\"w-4 h-4\" />\n                    </Button>\n                  </div>\n                </div>\n              ) : (\n                <div className=\"flex items-center justify-center md:justify-start gap-2\">\n                  <h2 className=\"text-3xl font-bold text-gray-800\">{user.full_name}</h2>\n                  <Button \n                    onClick={() => setIsEditingName(true)}\n                    variant=\"ghost\" \n                    size=\"icon\"\n                    className=\"text-pink-500 hover:bg-pink-100\"\n                  >\n                    <Edit3 className=\"w-4 h-4\" />\n                  </Button>\n                </div>\n              )}\n              \n              <div className=\"flex items-center justify-center md:justify-start gap-2 mt-2 text-gray-600 font-medium\">\n                <Mail className=\"w-4 h-4\" />\n                <span>{user.email}</span>\n              </div>\n              <div className=\"flex items-center justify-center md:justify-start gap-2 mt-2 text-gray-600 font-medium\">\n                <Calendar className=\"w-4 h-4\" />\n                <span>Member Since {format(new Date(user.created_date), \"MMM, yyyy\")}</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </motion.div>\n\n      {error && (\n        <div className=\"p-3 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700 text-center max-w-md mx-auto\">\n          {error}\n        </div>\n      )}\n\n      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.4 }}>\n        <Card className=\"glassmorphism cute-shadow\">\n          <CardHeader>\n            <CardTitle className=\"gradient-text text-xl\">Discover More ✨</CardTitle>\n          </CardHeader>\n          <CardContent className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <Button asChild variant=\"outline\" className=\"justify-start gap-3 py-6 rounded-xl border-pink-200/80\">\n                <Link to={createPageUrl(\"Shop\")}>\n                    <ShoppingBag className=\"w-5 h-5 text-pink-500\" />\n                    <span className=\"font-semibold\">Shop</span>\n                </Link>\n            </Button>\n            <Button asChild variant=\"outline\" className=\"justify-start gap-3 py-6 rounded-xl border-yellow-300/80\">\n                <Link to={createPageUrl(\"Premium\")}>\n                    <Crown className=\"w-5 h-5 text-yellow-500\" />\n                    <span className=\"font-semibold\">Go Premium</span>\n                </Link>\n            </Button>\n          </CardContent>\n        </Card>\n      </motion.div>\n\n      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.5 }}>\n        <Card className=\"glassmorphism cute-shadow\">\n          <CardHeader>\n            <CardTitle className=\"gradient-text text-xl flex items-center gap-2\">\n              <Settings className=\"w-5 h-5\" />\n              Manage Subscriptions 💎\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            {user?.is_ultra ? (\n              <div className=\"bg-gradient-to-r from-purple-100/70 to-pink-100/70 border-2 border-purple-300/50 rounded-2xl p-4\">\n                <div className=\"flex items-center gap-3 mb-2\">\n                  <div className=\"w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center\">\n                    <Crown className=\"w-5 h-5 text-white\" />\n                  </div>\n                  <div>\n                    <h3 className=\"font-bold text-lg text-purple-800\">Ultra Glow Active 👑</h3>\n                    <p className=\"text-sm text-purple-600\">€29.99/month • All premium features + exclusive perks</p>\n                  </div>\n                </div>\n                <Button \n                  onClick={handleCancelSubscription}\n                  disabled={isCancelling}\n                  variant=\"outline\" \n                  className=\"w-full border-red-300 text-red-700 hover:bg-red-50\"\n                >\n                  {isCancelling ? (\n                    <>\n                      <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                      Cancelling...\n                    </>\n                  ) : (\n                    'Cancel Ultra Subscription'\n                  )}\n                </Button>\n              </div>\n            ) : user?.is_premium ? (\n              <div className=\"bg-gradient-to-r from-pink-100/70 to-purple-100/70 border-2 border-pink-300/50 rounded-2xl p-4\">\n                <div className=\"flex items-center gap-3 mb-2\">\n                  <div className=\"w-10 h-10 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full flex items-center justify-center\">\n                    <Crown className=\"w-5 h-5 text-white\" />\n                  </div>\n                  <div>\n                    <h3 className=\"font-bold text-lg text-pink-800\">Premium Active ✨</h3>\n                    <p className=\"text-sm text-pink-600\">€19.99/month • Exclusive challenges & community</p>\n                  </div>\n                </div>\n                <div className=\"flex gap-2\">\n                  <Button \n                    onClick={handleCancelSubscription}\n                    disabled={isCancelling}\n                    variant=\"outline\" \n                    className=\"flex-1 border-red-300 text-red-700 hover:bg-red-50\"\n                  >\n                    {isCancelling ? (\n                      <>\n                        <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n                        Cancelling...\n                      </>\n                    ) : (\n                      'Cancel Subscription'\n                    )}\n                  </Button>\n                  <Button asChild className=\"flex-1 bg-gradient-to-r from-purple-500 to-orange-500 text-white\">\n                    <Link to={createPageUrl(\"Premium\")}>\n                      Upgrade to Ultra!\n                    </Link>\n                  </Button>\n                </div>\n              </div>\n            ) : (\n              <div className=\"bg-gradient-to-r from-gray-100/70 to-pink-100/70 border-2 border-gray-300/50 rounded-2xl p-4 text-center\">\n                <h3 className=\"font-bold text-lg text-gray-700 mb-2\">Free Plan 🌸</h3>\n                <p className=\"text-sm text-gray-600 mb-4\">You're currently on the free plan</p>\n                <Button asChild className=\"w-full bg-gradient-to-r from-pink-500 to-purple-500 text-white\">\n                  <Link to={createPageUrl(\"Premium\")}>\n                    Upgrade Now! ✨\n                  </Link>\n                </Button>\n              </div>\n            )}\n          </CardContent>\n        </Card>\n      </motion.div>\n\n      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.6 }}>\n        <Card className=\"glassmorphism cute-shadow\">\n          <CardHeader>\n            <CardTitle className=\"gradient-text text-xl\">Account Actions</CardTitle>\n          </CardHeader>\n          <CardContent>\n            <Button \n                onClick={handleLogout}\n                variant=\"destructive\"\n                className=\"w-full md:w-auto bg-gradient-to-r from-red-400 to-pink-500 hover:from-red-500 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-xl cute-shadow\"\n            >\n              <LogOut className=\"w-4 h-4 mr-2\" />\n              Log Out\n            </Button>\n          </CardContent>\n        </Card>\n      </motion.div>\n    </div>\n  );\n}\n","CommunityFeed":"\nimport React, { useState, useEffect, useCallback, useRef } from \"react\";\nimport { CommunityPost, User, UserConnection } from \"@/entities/all\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Image as ImageIcon, Loader2, Crown, Trash2, Ban, Clock, Users, RefreshCw, MessageSquare } from \"lucide-react\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { enUS } from \"date-fns/locale\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Link } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport CommentSection from \"../components/community/CommentSection\";\n\n// Global rate limiting and caching\nlet lastApiCall = 0;\nlet cachedData = null;\nlet isCurrentlyLoading = false;\nconst MIN_API_INTERVAL = 30000; // 30 seconds minimum between API calls\nconst RATE_LIMIT_COOLDOWN = 15000; // 15 seconds to display rate limit error and block further calls\n\n// Discord Countdown Component has been moved to its own component and removed from here.\n\nexport default function CommunityFeed() {\n  const [user, setUser] = useState(null);\n  const [posts, setPosts] = useState([]);\n  const [userMap, setUserMap] = useState({});\n  const [isLoading, setIsLoading] = useState(true);\n  const [isRefreshing, setIsRefreshing] = useState(false);\n  const [error, setError] = useState(null);\n  const [isRateLimited, setIsRateLimited] = useState(false);\n  const [expandedComments, setExpandedComments] = useState({});\n\n  const postsRef = useRef(posts);\n  useEffect(() => {\n    postsRef.current = posts;\n  }, [posts]);\n\n  const formatUserEmail = (email) => {\n    if (!email || typeof email !== 'string') return \"Anonymous\";\n    if (email.length <= 5) return email;\n    return `${email.substring(0, 5)}...`;\n  };\n\n  // Centralized API error handling function\n  const handleApiError = useCallback((err, defaultMessage = \"An unexpected error occurred.\") => {\n    console.error(\"API Error:\", err);\n    if (err.response?.status === 429) {\n      setError(\"Whoops! Too many requests. Please slow down and try again later. 😊\");\n      setIsRateLimited(true);\n      lastApiCall = Date.now(); \n      setTimeout(() => {\n        setError(null);\n        setIsRateLimited(false);\n      }, RATE_LIMIT_COOLDOWN);\n    } else {\n      setError(defaultMessage);\n      setTimeout(() => setError(null), 10000);\n    }\n  }, []);\n\n  const loadCommunityData = useCallback(async (isManualRefresh = false) => {\n    const now = Date.now();\n    const timeSinceLastCall = now - lastApiCall;\n    \n    if (isCurrentlyLoading || isRateLimited) {\n      console.log(\"Already loading or rate limited, skipping loadCommunityData...\");\n      return;\n    }\n    \n    if (!isManualRefresh && timeSinceLastCall < MIN_API_INTERVAL) {\n      console.log(`Rate limit: waiting ${MIN_API_INTERVAL - timeSinceLastCall}ms before next API call`);\n      if (cachedData) {\n        setPosts(cachedData.posts);\n        setUserMap(cachedData.userMap);\n        setUser(cachedData.user);\n        setIsLoading(false);\n      }\n      return;\n    }\n\n    if (isManualRefresh) {\n      setIsRefreshing(true);\n    }\n    \n    isCurrentlyLoading = true;\n    lastApiCall = now;\n    \n    try {\n      const currentUser = await User.me();\n      setUser(currentUser);\n      \n      // Removed premium gate check from here to allow all users to load data\n      \n      await new Promise(resolve => setTimeout(resolve, 1000));\n\n      // Assuming CommunityPost.list can fetch comments directly or they are part of the post object\n      const [postsResult, usersResult] = await Promise.all([\n        CommunityPost.list(\"-created_date\", 50),\n        User.list()\n      ]);\n\n      const allPosts = Array.isArray(postsResult) ? postsResult : [];\n      const allUsers = Array.isArray(usersResult) ? usersResult : [];\n\n      const usersDataMap = allUsers.reduce((acc, u) => {\n        if (u && u.email) {\n          acc[u.email] = { is_premium: u.is_premium, full_name: u.full_name, role: u.role }; // Added role\n        }\n        return acc;\n      }, {});\n\n      setPosts(allPosts);\n      setUserMap(usersDataMap);\n      \n      cachedData = {\n        posts: allPosts,\n        userMap: usersDataMap,\n        user: currentUser\n      };\n      \n      setError(null);\n      setIsRateLimited(false);\n      \n    } catch (error) {\n      handleApiError(error, \"Couldn't load community data. Please try again later.\");\n      \n      if (cachedData && postsRef.current.length === 0) {\n        setPosts(cachedData.posts);\n        setUserMap(cachedData.userMap);\n      }\n    } finally {\n      isCurrentlyLoading = false;\n      setIsLoading(false);\n      setIsRefreshing(false);\n    }\n  }, [handleApiError, isRateLimited]);\n\n  useEffect(() => {\n    loadCommunityData();\n  }, [loadCommunityData]);\n\n  const handleManualRefresh = () => {\n    if (!isRefreshing && !error && !isCurrentlyLoading && !isRateLimited) {\n      loadCommunityData(true);\n    }\n  };\n\n  const handleDeletePost = async (postId) => {\n    if (isRateLimited) {\n      setError(\"You are currently rate limited. Please wait a moment before trying again. 😅\");\n      return;\n    }\n\n    if (window.confirm(\"Are you sure you want to delete this post?\")) {\n      try {\n        await CommunityPost.delete(postId);\n        setPosts(prevPosts => (Array.isArray(prevPosts) ? prevPosts : []).filter(p => p.id !== postId)); \n        cachedData = null;\n        // Also remove from expandedComments if it was open\n        setExpandedComments(prev => {\n            const newExpanded = { ...prev };\n            delete newExpanded[postId];\n            return newExpanded;\n        });\n      } catch (err) {\n        handleApiError(err, \"Error deleting post.\");\n      }\n    }\n  };\n\n  const handleBanUser = async (userEmail, duration, reason) => {\n    if (isRateLimited) {\n      setError(\"You are currently rate limited. Please wait a moment before trying again. 😅\");\n      return;\n    }\n\n    try {\n      let bannedUntil;\n      const now = new Date();\n      \n      switch(duration) {\n        case '5min': bannedUntil = new Date(now.getTime() + 5 * 60 * 1000).toISOString(); break;\n        case '30min': bannedUntil = new Date(now.getTime() + 30 * 60 * 1000).toISOString(); break;\n        case '1hour': bannedUntil = new Date(now.getTime() + 60 * 60 * 1000).toISOString(); break;\n        case '1day': bannedUntil = new Date(now.getTime() + 24 * 60 * 60 * 1000).toISOString(); break;\n        case '1week': bannedUntil = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000).toISOString(); break;\n        case 'permanent': bannedUntil = 'permanent'; break;\n        default: setError(\"Invalid ban duration provided.\"); return;\n      }\n\n      const users = await User.list();\n      const targetUser = (Array.isArray(users) ? users : []).find(u => u.email === userEmail);\n      \n      if (targetUser) {\n        await User.update(targetUser.id, { banned_until: bannedUntil, ban_reason: reason });\n        // Removing posts created by the banned user instantly for visual feedback\n        setPosts(prevPosts => (Array.isArray(prevPosts) ? prevPosts : []).filter(p => p.created_by !== userEmail));\n        alert(`User was successfully ${duration === 'permanent' ? 'permanently banned' : `timed out for ${duration}`}!`);\n        cachedData = null;\n        setTimeout(() => { loadCommunityData(true); }, 2000);\n      } else {\n        setError(\"User not found for banning.\");\n      }\n    } catch (err) {\n      handleApiError(err, \"Error banning user.\");\n    }\n  };\n\n  const handleUnbanUser = async (userEmail) => {\n    if (isRateLimited) {\n      setError(\"You are currently rate limited. Please wait a moment before trying again. 😅\");\n      return;\n    }\n\n    try {\n      const users = await User.list();\n      const targetUser = (Array.isArray(users) ? users : []).find(u => u.email === userEmail);\n      \n      if (targetUser) {\n        await User.update(targetUser.id, { banned_until: null, ban_reason: null });\n        alert(\"User was successfully unbanned!\");\n        cachedData = null;\n        setTimeout(() => {\n          loadCommunityData(true);\n        }, 2000);\n      } else {\n        setError(\"User not found for unbanning.\");\n      }\n    } catch (err) {\n      handleApiError(err, \"Error unbanning user.\");\n    }\n  };\n\n  const handleSendFriendRequest = async (recipientEmail, recipientName) => {\n    if (isRateLimited) {\n      setError(\"You are currently rate limited. Please wait a moment before trying again. 😅\");\n      return;\n    }\n    try {\n      const currentUser = await User.me();\n      \n      const existingConnection = await UserConnection.filter({\n        $or: [\n          { requester_email: currentUser.email, recipient_email: recipientEmail },\n          { requester_email: recipientEmail, recipient_email: currentUser.email }\n        ]\n      });\n\n      if (existingConnection.length > 0) {\n        setError(\"You're already connected with this user or have a pending request!\");\n        return;\n      }\n\n      await UserConnection.create({\n        requester_email: currentUser.email,\n        recipient_email: recipientEmail,\n        requester_name: currentUser.full_name || currentUser.email,\n        recipient_name: recipientName || recipientEmail\n      });\n\n      setError(\"Friend request sent! 💕\");\n      setTimeout(() => setError(null), 3000);\n      \n    } catch (err) {\n      handleApiError(err, \"Couldn't send friend request. Please try again!\");\n    }\n  };\n\n  const handleCommentPosted = (postId, updatedComments) => {\n    setPosts(prevPosts =>\n      prevPosts.map(p =>\n        p.id === postId ? { ...p, comments: updatedComments } : p\n      )\n    );\n    cachedData = null; // Invalidate cache after commenting\n  };\n\n  const toggleComments = (postId) => {\n    setExpandedComments(prev => ({ ...prev, [postId]: !prev[postId] }));\n  };\n\n  if (isLoading) {\n    return (\n      <div className=\"p-6 animate-pulse\">\n        <div className=\"h-40 bg-pink-100 rounded-xl mb-6\"></div>\n        <div className=\"space-y-4\">\n          <div className=\"h-64 bg-pink-100 rounded-xl\"></div>\n        </div>\n      </div>\n    );\n  }\n\n  // Removed Premium Gate check to make the community feed accessible to all users.\n  // The user data (including is_premium and role) is still loaded and available\n  // for conditional rendering of specific features (e.g., sending friend requests for premium users, admin actions).\n\n  return (\n    <div className=\"p-4 md:p-6 lg:p-8 w-full max-w-2xl mx-auto\">\n      <div className=\"text-center mb-8\">\n        <div className=\"flex items-center justify-center gap-3 mb-4\">\n          <h1 className=\"text-3xl md:text-4xl font-bold gradient-text\">💖 Community Feed 💖</h1>\n          <div className=\"flex items-center gap-1 bg-gradient-to-r from-green-400 to-emerald-500 text-white px-3 py-1 rounded-full cute-shadow animate-pulse\">\n            <div className=\"w-2 h-2 bg-white rounded-full\"></div>\n            <span className=\"text-xs font-bold\">LIVE</span>\n          </div>\n          <Button\n            onClick={handleManualRefresh}\n            disabled={isRefreshing || !!error || isCurrentlyLoading || isRateLimited}\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"rounded-full cute-shadow\"\n            title=\"Refresh posts\"\n          >\n            <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />\n          </Button>\n        </div>\n        <p className=\"text-gray-600 mt-2\">Share your journey and see the progress of others!</p>\n      </div>\n\n      {/* The Discord Join Section has been removed from here. */}\n\n      <div className=\"space-y-6\">\n        <AnimatePresence>\n          {Array.isArray(posts) && posts.map((post) => {\n            if (!post || !post.id) return null;\n            const postAuthor = userMap[post.created_by];\n            const isOwnPost = post.created_by === user?.email;\n            \n            return (\n              <motion.div \n                key={post.id} \n                initial={{ opacity: 0, y: 20 }} \n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, x: -300 }}\n                transition={{ duration: 0.4 }}\n                layout\n              >\n                <Card className=\"glassmorphism cute-shadow overflow-hidden\">\n                  <CardContent className=\"p-6\">\n                    <div className=\"flex justify-between items-start mb-2\">\n                      <div className=\"flex items-center gap-2\">\n                        <p className=\"text-gray-500 text-xs\">Posted {formatDistanceToNow(new Date(post.created_date), { addSuffix: true, locale: enUS })}</p>\n                        <div className=\"flex items-center gap-1\">\n                          <p className=\"text-gray-400 text-xs\">by {formatUserEmail(post.created_by)}</p>\n                          {postAuthor?.is_premium && <Crown className=\"w-3 h-3 text-yellow-500\" title=\"Premium User\" />}\n                        </div>\n                      </div>\n                      \n                      <div className=\"flex items-center gap-1\">\n                        {/* Send friend request button is still premium-only functionality */}\n                        {!isOwnPost && user?.is_premium && (\n                          <Button \n                            variant=\"ghost\" \n                            size=\"icon\" \n                            className=\"h-8 w-8 text-pink-500 hover:bg-pink-100 hover:text-pink-700\" \n                            onClick={() => handleSendFriendRequest(post.created_by, postAuthor?.full_name)}\n                            title=\"Send friend request\"\n                            disabled={isRateLimited}\n                          >\n                            <Users className=\"w-4 h-4\" />\n                          </Button>\n                        )}\n                        \n                        {(isOwnPost || user?.role === 'admin') && (\n                          <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8 text-red-500 hover:bg-red-100 hover:text-red-700\" onClick={() => handleDeletePost(post.id)} disabled={isRateLimited}>\n                            <Trash2 className=\"w-4 h-4\" />\n                          </Button>\n                        )}\n                        \n                        {user?.role === 'admin' && !isOwnPost && (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8 text-orange-500 hover:bg-orange-100 hover:text-orange-700\" disabled={isRateLimited}>\n                                <Ban className=\"w-4 h-4\" />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem onClick={() => handleBanUser(post.created_by, '5min', 'Timeout by Admin')} disabled={isRateLimited}>\n                                <Clock className=\"w-4 h-4 mr-2\" />5 Minutes Timeout\n                              </DropdownMenuItem>\n                              <DropdownMenuItem onClick={() => handleBanUser(post.created_by, '30min', 'Timeout by Admin')} disabled={isRateLimited}>\n                                <Clock className=\"w-4 h-4 mr-2\" />30 Minutes Timeout\n                              </DropdownMenuItem>\n                              <DropdownMenuItem onClick={() => handleBanUser(post.created_by, '1hour', 'Timeout by Admin')} disabled={isRateLimited}>\n                                <Clock className=\"w-4 h-4 mr-2\" />1 Hour Timeout\n                              </DropdownMenuItem>\n                              <DropdownMenuItem onClick={() => handleBanUser(post.created_by, '1day', 'Timeout by Admin')} disabled={isRateLimited}>\n                                <Clock className=\"w-4 h-4 mr-2\" />1 Day Timeout\n                              </DropdownMenuItem>\n                              <DropdownMenuItem onClick={() => handleBanUser(post.created_by, '1week', 'Timeout by Admin')} disabled={isRateLimited}>\n                                <Clock className=\"w-4 h-4 mr-2\" />1 Week Timeout\n                              </DropdownMenuItem>\n                              <DropdownMenuSeparator />\n                              <DropdownMenuItem onClick={() => handleBanUser(post.created_by, 'permanent', 'Permanently Banned by Admin')} className=\"text-red-600\" disabled={isRateLimited}>\n                                <Ban className=\"w-4 h-4 mr-2\" />Permanent Ban\n                              </DropdownMenuItem>\n                              <DropdownMenuSeparator />\n                              <DropdownMenuItem onClick={() => handleUnbanUser(post.created_by)} className=\"text-green-600\" disabled={isRateLimited}>\n                                Unban\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        )}\n                      </div>\n                    </div>\n                    {post.image_url && <img src={post.image_url} alt=\"Community Post\" className=\"rounded-xl mb-4 w-full\" />}\n                    <p className=\"text-gray-800 whitespace-pre-wrap\">{post.content}</p>\n                    \n                    <div className=\"mt-4 pt-4 border-t border-pink-100/70\">\n                      <Button\n                        variant=\"ghost\"\n                        onClick={() => toggleComments(post.id)}\n                        className=\"text-pink-600 hover:text-pink-800 hover:bg-pink-100/50 w-full justify-start gap-2\"\n                      >\n                        <MessageSquare className=\"w-4 h-4\" />\n                        <span>\n                          {post.comments?.length > 0 ? `${post.comments.length} Comments` : \"Add a comment\"}\n                        </span>\n                      </Button>\n                    </div>\n\n                    <AnimatePresence>\n                    {expandedComments[post.id] && (\n                        <motion.div\n                            initial={{ opacity: 0, height: 0 }}\n                            animate={{ opacity: 1, height: 'auto' }}\n                            exit={{ opacity: 0, height: 0 }}\n                            transition={{ duration: 0.3 }}\n                            className=\"overflow-hidden\"\n                        >\n                            <CommentSection\n                                post={post}\n                                user={user}\n                                userMap={userMap}\n                                onCommentPosted={handleCommentPosted}\n                                formatUserEmail={formatUserEmail}\n                                isRateLimited={isRateLimited}\n                            />\n                        </motion.div>\n                    )}\n                    </AnimatePresence>\n                  </CardContent>\n                </Card>\n              </motion.div>\n            );\n          })}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n","ProductDetails":"\nimport React, { useState, useEffect } from \"react\";\nimport { Product } from \"@/entities/Product\";\nimport { Button } from \"@/components/ui/button\";\nimport { ExternalLink, ShoppingCart, Sparkles, ArrowLeft } from \"lucide-react\";\nimport { Link } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\nimport { motion } from \"framer-motion\";\n\nexport default function ProductDetails() {\n  const [product, setProduct] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [mainImage, setMainImage] = useState(null);\n\n  useEffect(() => {\n    const urlParams = new URLSearchParams(window.location.search);\n    const productId = urlParams.get(\"id\");\n\n    if (productId) {\n      const fetchProduct = async () => {\n        try {\n          const fetchedProduct = await Product.get(productId);\n          setProduct(fetchedProduct);\n          if (fetchedProduct.image_urls && fetchedProduct.image_urls.length > 0) {\n            setMainImage(fetchedProduct.image_urls[0]);\n          }\n        } catch (error) {\n          console.error(\"Error fetching product:\", error);\n        } finally {\n          setIsLoading(false);\n        }\n      };\n      fetchProduct();\n    } else {\n      setIsLoading(false);\n    }\n  }, []);\n\n  if (isLoading) {\n    return (\n      <div className=\"p-8 animate-pulse grid md:grid-cols-2 gap-8\">\n        <div className=\"space-y-4\">\n          <div className=\"aspect-square bg-pink-100 rounded-2xl\"></div>\n          <div className=\"grid grid-cols-4 gap-4\">\n            <div className=\"aspect-square bg-pink-100 rounded-lg\"></div>\n            <div className=\"aspect-square bg-pink-100 rounded-lg\"></div>\n            <div className=\"aspect-square bg-pink-100 rounded-lg\"></div>\n          </div>\n        </div>\n        <div className=\"space-y-6\">\n          <div className=\"h-10 bg-pink-100 rounded w-3/4\"></div>\n          <div className=\"h-8 bg-pink-100 rounded w-1/4\"></div>\n          <div className=\"h-20 bg-pink-100 rounded\"></div>\n          <div className=\"h-12 bg-pink-100 rounded w-1/2\"></div>\n        </div>\n      </div>\n    );\n  }\n\n  if (!product) {\n    return (\n      <div className=\"text-center p-12\">\n        <h2 className=\"text-2xl font-bold text-gray-700\">Oops! Product not found.</h2>\n        <Link to={createPageUrl(\"Shop\")} className=\"text-pink-500 font-bold mt-4 inline-block\">\n          Back to Shop\n        </Link>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-4 md:p-8 lg:p-12 w-full max-w-6xl mx-auto\">\n       <Button asChild variant=\"outline\" className=\"mb-8 cute-shadow border-pink-200/80\">\n          <Link to={createPageUrl(\"Shop\")}>\n            <ArrowLeft className=\"mr-2 h-4 w-4\" />\n            Back to Boutique\n          </Link>\n        </Button>\n\n      <div className=\"grid md:grid-cols-2 gap-8 lg:gap-16\">\n        {/* Image Gallery */}\n        <motion.div initial={{ opacity: 0, x: -30 }} animate={{ opacity: 1, x: 0 }}>\n          <div className=\"space-y-4\">\n            <div className=\"aspect-square rounded-3xl overflow-hidden cute-shadow border-2 border-pink-100/50\">\n              <img src={mainImage} alt={product.name} className=\"w-full h-full object-cover\" />\n            </div>\n            {product.image_urls && product.image_urls.length > 1 && (\n              <div className=\"grid grid-cols-4 gap-4\">\n                {product.image_urls.map((imgUrl, index) => (\n                  <div\n                    key={index}\n                    onClick={() => setMainImage(imgUrl)}\n                    className={`aspect-square rounded-xl overflow-hidden cursor-pointer cute-shadow border-4 transition-all duration-300 ${\n                      mainImage === imgUrl ? \"border-pink-400\" : \"border-transparent hover:border-pink-200\"\n                    }`}\n                  >\n                    <img src={imgUrl} alt={`${product.name} thumbnail ${index + 1}`} className=\"w-full h-full object-cover\" />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </motion.div>\n\n        {/* Product Info */}\n        <motion.div initial={{ opacity: 0, x: 30 }} animate={{ opacity: 1, x: 0 }}>\n          <div className=\"flex flex-col h-full\">\n            <h1 className=\"text-4xl lg:text-5xl font-bold gradient-text mb-4\">{product.name}</h1>\n            <p className=\"text-3xl font-bold text-pink-500 mb-6\">${product.price.toFixed(2)}</p>\n            \n            <div className=\"mb-8\">\n                <h2 className=\"font-bold text-xl text-gray-700 mb-3 flex items-center gap-2\">\n                    <Sparkles className=\"text-purple-500 w-5 h-5\"/>\n                    Description\n                </h2>\n                <p className=\"text-gray-600 leading-relaxed font-medium\">{product.long_description || product.description}</p>\n            </div>\n            \n            <div className=\"mt-auto pt-8\">\n              <Button asChild size=\"lg\" className=\"w-full text-lg font-bold py-8 rounded-2xl bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 cute-shadow transition-transform hover:scale-105\">\n                <a href={product.stripe_payment_link} target=\"_blank\" rel=\"noopener noreferrer\">\n                  <ShoppingCart className=\"mr-3 h-6 w-6\" />\n                  Buy Now\n                  <ExternalLink className=\"ml-3 h-5 w-5\" />\n                </a>\n              </Button>\n            </div>\n          </div>\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n","FeminizationAI":"\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { User, AiChatLog, DominaChatQueue } from \"@/entities/all\";\nimport { InvokeLLM, UploadFile } from \"@/integrations/Core\";\nimport { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Crown, Sparkles, Send, Loader2, Heart, Zap, ArrowLeft, Image as ImageIcon, Wand2, UploadCloud, Palette, Clock, Shield } from \"lucide-react\";\nimport { Link, useNavigate } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\nimport ReactMarkdown from 'react-markdown';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { CountdownTimer } from '../components/glowconnect/CountdownTimer';\nimport { updateMyProfile } from \"@/functions/updateMyProfile\";\nimport { glowAI } from \"@/functions/glowAI\"; \n\nfunction ChatMessage({ message }) {\n  const isAI = message.sender === 'ai';\n  \n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 10 }}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 0 }}\n      layout\n      className={`flex items-end gap-3 w-full ${isAI ? 'justify-start' : 'justify-end'}`}\n    >\n      {isAI && (\n        <div className=\"w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 flex items-center justify-center shadow-lg cute-shadow wiggle shrink-0\">\n          <Sparkles className=\"w-5 h-5 text-white\" />\n        </div>\n      )}\n      <div className={`p-4 rounded-3xl max-w-lg shadow-md ${isAI \n        ? 'bg-white rounded-bl-lg' \n        : 'bg-gradient-to-r from-pink-200 to-purple-200 text-gray-800 font-medium rounded-br-lg'\n      }`}>\n        <ReactMarkdown className=\"prose prose-sm text-gray-700\">\n          {message.text}\n        </ReactMarkdown>\n      </div>\n    </motion.div>\n  );\n}\n\nfunction PersonalitySelector({ user, onSelect, onSelectDomina }) {\n  const [onlineDominas, setOnlineDominas] = useState(6);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setOnlineDominas(prevCount => {\n        const change = Math.random() < 0.5 ? -1 : 1;\n        let newCount = prevCount + change;\n        if (newCount < 3) newCount = 3;\n        if (newCount > 10) newCount = 10;\n        return newCount;\n      });\n    }, 60000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"p-4 md:p-8 flex flex-col items-center justify-center h-full\">\n      <div className=\"text-center mb-8\">\n        <h1 className=\"text-3xl font-bold gradient-text mb-4\">Choose Your AI Companion ✨</h1>\n        <p className=\"text-gray-600 max-w-md mx-auto\">\n          Select the personality that matches your mood today, gorgeous! 💖\n        </p>\n      </div>\n      \n      <div className=\"grid md:grid-cols-3 gap-6 max-w-6xl w-full\">\n        <motion.div whileHover={{ scale: 1.05 }} transition={{ duration: 0.2 }}>\n          <Card \n            className=\"glassmorphism cute-shadow cursor-pointer hover:border-pink-400 transition-all duration-300 border-2 border-pink-200/50 h-full\"\n            onClick={() => onSelect('caring')}\n          >\n            <CardContent className=\"p-8 text-center\">\n              <div className=\"w-20 h-20 bg-gradient-to-r from-pink-300 to-rose-300 rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute\">\n                <Heart className=\"w-10 h-10 text-white\" />\n              </div>\n              <h3 className=\"text-2xl font-bold gradient-text mb-4\">Sweet & Caring</h3>\n              <p className=\"text-gray-600 mb-6 leading-relaxed\">\n                A gentle, loving companion who will encourage you with kindness, understanding, and endless positivity. Perfect for a supportive journey! 💕\n              </p>\n            </CardContent>\n          </Card>\n        </motion.div>\n\n        <motion.div whileHover={{ scale: 1.05 }} transition={{ duration: 0.2 }}>\n          <Card \n            className={`glassmorphism cute-shadow border-2 border-purple-200/50 relative transition-all duration-300 h-full ${!user?.is_premium ? 'cursor-not-allowed grayscale' : 'cursor-pointer hover:border-purple-400'}`}\n            onClick={() => user?.is_premium && onSelect('dominant')}\n          >\n            <Badge className=\"absolute top-4 right-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold\">\n              Premium Only! 👑\n            </Badge>\n            <CardContent className=\"p-8 text-center\">\n              <div className=\"w-20 h-20 bg-gradient-to-r from-purple-400 to-indigo-400 rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute\">\n                <Zap className=\"w-10 h-10 text-white\" />\n              </div>\n              <h3 className=\"text-2xl font-bold gradient-text mb-4\">Dominant Queen</h3>\n              <p className=\"text-gray-600 mb-6 leading-relaxed\">\n                A demanding queen who will command you to embrace your feminine side. She's here to give you orders, not suggestions. Get ready to obey! 👑\n              </p>\n            </CardContent>\n          </Card>\n        </motion.div>\n\n        <motion.div whileHover={{ scale: 1.05 }} transition={{ duration: 0.2 }}>\n          <Card \n            className={`glassmorphism cute-shadow border-2 border-black/30 relative transition-all duration-300 h-full ${!user?.is_ultra ? 'cursor-not-allowed grayscale' : 'cursor-pointer hover:border-black/50'}`}\n            onClick={() => user?.is_ultra && onSelectDomina()}\n          >\n            <Badge className=\"absolute top-4 right-4 bg-gradient-to-r from-black to-purple-900 text-white font-bold\">\n              Ultra Only! 💎\n            </Badge>\n            <CardContent className=\"p-8 text-center relative\">\n              <div className=\"w-20 h-20 bg-gradient-to-r from-gray-800 to-black rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute\">\n                <Shield className=\"w-10 h-10 text-yellow-300\" />\n              </div>\n              <h3 className=\"text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-800 to-black mb-4\">Real Domina Chat</h3>\n              <p className=\"text-gray-600 mb-4 leading-relaxed\">\n                Ready for the real deal? Connect and chat live with an official, human Domina. The ultimate experience, only for Ultra members.\n              </p>\n              \n              <div className=\"bg-gradient-to-r from-green-100/70 to-emerald-100/70 border-2 border-green-200/50 rounded-2xl p-3 mt-4\">\n                <div className=\"flex items-center justify-center gap-2\">\n                  <div className=\"relative flex h-2 w-2\">\n                    <div className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75\"></div>\n                    <div className=\"relative inline-flex rounded-full h-2 w-2 bg-green-500\"></div>\n                  </div>\n                  <span className=\"text-sm font-bold text-green-800\">\n                    {onlineDominas} Dominas Online\n                  </span>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n\nconst AiLimitReached = ({ onUpgrade }) => {\n  const getNextResetDate = () => {\n    const tomorrow = new Date();\n    tomorrow.setDate(tomorrow.getDate() + 1);\n    tomorrow.setHours(0, 0, 0, 0);\n    return tomorrow;\n  };\n\n  return (\n    <div className=\"text-center flex flex-col items-center justify-center h-full p-8\">\n      <div className=\"w-24 h-24 bg-gradient-to-r from-orange-400 to-red-400 rounded-2xl flex items-center justify-center mb-6 wiggle\">\n        <Clock className=\"w-12 h-12 text-white\" />\n      </div>\n      <h1 className=\"text-2xl md:text-3xl font-bold gradient-text mb-4\">Daily Caring Chats Used! ⏰</h1>\n      <p className=\"text-gray-600 max-w-md mx-auto mb-2 text-lg\">\n        You've used all 3 of your free Caring AI chats for today!\n      </p>\n\n      <CountdownTimer targetDate={getNextResetDate()} />\n\n      <p className=\"text-gray-500 mb-6\">\n        Come back tomorrow for new chats or upgrade for unlimited access! 💕\n      </p>\n      <Button onClick={onUpgrade} className=\"bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white font-bold rounded-xl cute-shadow text-lg py-6 px-8 hover:scale-105 transition-transform\">\n        Upgrade to Premium! 👑\n      </Button>\n    </div>\n  );\n};\n\nfunction SearchingForDomina({ onCancel }) {\n  return (\n    <div className=\"text-center flex flex-col items-center justify-center h-full p-8\">\n      <div className=\"w-24 h-24 bg-gradient-to-r from-gray-800 to-black rounded-2xl flex items-center justify-center mb-6 wiggle\">\n        <Loader2 className=\"w-12 h-12 text-yellow-300 animate-spin\" />\n      </div>\n      <h1 className=\"text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-800 to-black mb-4\">\n        Searching for a Domina...\n      </h1>\n      <p className=\"text-gray-600 max-w-md mx-auto mb-6 text-lg\">\n        Please wait while we connect you with an available Domina. This may take a few moments.\n      </p>\n      <Button onClick={onCancel} variant=\"outline\" className=\"border-gray-400 text-gray-700\">\n        Cancel Search\n      </Button>\n    </div>\n  );\n}\n\nfunction ChatCompanionTab({ user }) {\n  const [selectedPersonality, setSelectedPersonality] = useState(null);\n  const [messages, setMessages] = useState([]);\n  const [userInput, setUserInput] = useState('');\n  const [isAILoading, setIsAILoading] = useState(false);\n  const [aiSessionsUsed, setAiSessionsUsed] = useState(0);\n  const [isSearchingDomina, setIsSearchingDomina] = useState(false);\n  const searchPollInterval = useRef(null);\n  const queueEntryRef = useRef(null);\n  const navigate = useNavigate();\n  const chatEndRef = useRef(null);\n\n  const messagesRef = useRef(messages);\n  useEffect(() => {\n    messagesRef.current = messages;\n  }, [messages]);\n\n  useEffect(() => {\n    return () => {\n      if (messagesRef.current.length > 1 && user && selectedPersonality && selectedPersonality !== 'domina' && selectedPersonality !== 'limit_reached') {\n        AiChatLog.create({\n          user_email: user.email,\n          personality: selectedPersonality,\n          conversation: messagesRef.current\n        }).catch(err => console.error(\"Failed to save chat log:\", err));\n      }\n    };\n  }, [user, selectedPersonality]);\n\n  useEffect(() => {\n    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  }, [messages, isAILoading]);\n\n  useEffect(() => {\n    if (user) {\n      const today = new Date().toDateString();\n      const lastReset = user.last_ai_reset ? new Date(user.last_ai_reset).toDateString() : null;\n      \n      if (lastReset !== today) {\n        if (user.ai_messages_today > 0) { \n             updateMyProfile({\n                ai_messages_today: 0,\n                last_ai_reset: new Date().toISOString()\n             });\n        }\n        setAiSessionsUsed(0);\n      } else {\n        setAiSessionsUsed(user.ai_messages_today || 0);\n      }\n    }\n  }, [user]);\n\n  const handlePersonalitySelect = (personality) => {\n    if (personality === 'dominant' && !user?.is_premium) {\n      navigate(createPageUrl('Premium'));\n      return;\n    }\n\n    if (personality === 'caring' && !user?.is_premium && aiSessionsUsed >= 3) {\n      setSelectedPersonality('limit_reached');\n      return;\n    }\n\n    setSelectedPersonality(personality);\n\n    if (personality === 'caring' && !user?.is_premium && aiSessionsUsed < 3) {\n        const newSessionsUsed = aiSessionsUsed + 1;\n        setAiSessionsUsed(newSessionsUsed);\n        updateMyProfile({ \n            ai_messages_today: newSessionsUsed,\n            last_ai_reset: new Date().toISOString()\n        }).catch(err => console.error(\"Failed to update AI message count:\", err));\n    }\n\n    const initialMessage = personality === 'caring' \n      ? \"Hello sweetie! 💖 I'm here to support you. How are you feeling today?\"\n      : \"Hello princess! 👑 Ready to obey and become fabulous? Let's start!\";\n    \n    setMessages([{ sender: 'ai', text: initialMessage }]);\n  };\n  \n  const handleSelectDomina = async () => {\n    if (!user || !user.is_ultra) {\n      navigate(createPageUrl('Premium'));\n      return;\n    }\n    \n    setIsSearchingDomina(true);\n    try {\n      const oldEntries = await DominaChatQueue.filter({ user_email: user.email });\n      for(const entry of oldEntries) {\n          await DominaChatQueue.delete(entry.id);\n      }\n      \n      const newQueueEntry = await DominaChatQueue.create({\n        user_email: user.email,\n        user_name: user.full_name || 'Anonymous User',\n        status: 'pending'\n      });\n      queueEntryRef.current = newQueueEntry;\n\n      searchPollInterval.current = setInterval(async () => {\n        try {\n          const updatedEntry = await DominaChatQueue.filter({ id: newQueueEntry.id });\n          if (updatedEntry.length > 0 && updatedEntry[0].status === 'matched') {\n            clearInterval(searchPollInterval.current);\n            setIsSearchingDomina(false);\n            navigate(createPageUrl(`DominaChat?session_id=${updatedEntry[0].session_id}`));\n          }\n        } catch (error) {\n            console.error(\"Error polling for domina match:\", error);\n        }\n      }, 3000);\n\n    } catch (error) {\n      console.error(\"Error entering domina queue:\", error);\n      setIsSearchingDomina(false);\n    }\n  };\n  \n  const cancelDominaSearch = async () => {\n      if(searchPollInterval.current) {\n          clearInterval(searchPollInterval.current);\n          searchPollInterval.current = null;\n      }\n      if(queueEntryRef.current) {\n          try {\n              await DominaChatQueue.delete(queueEntryRef.current.id);\n          } catch(err) {\n              console.error(\"Failed to delete queue entry on cancel\", err);\n          }\n          queueEntryRef.current = null;\n      }\n      setIsSearchingDomina(false);\n  };\n\n  const handleSendMessage = async () => {\n    if (!userInput.trim() || isAILoading) return;\n\n    const msg = userInput.trim();\n    setMessages(prev => [...prev, { sender: 'user', text: msg }]);\n    setUserInput('');\n    setIsAILoading(true);\n\n    try {\n      const result = await glowAI({\n        message: msg,\n        personality: selectedPersonality\n      });\n\n      if (result.data.success) {\n        setMessages(prev => [...prev, { \n          sender: 'ai', \n          text: result.data.response \n        }]);\n      } else {\n        throw new Error(result.data.error || 'AI request failed');\n      }\n      \n    } catch (err) {\n      console.error('AI error:', err);\n      const errorMsg = selectedPersonality === 'caring'\n        ? \"I'm having a little trouble right now, sweetie! 💕 Please try again!\"\n        : \"Technical glitch, princess! 👑 Try again!\";\n      \n      setMessages(prev => [...prev, { \n        sender: 'ai', \n        text: errorMsg\n      }]);\n    } finally {\n      setIsAILoading(false);\n    }\n  };\n\n  const resetPersonality = () => {\n    setSelectedPersonality(null);\n    setMessages([]);\n    setUserInput('');\n  };\n  \n  if (isSearchingDomina) {\n      return <SearchingForDomina onCancel={cancelDominaSearch} />\n  }\n\n  if (selectedPersonality === 'limit_reached') {\n    return <AiLimitReached onUpgrade={() => navigate(createPageUrl('Premium'))} />;\n  }\n\n  if (!selectedPersonality) {\n    return <PersonalitySelector user={user} onSelect={handlePersonalitySelect} onSelectDomina={handleSelectDomina} />;\n  }\n  \n  return (\n    <div className=\"flex flex-col h-[calc(100vh-220px)] bg-transparent\">\n       <div className=\"text-center mb-4\">\n        <div className=\"flex items-center justify-center gap-3 mb-2\">\n          <Button \n            variant=\"outline\" \n            size=\"icon\"\n            onClick={resetPersonality}\n            className=\"rounded-full cute-shadow border-pink-200/80\"\n          >\n            <ArrowLeft className=\"w-4 h-4\" />\n          </Button>\n          <h1 className=\"text-3xl font-bold gradient-text flex items-center gap-3\">\n            <Sparkles className=\"bounce-cute\" />\n            Glow-AI {selectedPersonality === 'caring' ? 'Sweetheart' : 'Queen'}\n            <Sparkles className=\"bounce-cute\" />\n          </h1>\n        </div>\n        {!user?.is_premium && selectedPersonality === 'caring' && (\n          <div className=\"flex justify-center\">\n            <Badge className='bg-blue-100 text-blue-700 border-blue-300 px-3 py-1 text-xs border'>\n              ✨ {aiSessionsUsed}/3 Caring Chats Used Today ✨\n            </Badge>\n          </div>\n        )}\n        {selectedPersonality === 'dominant' && (\n          <div className=\"flex justify-center\">\n            <Badge className='bg-purple-100 text-purple-700 border-purple-300 px-3 py-1 text-xs border'>\n              👑 Premium Exclusive - Unlimited Chats ✨\n            </Badge>\n          </div>\n        )}\n      </div>\n      <div className=\"flex-1 overflow-y-auto p-4 space-y-6\">\n        <AnimatePresence>\n          {messages.map((msg, index) => (\n            <ChatMessage key={index} message={msg} />\n          ))}\n        </AnimatePresence>\n        {isAILoading && (\n          <motion.div initial={{opacity:0}} animate={{opacity:1}} className=\"flex items-end gap-3 justify-start\">\n            <div className=\"w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 flex items-center justify-center shadow-lg cute-shadow wiggle shrink-0\">\n              <Sparkles className=\"w-5 h-5 text-white\" />\n            </div>\n            <div className=\"p-4 rounded-3xl bg-white rounded-bl-lg shadow-md\">\n              <Loader2 className=\"w-5 h-5 animate-spin text-gray-500\" />\n            </div>\n          </motion.div>\n        )}\n        <div ref={chatEndRef} />\n      </div>\n      <div className=\"mt-4 p-4 bg-white/50 backdrop-blur-md rounded-2xl border-2 border-pink-200/50 cute-shadow\">\n        <div className=\"flex items-center gap-3\">\n          <Textarea\n            placeholder=\"Type your message...\"\n            value={userInput}\n            onChange={(e) => setUserInput(e.target.value)}\n            onKeyPress={(e) => e.key === 'Enter' && !e.shiftKey && (e.preventDefault(), handleSendMessage())}\n            className=\"flex-1 bg-white border-2 border-pink-200/80 rounded-2xl resize-none focus:border-pink-400\"\n            rows={1}\n          />\n          <Button\n            onClick={handleSendMessage}\n            disabled={isAILoading || !userInput.trim()}\n            className=\"rounded-full w-14 h-14 bg-gradient-to-r from-pink-500 to-purple-500 text-white cute-shadow transition-transform hover:scale-110\"\n          >\n            <Send className=\"w-6 h-6\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction AITransformTab({ user }) {\n  if (!user?.is_ultra) {\n    return (\n      <div className=\"p-4 md:p-8 text-center flex flex-col items-center justify-center h-full\">\n        <div className=\"w-24 h-24 bg-gradient-to-r from-purple-400 to-pink-400 rounded-2xl flex items-center justify-center mb-6 wiggle\">\n          <Palette className=\"w-12 h-12 text-white\" />\n        </div>\n        <h1 className=\"text-2xl md:text-3xl font-bold gradient-text mb-4\">👑 Ultra Exclusive Feature 👑</h1>\n        <p className=\"text-gray-600 max-w-md mx-auto mb-6 text-lg\">\n          AI Makeover is our most exclusive feature! Upload your photo and let our AI transform you into the gorgeous version of yourself! ✨\n        </p>\n        <Button asChild className=\"bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white font-bold rounded-xl cute-shadow text-lg py-6 px-8 hover:scale-105 transition-transform\">\n          <Link to={createPageUrl('Premium')}>\n            Upgrade to Ultra! 💎\n          </Link>\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-4 md:p-8 text-center flex flex-col items-center justify-center h-full\">\n      <div className=\"w-24 h-24 bg-gradient-to-r from-orange-400 to-red-400 rounded-2xl flex items-center justify-center mb-6 wiggle\">\n        <Wand2 className=\"w-12 h-12 text-white\" />\n      </div>\n      <h1 className=\"text-2xl md:text-3xl font-bold gradient-text mb-4\">🚧 Coming Very Soon! 🚧</h1>\n      <p className=\"text-gray-600 max-w-md mx-auto mb-6 text-lg\">\n        We're working on perfecting our AI Makeover magic to give you the most realistic transformations possible! This feature will be ready soon, gorgeous! ✨\n      </p>\n      <div className=\"bg-gradient-to-r from-pink-100 to-purple-100 border-2 border-pink-200/50 rounded-2xl p-6 max-w-md\">\n        <h3 className=\"font-bold text-lg text-gray-800 mb-2\">What's Coming:</h3>\n        <ul className=\"text-left text-sm text-gray-600 space-y-2\">\n          <li>🎯 Keep your exact face and features</li>\n          <li>👗 Try on different outfits virtually</li>\n          <li>💄 Experiment with makeup styles</li>\n          <li>💇‍♀️ Preview different hairstyles</li>\n          <li>📸 High-quality, realistic results</li>\n        </ul>\n      </div>\n    </div>\n  );\n}\n\nfunction PhotoAnalyzerTab({ user }) {\n  const [file, setFile] = useState(null);\n  const [preview, setPreview] = useState(null);\n  const [isLoading, setIsLoading] = useState(false);\n  const [loadingStatus, setLoadingStatus] = useState(\"\");\n  const [analysisResult, setAnalysisResult] = useState(null);\n  const [error, setError] = useState(null);\n\n  const mockAnalysis = {\n    femininity_score: 78,\n    cute_score: 85,\n    key_features: [\n      \"What the AI loves will show up here... ✨\",\n    ],\n    gentle_suggestions: [\n      \"Cute suggestions from the AI will appear here...💋\",\n    ],\n    overall_comment: \"The AI's final, super positive and encouraging comment will be right here! 💖✨\"\n  };\n\n  const handleFileChange = (e) => {\n    const selectedFile = e.target.files[0];\n    if (selectedFile) {\n      if (selectedFile.size > 4 * 1024 * 1024) {\n        setError(\"This photo is too big, sweetie! Please choose one under 4MB. 💖\");\n        return;\n      }\n      setFile(selectedFile);\n      setPreview(URL.createObjectURL(selectedFile));\n      setAnalysisResult(null);\n      setError(null);\n    }\n  };\n\n  const handleAnalyze = async () => {\n    if (!file) {\n      setError(\"Please upload a photo first, gorgeous!\");\n      return;\n    }\n    \n    // Changed from is_ultra to is_premium\n    if (!user?.is_premium && !user?.is_ultra) {\n      window.location.href = createPageUrl('Premium');\n      return;\n    }\n    \n    setIsLoading(true);\n    setAnalysisResult(null);\n    setError(null);\n\n    try {\n      setLoadingStatus(\"Uploading your beautiful photo... 🌸\");\n      const { file_url } = await UploadFile({ file });\n\n      setLoadingStatus(\"Glow-Analyzer is working its magic... ✨\");\n      const systemPrompt = `\n        You are the 'Glow-Analyzer', a specialized AI designed to analyze a user's photo and provide positive, encouraging, and SFW (Safe For Work) feedback on their feminization journey.\n        Your feedback MUST be structured as a JSON object.\n        Your tone is extremely positive, sweet, and uplifting. You celebrate every aspect of their look.\n        NEVER be negative or harsh. Your goal is to build confidence.\n        \n        Analyze the provided image and rate the following aspects on a scale of 0 to 100.\n        - femininity_score: How feminine the overall look is.\n        - cute_score: How cute and adorable the overall look is.\n        \n        Provide the following text feedback:\n        - key_features: A list of 2-3 specific things that look great (e.g., \"Your lovely smile\", \"The way your hair frames your face\", \"That adorable top\").\n        - gentle_suggestions: A list of 2-3 gentle, positive, and SFW suggestions for what they could try next to enhance their look (e.g., \"A touch of lip gloss could make your lips even more kissable!\", \"Have you considered trying some cute earrings to match your top?\").\n        - overall_comment: A final, super positive and encouraging comment.\n        \n        You MUST return ONLY a valid JSON object and nothing else.\n      `;\n      \n      const jsonSchema = {\n        type: \"object\",\n        properties: {\n          femininity_score: { type: \"number\", description: \"Femininity score from 0-100\" },\n          cute_score: { type: \"number\", description: \"Cuteness score from 0-100\" },\n          key_features: { type: \"array\", items: { type: \"string\" }, description: \"List of positive key features.\" },\n          gentle_suggestions: { type: \"array\", items: { type: \"string\" }, description: \"List of gentle SFW suggestions.\" },\n          overall_comment: { type: \"string\", description: \"Final encouraging comment.\" }\n        },\n        required: [\"femininity_score\", \"cute_score\", \"key_features\", \"gentle_suggestions\", \"overall_comment\"]\n      };\n\n      const result = await InvokeLLM({\n        prompt: systemPrompt,\n        file_urls: [file_url],\n        response_json_schema: jsonSchema\n      });\n\n      setAnalysisResult(result);\n\n    } catch (err) {\n      console.error(\"Analysis Error:\", err);\n      setError(\"Oh no, my magic mirror seems to be cloudy! Please try again in a moment. 💕\");\n    } finally {\n      setIsLoading(false);\n      setLoadingStatus(\"\");\n    }\n  };\n  \n  const resetAnalyzer = () => {\n      setFile(null);\n      setPreview(null);\n      setAnalysisResult(null);\n      setError(null);\n  };\n\n  const ScoreDisplay = ({ label, score, color, isBlurred = false }) => (\n    <div className=\"space-y-2\">\n      <div className=\"flex justify-between items-end\">\n        <p className=\"font-bold text-gray-700\">{label}</p>\n        <p className={`font-bold text-2xl ${color} ${isBlurred ? 'blur-sm' : ''}`}>{score}</p>\n      </div>\n      <Progress value={score} className={`h-3 ${isBlurred ? 'blur-sm' : ''}`} indicatorClassName={color.replace('text-', 'bg-')} />\n    </div>\n  );\n\n  const displayData = analysisResult || mockAnalysis;\n  // Changed: blur only if NOT premium or ultra\n  const isBlurred = !user?.is_premium && !user?.is_ultra && !analysisResult;\n\n  return (\n    <div className=\"p-4 space-y-6\">\n      <div className=\"flex flex-col items-center gap-4\">\n        {!preview ? (\n          <div className=\"relative w-full border-2 border-dashed border-pink-300 rounded-2xl p-6 text-center cursor-pointer hover:bg-pink-50/50 hover:border-pink-400 transition-all\">\n            <input type=\"file\" accept=\"image/png, image/jpeg\" onChange={handleFileChange} className=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\" />\n            <div className=\"flex flex-col items-center justify-center gap-3 text-gray-500\">\n              <UploadCloud className=\"w-12 h-12 text-pink-400 bounce-cute\" />\n              <p className=\"font-bold text-lg text-gray-700\">Upload your beautiful photo</p>\n              <p>Click here to select an image (max 4MB)</p>\n            </div>\n          </div>\n        ) : (\n          <div className=\"text-center space-y-4\">\n            <img src={preview} alt=\"Preview\" className=\"mx-auto max-h-40 rounded-xl shadow-md\" />\n            <Button variant=\"outline\" onClick={resetAnalyzer} className=\"text-pink-600\">\n              Choose a different photo\n            </Button>\n          </div>\n        )}\n      </div>\n\n      <Card className=\"glassmorphism cute-shadow overflow-hidden relative\">\n        {isBlurred && (\n          <div className=\"absolute inset-0 bg-white/80 backdrop-blur-[2px] z-10 flex items-center justify-center p-4\">\n            <div className=\"text-center\">\n              <div className=\"w-16 h-16 bg-gradient-to-r from-purple-400 to-pink-400 rounded-2xl flex items-center justify-center mx-auto mb-4 wiggle\">\n                <Crown className=\"w-8 h-8 text-white\" />\n              </div>\n              <h3 className=\"text-xl font-bold gradient-text mb-2\">Unlock Your Results ✨</h3>\n              <p className=\"text-gray-600 text-sm mb-4\">Upgrade to Premium to see your full analysis!</p>\n            </div>\n          </div>\n        )}\n        <CardContent className=\"p-6 grid md:grid-cols-2 gap-6 items-center\">\n          {preview ? (\n            <img src={preview} alt=\"Analyzed\" className=\"rounded-xl w-full h-auto object-cover shadow-lg\"/>\n          ) : (\n            <div className=\"bg-gradient-to-r from-pink-100 to-purple-100 rounded-xl p-6 text-center\">\n              <div className=\"text-6xl mb-4\">📸</div>\n              <p className=\"text-gray-600 font-medium\">Your photo will appear here!</p>\n            </div>\n          )}\n          <div className=\"space-y-6\">\n            <ScoreDisplay \n              label=\"Femininity Score\" \n              score={displayData.femininity_score} \n              color=\"text-pink-500\"\n              isBlurred={isBlurred}\n            />\n            <ScoreDisplay \n              label=\"Cute Score\" \n              score={displayData.cute_score} \n              color=\"text-purple-500\"\n              isBlurred={isBlurred}\n            />\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card className=\"glassmorphism cute-shadow relative\">\n        {isBlurred && (\n          <div className=\"absolute inset-0 bg-white/60 backdrop-blur-[1px] z-10\"></div>\n        )}\n        <CardContent className=\"p-6 space-y-4\">\n          <div>\n            <h3 className={`font-bold gradient-text text-xl mb-2 ${isBlurred ? 'blur-sm' : ''}`}>💖 What I Love! 💖</h3>\n            <ul className={`list-disc list-inside space-y-1 text-gray-600 font-medium ${isBlurred ? 'blur-sm' : ''}`}>\n              {displayData.key_features.map((item, i) => <li key={i}>{item}</li>)}\n            </ul>\n          </div>\n          <div>\n            <h3 className={`font-bold gradient-text text-xl mb-2 ${isBlurred ? 'blur-sm' : ''}`}>✨ Cute Suggestions ✨</h3>\n            <ul className={`list-disc list-inside space-y-1 text-gray-600 font-medium ${isBlurred ? 'blur-sm' : ''}`}>\n              {displayData.gentle_suggestions.map((item, i) => <li key={i}>{item}</li>)}\n            </ul>\n          </div>\n        </CardContent>\n      </Card>\n\n      <p className={`text-center text-gray-700 font-medium bg-gradient-to-r from-pink-100/70 to-purple-100/70 p-4 rounded-2xl border-2 border-pink-200/50 relative ${isBlurred ? 'blur-sm' : ''}`}>\n        \"{displayData.overall_comment}\"\n        {isBlurred && (\n          <div className=\"absolute inset-0 bg-white/40 rounded-2xl\"></div>\n        )}\n      </p>\n\n      {isLoading ? (\n        <div className=\"text-center p-8 space-y-4\">\n          <Loader2 className=\"w-12 h-12 text-pink-500 animate-spin mx-auto\"/>\n          <p className=\"text-lg font-bold text-gray-600\">{loadingStatus}</p>\n        </div>\n      ) : (\n        <div className=\"text-center space-y-4\">\n          <Button \n            onClick={handleAnalyze} \n            size=\"lg\" \n            className={`w-full cute-shadow text-lg py-6 hover:scale-105 transition-transform font-bold ${\n              (user?.is_premium || user?.is_ultra)\n                ? 'bg-gradient-to-r from-pink-500 to-purple-500' \n                : 'bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500'\n            }`}\n            disabled={!file && (user?.is_premium || user?.is_ultra)}\n          >\n            <Wand2 className=\"mr-2 h-5 w-5\"/>\n            {(user?.is_premium || user?.is_ultra)\n              ? \"Analyze My Glow! ✨\" \n              : \"Upgrade to Premium for Analysis! 👑\"\n            }\n          </Button>\n          {!user?.is_premium && !user?.is_ultra && (\n            <p className=\"text-sm text-gray-600\">\n              <Crown className=\"w-4 h-4 inline mr-1 text-yellow-500\" />\n              Premium subscription required to unlock AI photo analysis\n            </p>\n          )}\n        </div>\n      )}\n\n      {error && (\n        <p className=\"text-center text-red-500 bg-red-100 p-3 rounded-xl\">{error}</p>\n      )}\n    </div>\n  );\n}\n\nexport default function FeminizationAI() {\n  const [user, setUser] = useState(null);\n  const [isLoadingUser, setIsLoadingUser] = useState(true);\n\n  useEffect(() => {\n    const fetchUser = async () => {\n      try {\n        const currentUser = await User.me();\n        setUser(currentUser);\n      } catch (error) {\n        setUser(null);\n      } finally {\n        setIsLoadingUser(false);\n      }\n    };\n    fetchUser();\n  }, []);\n  \n  if (isLoadingUser) {\n    return (\n      <div className=\"flex items-center justify-center h-screen\">\n        <Loader2 className=\"w-12 h-12 animate-spin text-pink-500\" />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-4 md:p-6\">\n       <Tabs defaultValue=\"companion\" className=\"w-full\">\n        <TabsList className=\"grid w-full grid-cols-3 bg-pink-100/70 p-2 rounded-2xl h-14\">\n          <TabsTrigger value=\"companion\" className=\"py-3 rounded-xl text-pink-700 data-[state=active]:bg-white data-[state=active]:text-purple-700 data-[state=active]:shadow-md\">\n            <Sparkles className=\"w-5 h-5 mr-2\"/>\n            AI Companion\n          </TabsTrigger>\n          <TabsTrigger value=\"makeover\" className=\"py-3 rounded-xl text-pink-700 data-[state=active]:bg-white data-[state=active]:text-purple-700 data-[state=active]:shadow-md\">\n            <Palette className=\"w-5 h-5 mr-2\"/>\n            AI Makeover\n          </TabsTrigger>\n          <TabsTrigger value=\"analyzer\" className=\"py-3 rounded-xl text-pink-700 data-[state=active]:bg-white data-[state=active]:text-purple-700 data-[state=active]:shadow-md\">\n            <ImageIcon className=\"w-5 h-5 mr-2\"/>\n            Photo Analyzer\n          </TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"companion\" className=\"pt-6\">\n          <ChatCompanionTab user={user} />\n        </TabsContent>\n        <TabsContent value=\"makeover\" className=\"pt-6\">\n          <AITransformTab user={user} />\n        </TabsContent>\n        <TabsContent value=\"analyzer\" className=\"pt-6\">\n          <PhotoAnalyzerTab user={user} />\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n}\n","termsofservice":"import React from 'react';\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';\nimport { ShieldCheck } from 'lucide-react';\n\nexport default function TermsOfService() {\n  return (\n    <div className=\"p-4 md:p-6 lg:p-8 w-full max-w-4xl mx-auto\">\n      <div className=\"text-center mb-8 md:mb-12 relative\">\n        <h1 className=\"text-3xl md:text-4xl lg:text-5xl font-bold gradient-text\">Terms of Service</h1>\n        <p className=\"text-gray-600 text-lg md:text-xl mt-4 max-w-2xl mx-auto font-medium\">\n          Last updated: September 9, 2025\n        </p>\n      </div>\n\n      <Card className=\"glassmorphism cute-shadow\">\n        <CardHeader>\n          <CardTitle className=\"flex items-center gap-3 text-xl text-gray-700\">\n            <ShieldCheck className=\"w-6 h-6 text-pink-500\" />\n            GlowQuest Terms of Service\n          </CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-6 text-gray-600 leading-relaxed\">\n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">1. Introduction</h2>\n            <p>\n              Welcome to GlowQuest! These Terms of Service (\"Terms\") govern your access to and use of our app and services (\"Services\"). By accessing or using our Services, you agree to be bound by these Terms.\n            </p>\n          </section>\n\n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">2. Your Account</h2>\n            <p>\n              You are responsible for maintaining the security of your account. You agree that all information you provide to us is accurate and complete. We offer different membership tiers including free, Premium, and Ultra Glow options, each with varying features and access rights.\n            </p>\n          </section>\n\n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">3. User-Generated Content</h2>\n            <p>\n              You retain ownership of any content you post on the app, such as comments, photos, and reflections (\"User Content\"). However, you grant us a worldwide, royalty-free license to use, distribute, and display your User Content in connection with operating the Services. You are solely responsible for your User Content and warrant that you have all necessary rights to post it.\n            </p>\n          </section>\n\n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">4. Prohibited Conduct</h2>\n            <p>\n              You agree not to use the Services for any unlawful or prohibited purposes. This includes, but is not limited to: harassment, spamming, distributing hate speech, or posting explicit material. We reserve the right to suspend or terminate accounts that violate these rules.\n            </p>\n          </section>\n          \n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">5. Disclaimer</h2>\n            <p>\n              The Services are provided \"as is\" without any warranties. We make no guarantees regarding the accuracy, completeness, or reliability of the Services. GlowQuest is a personal development and entertainment app and does not constitute professional medical or psychological advice.\n            </p>\n          </section>\n\n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">6. Changes to Terms</h2>\n            <p>\n              We may modify these Terms from time to time. When we make changes, we will notify you by revising the date at the top of the Terms. Your continued use of the Services after such notification constitutes your agreement to the new Terms.\n            </p>\n          </section>\n\n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">7. Contact</h2>\n            <p>\n              If you have any questions about these Terms, please contact us through the support channels provided in the app.\n            </p>\n          </section>\n\n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">8. Payment Terms</h2>\n            <p>\n              Premium and Ultra Glow subscriptions are billed monthly through Stripe. You may cancel your subscription at any time through your account settings or by contacting customer support. Refunds are handled on a case-by-case basis according to our refund policy.\n            </p>\n          </section>\n\n          <section>\n            <h2 className=\"font-bold text-lg text-gray-800 mb-2\">9. Privacy</h2>\n            <p>\n              Your privacy is important to us. We collect and use your information in accordance with our Privacy Policy. By using our Services, you consent to the collection and use of your information as described in our Privacy Policy.\n            </p>\n          </section>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}","GlowConnect":"\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { User, ChatSession, ChatMessage, MatchQueue } from '@/entities/all';\nimport { UploadFile } from \"@/integrations/Core\";\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Badge } from '@/components/ui/badge';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n  Loader2, Sparkles, Heart, SkipForward, Crown, Zap, Settings,\n  Filter, MapPin, Languages, Send, MessageCircle, Clock, Star, ArrowLeft, Users, Video, MessageSquare, UploadCloud, Wrench\n} from 'lucide-react';\nimport { Link } from 'react-router-dom';\nimport { createPageUrl } from '@/utils';\nimport { format } from 'date-fns';\nimport CountdownTimer from '../components/glowconnect/CountdownTimer';\nimport { findMatch } from \"@/functions/findMatch\";\nimport { updateMyProfile } from \"@/functions/updateMyProfile\";\n\nconst mysteryPrompts = [\n  \"What's your cutest outfit right now? 👗\",\n  \"Give a compliment! 🌸\",\n  \"Show your favorite emoji ✨\",\n  \"What's your favorite song for the vibe? 🎶\",\n  \"Describe your perfect day in 3 words! 💖\",\n  \"What are you up to? 😊\",\n  \"Share a sweet secret! 🤫\",\n  \"What color matches your mood? 🌈\",\n  \"Tell me about your favorite memory!💭\"\n];\n\nconst getBotResponse = (userMessage = \"\") => {\n  const msg = userMessage.toLowerCase().trim();\n\n  if (msg.includes('femboy') || msg.includes('fem boy')) {\n    return \"yesss\";\n  }\n\n  if (msg.match(/^h(e|i)+y*$/i) || msg.match(/^h(i|e)+$/i) || msg === 'hello' || msg === 'wassup') {\n    return [\"hey\", \"hiii\", \"omg hi\", \"hey there\", \"wassup\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.includes('how are you') || msg.includes('how r u') || msg.includes('how r yo') || msg.includes('hru') || msg === 'wbu' || msg === 'hbu') {\n    return [\"good! u?\", \"im great wbu?\", \"pretty good! how r u?\", \"im doing well! u?\", \"good hbu?\"][Math.floor(Math.random() * 5)];\n  }\n  \n  if (msg.includes('what are you doing') || msg.includes('what u doing') || msg.includes('wyd')) {\n    return [\"chillin! u?\", \"nothing much, wbu?\", \"just talking to u cutie ;)\", \"bored lol hbu?\", \"thinking about what to wear later, u?\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.includes('how old') || (msg.includes('old') && msg.includes('r u')) || msg.includes('age')) {\n    return [\"18 wbu?\", \"19! u?\", \"17, how old r u?\", \"18! what about u?\", \"im 18! u?\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.includes('where') || msg.includes('from') || msg.includes('live')) {\n    return [\"california! u?\", \"texas wbu?\", \"florida! where r u from?\", \"new york! u?\", \"europe haha u?\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.includes('bot') || msg.includes('real') || msg.includes('fake')) {\n    return [\"lol what?\", \"ur weird lol\", \"why would u ask that??\", \"thats random\", \"haha no ur silly\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.includes('cute') || msg.includes('sweet') || msg.includes('nice') || msg.includes('beautiful')) {\n    return [\"aww ur too sweet\", \"thank u! ur so nice\", \"ur making me blush\", \"aww thank u cutie\", \"ur so sweet omg\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.includes('lol') || msg.includes('haha') || msg.includes('funny')) {\n    return [\"lol right?\", \"haha ikr\", \"lmao\", \"haha exactly\", \"lol same\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.startsWith('what')) {\n    return [\"hmm good question\", \"idk lol what about u?\", \"thats hard to answer\", \"not sure tbh u?\", \"good question! u?\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg === 'yes' || msg === 'yeah' || msg === 'same' || msg === 'yep') {\n    return [\"nice\", \"cool\", \"awesome\", \"sweet\", \"thats cool\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg === 'wdym' || msg === 'what do you mean' || msg.includes('wdym')) {\n    return [\"idk lol\", \"just asking\", \"nothing special haha\", \"ur cute thats what\", \"just wondering\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.length <= 3 && !msg.includes('how')) {\n    return [\"what r u up to?\", \"hows ur day?\", \"bored lol hbu?\", \"whats good?\", \"vibes?\"][Math.floor(Math.random() * 5)];\n  }\n\n  if (msg.length > 20) {\n    return [\"omg really?\", \"thats so cool\", \"no way\", \"wow interesting\", \"thats amazing\", \"wait what? lol\"][Math.floor(Math.random() * 6)];\n  }\n\n  const casualResponses = [\n    \"omg really?\", \"thats cool\", \"nice\", \"lol\", \n    \"what do u think?\", \"how r u?\", \n    \"whats ur vibe today?\", \"ur fun to talk to\", \"haha same\"\n  ];\n\n  return casualResponses[Math.floor(Math.random() * casualResponses.length)];\n};\n\nconst DailyLimitReached = ({ matchesUsed, maxMatches, onUpgrade }) => {\n  const getNextResetDate = () => {\n    const tomorrow = new Date();\n    tomorrow.setDate(tomorrow.getDate() + 1);\n    tomorrow.setHours(0, 0, 0, 0);\n    return tomorrow;\n  };\n\n  return (\n    <div className=\"text-center flex flex-col items-center justify-center h-full p-8\">\n      <div className=\"w-24 h-24 bg-gradient-to-r from-orange-400 to-red-400 rounded-2xl flex items-center justify-center mb-6 wiggle\">\n        <Clock className=\"w-12 h-12 text-white\" />\n      </div>\n      <h1 className=\"text-2xl md::text-3xl font-bold gradient-text mb-4\">Daily Limit Reached! ⏰</h1>\n      <p className=\"text-gray-600 max-w-md mx-auto mb-2 text-lg\">\n        You've used {matchesUsed}/{maxMatches} chats today!\n      </p>\n\n      <CountdownTimer targetDate={getNextResetDate()} />\n\n      <p className=\"text-gray-500 mb-6\">\n        Come back tomorrow for new chats or upgrade for unlimited access! 💕\n      </p>\n      <Button onClick={onUpgrade} className=\"bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white font-bold rounded-xl cute-shadow text-lg py-6 px-8 hover:scale-105 transition-transform\">\n        Upgrade to Premium! 👑\n      </Button>\n    </div>\n  );\n};\n\nconst SearchingOverlay = ({ onCancel, waitingTime }) => {\n  const [dots, setDots] = useState('');\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setDots(prev => prev.length >= 3 ? '' : prev + '.');\n    }, 500);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center\">\n      <Card className=\"glassmorphism cute-shadow border-2 border-pink-200/60 rounded-3xl max-w-md w-full mx-4\">\n        <CardContent className=\"p-8 text-center\">\n          <div className=\"w-20 h-20 bg-gradient-to-r from-pink-400 to-purple-400 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse\">\n            <Sparkles className=\"w-10 h-10 text-white\" />\n          </div>\n          <h3 className=\"text-2xl font-bold gradient-text mb-4\">Searching for cute members{dots} 💖</h3>\n          <p className=\"text-gray-600 mb-4\">Waiting for someone else to search! ✨</p>\n          <p className=\"text-sm text-gray-500 mb-6\">Search time: {Math.floor(waitingTime / 60)}:{(waitingTime % 60).toString().padStart(2, '0')}</p>\n          <div className=\"flex items-center justify-center gap-2 mb-6\">\n            <div className=\"w-2 h-2 bg-pink-400 rounded-full animate-bounce\"></div>\n            <div className=\"w-2 h-2 bg-purple-400 rounded-full animate-bounce\" style={{ animationDelay: '0.1s' }}></div>\n            <div className=\"w-2 h-2 bg-blue-400 rounded-full animate-bounce\" style={{ animationDelay: '0.2s' }}></div>\n          </div>\n          <Button variant=\"outline\" onClick={onCancel} className=\"border-pink-300 text-pink-700\">\n            Cancel Search\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  );\n};\n\nconst ChatInterface = ({ session, currentUser, onSkip, onNext }) => {\n  const [messages, setMessages] = useState([]);\n  const [newMessage, setNewMessage] = useState('');\n  const [isUploading, setIsUploading] = useState(false);\n  const [currentSessionData, setCurrentSessionData] = useState(session); // Initialize with prop\n  const messagesEndRef = useRef(null);\n  const fileInputRef = useRef(null);\n  const messageCheckInterval = useRef(null);\n  const sessionCheckInterval = useRef(null);\n  const botResponseTimeout = useRef(null);\n\n  const isBot = currentSessionData.has_bot_participant;\n\n  const otherUserIsPremium = currentUser.email === currentSessionData.participant_1_email ? currentSessionData.participant_2_is_premium : currentSessionData.participant_1_is_premium;\n  const otherUserIsUltra = currentUser.email === currentSessionData.participant_1_email ? currentSessionData.participant_2_is_ultra : currentSessionData.participant_1_is_ultra;\n\n  const loadMessages = useCallback(async () => {\n    try {\n      const sessionMessages = await ChatMessage.filter({ session_id: currentSessionData.id }, 'created_date');\n      \n      console.log('📨 [Session:', currentSessionData.id, '] Loaded messages:', sessionMessages.length);\n      sessionMessages.forEach(msg => {\n        console.log('  -', msg.sender_email, ':', msg.message?.substring(0, 30));\n      });\n      \n      return sessionMessages.map(msg => ({\n        id: msg.id,\n        sender_email: msg.sender_email,\n        message: msg.message,\n        message_type: msg.message_type,\n        image_url: msg.image_url,\n        created_date: msg.created_date\n      }));\n    } catch (error) {\n      console.error('Error loading messages:', error);\n      return [];\n    }\n  }, [currentSessionData.id]);\n\n  const triggerBotResponse = useCallback((userMessage = \"\") => {\n    if (!isBot) return;\n\n    if (botResponseTimeout.current) {\n      clearTimeout(botResponseTimeout.current);\n    }\n\n    if (Math.random() < 0.2) {\n      return;\n    }\n\n    const baseDelay = 3000;\n    const extraDelay = Math.random() * 12000;\n    const delay = baseDelay + extraDelay;\n\n    botResponseTimeout.current = setTimeout(async () => {\n      try {\n        const response = getBotResponse(userMessage);\n        \n        await ChatMessage.create({\n          session_id: currentSessionData.id,\n          sender_email: 'glowbot@system.com',\n          message: response,\n          message_type: 'text'\n        });\n\n        // Fetch latest session data again to ensure mystery_prompt is fresh\n        const sessionRefetch = await ChatSession.filter({ id: currentSessionData.id });\n        const latestSession = sessionRefetch.length > 0 ? sessionRefetch[0] : currentSessionData;\n\n        const updatedMessages = await loadMessages();\n        const systemMessage = {\n          id: 'system-1',\n          sender_email: 'system',\n          message: `Mystery Prompt: ${latestSession.mystery_prompt} 💖`,\n          message_type: 'system',\n          created_date: new Date().toISOString()\n        };\n        const filteredMessages = updatedMessages.filter(msg => msg.id !== 'system-1');\n        setMessages([systemMessage, ...filteredMessages]);\n\n      } catch (error) {\n        console.error('Error sending bot message:', error);\n      }\n    }, delay);\n  }, [isBot, currentSessionData.id, currentSessionData.mystery_prompt, loadMessages]);\n\n\n  useEffect(() => {\n    const updateMessages = async () => {\n      // Reload session data to get latest mystery_prompt\n      const sessionData = await ChatSession.filter({ id: session.id });\n      if (sessionData.length > 0) {\n        setCurrentSessionData(sessionData[0]); // Update session data state\n        \n        const fetchedMessages = await loadMessages();\n        const systemMessage = {\n          id: 'system-1',\n          sender_email: 'system',\n          message: `Mystery Prompt: ${sessionData[0].mystery_prompt} 💖`,\n          message_type: 'system',\n          created_date: new Date().toISOString()\n        };\n        const filteredFetchedMessages = fetchedMessages.filter(msg => msg.id !== 'system-1');\n        setMessages([systemMessage, ...filteredFetchedMessages]);\n        \n        console.log('✅ [Session:', sessionData[0].id, '] Messages updated, total:', filteredFetchedMessages.length + 1);\n        console.log('   Mystery Prompt:', sessionData[0].mystery_prompt);\n        console.log('   Participant 1:', sessionData[0].participant_1_email);\n        console.log('   Participant 2:', sessionData[0].participant_2_email);\n      }\n    };\n\n    updateMessages();\n    \n    // Poll for new messages every 1.5 seconds (faster!)\n    messageCheckInterval.current = setInterval(updateMessages, 1500);\n\n    const checkSessionStatus = async () => {\n      try {\n        const updatedSessions = await ChatSession.filter({ id: session.id });\n        if (updatedSessions.length === 0 || updatedSessions[0].status === 'ended') {\n          if (sessionCheckInterval.current) clearInterval(sessionCheckInterval.current);\n          if (messageCheckInterval.current) clearInterval(messageCheckInterval.current);\n          if (botResponseTimeout.current) clearTimeout(botResponseTimeout.current);\n          onNext();\n        }\n      } catch (error) {\n        console.error(\"Error checking session status:\", error);\n      }\n    };\n    sessionCheckInterval.current = setInterval(checkSessionStatus, 5000);\n\n    return () => {\n      if (messageCheckInterval.current) clearInterval(messageCheckInterval.current);\n      if (sessionCheckInterval.current) clearInterval(sessionCheckInterval.current);\n      if (botResponseTimeout.current) clearTimeout(botResponseTimeout.current);\n    };\n  }, [session.id, loadMessages, onNext]); // session.id is stable from prop\n\n  useEffect(() => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  }, [messages, isUploading]);\n\n  const sendMessage = async () => {\n    if (!newMessage.trim() || isUploading) return;\n\n    const messageContent = newMessage.trim();\n    const optimisticMessage = {\n      id: `temp_${Date.now()}`,\n      sender_email: currentUser.email,\n      message: messageContent,\n      message_type: 'text',\n      created_date: new Date().toISOString()\n    };\n    \n    setMessages(prev => [...prev, optimisticMessage]);\n    setNewMessage('');\n    \n    console.log('📤 [Session:', currentSessionData.id, '] Sending message:', messageContent);\n    \n    try {\n      const createdMessage = await ChatMessage.create({\n        session_id: currentSessionData.id,\n        sender_email: currentUser.email,\n        message: messageContent,\n        message_type: 'text'\n      });\n      \n      console.log('✅ Message sent, ID:', createdMessage.id);\n      \n      if (isBot) {\n        triggerBotResponse(messageContent);\n      }\n      \n      // Force reload messages after sending and update currentSessionData if necessary\n      const sessionData = await ChatSession.filter({ id: currentSessionData.id });\n      if (sessionData.length > 0) {\n        setCurrentSessionData(sessionData[0]); // Update session data state\n        const updatedMessages = await loadMessages();\n        const systemMessage = {\n          id: 'system-1',\n          sender_email: 'system',\n          message: `Mystery Prompt: ${sessionData[0].mystery_prompt} 💖`,\n          message_type: 'system',\n          created_date: new Date().toISOString()\n        };\n        const filteredMessages = updatedMessages.filter(msg => msg.id !== 'system-1');\n        setMessages([systemMessage, ...filteredMessages]);\n      }\n      \n    } catch (error) {\n      console.error('Error sending message:', error);\n      setMessages(prev => prev.filter(msg => msg.id !== optimisticMessage.id));\n      setNewMessage(messageContent);\n    }\n  };\n\n  const handleImageUpload = async (event) => {\n    const file = event.target.files[0];\n    if (!file) return;\n\n    setIsUploading(true);\n    try {\n      const uploadResult = await UploadFile({ file });\n      await ChatMessage.create({\n        session_id: currentSessionData.id,\n        sender_email: currentUser.email,\n        message_type: 'image',\n        image_url: uploadResult.file_url,\n      });\n      \n      // Reload messages and update currentSessionData if necessary\n      const sessionData = await ChatSession.filter({ id: currentSessionData.id });\n      if (sessionData.length > 0) {\n        setCurrentSessionData(sessionData[0]); // Update session data state\n        const updatedMessages = await loadMessages();\n        const systemMessage = {\n          id: 'system-1',\n          sender_email: 'system',\n          message: `Mystery Prompt: ${sessionData[0].mystery_prompt} 💖`,\n          message_type: 'system',\n          created_date: new Date().toISOString()\n        };\n        const filteredMessages = updatedMessages.filter(msg => msg.id !== 'system-1');\n        setMessages([systemMessage, ...filteredMessages]);\n      }\n      \n    } catch (error) {\n      console.error('Error uploading image:', error);\n    } finally {\n      if(fileInputRef.current) fileInputRef.current.value = \"\";\n      setIsUploading(false);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col h-[calc(100vh-200px)] bg-transparent relative\">\n      <div className=\"bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 text-white p-4 rounded-t-2xl\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"w-10 h-10 bg-white/30 rounded-full flex items-center justify-center\">\n              <MessageCircle className=\"w-5 h-5\" />\n            </div>\n            <div>\n              <h3 className=\"font-bold flex items-center gap-2\">\n                {isBot ? \"Cute Anonymous Friend 💕\" : \"Anonymous Cutie 💕\"}\n                {otherUserIsUltra && (\n                  <Badge className=\"bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white font-bold border-none text-xs\">\n                    <Zap className=\"w-3 h-3 mr-1\" />\n                    Ultra\n                  </Badge>\n                )}\n                {otherUserIsPremium && !otherUserIsUltra && (\n                  <Badge className=\"bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold border-none text-xs\">\n                    <Crown className=\"w-3 h-3 mr-1\" />\n                    Premium\n                  </Badge>\n                )}\n              </h3>\n              <p className=\"text-sm opacity-90\">Connected via GlowConnect</p>\n            </div>\n          </div>\n          <div className=\"text-center\">\n            <div className={`text-2xl font-bold`}>\n              Unlimited Time\n            </div>\n            <p className=\"text-xs opacity-80\">Chat freely!</p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto p-4 space-y-3 bg-gradient-to-b from-pink-50/50 to-purple-50/30\">\n        {messages.map(msg => (\n          <div key={msg.id} className={`flex ${msg.message_type === 'system' ? 'justify-center' : msg.sender_email === currentUser.email ? 'justify-end' : 'justify-start'}`}>\n            <div className={`max-w-[80%] p-3 rounded-2xl ${\n              msg.message_type === 'system'\n                ? 'bg-gradient-to-r from-yellow-200 to-orange-200 text-gray-800 text-center font-medium'\n                : msg.message_type === 'image'\n                  ? 'p-1 bg-transparent'\n                  : msg.sender_email === currentUser.email\n                    ? 'bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-br-lg'\n                    : 'bg-white border border-pink-200 text-gray-800 rounded-bl-lg'\n            }`}>\n              {msg.message_type === 'image' ? (\n                 <a href={msg.image_url} target=\"_blank\" rel=\"noopener noreferrer\">\n                    <img src={msg.image_url} alt=\"Shared content\" className=\"rounded-xl max-w-full h-auto max-h-64 object-contain\" />\n                 </a>\n              ) : (\n                msg.message\n              )}\n            </div>\n          </div>\n        ))}\n        <div ref={messagesEndRef} />\n      </div>\n\n      <div className=\"p-4 bg-white/70 backdrop-blur border-t border-pink-200/50\">\n        <div className=\"flex items-center gap-3 mb-3\">\n          <input type=\"file\" ref={fileInputRef} onChange={handleImageUpload} accept=\"image/*\" className=\"hidden\" />\n          <Button onClick={() => fileInputRef.current?.click()} variant=\"ghost\" size=\"icon\" className=\"rounded-full\" disabled={isUploading}>\n            {isUploading ? <Loader2 className=\"w-5 h-5 animate-spin\" /> : <UploadCloud className=\"w-5 h-5 text-pink-600\" />}\n          </Button>\n          <Input\n            placeholder=\"Write something cute... 💖\"\n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            onKeyPress={(e) => e.key === 'Enter' && sendMessage()}\n            className=\"flex-1 rounded-xl border-pink-200\"\n            disabled={isUploading}\n          />\n          <Button onClick={sendMessage} className=\"bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-xl px-6\" disabled={isUploading}>\n            <Send className=\"w-4 h-4\" />\n          </Button>\n        </div>\n\n        <div className=\"flex gap-3\">\n          <Button variant=\"outline\" onClick={onSkip} className=\"flex-1 border-gray-300 text-gray-600 rounded-xl\">\n            <SkipForward className=\"w-4 h-4 mr-2\" />\n            Skip & Find New Chat\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default function GlowConnect() {\n  const [user, setUser] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [isSearching, setIsSearching] = useState(false);\n  const [currentSession, setCurrentSession] = useState(null);\n  const [matchesUsed, setMatchesUsed] = useState(0);\n  const [queueEntry, setQueueEntry] = useState(null);\n  const [waitingTime, setWaitingTime] = useState(0);\n  const [selectedMode, setSelectedMode] = useState(null);\n  const searchInterval = useRef(null);\n  const waitingTimer = useRef(null);\n  const botMatchTimer = useRef(null);\n\n  const MAX_DAILY_MATCHES = 3;\n\n  useEffect(() => {\n    const fetchUser = async () => {\n      try {\n        const currentUser = await User.me();\n        setUser(currentUser);\n\n        const today = new Date().toDateString();\n        const lastReset = currentUser.last_glow_connect_reset ? new Date(currentUser.last_glow_connect_reset).toDateString() : null;\n        if (lastReset !== today) {\n          await updateMyProfile({\n            glow_connect_matches_today: 0,\n            last_glow_connect_reset: new Date().toISOString()\n          });\n          setMatchesUsed(0);\n        } else {\n          setMatchesUsed(currentUser.glow_connect_matches_today || 0);\n        }\n      } catch (error) {\n        setUser(null);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    fetchUser();\n  }, []);\n\n  const stopSearching = useCallback(() => {\n    setIsSearching(false);\n    setWaitingTime(0);\n    if (searchInterval.current) {\n      clearInterval(searchInterval.current);\n      searchInterval.current = null;\n    }\n    if (waitingTimer.current) {\n      clearInterval(waitingTimer.current);\n      waitingTimer.current = null;\n    }\n    if (botMatchTimer.current) {\n      clearTimeout(botMatchTimer.current);\n      botMatchTimer.current = null;\n    }\n  }, []);\n\n  const createBotMatch = useCallback(async (entryForBotMatch) => {\n    if (!user || !entryForBotMatch) return;\n    \n    try {\n      const latestEntryState = await MatchQueue.filter({ id: entryForBotMatch.id });\n      if (latestEntryState.length === 0 || latestEntryState[0].status === 'matched') {\n          stopSearching();\n          return;\n      }\n        \n      const randomPrompt = mysteryPrompts[Math.floor(Math.random() * mysteryPrompts.length)];\n      const newSession = await ChatSession.create({\n        participant_1_email: user.email,\n        participant_2_email: 'glowbot@system.com',\n        mystery_prompt: randomPrompt,\n        status: 'active',\n        mode: selectedMode,\n        has_bot_participant: true,\n        participant_1_is_premium: user.is_premium,\n        participant_1_is_ultra: user.is_ultra,\n        participant_2_is_premium: true,\n        participant_2_is_ultra: false,\n      });\n\n      if (entryForBotMatch?.id) {\n        try {\n          await MatchQueue.update(entryForBotMatch.id, { status: 'matched', session_id: newSession.id });\n        } catch (deleteError) {\n          console.warn('Error updating queue entry for bot match:', deleteError);\n        }\n      }\n\n      stopSearching();\n      setCurrentSession(newSession);\n\n      if (!user.is_premium) {\n        const newCount = (matchesUsed || 0) + 1;\n        setMatchesUsed(newCount);\n        await updateMyProfile({ glow_connect_matches_today: newCount });\n      }\n\n    } catch (error) {\n      console.error('Error creating bot match:', error);\n      stopSearching();\n    }\n  }, [user, selectedMode, matchesUsed, stopSearching]);\n\n  const checkForMatch = useCallback(async (myQueueEntry) => {\n    if (!myQueueEntry || !user) return;\n\n    try {\n      console.log('Checking for match...', myQueueEntry.id);\n      \n      const response = await findMatch({\n        queue_entry_id: myQueueEntry.id,\n        mode: myQueueEntry.mode\n      });\n\n      const result = response.data;\n      console.log('Match result:', result);\n\n      if (result.status === 'matched') {\n        console.log('MATCHED! Session:', result.session_id);\n        stopSearching();\n        if (botMatchTimer.current) clearTimeout(botMatchTimer.current);\n        \n        const sessions = await ChatSession.filter({ id: result.session_id });\n        if (sessions.length > 0) {\n          setCurrentSession(sessions[0]);\n          if (!user.is_premium) {\n            const newCount = (matchesUsed || 0) + 1;\n            setMatchesUsed(newCount);\n            await updateMyProfile({ glow_connect_matches_today: newCount });\n          }\n        }\n      }\n    } catch (error) {\n      console.error('Match error:', error);\n    }\n  }, [user, matchesUsed, stopSearching]);\n\n  const startNewMatch = async () => {\n    if (!selectedMode) {\n      console.error(\"No chat mode selected.\");\n      return;\n    }\n\n    if (user && !user.is_premium && matchesUsed >= MAX_DAILY_MATCHES) {\n      return;\n    }\n\n    if (currentSession) {\n      try {\n        await ChatSession.update(currentSession.id, {\n          status: 'ended',\n          ended_at: new Date().toISOString()\n        });\n      } catch (error) {\n        console.error('Error ending previous session:', error);\n      }\n    }\n    setCurrentSession(null); \n    stopSearching(); \n\n    setIsSearching(true);\n    setWaitingTime(0);\n\n    try {\n      // Lösche alte Entries\n      const oldEntries = await MatchQueue.filter({ user_email: user.email });\n      for (const entry of oldEntries) {\n        try {\n          await MatchQueue.delete(entry.id);\n        } catch (deleteError) {\n          if (!deleteError.message?.includes('not found')) {\n            console.warn('Error deleting old queue entry:', deleteError);\n          }\n        }\n      }\n\n      const newQueueEntry = await MatchQueue.create({\n        user_email: user.email,\n        user_name: user.full_name || user.email,\n        status: 'waiting', \n        search_timestamp: new Date().toISOString(),\n        mode: selectedMode,\n      });\n      \n      console.log('Created queue entry:', newQueueEntry.id);\n      setQueueEntry(newQueueEntry);\n\n      waitingTimer.current = setInterval(() => setWaitingTime(prev => prev + 1), 1000);\n      \n      // SOFORT checken nach 1 Sekunde\n      setTimeout(() => checkForMatch(newQueueEntry), 1000);\n      \n      // Dann alle 2 Sekunden checken (häufiger!)\n      searchInterval.current = setInterval(() => checkForMatch(newQueueEntry), 2000);\n      \n      // Bot Match nach 3 Minuten\n      botMatchTimer.current = setTimeout(() => createBotMatch(newQueueEntry), 180000);\n\n    } catch (error) {\n      console.error('Error starting match:', error);\n      stopSearching();\n    }\n  };\n\n  const cancelSearch = useCallback(async () => {\n    stopSearching();\n    try {\n      if (queueEntry?.id) {\n        await MatchQueue.delete(queueEntry.id);\n      }\n      setQueueEntry(null);\n    } catch (error) {\n      // Ignore if entry not found, it might have been deleted by a match\n      if (!error.message?.includes('not found')) {\n        console.warn('Error cancelling search:', error);\n      }\n    }\n  }, [queueEntry, stopSearching]);\n\n  const handleSkip = async () => {\n    if (currentSession) {\n      try {\n        await ChatSession.update(currentSession.id, {\n          status: 'ended',\n          ended_at: new Date().toISOString()\n        });\n      } catch (error) {\n        console.error('Error skipping:', error);\n      } finally {\n        setCurrentSession(null);\n        startNewMatch();\n      }\n    }\n  };\n\n  const handleNext = () => {\n    setCurrentSession(null);\n    startNewMatch();\n  };\n\n  const ModeSelectionScreen = () => (\n    <div className=\"p-4 space-y-6\">\n       <div className=\"text-center space-y-4\">\n          <div className=\"relative\">\n            <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-4\">\n              <span className=\"text-3xl bounce-cute\">💫</span>\n            </div>\n            <h1 className=\"text-2xl md:text-3xl font-bold gradient-text mt-6\">✨ Choose Your Vibe ✨</h1>\n          </div>\n          <p className=\"text-gray-600 text-base max-w-sm mx-auto\">\n            How do you want to connect with other cuties today? 💕\n          </p>\n        </div>\n\n        <div className=\"grid md:grid-cols-3 gap-6 max-w-6xl mx-auto\">\n          <motion.div whileHover={{ scale: 1.05 }}>\n             <Card\n                className=\"glassmorphism cute-shadow cursor-pointer hover:border-pink-400 transition-all duration-300 border-2 border-pink-200/50 h-full\"\n                onClick={() => setSelectedMode('text')}\n             >\n                <CardContent className=\"p-8 text-center flex flex-col items-center\">\n                    <div className=\"w-20 h-20 bg-gradient-to-r from-pink-300 to-rose-300 rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute\">\n                        <MessageSquare className=\"w-10 h-10 text-white\" />\n                    </div>\n                    <h3 className=\"text-2xl font-bold gradient-text mb-4\">Text & Photo Chat</h3>\n                    <p className=\"text-gray-600 leading-relaxed flex-grow\">\n                        Classic anonymous chat. Share text messages and cute photos with your match!\n                    </p>\n                </CardContent>\n             </Card>\n          </motion.div>\n\n          <motion.div whileHover={{ scale: 1.05 }}>\n             <Card\n                className={`glassmorphism cute-shadow transition-all duration-300 border-2 h-full relative ${\n                    !user?.is_premium\n                        ? 'cursor-pointer hover:border-purple-400 border-purple-200/50'\n                        : 'cursor-not-allowed border-orange-300/50'\n                }`}\n                onClick={() => {\n                    if (user?.is_premium) {\n                        alert(\"This feature is currently under maintenance for upgrades! 💖 It will be back soon, cutie! ✨\");\n                    } else {\n                        window.location.href = createPageUrl('Premium');\n                    }\n                }}\n             >\n                {user?.is_premium ? (\n                    <Badge className=\"absolute top-4 right-4 bg-gradient-to-r from-orange-400 to-red-400 text-white font-bold\">Under Maintenance 🛠️</Badge>\n                ) : (\n                    <Badge className=\"absolute top-4 right-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold\">Premium Only! 👑</Badge>\n                )}\n                <CardContent className={`p-8 text-center flex flex-col items-center ${!user?.is_premium ? 'opacity-60' : ''}`}>\n                    {user?.is_premium ? (\n                        <>\n                            <div className=\"w-20 h-20 bg-gradient-to-r from-orange-300 to-yellow-300 rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute\">\n                                <Wrench className=\"w-10 h-10 text-white\" />\n                            </div>\n                            <h3 className=\"text-2xl font-bold gradient-text mb-4\">Voice Chat</h3>\n                            <p className=\"text-gray-600 leading-relaxed flex-grow mb-4\">\n                                We're making some magical upgrades! This feature will be back online soon, even better than before! ✨\n                            </p>\n                        </>\n                    ) : (\n                        <>\n                            <div className=\"w-20 h-20 bg-gradient-to-r from-purple-400 to-indigo-400 rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute\">\n                                <svg className=\"w-10 h-10 text-white\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                    <path fillRule=\"evenodd\" d=\"M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 10 10-2 0A5 5 0 015 8a1 10 10-2 0 7.001 19.93 0 006 6.93V17H6a1 10 100 2h8a1 10 100-2h-3v-2.07z\" clipRule=\"evenodd\" />\n                                </svg>\n                            </div>\n                            <h3 className=\"text-2xl font-bold gradient-text mb-4\">Voice Chat</h3>\n                            <p className=\"text-gray-600 leading-relaxed flex-grow mb-4\">\n                                Talk to other cuties with your voice! Anonymous audio chat for deeper connections.\n                            </p>\n                            <Button className=\"mt-auto bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-xl cute-shadow\">\n                                <Crown className=\"w-4 h-4 mr-2\" />\n                                Upgrade Now! ✨\n                            </Button>\n                        </>\n                    )}\n                </CardContent>\n             </Card>\n          </motion.div>\n\n          <motion.div whileHover={{ scale: 1.05 }}>\n             <Card\n                className={`glassmorphism cute-shadow transition-all duration-300 border-2 h-full relative ${\n                    !user?.is_premium\n                        ? 'cursor-pointer hover:border-orange-400 border-orange-200/50'\n                        : 'cursor-not-allowed border-orange-300/50'\n                }`}\n                 onClick={() => {\n                    if (user?.is_premium) {\n                        alert(\"This feature is currently under maintenance for upgrades! 💖 It will be back soon, cutie! ✨\");\n                    } else {\n                        window.location.href = createPageUrl('Premium');\n                    }\n                }}\n             >\n                {user?.is_premium ? (\n                    <Badge className=\"absolute top-4 right-4 bg-gradient-to-r from-orange-400 to-red-400 text-white font-bold\">Under Maintenance 🛠️</Badge>\n                ) : (\n                    <Badge className=\"absolute top-4 right-4 bg-gradient-to-r from-orange-500 to-red-500 text-white font-bold\">Premium Only! 👑</Badge>\n                )}\n                <CardContent className={`p-8 text-center flex flex-col items-center ${!user?.is_premium ? 'opacity-60' : ''}`}>\n                    {user?.is_premium ? (\n                        <>\n                            <div className=\"w-20 h-20 bg-gradient-to-r from-orange-300 to-yellow-300 rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute\">\n                                <Wrench className=\"w-10 h-10 text-white\" />\n                            </div>\n                            <h3 className=\"2xl font-bold gradient-text mb-4\">Live Video Chat</h3>\n                            <p className=\"text-gray-600 leading-relaxed flex-grow mb-4\">\n                                We're polishing our lenses! This feature is getting a glow-up and will be back online soon for you! ✨\n                            </p>\n                        </>\n                    ) : (\n                        <>\n                            <div className=\"w-20 h-20 bg-gradient-to-r from-orange-400 to-red-400 rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute\">\n                                <Video className=\"w-10 h-10 text-white\" />\n                            </div>\n                            <h3 className=\"text-2xl font-bold gradient-text mb-4\">Live Video Chat</h3>\n                            <p className=\"text-gray-600 leading-relaxed flex-grow mb-4\">\n                                Connect face-to-face in a live, anonymous video call! The ultimate connection experience.\n                            </p>\n                            <Button className=\"mt-auto bg-gradient-to-r from-orange-500 to-red-500 text-white font-bold rounded-xl cute-shadow\">\n                                <Crown className=\"w-4 h-4 mr-2\" />\n                                Upgrade Now! ✨\n                            </Button>\n                        </>\n                    )}\n                </CardContent>\n             </Card>\n          </motion.div>\n        </div>\n    </div>\n  );\n\n  const MainInterface = () => (\n     <div className=\"w-full max-w-2xl mx-auto\">\n      {isSearching && <SearchingOverlay onCancel={cancelSearch} waitingTime={waitingTime} />}\n\n      <div className=\"p-4 space-y-6\">\n        <Button variant=\"ghost\" onClick={() => setSelectedMode(null)} className=\"flex items-center gap-2 text-pink-600\">\n            <ArrowLeft className=\"w-4 h-4\"/> Back to Mode Selection\n         </Button>\n        <div className=\"text-center space-y-4\">\n          <div className=\"relative\">\n            <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-4\">\n              <span className=\"text-3xl bounce-cute\">💫</span>\n            </div>\n            <h1 className=\"text-2xl md:text-3xl font-bold gradient-text mt-6\">✨ GlowConnect ✨</h1>\n          </div>\n          <p className=\"text-gray-600 text-base max-w-sm mx-auto\">\n            Chat anonymously with other cute members! The chat has no time limit. 💕\n          </p>\n        </div>\n\n        <div className=\"flex justify-center gap-3\">\n          {!user?.is_premium ? (\n            <Badge className=\"bg-gradient-to-r from-gray-200 to-pink-200 text-gray-800 border border-gray-300/50 px-3 py-2 text-xs\">\n              <Clock className=\"w-3 h-3 mr-1\" />\n              {matchesUsed}/{MAX_DAILY_MATCHES} Chats Today\n            </Badge>\n          ) : (\n            <Badge className=\"bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800 border border-purple-300/50 px-3 py-2 text-xs\">\n              <Crown className=\"w-3 h-3 mr-1\" />\n              Unlimited Chats\n            </Badge>\n          )}\n          {user?.is_ultra && (\n            <Badge className=\"bg-gradient-to-r from-yellow-200 to-orange-200 text-orange-800 border border-orange-300/50 px-3 py-2 text-xs\">\n              <Zap className=\"w-3 h-3 mr-1\" />\n              GlowBoost\n            </Badge>\n          )}\n        </div>\n\n        <Card className=\"glassmorphism cute-shadow border-2 border-pink-200/50 rounded-2xl\">\n          <CardContent className=\"p-6 text-center\">\n            <div className=\"w-16 h-16 bg-gradient-to-r from-pink-400 to-purple-400 rounded-2xl flex items-center justify-center mx-auto mb-4 bounce-cute\">\n              <MessageCircle className=\"w-8 h-8 text-white\" />\n            </div>\n\n            <h3 className=\"text-xl font-bold gradient-text mb-3\">Ready for new connections? 💖</h3>\n            <p className=\"text-gray-600 mb-6 text-sm\">\n              Click \"Start\" and wait for someone else to search for a {selectedMode} chat!\n            </p>\n\n            <div className=\"space-y-3\">\n              <Button\n                onClick={startNewMatch}\n                size=\"lg\"\n                className=\"w-full bg-gradient-to-r from-pink-500 via-purple-500 to-purple-500 text-white font-bold py-4 text-base rounded-2xl cute-shadow hover:scale-105 transition-transform\"\n              >\n                <Sparkles className=\"w-5 h-5 mr-2\" />\n                Start Chat! ✨\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n\n        <div className=\"grid grid-cols-1 gap-3\">\n          <Card className=\"glassmorphism border border-pink-200/50 rounded-xl\">\n            <CardContent className=\"p-4 text-center\">\n              <Clock className=\"w-6 h-6 text-pink-500 mx-auto mb-2\" />\n              <h4 className=\"font-bold text-gray-800 mb-1 text-sm\">Unlimited Time</h4>\n              <p className=\"text-xs text-gray-600\">Chat until one of you skips!</p>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center h-[calc(100vh-200px)]\">\n        <Loader2 className=\"w-12 h-12 animate-spin text-pink-500\" />\n      </div>\n    );\n  }\n\n  if (user && !user.is_premium && matchesUsed >= MAX_DAILY_MATCHES) {\n    return <DailyLimitReached\n      matchesUsed={matchesUsed}\n      maxMatches={MAX_DAILY_MATCHES}\n      onUpgrade={() => window.location.href = createPageUrl('Premium')}\n    />;\n  }\n\n  if (currentSession) {\n    return <ChatInterface\n      session={currentSession}\n      currentUser={user}\n      onSkip={handleSkip}\n      onNext={handleNext}\n    />;\n  }\n\n  if (!selectedMode) {\n    return <ModeSelectionScreen />;\n  }\n\n  return <MainInterface />;\n}\n","Index":"import React from \"react\";\nimport GlowConnect from \"./GlowConnect\";\n\nexport default function Index() {\n  // No user check needed here - Layout already handles authentication\n  // Just show GlowConnect directly\n  return <GlowConnect />;\n}","Community":"\nimport React, { useState, useEffect, useCallback } from \"react\";\nimport { User } from \"@/entities/User\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Users, MessageCircle, Clock, Star, Crown, Heart, ExternalLink, Loader2, Vote } from \"lucide-react\";\nimport { Link } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\nimport { Progress } from \"@/components/ui/progress\";\n\n// Community Poll Component\nconst CommunityPoll = () => {\n  const [user, setUser] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });\n\n  useEffect(() => {\n    const init = async () => {\n      try {\n        const currentUser = await User.me();\n        setUser(currentUser);\n      } catch (e) {\n        // Not logged in\n      }\n      setIsLoading(false);\n    };\n    init();\n\n    // Set target date to 30 days from now relative to when the component mounts\n    // This creates a consistent 30-day countdown from first render.\n    // To make it persist across refreshes, you might store targetDate in localStorage or fetch from a server.\n    const now = new Date();\n    const targetDate = new Date(now.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 days from now\n\n    const updateCountdown = () => {\n      const currentTime = new Date().getTime();\n      const targetTime = targetDate.getTime();\n      const difference = targetTime - currentTime;\n\n      if (difference > 0) {\n        const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));\n        const seconds = Math.floor((difference % (1000 * 60)) / 1000);\n        setTimeLeft({ days, hours, minutes, seconds });\n      } else {\n        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });\n      }\n    };\n\n    updateCountdown(); // Initial call\n    const interval = setInterval(updateCountdown, 1000);\n\n    return () => clearInterval(interval); // Cleanup interval on unmount\n  }, []); // Empty dependency array means this runs once on mount\n\n  // Fixed results - Discord wins! (More realistic numbers)\n  const discordVotes = 167;\n  const inAppChatVotes = 124;\n  const totalVotes = discordVotes + inAppChatVotes;\n  const discordPercentage = (discordVotes / totalVotes) * 100;\n  const inAppChatPercentage = (inAppChatVotes / totalVotes) * 100;\n\n  return (\n    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.1 }}>\n      <Card className=\"glassmorphism cute-shadow border-2 border-green-300/60 rounded-3xl overflow-hidden relative\">\n        <div className=\"absolute top-4 right-4\">\n          <Badge className=\"bg-gradient-to-r from-purple-500 to-indigo-500 text-white font-bold px-3 py-1 rounded-full cute-shadow bounce-cute\">\n            🎉 DISCORD WINS! 🎉\n          </Badge>\n        </div>\n        <CardContent className=\"p-8 text-center\">\n          <div className=\"w-24 h-24 bg-gradient-to-r from-purple-400 via-indigo-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 wiggle\">\n            {/* Discord Icon SVG */}\n            <svg className=\"w-12 h-12 text-white\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path d=\"M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.031zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418Z\"/>\n            </svg>\n          </div>\n          <h2 className=\"text-2xl md:text-3xl font-bold gradient-text mb-4\">🎉 The Community Has Decided! 🎉</h2>\n          <p className=\"text-gray-600 text-base md:text-lg mb-6 max-w-md mx-auto leading-relaxed\">\n            Discord Server won the vote! Get ready for our amazing new community space! 💖\n          </p>\n\n          {isLoading ? (\n            <div className=\"flex justify-center items-center h-32\">\n              <Loader2 className=\"w-8 h-8 animate-spin text-pink-500\" />\n            </div>\n          ) : (\n            <div className=\"space-y-6\">\n              <div className=\"bg-gradient-to-r from-purple-100/70 to-indigo-100/70 border-2 border-purple-200/50 rounded-2xl p-6\">\n                <h3 className=\"font-bold text-lg text-purple-800 mb-4 flex items-center justify-center gap-2\">\n                  👑 Final Results 👑\n                </h3>\n                \n                <div className=\"space-y-4\">\n                  <div>\n                    <div className=\"flex justify-between items-center mb-2\">\n                      <div className=\"flex items-center gap-2\">\n                        <span className=\"text-2xl\">💬</span>\n                        <span className=\"font-bold text-purple-700\">Discord Server</span>\n                        <Badge className=\"bg-purple-500 text-white text-xs px-2 py-1 rounded-full\">WINNER! 🏆</Badge>\n                      </div>\n                      <span className=\"font-bold text-lg text-purple-700\">{Math.round(discordPercentage)}%</span>\n                    </div>\n                    <Progress value={discordPercentage} className=\"h-4\" indicatorClassName=\"bg-gradient-to-r from-purple-400 to-indigo-500\" />\n                    <p className=\"text-xs text-gray-600 mt-1\">{discordVotes} votes</p>\n                  </div>\n                  \n                  <div>\n                    <div className=\"flex justify-between items-center mb-2\">\n                      <div className=\"flex items-center gap-2\">\n                        <span className=\"text-2xl\">💬</span>\n                        <span className=\"font-bold text-pink-700\">In-App Community Chat</span>\n                      </div>\n                      <span className=\"font-bold text-lg text-pink-700\">{Math.round(inAppChatPercentage)}%</span>\n                    </div>\n                    <Progress value={inAppChatPercentage} className=\"h-4\" indicatorClassName=\"bg-gradient-to-r from-pink-400 to-rose-500\" />\n                    <p className=\"text-xs text-gray-600 mt-1\">{inAppChatVotes} votes</p>\n                  </div>\n                </div>\n                \n                <div className=\"mt-6 p-4 bg-white/70 rounded-xl\">\n                  <p className=\"font-bold text-gray-700\">Total Votes: {totalVotes}</p>\n                  <p className=\"text-sm text-gray-600 mt-1\">Thank you to everyone who voted! 💖</p>\n                </div>\n              </div>\n\n              {/* 30 Day Countdown */}\n              <div className=\"bg-gradient-to-r from-indigo-100/70 to-purple-100/70 border-2 border-indigo-200/50 rounded-2xl p-6\">\n                <h3 className=\"font-bold text-lg text-indigo-800 mb-4 flex items-center justify-center gap-2\">\n                  ⏰ Discord Server Opening In: ⏰\n                </h3>\n                <div className=\"grid grid-cols-4 gap-3\">\n                  <div className=\"bg-white/70 rounded-xl p-3 text-center\">\n                    <div className=\"text-2xl font-bold text-indigo-700\">{timeLeft.days}</div>\n                    <div className=\"text-xs text-indigo-600 font-medium\">Days</div>\n                  </div>\n                  <div className=\"bg-white/70 rounded-xl p-3 text-center\">\n                    <div className=\"text-2xl font-bold text-indigo-700\">{timeLeft.hours}</div>\n                    <div className=\"text-xs text-indigo-600 font-medium\">Hours</div>\n                  </div>\n                  <div className=\"bg-white/70 rounded-xl p-3 text-center\">\n                    <div className=\"text-2xl font-bold text-indigo-700\">{timeLeft.minutes}</div>\n                    <div className=\"text-xs text-indigo-600 font-medium\">Minutes</div>\n                  </div>\n                  <div className=\"bg-white/70 rounded-xl p-3 text-center\">\n                    <div className=\"text-2xl font-bold text-indigo-700\">{timeLeft.seconds}</div>\n                    <div className=\"text-xs text-indigo-600 font-medium\">Seconds</div>\n                  </div>\n                </div>\n                <p className=\"text-sm text-indigo-700 mt-4 text-center\">\n                  Get ready for the most amazing community experience! 🚀✨\n                </p>\n              </div>\n            </div>\n          )}\n        </CardContent>\n      </Card>\n    </motion.div>\n  );\n};\n\nexport default function Community() {\n  return (\n    <div className=\"p-4 md:p-6 lg:p-8 w-full max-w-4xl mx-auto\">\n      <div className=\"text-center mb-8 md:mb-12 relative px-4 w-full\">\n        <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-6 md:-translate-y-8\">\n          <span className=\"text-3xl md:text-4xl bounce-cute\">👥</span>\n        </div>\n        <h1 className=\"text-3xl md:text-4xl lg:text-5xl font-bold gradient-text mb-4\">💖 GlowQuest Community 💖</h1>\n        <p className=\"text-gray-600 text-lg md:text-xl mt-4 max-w-2xl mx-auto font-medium\">\n          Connect, share, and grow together with thousands of amazing cuties! ✨\n        </p>\n      </div>\n\n      <div className=\"space-y-8\">\n        {/* Community Poll - Now the main feature */}\n        <CommunityPoll />\n\n        {/* Current Community Options */}\n        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.2 }}>\n          <h2 className=\"text-2xl font-bold gradient-text text-center mb-6\">Meanwhile, Connect Here! 💕</h2>\n          <div className=\"grid md:grid-cols-2 gap-6\">\n            <Card className=\"glassmorphism cute-shadow hover:border-pink-400 transition-all duration-300 border-2 border-pink-200/50\">\n              <CardContent className=\"p-6 text-center\">\n                <div className=\"w-16 h-16 bg-gradient-to-r from-pink-400 to-purple-400 rounded-2xl flex items-center justify-center mx-auto mb-4 bounce-cute\">\n                  <MessageCircle className=\"w-8 h-8 text-white\" />\n                </div>\n                <h3 className=\"text-xl font-bold gradient-text mb-3\">GlowConnect</h3>\n                <p className=\"text-gray-600 text-sm mb-4\">\n                  Chat anonymously with other cuties in real-time!\n                </p>\n                <Button asChild className=\"w-full bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold rounded-xl cute-shadow\">\n                  <Link to={createPageUrl(\"GlowConnect\")}>\n                    Start Chatting! ✨\n                  </Link>\n                </Button>\n              </CardContent>\n            </Card>\n\n            <Card className=\"glassmorphism cute-shadow hover:border-purple-400 transition-all duration-300 border-2 border-purple-200/50\">\n              <CardContent className=\"p-6 text-center\">\n                <div className=\"w-16 h-16 bg-gradient-to-r from-purple-400 to-blue-400 rounded-2xl flex items-center justify-center mx-auto mb-4 bounce-cute\">\n                  <Crown className=\"w-8 h-8 text-white\" />\n                </div>\n                <h3 className=\"text-xl font-bold gradient-text mb-3\">Premium Community</h3>\n                <p className=\"text-gray-600 text-sm mb-4\">\n                  Join our exclusive premium community for deeper connections!\n                </p>\n                <Button asChild className=\"w-full bg-gradient-to-r from-purple-500 to-blue-500 text-white font-bold rounded-xl cute-shadow\">\n                  <Link to={createPageUrl(\"Premium\")}>\n                    Go Premium! 👑\n                  </Link>\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </motion.div>\n\n        {/* Support Message */}\n        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.4 }}>\n          <Card className=\"glassmorphism border-2 border-green-200/50 cute-shadow rounded-2xl\">\n            <CardContent className=\"p-6 text-center\">\n              <Heart className=\"w-12 h-12 text-pink-500 mx-auto mb-4 bounce-cute\" />\n              <h3 className=\"text-xl font-bold gradient-text mb-3\">Help Us Grow! 💖</h3>\n              <p className=\"text-gray-600 mb-4 max-w-md mx-auto\">\n                Your subscriptions and purchases help us build these amazing community features faster!\n              </p>\n              <p className=\"text-sm text-gray-500\">\n                Every contribution goes directly into making GlowQuest better for everyone! ✨\n              </p>\n            </CardContent>\n          </Card>\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n","UserManagement":"\nimport React, { useState, useEffect } from \"react\";\nimport { User } from \"@/entities/User\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Input } from \"@/components/ui/input\";\nimport { \n  Users, \n  Download, \n  Search, \n  Crown, \n  Zap, \n  Calendar,\n  Mail,\n  User as UserIcon,\n  Loader2,\n  Shield,\n  Activity,\n  Ban, // Added import\n  MoreVertical, // Added import\n  ShieldOff // Added import\n} from \"lucide-react\";\nimport { motion } from \"framer-motion\";\nimport { format } from \"date-fns\";\nimport { // Added imports\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function UserManagement() {\n  const [currentUser, setCurrentUser] = useState(null);\n  const [users, setUsers] = useState([]);\n  const [filteredUsers, setFilteredUsers] = useState([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [isExporting, setIsExporting] = useState(false);\n  const [searchTerm, setSearchTerm] = useState(\"\");\n  const [error, setError] = useState(null);\n  const [isAuthorized, setIsAuthorized] = useState(false);\n  const [liveActiveUsers, setLiveActiveUsers] = useState(0);\n\n  useEffect(() => {\n    const init = async () => {\n      setIsLoading(true);\n      try {\n        const user = await User.me();\n        setCurrentUser(user);\n        \n        // Check if user is authorized (your specific email)\n        if (user.email !== 'linus10.2008@gmail.com') {\n          setIsAuthorized(false);\n          setError('Access denied. This page is restricted to administrators.');\n          setIsLoading(false);\n          return;\n        }\n        \n        setIsAuthorized(true);\n        \n        // Load all users\n        const allUsers = await User.list();\n        setUsers(allUsers);\n        setFilteredUsers(allUsers);\n        \n      } catch (err) {\n        console.error('Error loading users:', err);\n        setError('Failed to load user data. Please try again.');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    \n    init();\n\n    // Update live active users every 10 seconds for real-time data\n    const updateLiveUsers = async () => {\n      try {\n        // Get all users\n        const allUsers = await User.list();\n        \n        // Count users who were active in the last 5 minutes (real activity)\n        const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);\n        const activeUsers = allUsers.filter(user => {\n          if (!user.last_active_at) return false;\n          const lastActive = new Date(user.last_active_at);\n          return lastActive > fiveMinutesAgo;\n        });\n        \n        setLiveActiveUsers(activeUsers.length);\n      } catch (err) {\n        console.error('Error getting live user count:', err);\n      }\n    };\n\n    if (isAuthorized) {\n      updateLiveUsers(); // Initial fetch\n      const liveInterval = setInterval(updateLiveUsers, 10000); // Update every 10 seconds\n      return () => clearInterval(liveInterval); // Cleanup on unmount or re-run\n    }\n  }, [isAuthorized]); // Depend on isAuthorized to start/stop the live user updates\n\n  useEffect(() => {\n    if (!searchTerm.trim()) {\n      setFilteredUsers(users);\n    } else {\n      const filtered = users.filter(user =>\n        user.full_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        user.email?.toLowerCase().includes(searchTerm.toLowerCase())\n      );\n      setFilteredUsers(filtered);\n    }\n  }, [searchTerm, users]);\n\n  const handleBanUser = async (user, duration) => {\n    try {\n      let bannedUntil;\n      let banReasonText;\n      if (duration === 'permanent') {\n        bannedUntil = 'permanent';\n        banReasonText = 'permanently';\n      } else {\n        const now = new Date();\n        now.setMinutes(now.getMinutes() + duration);\n        bannedUntil = now.toISOString();\n        banReasonText = `${duration} minutes`;\n      }\n\n      await User.update(user.id, {\n        banned_until: bannedUntil,\n        ban_reason: `Banned by admin for ${banReasonText}`,\n        is_premium: false,\n        is_ultra: false,\n        is_domina: false, // Assuming is_domina is a valid field in your User entity\n        role: 'user'\n      });\n\n      // Refresh user list\n      const allUsers = await User.list();\n      setUsers(allUsers);\n      setFilteredUsers(allUsers.filter(u => \n        !searchTerm || \n        u.full_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        u.email?.toLowerCase().includes(searchTerm.toLowerCase())\n      ));\n\n      alert(`User ${user.email} wurde erfolgreich gebannt!`);\n    } catch (error) {\n      console.error('Ban error:', error);\n      alert('Fehler beim Bannen: ' + error.message);\n    }\n  };\n\n  const handleUnbanUser = async (user) => {\n    try {\n      await User.update(user.id, {\n        banned_until: null,\n        ban_reason: null\n      });\n\n      // Refresh user list\n      const allUsers = await User.list();\n      setUsers(allUsers);\n      setFilteredUsers(allUsers.filter(u => \n        !searchTerm || \n        u.full_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        u.email?.toLowerCase().includes(searchTerm.toLowerCase())\n      ));\n\n      alert(`User ${user.email} wurde erfolgreich entbannt!`);\n    } catch (error) {\n      console.error('Unban error:', error);\n      alert('Fehler beim Entbannen: ' + error.message);\n    }\n  };\n\n  const exportToCSV = async () => {\n    setIsExporting(true);\n    try {\n      const csvData = [\n        ['Full Name', 'Email', 'Registration Date', 'Premium', 'Ultra', 'Role', 'Status'],\n        ...filteredUsers.map(user => [\n          user.full_name || 'N/A',\n          user.email || 'N/A',\n          user.created_date ? format(new Date(user.created_date), 'yyyy-MM-dd HH:mm:ss') : 'N/A',\n          user.is_premium ? 'Yes' : 'No',\n          user.is_ultra ? 'Yes' : 'No',\n          user.role || 'user',\n          user.banned_until && (user.banned_until === 'permanent' || new Date(user.banned_until) > new Date()) ? 'Banned' : 'Active'\n        ])\n      ];\n\n      const csvContent = csvData.map(row => \n        row.map(field => `\"${field.toString().replace(/\"/g, '\"\"')}\"`).join(',')\n      ).join('\\n');\n\n      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n      const link = document.createElement('a');\n      const url = URL.createObjectURL(blob);\n      link.setAttribute('href', url);\n      link.setAttribute('download', `glowquest_users_${format(new Date(), 'yyyy-MM-dd')}.csv`);\n      link.style.visibility = 'hidden';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n    } catch (err) {\n      console.error('Export error:', err);\n      setError('Failed to export CSV. Please try again.');\n    } finally {\n      setIsExporting(false);\n    }\n  };\n\n  const getUserStats = () => {\n    const total = users.length;\n    const premium = users.filter(u => u.is_premium).length;\n    const ultra = users.filter(u => u.is_ultra).length;\n    const free = total - premium - ultra;\n    \n    return { total, premium, ultra, free };\n  };\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center h-[calc(100vh-200px)]\">\n        <div className=\"text-center\">\n          <Loader2 className=\"w-12 h-12 animate-spin text-pink-500 mx-auto mb-4\" />\n          <p className=\"text-lg font-medium text-gray-600\">Loading user data...</p>\n        </div>\n      </div>\n    );\n  }\n\n  if (!isAuthorized) {\n    return (\n      <div className=\"flex items-center justify-center h-[calc(100vh-200px)]\">\n        <Card className=\"glassmorphism cute-shadow max-w-md\">\n          <CardContent className=\"p-8 text-center\">\n            <Shield className=\"w-16 h-16 text-red-500 mx-auto mb-4\" />\n            <h2 className=\"text-xl font-bold text-gray-800 mb-2\">Access Denied</h2>\n            <p className=\"text-gray-600\">{error}</p>\n          </CardContent>\n        </Card>\n      </div>\n    );\n  }\n\n  const stats = getUserStats();\n\n  return (\n    <div className=\"p-4 md:p-6 lg:p-8 w-full max-w-7xl mx-auto\">\n      <div className=\"text-center mb-8 relative\">\n        <div className=\"absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-6\">\n          <span className=\"text-3xl bounce-cute\">👑</span>\n        </div>\n        <h1 className=\"text-3xl md:text-4xl font-bold gradient-text mb-2 mt-6\">\n          User Management Dashboard\n        </h1>\n        <p className=\"text-gray-600 text-lg\">\n          Manage and export your GlowQuest community data\n        </p>\n      </div>\n\n      {/* Live Stats Card */}\n      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className=\"mb-8\">\n        <Card className=\"glassmorphism cute-shadow border-2 border-green-200/50\">\n          <CardContent className=\"p-6 text-center\">\n            <div className=\"flex items-center justify-center gap-3 mb-2\">\n              <Activity className=\"w-8 h-8 text-green-500 animate-pulse\" />\n              <h3 className=\"text-2xl font-bold text-green-700\">Live Active Users</h3>\n            </div>\n            <div className=\"text-4xl font-bold text-green-600 mb-2\">{liveActiveUsers}</div>\n            <p className=\"text-green-600 font-medium\">Actually using the app right now</p>\n            <p className=\"text-xs text-gray-500 mt-2\">Updates every 10 seconds • Active in last 5 minutes</p>\n          </CardContent>\n        </Card>\n      </motion.div>\n\n      {/* Stats Cards */}\n      <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-8\">\n        <Card className=\"glassmorphism border-2 border-blue-200/50 cute-shadow\">\n          <CardContent className=\"p-4 text-center\">\n            <Users className=\"w-8 h-8 text-blue-500 mx-auto mb-2\" />\n            <p className=\"text-2xl font-bold text-blue-700\">{stats.total}</p>\n            <p className=\"text-sm text-gray-600\">Total Users</p>\n          </CardContent>\n        </Card>\n        <Card className=\"glassmorphism border-2 border-gray-200/50 cute-shadow\">\n          <CardContent className=\"p-4 text-center\">\n            <UserIcon className=\"w-8 h-8 text-gray-500 mx-auto mb-2\" />\n            <p className=\"text-2xl font-bold text-gray-700\">{stats.free}</p>\n            <p className=\"text-sm text-gray-600\">Free Users</p>\n          </CardContent>\n        </Card>\n        <Card className=\"glassmorphism border-2 border-pink-200/50 cute-shadow\">\n          <CardContent className=\"p-4 text-center\">\n            <Crown className=\"w-8 h-8 text-pink-500 mx-auto mb-2\" />\n            <p className=\"text-2xl font-bold text-pink-700\">{stats.premium}</p>\n            <p className=\"text-sm text-gray-600\">Premium</p>\n          </CardContent>\n        </Card>\n        <Card className=\"glassmorphism border-2 border-purple-200/50 cute-shadow\">\n          <CardContent className=\"p-4 text-center\">\n            <Zap className=\"w-8 h-8 text-purple-500 mx-auto mb-2\" />\n            <p className=\"text-2xl font-bold text-purple-700\">{stats.ultra}</p>\n            <p className=\"text-sm text-gray-600\">Ultra</p>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Controls */}\n      <Card className=\"glassmorphism cute-shadow mb-6\">\n        <CardHeader>\n          <CardTitle className=\"flex items-center justify-between\">\n            <span className=\"flex items-center gap-2\">\n              <Users className=\"w-5 h-5\" />\n              User List ({filteredUsers.length})\n            </span>\n            <Button\n              onClick={exportToCSV}\n              disabled={isExporting || filteredUsers.length === 0}\n              className=\"bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold rounded-xl cute-shadow\"\n            >\n              {isExporting ? (\n                <Loader2 className=\"w-4 h-4 mr-2 animate-spin\" />\n              ) : (\n                <Download className=\"w-4 h-4 mr-2\" />\n              )}\n              Export CSV\n            </Button>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex items-center gap-3 mb-4\">\n            <Search className=\"w-5 h-5 text-gray-400\" />\n            <Input\n              placeholder=\"Search by name or email...\"\n              value={searchTerm}\n              onChange={(e) => setSearchTerm(e.target.value)}\n              className=\"flex-1\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* User List */}\n      <Card className=\"glassmorphism cute-shadow\">\n        <CardContent className=\"p-0\">\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full\">\n              <thead className=\"border-b border-pink-200/50\">\n                <tr className=\"bg-gradient-to-r from-pink-50/50 to-purple-50/50\">\n                  <th className=\"text-left p-4 font-bold text-gray-700\">User</th>\n                  <th className=\"text-left p-4 font-bold text-gray-700\">Email</th>\n                  <th className=\"text-left p-4 font-bold text-gray-700\">Registration</th>\n                  <th className=\"text-left p-4 font-bold text-gray-700\">Subscription</th>\n                  <th className=\"text-left p-4 font-bold text-gray-700\">Status</th> {/* Added header */}\n                  <th className=\"text-left p-4 font-bold text-gray-700\">Actions</th> {/* Added header */}\n                </tr>\n              </thead>\n              <tbody>\n                {filteredUsers.map((user, index) => {\n                  const isBanned = user.banned_until && (\n                    user.banned_until === 'permanent' || \n                    new Date(user.banned_until) > new Date()\n                  );\n\n                  return (\n                    <motion.tr \n                      key={user.id}\n                      initial={{ opacity: 0, y: 10 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      transition={{ delay: index * 0.05 }}\n                      className=\"border-b border-pink-100/50 hover:bg-pink-50/30 transition-colors\"\n                    >\n                      <td className=\"p-4\">\n                        <div className=\"font-medium text-gray-800\">\n                          {user.full_name || 'No Name'}\n                        </div>\n                      </td>\n                      <td className=\"p-4\">\n                        <div className=\"flex items-center gap-2\">\n                          <Mail className=\"w-4 h-4 text-gray-400\" />\n                          <span className=\"text-sm text-gray-600\">{user.email}</span>\n                        </div>\n                      </td>\n                      <td className=\"p-4\">\n                        <div className=\"flex items-center gap-2\">\n                          <Calendar className=\"w-4 h-4 text-gray-400\" />\n                          <span className=\"text-sm text-gray-600\">\n                            {user.created_date ? format(new Date(user.created_date), 'MMM d, yyyy') : 'N/A'}\n                          </span>\n                        </div>\n                      </td>\n                      <td className=\"p-4\">\n                        <div className=\"flex gap-1\">\n                          {user.is_ultra && (\n                            <Badge className=\"bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs\">\n                              <Zap className=\"w-3 h-3 mr-1\" />\n                              Ultra\n                            </Badge>\n                          )}\n                          {user.is_premium && !user.is_ultra && (\n                            <Badge className=\"bg-gradient-to-r from-pink-500 to-purple-500 text-white text-xs\">\n                              <Crown className=\"w-3 h-3 mr-1\" />\n                              Premium\n                            </Badge>\n                          )}\n                          {!user.is_premium && !user.is_ultra && (\n                            <Badge variant=\"outline\" className=\"text-xs\">\n                              Free\n                            </Badge>\n                          )}\n                        </div>\n                      </td>\n                      {/* New Status Column */}\n                      <td className=\"p-4\">\n                        {isBanned ? (\n                          <Badge variant=\"destructive\" className=\"text-xs\">\n                            <Ban className=\"w-3 h-3 mr-1\" />\n                            Banned\n                          </Badge>\n                        ) : (\n                          <Badge variant=\"outline\" className=\"text-xs bg-green-50 text-green-700 border-green-200\">\n                            Active\n                          </Badge>\n                        )}\n                      </td>\n                      {/* New Actions Column */}\n                      <td className=\"p-4\">\n                        <DropdownMenu>\n                          <DropdownMenuTrigger asChild>\n                            <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n                              <MoreVertical className=\"w-4 h-4\" />\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\" className=\"w-48\">\n                            {isBanned ? (\n                              <DropdownMenuItem onClick={() => handleUnbanUser(user)} className=\"text-green-600\">\n                                <ShieldOff className=\"w-4 h-4 mr-2\" />\n                                Unban User\n                              </DropdownMenuItem>\n                            ) : (\n                              <>\n                                <DropdownMenuItem onClick={() => handleBanUser(user, 5)} className=\"text-orange-600\">\n                                  <Ban className=\"w-4 h-4 mr-2\" />\n                                  Ban 5 Minuten\n                                </DropdownMenuItem>\n                                <DropdownMenuItem onClick={() => handleBanUser(user, 60)} className=\"text-orange-600\">\n                                  <Ban className=\"w-4 h-4 mr-2\" />\n                                  Ban 1 Stunde\n                                </DropdownMenuItem>\n                                <DropdownMenuItem onClick={() => handleBanUser(user, 1440)} className=\"text-red-600\">\n                                  <Ban className=\"w-4 h-4 mr-2\" />\n                                  Ban 1 Tag\n                                </DropdownMenuItem>\n                                <DropdownMenuItem onClick={() => handleBanUser(user, 10080)} className=\"text-red-600\">\n                                  <Ban className=\"w-4 h-4 mr-2\" />\n                                  Ban 1 Woche\n                                </DropdownMenuItem>\n                                <DropdownMenuItem onClick={() => handleBanUser(user, 'permanent')} className=\"text-red-700 font-bold\">\n                                  <Ban className=\"w-4 h-4 mr-2\" />\n                                  Permanent Ban\n                                </DropdownMenuItem>\n                              </>\n                            )}\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </td>\n                    </motion.tr>\n                  );\n                })}\n              </tbody>\n            </table>\n          </div>\n          \n          {filteredUsers.length === 0 && (\n            <div className=\"text-center py-12\">\n              <Users className=\"w-16 h-16 text-gray-300 mx-auto mb-4\" />\n              <p className=\"text-xl font-medium text-gray-500 mb-2\">No users found</p>\n              <p className=\"text-gray-400\">\n                {searchTerm ? 'Try adjusting your search terms' : 'No users registered yet'}\n              </p>\n            </div>\n          )}\n        </CardContent>\n      </Card>\n\n      {error && (\n        <Card className=\"mt-6 border-2 border-red-200/50 bg-red-50/50\">\n          <CardContent className=\"p-4 text-center\">\n            <p className=\"text-red-700 font-medium\">{error}</p>\n          </CardContent>\n        </Card>\n      )}\n    </div>\n  );\n}\n","DominaDashboard":"\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { User, DominaChatQueue, DominaChatSession } from \"@/entities/all\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Loader2, Users, Crown, Shield, UserCheck, MessageSquare } from \"lucide-react\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { useNavigate } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\n\nexport default function DominaDashboard() {\n  const [currentUser, setCurrentUser] = useState(null);\n  const [waitingUsers, setWaitingUsers] = useState([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [isAuthorized, setIsAuthorized] = useState(false);\n  const navigate = useNavigate();\n  const queueInterval = useRef(null);\n\n  useEffect(() => {\n    const checkAuthAndLoad = async () => {\n      try {\n        const user = await User.me();\n        setCurrentUser(user);\n        if (user.role === 'admin' || user.is_domina) {\n          setIsAuthorized(true);\n        } else {\n          setIsAuthorized(false);\n          setIsLoading(false);\n        }\n      } catch (error) {\n        setIsAuthorized(false);\n        setIsLoading(false);\n      }\n    };\n    checkAuthAndLoad();\n  }, []);\n\n  const fetchWaitingUsers = async () => {\n    try {\n      const queue = await DominaChatQueue.filter({ status: 'waiting' }, '-created_date');\n      setWaitingUsers(queue);\n    } catch (error) {\n      console.error(\"Error fetching waiting users:\", error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    if (isAuthorized) {\n      fetchWaitingUsers();\n      queueInterval.current = setInterval(fetchWaitingUsers, 5000); // Poll every 5 seconds\n    }\n    return () => {\n      if (queueInterval.current) {\n        clearInterval(queueInterval.current);\n      }\n    };\n  }, [isAuthorized]);\n\n  const handleStartChat = async (queueEntry) => {\n    if (!currentUser) return;\n\n    try {\n      // Create a new session\n      const newSession = await DominaChatSession.create({\n        user_email: queueEntry.user_email,\n        domina_email: currentUser.email,\n      });\n\n      // Update the queue entry to 'matched'\n      await DominaChatQueue.update(queueEntry.id, {\n        status: 'matched',\n        session_id: newSession.id,\n      });\n\n      // Navigate to the chat page\n      navigate(createPageUrl(`DominaChat?session_id=${newSession.id}`));\n\n    } catch (error) {\n      console.error(\"Error starting chat:\", error);\n      // Maybe show a toast or error message\n    }\n  };\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center h-screen\">\n        <Loader2 className=\"w-12 h-12 animate-spin text-pink-500\" />\n      </div>\n    );\n  }\n\n  if (!isAuthorized) {\n    return (\n      <div className=\"p-8 text-center\">\n        <Shield className=\"w-16 h-16 mx-auto text-red-500 mb-4\" />\n        <h1 className=\"text-2xl font-bold gradient-text\">Access Denied</h1>\n        <p className=\"text-gray-600\">This dashboard is only for authorized Dominas and Administrators.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-4 md:p-8 max-w-4xl mx-auto\">\n      <div className=\"text-center mb-8\">\n        <h1 className=\"text-3xl md:text-4xl font-bold gradient-text flex items-center justify-center gap-3\">\n          <Crown className=\"bounce-cute\" />\n          Domina Chat Dashboard\n          <Crown className=\"bounce-cute\" />\n        </h1>\n        <p className=\"text-gray-600 mt-2\">Accept chat requests from Ultra members.</p>\n      </div>\n\n      <Card className=\"glassmorphism cute-shadow\">\n        <CardHeader>\n          <CardTitle className=\"flex items-center justify-between\">\n            <span className=\"gradient-text flex items-center gap-2\"><Users /> Waiting Users</span>\n            <Badge variant=\"secondary\">{waitingUsers.length}</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          {waitingUsers.length > 0 ? (\n            <div className=\"space-y-4\">\n              {waitingUsers.map(entry => (\n                <Card key={entry.id} className=\"bg-white/50 border-pink-200/50\">\n                  <CardContent className=\"p-4 flex items-center justify-between\">\n                    <div>\n                      <p className=\"font-bold text-lg text-gray-800 flex items-center gap-2\">\n                        <UserCheck className=\"text-purple-500\" />\n                        {entry.user_name}\n                      </p>\n                      <p className=\"text-sm text-gray-600\">\n                        Waiting for {formatDistanceToNow(new Date(entry.created_date), { addSuffix: true })}\n                      </p>\n                    </div>\n                    <Button onClick={() => handleStartChat(entry)} className=\"bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold cute-shadow\">\n                      <MessageSquare className=\"w-4 h-4 mr-2\" />\n                      Start Chat\n                    </Button>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          ) : (\n            <div className=\"text-center py-12 text-gray-500\">\n              <Users className=\"w-12 h-12 mx-auto mb-4\" />\n              <p className=\"font-medium\">No users are currently waiting.</p>\n              <p className=\"text-sm\">Check back soon!</p>\n            </div>\n          )}\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n","DominaChat":"\nimport React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport { DominaChatSession, DominaChatMessage, User } from \"@/entities/all\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Loader2, Send, Crown, XCircle } from \"lucide-react\";\nimport { useLocation, useNavigate } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\nimport ReactMarkdown from 'react-markdown';\n\nexport default function DominaChat() {\n  const [session, setSession] = useState(null);\n  const [messages, setMessages] = useState([]);\n  const [newMessage, setNewMessage] = useState(\"\");\n  const [currentUser, setCurrentUser] = useState(null);\n  const [otherUserName, setOtherUserName] = useState(\"User\");\n  const [isLoading, setIsLoading] = useState(true);\n  const location = useLocation();\n  const navigate = useNavigate();\n  const messagesEndRef = useRef(null);\n  const pollInterval = useRef(null);\n\n  const sessionId = new URLSearchParams(location.search).get(\"session_id\");\n\n  useEffect(() => {\n    if (!sessionId) {\n      setIsLoading(false);\n      return;\n    }\n\n    const setupChat = async () => {\n      try {\n        const user = await User.me();\n        setCurrentUser(user);\n\n        const sessions = await DominaChatSession.filter({ id: sessionId });\n        if (sessions.length > 0) {\n          const currentSession = sessions[0];\n          setSession(currentSession);\n\n          // Determine the other user's email and fetch their name\n          const otherUserEmail = user.email === currentSession.user_email \n            ? currentSession.domina_email \n            : currentSession.user_email;\n            \n          const otherUsers = await User.filter({ email: otherUserEmail });\n          if(otherUsers.length > 0) {\n              setOtherUserName(otherUsers[0].full_name || \"Partner\");\n          }\n\n        } else {\n          throw new Error(\"Session not found\");\n        }\n      } catch (error) {\n        console.error(\"Error setting up chat:\", error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    setupChat();\n  }, [sessionId]);\n\n  const fetchMessages = useCallback(async () => {\n    if (!sessionId) return;\n    try {\n      const fetchedMessages = await DominaChatMessage.filter({ session_id: sessionId }, 'created_date');\n      setMessages(fetchedMessages);\n    } catch (error) {\n      console.error(\"Error fetching messages:\", error);\n    }\n  }, [sessionId]);\n\n  useEffect(() => {\n    if (session) {\n      fetchMessages();\n      pollInterval.current = setInterval(fetchMessages, 3000);\n    }\n    return () => {\n      if (pollInterval.current) clearInterval(pollInterval.current);\n    };\n  }, [session, fetchMessages]);\n  \n   useEffect(() => {\n    messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  }, [messages]);\n\n  const handleSendMessage = async () => {\n    if (!newMessage.trim() || !session || !currentUser) return;\n    try {\n      await DominaChatMessage.create({\n        session_id: session.id,\n        sender_email: currentUser.email,\n        message: newMessage,\n      });\n      setNewMessage(\"\");\n      await fetchMessages(); // Fetch immediately after sending\n    } catch (error) {\n      console.error(\"Error sending message:\", error);\n    }\n  };\n\n  const handleEndChat = async () => {\n      if (!session) return;\n      try {\n          const status = currentUser.is_domina || currentUser.role === 'admin' ? 'ended_by_domina' : 'ended_by_user';\n          await DominaChatSession.update(session.id, { status });\n          // Navigate away after ending\n          if(currentUser.is_domina || currentUser.role === 'admin') {\n              navigate(createPageUrl('DominaDashboard'));\n          } else {\n              navigate(createPageUrl('FeminizationAI'));\n          }\n      } catch(error) {\n          console.error(\"Error ending chat:\", error);\n      }\n  };\n  \n  if (isLoading) return <div className=\"flex items-center justify-center h-screen\"><Loader2 className=\"w-12 h-12 animate-spin text-pink-500\" /></div>;\n  if (!session) return <div className=\"p-8 text-center\">Session not found or invalid.</div>;\n  \n  const isDomina = currentUser?.is_domina || currentUser?.role === 'admin';\n  const chatPartnerName = isDomina ? otherUserName : \"Your Domina\";\n\n  return (\n    <div className=\"flex flex-col h-[calc(100vh-150px)] max-w-4xl mx-auto p-4\">\n       <div className=\"bg-gradient-to-r from-purple-600 to-black text-white p-4 rounded-t-2xl flex items-center justify-between\">\n            <div className=\"flex items-center gap-3\">\n                <Crown className=\"w-8 h-8 text-yellow-300\"/>\n                <div>\n                    <h2 className=\"text-xl font-bold\">Live Domina Chat</h2>\n                    <p className=\"text-sm opacity-80\">Chatting with {chatPartnerName}</p>\n                </div>\n            </div>\n            <Button onClick={handleEndChat} variant=\"destructive\" size=\"sm\" className=\"bg-red-500/80 hover:bg-red-600\">\n                <XCircle className=\"w-4 h-4 mr-2\"/>\n                End Chat\n            </Button>\n       </div>\n       <div className=\"flex-1 overflow-y-auto p-4 space-y-4 bg-gray-900/50\">\n           {messages.map(msg => {\n               const isYou = msg.sender_email === currentUser.email;\n               return (\n                   <div key={msg.id} className={`flex items-end gap-3 ${isYou ? 'justify-end' : 'justify-start'}`}>\n                       {!isYou && (isDomina ? <div className=\"w-8 h-8 rounded-full bg-black flex items-center justify-center shrink-0\"><Crown className=\"w-4 h-4 text-yellow-300\"/></div> : null)}\n                       <div className={`p-3 rounded-2xl max-w-[80%] ${isYou ? 'bg-purple-800 text-white rounded-br-lg' : 'bg-gray-700 text-gray-200 rounded-bl-lg'}`}>\n                           <ReactMarkdown className=\"prose prose-sm prose-invert\">{msg.message}</ReactMarkdown>\n                       </div>\n                   </div>\n               )\n           })}\n           <div ref={messagesEndRef} />\n       </div>\n       <div className=\"p-4 bg-gray-800/80 backdrop-blur-md rounded-b-2xl\">\n           <div className=\"flex items-center gap-3\">\n               <Input \n                  placeholder=\"Type your message...\"\n                  value={newMessage}\n                  onChange={e => setNewMessage(e.target.value)}\n                  onKeyPress={e => e.key === 'Enter' && handleSendMessage()}\n                  className=\"bg-gray-700 border-gray-600 text-white placeholder-gray-400\"\n               />\n               <Button onClick={handleSendMessage} className=\"bg-purple-600 hover:bg-purple-700\">\n                   <Send className=\"w-5 h-5\"/>\n               </Button>\n           </div>\n       </div>\n    </div>\n  );\n}\n","Landing":"import React, { useState, useEffect } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { motion } from \"framer-motion\";\nimport { \n  Sparkles, \n  Users, \n  MessageCircle, \n  Crown, \n  Heart, \n  Star,\n  Zap,\n  ArrowRight,\n  CheckCircle,\n  ChevronDown\n} from \"lucide-react\";\nimport { User } from \"@/entities/User\";\nimport { Link } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\n\nexport default function Landing() {\n  const [user, setUser] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n\n  useEffect(() => {\n    const checkUser = async () => {\n      try {\n        const currentUser = await User.me();\n        setUser(currentUser);\n        if (currentUser) {\n          window.location.href = createPageUrl(\"Index\");\n        }\n      } catch (error) {\n        setUser(null);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    checkUser();\n  }, []);\n\n  const handleGetStarted = async () => {\n    try {\n      await User.login();\n    } catch (error) {\n      console.error(\"Login failed:\", error);\n    }\n  };\n\n  if (isLoading) {\n    return (\n      <div className=\"min-h-screen flex items-center justify-center bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50\">\n        <div className=\"text-center\">\n          <div className=\"w-16 h-16 bg-gradient-to-r from-pink-400 to-purple-400 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse\">\n            <Sparkles className=\"w-8 h-8 text-white\" />\n          </div>\n          <p className=\"text-gray-600 font-medium\">Loading...</p>\n        </div>\n      </div>\n    );\n  }\n\n  const features = [\n    {\n      icon: MessageCircle,\n      title: \"GlowConnect\",\n      description: \"Chat anonymously with other members in real-time. Make new friends and connections!\",\n      gradient: \"from-pink-400 to-rose-400\"\n    },\n    {\n      icon: Sparkles,\n      title: \"AI Companion\",\n      description: \"Your personal AI guide for support, motivation, and companionship on your journey.\",\n      gradient: \"from-purple-400 to-indigo-400\"\n    },\n    {\n      icon: Users,\n      title: \"Amazing Community\",\n      description: \"Join thousands of supportive members on their personal growth journeys.\",\n      gradient: \"from-blue-400 to-cyan-400\"\n    },\n    {\n      icon: Crown,\n      title: \"Premium Features\",\n      description: \"Unlock exclusive challenges, unlimited chats, and advanced features.\",\n      gradient: \"from-yellow-400 to-orange-400\"\n    }\n  ];\n\n  const testimonials = [\n    {\n      name: \"Sarah M.\",\n      text: \"GlowQuest helped me discover confidence I never knew I had! The community is so supportive! 💖\",\n      rating: 5\n    },\n    {\n      name: \"Alex R.\",\n      text: \"The AI companion is incredible! It's like having a friend who's always there for you. 🤖✨\",\n      rating: 5\n    },\n    {\n      name: \"Maya L.\",\n      text: \"I've made so many amazing friends through GlowConnect. This app changed my life! 🌟\",\n      rating: 5\n    }\n  ];\n\n  const faqs = [\n    {\n      question: \"What is GlowQuest?\",\n      answer: \"GlowQuest is a supportive community platform where you can connect with others, chat with AI companions, and embark on your personal growth journey in a safe and welcoming environment.\"\n    },\n    {\n      question: \"Is GlowQuest free?\",\n      answer: \"Yes! GlowQuest has a free tier with access to core features. We also offer Premium and Ultra subscriptions for members who want unlimited access and exclusive features.\"\n    },\n    {\n      question: \"Is my privacy protected?\",\n      answer: \"Absolutely! We take privacy seriously. GlowConnect chats are anonymous, and we never share your personal information without your consent.\"\n    },\n    {\n      question: \"How do I get started?\",\n      answer: \"Simply click 'Get Started' and sign in with Google. You'll be part of our amazing community in seconds! ✨\"\n    }\n  ];\n\n  return (\n    <div className=\"min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50 overflow-hidden\">\n      <section className=\"relative min-h-screen flex items-center justify-center px-4 py-20\">\n        <div className=\"absolute inset-0 overflow-hidden\">\n          <div className=\"absolute top-10 left-10 w-72 h-72 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob\"></div>\n          <div className=\"absolute top-0 right-10 w-72 h-72 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000\"></div>\n          <div className=\"absolute -bottom-8 left-20 w-72 h-72 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000\"></div>\n        </div>\n\n        <div className=\"relative z-10 max-w-4xl mx-auto text-center\">\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6 }}\n          >\n            <div className=\"flex items-center justify-center gap-2 mb-6\">\n              <Badge className=\"bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold px-4 py-2 text-sm\">\n                <Users className=\"w-4 h-4 mr-2\" />\n                Join 10,000+ Members\n              </Badge>\n            </div>\n\n            <h1 className=\"text-4xl sm:text-5xl md:text-7xl font-bold mb-6 leading-tight px-4\">\n              <span className=\"block text-gray-900 mb-2\">The Journey to</span>\n              <span className=\"gradient-text block\">\n                ✨ Your Authentic Self ✨\n              </span>\n            </h1>\n\n            <p className=\"text-lg sm:text-xl md:text-2xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed px-4\">\n              Connect, grow, and glow with a supportive community that celebrates your unique journey! 💖\n            </p>\n\n            <div className=\"flex flex-col sm:flex-row gap-4 justify-center items-center px-4\">\n              <Button\n                onClick={handleGetStarted}\n                size=\"lg\"\n                className=\"w-full sm:w-auto bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-white font-bold text-base sm:text-lg px-6 sm:px-8 py-5 sm:py-6 rounded-2xl cute-shadow hover:scale-105 transition-transform\"\n              >\n                Get Started Free\n                <ArrowRight className=\"w-5 h-5 ml-2\" />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"lg\"\n                onClick={() => document.getElementById('features').scrollIntoView({ behavior: 'smooth' })}\n                className=\"w-full sm:w-auto border-2 border-pink-300 text-pink-700 font-bold text-base sm:text-lg px-6 sm:px-8 py-5 sm:py-6 rounded-2xl hover:bg-pink-50\"\n              >\n                Learn More\n                <ChevronDown className=\"w-5 h-5 ml-2\" />\n              </Button>\n            </div>\n\n            <div className=\"mt-12 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8 text-sm text-gray-600 px-4\">\n              <div className=\"flex items-center gap-2\">\n                <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                <span>Free Forever</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                <span>No Credit Card</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                <span>Safe & Private</span>\n              </div>\n            </div>\n          </motion.div>\n        </div>\n      </section>\n\n      <section id=\"features\" className=\"py-20 px-4\">\n        <div className=\"max-w-6xl mx-auto\">\n          <div className=\"text-center mb-16\">\n            <h2 className=\"text-4xl md:text-5xl font-bold gradient-text mb-4\">\n              Everything You Need to Glow 💫\n            </h2>\n            <p className=\"text-xl text-gray-600 max-w-2xl mx-auto\">\n              Powerful features designed to support your personal growth journey\n            </p>\n          </div>\n\n          <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n            {features.map((feature, index) => (\n              <motion.div\n                key={index}\n                initial={{ opacity: 0, y: 20 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.5, delay: index * 0.1 }}\n                viewport={{ once: true }}\n              >\n                <Card className=\"glassmorphism cute-shadow border-2 border-pink-200/50 h-full hover:scale-105 transition-transform duration-300\">\n                  <CardContent className=\"p-6 text-center\">\n                    <div className={`w-16 h-16 bg-gradient-to-r ${feature.gradient} rounded-2xl flex items-center justify-center mx-auto mb-4 bounce-cute`}>\n                      <feature.icon className=\"w-8 h-8 text-white\" />\n                    </div>\n                    <h3 className=\"text-xl font-bold text-gray-800 mb-2\">{feature.title}</h3>\n                    <p className=\"text-gray-600 text-sm leading-relaxed\">{feature.description}</p>\n                  </CardContent>\n                </Card>\n              </motion.div>\n            ))}\n          </div>\n        </div>\n      </section>\n\n      <section className=\"py-20 px-4 bg-gradient-to-r from-pink-100/50 to-purple-100/50\">\n        <div className=\"max-w-6xl mx-auto\">\n          <div className=\"text-center mb-16\">\n            <h2 className=\"text-4xl md:text-5xl font-bold gradient-text mb-4\">\n              Loved by Thousands 💕\n            </h2>\n            <p className=\"text-xl text-gray-600\">\n              See what our amazing community members are saying!\n            </p>\n          </div>\n\n          <div className=\"grid md:grid-cols-3 gap-6\">\n            {testimonials.map((testimonial, index) => (\n              <motion.div\n                key={index}\n                initial={{ opacity: 0, y: 20 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.5, delay: index * 0.1 }}\n                viewport={{ once: true }}\n              >\n                <Card className=\"glassmorphism cute-shadow border-2 border-pink-200/50 h-full\">\n                  <CardContent className=\"p-6\">\n                    <div className=\"flex gap-1 mb-4\">\n                      {[...Array(testimonial.rating)].map((_, i) => (\n                        <Star key={i} className=\"w-5 h-5 text-yellow-400 fill-current\" />\n                      ))}\n                    </div>\n                    <p className=\"text-gray-700 mb-4 italic leading-relaxed\">\n                      \"{testimonial.text}\"\n                    </p>\n                    <p className=\"text-sm font-bold text-gray-800\">\n                      - {testimonial.name}\n                    </p>\n                  </CardContent>\n                </Card>\n              </motion.div>\n            ))}\n          </div>\n        </div>\n      </section>\n\n      <section className=\"py-20 px-4\">\n        <div className=\"max-w-6xl mx-auto\">\n          <div className=\"text-center mb-16\">\n            <h2 className=\"text-4xl md:text-5xl font-bold gradient-text mb-4\">\n              Choose Your Glow Level 👑\n            </h2>\n            <p className=\"text-xl text-gray-600\">\n              Start free, upgrade anytime for more features\n            </p>\n          </div>\n\n          <div className=\"grid md:grid-cols-3 gap-6 max-w-5xl mx-auto\">\n            <Card className=\"glassmorphism cute-shadow border-2 border-gray-200/50\">\n              <CardContent className=\"p-8 text-center\">\n                <Users className=\"w-12 h-12 text-gray-500 mx-auto mb-4\" />\n                <h3 className=\"text-2xl font-bold text-gray-800 mb-2\">Free</h3>\n                <p className=\"text-4xl font-bold text-gray-800 mb-6\">$0<span className=\"text-lg text-gray-600\">/month</span></p>\n                <ul className=\"space-y-3 mb-8 text-left\">\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    3 Daily GlowConnect chats\n                  </li>\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Basic AI companion\n                  </li>\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Community access\n                  </li>\n                </ul>\n                <Button\n                  onClick={handleGetStarted}\n                  variant=\"outline\"\n                  className=\"w-full border-2 border-gray-300\"\n                >\n                  Get Started\n                </Button>\n              </CardContent>\n            </Card>\n\n            <Card className=\"glassmorphism cute-shadow border-2 border-pink-300/60 relative\">\n              <Badge className=\"absolute -top-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold px-4 py-1\">\n                Most Popular\n              </Badge>\n              <CardContent className=\"p-8 text-center\">\n                <Crown className=\"w-12 h-12 text-pink-500 mx-auto mb-4\" />\n                <h3 className=\"text-2xl font-bold text-gray-800 mb-2\">Premium</h3>\n                <p className=\"text-4xl font-bold text-gray-800 mb-6\">$19.99<span className=\"text-lg text-gray-600\">/month</span></p>\n                <ul className=\"space-y-3 mb-8 text-left\">\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Unlimited GlowConnect chats\n                  </li>\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Advanced AI companion\n                  </li>\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Voice & video chat\n                  </li>\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Exclusive challenges\n                  </li>\n                </ul>\n                <Button\n                  onClick={handleGetStarted}\n                  className=\"w-full bg-gradient-to-r from-pink-500 to-purple-500 text-white\"\n                >\n                  Start Premium\n                </Button>\n              </CardContent>\n            </Card>\n\n            <Card className=\"glassmorphism cute-shadow border-2 border-purple-300/60\">\n              <CardContent className=\"p-8 text-center\">\n                <Zap className=\"w-12 h-12 text-purple-500 mx-auto mb-4\" />\n                <h3 className=\"text-2xl font-bold text-gray-800 mb-2\">Ultra Glow</h3>\n                <p className=\"text-4xl font-bold text-gray-800 mb-6\">$39.99<span className=\"text-lg text-gray-600\">/month</span></p>\n                <ul className=\"space-y-3 mb-8 text-left\">\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Everything in Premium\n                  </li>\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Real Domina chat access\n                  </li>\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    Early shop access\n                  </li>\n                  <li className=\"flex items-center gap-2 text-gray-600\">\n                    <CheckCircle className=\"w-5 h-5 text-green-500\" />\n                    GlowBoost activation\n                  </li>\n                </ul>\n                <Button\n                  onClick={handleGetStarted}\n                  className=\"w-full bg-gradient-to-r from-purple-500 to-orange-500 text-white\"\n                >\n                  Go Ultra\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </section>\n\n      <section className=\"py-20 px-4 bg-gradient-to-r from-blue-100/50 to-pink-100/50\">\n        <div className=\"max-w-4xl mx-auto\">\n          <div className=\"text-center mb-16\">\n            <h2 className=\"text-4xl md:text-5xl font-bold gradient-text mb-4\">\n              Frequently Asked Questions\n            </h2>\n            <p className=\"text-xl text-gray-600\">\n              Got questions? We've got answers! 💫\n            </p>\n          </div>\n\n          <div className=\"space-y-4\">\n            {faqs.map((faq, index) => (\n              <motion.div\n                key={index}\n                initial={{ opacity: 0, y: 20 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.5, delay: index * 0.1 }}\n                viewport={{ once: true }}\n              >\n                <Card className=\"glassmorphism cute-shadow border-2 border-pink-200/50\">\n                  <CardContent className=\"p-6\">\n                    <h3 className=\"text-lg font-bold text-gray-800 mb-2\">\n                      {faq.question}\n                    </h3>\n                    <p className=\"text-gray-600 leading-relaxed\">\n                      {faq.answer}\n                    </p>\n                  </CardContent>\n                </Card>\n              </motion.div>\n            ))}\n          </div>\n        </div>\n      </section>\n\n      <section className=\"py-20 px-4\">\n        <div className=\"max-w-4xl mx-auto text-center\">\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6 }}\n            viewport={{ once: true }}\n          >\n            <Card className=\"glassmorphism cute-shadow border-2 border-pink-200/50 overflow-hidden\">\n              <div className=\"bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 p-12 text-white\">\n                <Heart className=\"w-16 h-16 mx-auto mb-6 bounce-cute\" />\n                <h2 className=\"text-4xl font-bold mb-4\">\n                  Ready to Start Your Journey? ✨\n                </h2>\n                <p className=\"text-xl mb-8 text-white/90\">\n                  Join thousands of amazing people and discover your authentic self!\n                </p>\n                <Button\n                  onClick={handleGetStarted}\n                  size=\"lg\"\n                  className=\"bg-white text-purple-600 hover:bg-gray-100 font-bold text-lg px-8 py-6 rounded-2xl cute-shadow hover:scale-105 transition-transform\"\n                >\n                  Get Started Free\n                  <ArrowRight className=\"w-5 h-5 ml-2\" />\n                </Button>\n              </div>\n            </Card>\n          </motion.div>\n        </div>\n      </section>\n\n      <footer className=\"py-12 px-4 border-t border-pink-200/50\">\n        <div className=\"max-w-6xl mx-auto text-center\">\n          <div className=\"flex items-center justify-center gap-2 mb-4\">\n            <div className=\"w-8 h-8 bg-gradient-to-r from-pink-400 to-purple-400 rounded-full flex items-center justify-center\">\n              <Sparkles className=\"w-4 h-4 text-white\" />\n            </div>\n            <h3 className=\"text-2xl font-bold gradient-text\">GlowQuest</h3>\n          </div>\n          <p className=\"text-gray-600 mb-6\">\n            Your journey to authentic self starts here 💖\n          </p>\n          <div className=\"flex flex-wrap justify-center gap-6 text-sm text-gray-600\">\n            <Link to={createPageUrl(\"termsofservice\")} className=\"hover:text-pink-600 transition-colors\">\n              Terms of Service\n            </Link>\n            <span>•</span>\n            <a href=\"mailto:support@glowquest.app\" className=\"hover:text-pink-600 transition-colors\">\n              Contact Support\n            </a>\n            <span>•</span>\n            <span>© 2025 GlowQuest</span>\n          </div>\n        </div>\n      </footer>\n\n      <style>{`\n        @keyframes blob {\n          0% { transform: translate(0px, 0px) scale(1); }\n          33% { transform: translate(30px, -50px) scale(1.1); }\n          66% { transform: translate(-20px, 20px) scale(0.9); }\n          100% { transform: translate(0px, 0px) scale(1); }\n        }\n        .animate-blob {\n          animation: blob 7s infinite;\n        }\n        .animation-delay-2000 {\n          animation-delay: 2s;\n        }\n        .animation-delay-4000 {\n          animation-delay: 4s;\n        }\n      `}</style>\n    </div>\n  );\n}","PremiumWelcome":"import React, { useState, useEffect } from \"react\";\nimport { User } from \"@/entities/User\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { motion } from \"framer-motion\";\nimport { Crown, Sparkles, Zap, Heart, Star, ArrowRight, CheckCircle, Loader2 } from \"lucide-react\";\nimport { Link } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\n\nexport default function PremiumWelcome() {\n  const [user, setUser] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [tier, setTier] = useState(null);\n\n  useEffect(() => {\n    const init = async () => {\n      try {\n        const currentUser = await User.me();\n        setUser(currentUser);\n        \n        // Get tier from URL\n        const urlParams = new URLSearchParams(window.location.search);\n        const planTier = urlParams.get('plan');\n        setTier(planTier || (currentUser.is_ultra ? 'ultra' : 'premium'));\n      } catch (error) {\n        console.error('Error loading user:', error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    init();\n  }, []);\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Loader2 className=\"w-12 h-12 animate-spin text-pink-500\" />\n      </div>\n    );\n  }\n\n  const isUltra = tier === 'ultra';\n\n  const premiumFeatures = [\n    { icon: Sparkles, text: \"Unlimited AI Companion Chats\", emoji: \"💖\" },\n    { icon: CheckCircle, text: \"AI Photo Analyzer\", emoji: \"📸\" },\n    { icon: CheckCircle, text: \"Unlimited GlowConnect Matches\", emoji: \"✨\" },\n    { icon: CheckCircle, text: \"Voice & Video Chat\", emoji: \"🎤\" },\n    { icon: CheckCircle, text: \"Advanced Filters\", emoji: \"🚀\" },\n    { icon: CheckCircle, text: \"Exclusive Challenges\", emoji: \"👑\" }\n  ];\n\n  const ultraFeatures = [\n    { icon: Zap, text: \"GlowBoost Activation\", emoji: \"⚡\", highlight: true },\n    { icon: CheckCircle, text: \"Real Domina Chat Access\", emoji: \"💎\", highlight: true },\n    { icon: CheckCircle, text: \"30-min Early Shop Access\", emoji: \"🛍️\", highlight: true },\n    ...premiumFeatures\n  ];\n\n  const features = isUltra ? ultraFeatures : premiumFeatures;\n\n  return (\n    <div className=\"min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50 flex items-center justify-center p-4 relative overflow-hidden\">\n      {/* Confetti Effect */}\n      <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n        {[...Array(50)].map((_, i) => (\n          <motion.div\n            key={i}\n            initial={{ y: -20, x: Math.random() * window.innerWidth, opacity: 1 }}\n            animate={{ \n              y: window.innerHeight + 100,\n              rotate: Math.random() * 360,\n              opacity: 0\n            }}\n            transition={{ \n              duration: 3 + Math.random() * 2,\n              delay: Math.random() * 2,\n              repeat: Infinity,\n              repeatDelay: 1\n            }}\n            className=\"absolute text-2xl\"\n            style={{ left: `${Math.random() * 100}%` }}\n          >\n            {['🎉', '✨', '💖', '👑', '💎', '🌟'][Math.floor(Math.random() * 6)]}\n          </motion.div>\n        ))}\n      </div>\n\n      <motion.div\n        initial={{ opacity: 0, scale: 0.9 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ duration: 0.5 }}\n        className=\"max-w-2xl w-full relative z-10\"\n      >\n        <Card className=\"glassmorphism cute-shadow border-2 border-pink-200/50 overflow-hidden\">\n          {/* Header */}\n          <div className={`${isUltra \n            ? 'bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500' \n            : 'bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400'\n          } p-8 text-white text-center relative`}>\n            <motion.div\n              initial={{ scale: 0, rotate: -180 }}\n              animate={{ scale: 1, rotate: 0 }}\n              transition={{ duration: 0.6, type: \"spring\" }}\n            >\n              <div className={`w-24 h-24 ${isUltra \n                ? 'bg-gradient-to-r from-yellow-300 to-orange-300' \n                : 'bg-white/30'\n              } rounded-full flex items-center justify-center mx-auto mb-6 bounce-cute shadow-2xl`}>\n                {isUltra ? (\n                  <Zap className=\"w-12 h-12 text-white\" />\n                ) : (\n                  <Crown className=\"w-12 h-12 text-white\" />\n                )}\n              </div>\n            </motion.div>\n            \n            <motion.h1 \n              className=\"text-4xl font-bold mb-3\"\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.3 }}\n            >\n              {isUltra ? '🎊 Welcome to Ultra Glow! 🎊' : '🎉 Welcome to Premium! 🎉'}\n            </motion.h1>\n            \n            <motion.p \n              className=\"text-xl text-white/90\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ delay: 0.5 }}\n            >\n              You're now part of the exclusive club! ✨\n            </motion.p>\n          </div>\n\n          <CardContent className=\"p-8\">\n            {/* Success Message */}\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.7 }}\n              className=\"text-center mb-8\"\n            >\n              <div className=\"inline-flex items-center gap-2 bg-green-100 text-green-800 px-4 py-2 rounded-full font-bold mb-4\">\n                <CheckCircle className=\"w-5 h-5\" />\n                Payment Successful!\n              </div>\n              <h2 className=\"text-2xl font-bold gradient-text mb-2\">\n                Your {isUltra ? 'Ultra Glow' : 'Premium'} subscription is now active! 💖\n              </h2>\n              <p className=\"text-gray-600\">\n                You now have access to all exclusive features!\n              </p>\n            </motion.div>\n\n            {/* Features List */}\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.9 }}\n            >\n              <h3 className=\"text-xl font-bold gradient-text mb-6 text-center\">\n                🎁 Your New Powers Unlocked! 🎁\n              </h3>\n              \n              <div className=\"grid md:grid-cols-2 gap-4 mb-8\">\n                {features.map((feature, index) => (\n                  <motion.div\n                    key={index}\n                    initial={{ opacity: 0, x: -20 }}\n                    animate={{ opacity: 1, x: 0 }}\n                    transition={{ delay: 1 + (index * 0.1) }}\n                    className={`flex items-center gap-3 p-3 rounded-xl ${\n                      feature.highlight \n                        ? 'bg-gradient-to-r from-purple-100/70 to-pink-100/70 border-2 border-purple-200/50' \n                        : 'bg-gradient-to-r from-pink-50 to-purple-50'\n                    }`}\n                  >\n                    <span className=\"text-2xl\">{feature.emoji}</span>\n                    <div className=\"flex-1\">\n                      <p className={`font-semibold text-sm ${\n                        feature.highlight ? 'text-purple-800' : 'text-gray-800'\n                      }`}>\n                        {feature.text}\n                      </p>\n                    </div>\n                    <feature.icon className={`w-5 h-5 ${\n                      feature.highlight ? 'text-purple-500' : 'text-pink-500'\n                    }`} />\n                  </motion.div>\n                ))}\n              </div>\n            </motion.div>\n\n            {/* Thank You Message */}\n            <motion.div\n              initial={{ opacity: 0, scale: 0.9 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ delay: 1.5 }}\n              className=\"bg-gradient-to-r from-green-100/70 to-blue-100/70 border-2 border-green-200/50 rounded-2xl p-6 mb-8\"\n            >\n              <div className=\"flex items-center gap-3 mb-3\">\n                <Heart className=\"w-8 h-8 text-green-600 animate-pulse\" />\n                <h3 className=\"font-bold text-lg text-green-800\">Thank You for Your Support! 💖</h3>\n              </div>\n              <p className=\"text-green-700 text-sm leading-relaxed\">\n                Your subscription directly helps us improve GlowQuest, add new features, and keep our community safe and magical. We couldn't do this without amazing supporters like you! 🌟\n              </p>\n            </motion.div>\n\n            {/* CTA Buttons */}\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 1.7 }}\n              className=\"space-y-3\"\n            >\n              <Button asChild className={`w-full ${isUltra \n                ? 'bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500' \n                : 'bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500'\n              } text-white font-bold text-lg py-6 rounded-2xl cute-shadow hover:scale-105 transition-transform`}>\n                <Link to={createPageUrl(\"Index\")}>\n                  <Sparkles className=\"w-5 h-5 mr-2\" />\n                  Start Exploring! ✨\n                  <ArrowRight className=\"w-5 h-5 ml-2\" />\n                </Link>\n              </Button>\n\n              <Button asChild variant=\"outline\" className=\"w-full border-2 border-pink-300 text-pink-700 font-bold py-4 rounded-2xl hover:bg-pink-50\">\n                <Link to={createPageUrl(\"Profile\")}>\n                  View My Profile\n                </Link>\n              </Button>\n            </motion.div>\n\n            {/* Small Print */}\n            <p className=\"text-center text-xs text-gray-500 mt-6\">\n              Your subscription will auto-renew monthly. You can cancel anytime from your profile.\n            </p>\n          </CardContent>\n        </Card>\n\n        {/* Floating Stars */}\n        <div className=\"absolute -top-10 -right-10 text-6xl animate-bounce\">⭐</div>\n        <div className=\"absolute -bottom-10 -left-10 text-6xl animate-bounce\" style={{ animationDelay: '0.5s' }}>💎</div>\n      </motion.div>\n    </div>\n  );\n}"},"page_names":["Shop","Premium","Profile","CommunityFeed","ProductDetails","FeminizationAI","termsofservice","GlowConnect","Index","Community","UserManagement","DominaDashboard","DominaChat","Landing","PremiumWelcome"],"discovered_routes":null,"components":{"layout/OnlineUserCounter":"import React, { useState, useEffect } from \"react\";\n\nexport default function OnlineUserCounter({ isMobile = false }) {\n  const [onlineUsers, setOnlineUsers] = useState(180); // Start with a realistic number\n\n  useEffect(() => {\n    // Realistic fluctuation of online users\n    const interval = setInterval(() => {\n      setOnlineUsers(prevUsers => {\n        // Small random change to make it look real\n        const change = Math.floor(Math.random() * 7) - 3; // -3 to +3\n        let newCount = prevUsers + change;\n\n        // Keep it in a realistic range for a growing app (150-250)\n        if (newCount < 150) newCount = 150 + Math.floor(Math.random() * 20);\n        if (newCount > 250) newCount = 250 - Math.floor(Math.random() * 20);\n\n        return newCount;\n      });\n    }, 2000); // Every 2 seconds for natural changes\n\n    return () => clearInterval(interval);\n  }, []);\n\n  if (isMobile) {\n    return (\n      <div className=\"flex items-center gap-1 bg-green-100/70 text-green-800 font-bold text-xs px-2 py-1 rounded-full border border-green-200/50 mt-1\">\n        <span className=\"relative flex h-1.5 w-1.5\">\n          <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75\"></span>\n          <span className=\"relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500\"></span>\n        </span>\n        {onlineUsers} online\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"mt-4\">\n      <div className=\"inline-flex items-center gap-2 bg-green-100/70 text-green-800 font-bold text-xs px-3 py-2 rounded-full border-2 border-green-200/50\">\n        <span className=\"relative flex h-2 w-2\">\n          <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75\"></span>\n          <span className=\"relative inline-flex rounded-full h-2 w-2 bg-green-500\"></span>\n        </span>\n        {onlineUsers} Cuties online\n      </div>\n    </div>\n  );\n}","community/CommentSection":"import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { CommunityPost } from '@/entities/CommunityPost';\nimport { Button } from '@/components/ui/button';\nimport { Textarea } from '@/components/ui/textarea';\nimport { Crown, Send, Loader2 } from 'lucide-react';\nimport { formatDistanceToNow } from \"date-fns\";\nimport { enUS } from \"date-fns/locale\";\n\nexport default function CommentSection({ post, user, userMap, onCommentPosted, formatUserEmail }) {\n  const [newComment, setNewComment] = useState(\"\");\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState(null);\n\n  const handleCommentSubmit = async (e) => {\n    e.preventDefault();\n    if (!newComment.trim()) {\n      setError(\"Comment can't be empty, sweetie!\");\n      return;\n    }\n\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      // WICHTIG: Sende das Datum nicht mehr vom Client.\n      // Der Server wird das `updated_date` des Posts aktualisieren.\n      const commentToAdd = {\n        user_email: user.email,\n        content: newComment.trim(),\n        // Das `created_date` wird jetzt ignoriert und wir verwenden das Datum des Haupt-Posts\n      };\n      \n      const updatedComments = [...(post.comments || []), commentToAdd];\n      \n      await CommunityPost.update(post.id, { comments: updatedComments });\n      \n      // Für die sofortige Anzeige verwenden wir ein neues Datum\n      const displayComments = updatedComments.map(c => ({...c, created_date: new Date().toISOString()}));\n      onCommentPosted(post.id, displayComments);\n      setNewComment(\"\");\n\n    } catch (err) {\n      console.error(\"Error posting comment:\", err);\n      setError(\"Oops! Couldn't post your comment. Please try again. 💕\");\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <div className=\"pt-4\">\n      {/* New Comment Form */}\n      <form onSubmit={handleCommentSubmit} className=\"flex items-start gap-3 mb-4\">\n        <Textarea\n          placeholder=\"Add a cute comment...\"\n          value={newComment}\n          onChange={(e) => setNewComment(e.target.value)}\n          className=\"flex-1 bg-white border-pink-200/80 focus:border-pink-400 rounded-2xl resize-none\"\n          rows={1}\n        />\n        <Button type=\"submit\" disabled={isSubmitting} size=\"icon\" className=\"rounded-full w-10 h-10 bg-gradient-to-r from-pink-500 to-purple-500 text-white cute-shadow\">\n          {isSubmitting ? <Loader2 className=\"w-4 h-4 animate-spin\" /> : <Send className=\"w-4 h-4\" />}\n        </Button>\n      </form>\n      {error && <p className=\"text-sm text-red-500 mb-4\">{error}</p>}\n      \n      {/* Existing Comments */}\n      <div className=\"space-y-4\">\n        <AnimatePresence>\n          {(post.comments || []).slice().reverse().map((comment, index) => {\n            // Verwende das `updated_date` des Posts als Fallback für ältere Kommentare\n            // und das `created_date` des Kommentars für die sofortige Anzeige neuer Kommentare\n            const commentDateString = comment.created_date || post.updated_date || post.created_date;\n            let commentDate;\n            try {\n              commentDate = new Date(commentDateString);\n              if (isNaN(commentDate.getTime())) {\n                commentDate = new Date();\n              }\n            } catch (error) {\n              commentDate = new Date();\n            }\n            \n            return (\n              <motion.div\n                key={`${comment.user_email}-${index}-${comment.content}`}\n                initial={{ opacity: 0, y: 10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, x: -20 }}\n                transition={{ duration: 0.3 }}\n                layout\n              >\n                <div className=\"flex items-start gap-3\">\n                  <div className=\"bg-pink-100/60 p-3 rounded-2xl rounded-tl-lg w-full\">\n                      <div className=\"flex items-center justify-between mb-1\">\n                          <div className=\"flex items-center gap-1\">\n                              <p className=\"font-bold text-pink-700 text-xs\">{formatUserEmail(comment.user_email)}</p>\n                              {userMap[comment.user_email]?.is_premium && <Crown className=\"w-3 h-3 text-yellow-500\" />}\n                          </div>\n                          <p className=\"text-xs text-gray-400\">\n                            {formatDistanceToNow(commentDate, { addSuffix: true, locale: enUS })}\n                          </p>\n                      </div>\n                      <p className=\"text-sm text-gray-700 whitespace-pre-wrap\">{comment.content}</p>\n                  </div>\n                </div>\n              </motion.div>\n            );\n          })}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}","glowconnect/CountdownTimer":"import React, { useState, useEffect } from 'react';\n\nexport default function CountdownTimer({ targetDate }) {\n  const calculateTimeLeft = () => {\n    const difference = +new Date(targetDate) - +new Date();\n    let timeLeft = {};\n\n    if (difference > 0) {\n      timeLeft = {\n        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),\n        minutes: Math.floor((difference / 1000 / 60) % 60),\n        seconds: Math.floor((difference / 1000) % 60),\n      };\n    }\n\n    return timeLeft;\n  };\n\n  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setTimeLeft(calculateTimeLeft());\n    }, 1000);\n\n    return () => clearTimeout(timer);\n  });\n\n  return (\n    <div className=\"bg-gradient-to-r from-purple-100/70 to-pink-100/70 border-2 border-purple-200/50 rounded-2xl p-4 my-6 max-w-sm w-full mx-auto\">\n      <div className=\"text-center\">\n        <p className=\"text-sm font-bold text-purple-800 mb-2\">New chats in:</p>\n        <div className=\"grid grid-cols-3 gap-2\">\n          <div className=\"bg-white/70 rounded-xl p-2\">\n            <div className=\"text-lg font-bold text-purple-700\">{String(timeLeft.hours).padStart(2, '0')}</div>\n            <div className=\"text-xs text-purple-600\">Hours</div>\n          </div>\n          <div className=\"bg-white/70 rounded-xl p-2\">\n            <div className=\"text-lg font-bold text-purple-700\">{String(timeLeft.minutes).padStart(2, '0')}</div>\n            <div className=\"text-xs text-purple-600\">Minutes</div>\n          </div>\n          <div className=\"bg-white/70 rounded-xl p-2\">\n            <div className=\"text-lg font-bold text-purple-700\">{String(timeLeft.seconds).padStart(2, '0')}</div>\n            <div className=\"text-xs text-purple-600\">Seconds</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}","agent/MessageBubble":"\nimport React, { useState } from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport { Button } from \"@/components/ui/button\";\nimport { Copy, Zap, CheckCircle2, AlertCircle, Loader2, ChevronRight, Clock, Sparkles } from 'lucide-react';\nimport { cn } from \"@/lib/utils\";\nimport { toast } from \"sonner\";\n\nconst FunctionDisplay = ({ toolCall }) => {\n    const [expanded, setExpanded] = useState(false);\n    const name = toolCall?.name || 'Function';\n    const status = toolCall?.status || 'pending';\n    const results = toolCall?.results;\n    \n    const parsedResults = (() => {\n        if (!results) return null;\n        try {\n            return typeof results === 'string' ? JSON.parse(results) : results;\n        } catch {\n            return results;\n        }\n    })();\n    \n    const isError = results && (\n        (typeof results === 'string' && /error|failed/i.test(results)) ||\n        (parsedResults?.success === false)\n    );\n    \n    const statusConfig = {\n        pending: { icon: Clock, color: 'text-slate-400', text: 'Pending' },\n        running: { icon: Loader2, color: 'text-slate-500', text: 'Running...', spin: true },\n        in_progress: { icon: Loader2, color: 'text-slate-500', text: 'Running...', spin: true },\n        completed: isError ? \n            { icon: AlertCircle, color: 'text-red-500', text: 'Failed' } : \n            { icon: CheckCircle2, color: 'text-green-600', text: 'Success' },\n        success: { icon: CheckCircle2, color: 'text-green-600', text: 'Success' },\n        failed: { icon: AlertCircle, color: 'text-red-500', text: 'Failed' },\n        error: { icon: AlertCircle, color: 'text-red-500', text: 'Failed' }\n    }[status] || { icon: Zap, color: 'text-slate-500', text: '' };\n    \n    const Icon = statusConfig.icon;\n    const formattedName = name.split('.').reverse().join(' ').toLowerCase();\n    \n    return (\n        <div className=\"mt-2 text-xs\">\n            <button\n                onClick={() => setExpanded(!expanded)}\n                className={cn(\n                    \"flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all\",\n                    \"hover:bg-slate-50\",\n                    expanded ? \"bg-slate-50 border-slate-300\" : \"bg-white border-slate-200\"\n                )}\n            >\n                <Icon className={cn(\"h-3 w-3\", statusConfig.color, statusConfig.spin && \"animate-spin\")} />\n                <span className=\"text-slate-700\">{formattedName}</span>\n                {statusConfig.text && (\n                    <span className={cn(\"text-slate-500\", isError && \"text-red-600\")}>\n                        • {statusConfig.text}\n                    </span>\n                )}\n                {!statusConfig.spin && (toolCall.arguments_string || results) && (\n                    <ChevronRight className={cn(\"h-3 w-3 text-slate-400 transition-transform ml-auto\", \n                        expanded && \"rotate-90\")} />\n                )}\n            </button>\n            \n            {expanded && !statusConfig.spin && (\n                <div className=\"mt-1.5 ml-3 pl-3 border-l-2 border-slate-200 space-y-2\">\n                    {toolCall.arguments_string && (\n                        <div>\n                            <div className=\"text-xs text-slate-500 mb-1\">Parameters:</div>\n                            <pre className=\"bg-slate-50 rounded-md p-2 text-xs text-slate-600 whitespace-pre-wrap\">\n                                {(() => {\n                                    try {\n                                        return JSON.stringify(JSON.parse(toolCall.arguments_string), null, 2);\n                                    } catch {\n                                        return toolCall.arguments_string;\n                                    }\n                                })()}\n                            </pre>\n                        </div>\n                    )}\n                    {parsedResults && (\n                        <div>\n                            <div className=\"text-xs text-slate-500 mb-1\">Result:</div>\n                            <pre className=\"bg-slate-50 rounded-md p-2 text-xs text-slate-600 whitespace-pre-wrap max-h-48 overflow-auto\">\n                                {typeof parsedResults === 'object' ? \n                                    JSON.stringify(parsedResults, null, 2) : parsedResults}\n                            </pre>\n                        </div>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default function MessageBubble({ message }) {\n    const isUser = message.role === 'user';\n    const isAssistant = message.role === 'assistant';\n\n    return (\n        <div className={cn(\"flex gap-3 my-4\", isUser ? \"justify-end\" : \"justify-start\")}>\n            {isAssistant && (\n                <div className=\"w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 flex items-center justify-center shadow-lg cute-shadow wiggle shrink-0 self-start\">\n                    <Sparkles className=\"w-5 h-5 text-white\" />\n                </div>\n            )}\n            <div className={cn(\"max-w-[85%]\", isUser && \"flex flex-col items-end\")}>\n                {message.content && (\n                    <div className={cn(\n                        \"rounded-3xl px-4 py-2.5 cute-shadow\",\n                        isUser \n                          ? \"bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-br-lg\"\n                          : \"bg-white border border-pink-200/50 rounded-bl-lg\"\n                    )}>\n                        <ReactMarkdown \n                            className=\"prose prose-sm prose-slate max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0\"\n                            components={{\n                                p: ({ children }) => <p className=\"my-1 leading-relaxed\">{children}</p>,\n                                ul: ({ children }) => <ul className=\"my-1 ml-4 list-disc space-y-1\">{children}</ul>,\n                                ol: ({ children }) => <ol className=\"my-1 ml-4 list-decimal space-y-1\">{children}</ol>,\n                                li: ({ children }) => <li className=\"my-0.5\">{children}</li>,\n                                a: ({ children, ...props }) => <a {...props} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-pink-600 hover:text-pink-700\">{children}</a>,\n                                code: ({ inline, className, children, ...props }) => {\n                                    const match = /language-(\\w+)/.exec(className || '');\n                                    return !inline && match ? (\n                                        <div className=\"relative group/code my-2\">\n                                            <pre className=\"bg-slate-900 text-slate-100 rounded-lg p-3 overflow-x-auto\">\n                                                <code className={className} {...props}>{children}</code>\n                                            </pre>\n                                            <Button\n                                                size=\"icon\"\n                                                variant=\"ghost\"\n                                                className=\"absolute top-2 right-2 h-6 w-6 opacity-0 group-hover/code:opacity-100 bg-slate-800 hover:bg-slate-700\"\n                                                onClick={() => {\n                                                    navigator.clipboard.writeText(String(children).replace(/\\n$/, ''));\n                                                    toast.success('Code copied!');\n                                                }}\n                                            >\n                                                <Copy className=\"h-3 w-3 text-slate-400\" />\n                                            </Button>\n                                        </div>\n                                    ) : (\n                                        <code className=\"px-1.5 py-1 rounded bg-pink-100/50 text-pink-700 font-mono text-xs\">\n                                            {children}\n                                        </code>\n                                    );\n                                },\n                            }}\n                        >\n                            {message.content}\n                        </ReactMarkdown>\n                    </div>\n                )}\n                \n                {message.tool_calls?.length > 0 && (\n                    <div className=\"space-y-1 mt-2\">\n                        {message.tool_calls.map((toolCall, idx) => (\n                            <FunctionDisplay key={idx} toolCall={toolCall} />\n                        ))}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n}\n","agent/ChatInput":"import React, { useRef, useEffect } from 'react';\nimport { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Send, Loader2 } from \"lucide-react\";\n\nexport default function ChatInput({ onSubmit, input, setInput, isLoading }) {\n  const textareaRef = useRef(null);\n\n  useEffect(() => {\n    if (textareaRef.current) {\n      textareaRef.current.style.height = 'auto';\n      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n    }\n  }, [input]);\n  \n  const handleSend = () => {\n    if (input.trim() && !isLoading) {\n      onSubmit();\n    }\n  };\n  \n  const handleKeyPress = (e) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      handleSend();\n    }\n  };\n\n  return (\n    <div className=\"mt-auto p-4 bg-white/50 backdrop-blur-md rounded-b-3xl border-t-2 border-pink-200/50\">\n        <div className=\"flex items-end gap-3\">\n            <Textarea\n                ref={textareaRef}\n                placeholder=\"Message GlowQuest Support... 💖\"\n                value={input}\n                onChange={(e) => setInput(e.target.value)}\n                onKeyPress={handleKeyPress}\n                className=\"flex-1 bg-white border-2 border-pink-200/80 rounded-2xl resize-none focus:border-pink-400 max-h-40\"\n                rows={1}\n                disabled={isLoading}\n            />\n            <Button\n                onClick={handleSend}\n                disabled={isLoading || !input.trim()}\n                className=\"rounded-full w-14 h-14 bg-gradient-to-r from-pink-500 to-purple-500 text-white cute-shadow transition-transform hover:scale-110 shrink-0\"\n            >\n                {isLoading ? <Loader2 className=\"w-6 h-6 animate-spin\" /> : <Send className=\"w-6 h-6\" />}\n            </Button>\n        </div>\n    </div>\n  );\n}","layout/AiSupportDialog":"import React, { useState, useEffect, useRef } from 'react';\nimport { agentSDK } from \"@/agents\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';\nimport { Loader2, AlertCircle, LifeBuoy } from 'lucide-react';\nimport { AnimatePresence } from 'framer-motion';\nimport MessageBubble from '../agent/MessageBubble';\nimport ChatInput from '../agent/ChatInput';\n\nexport default function AiSupportDialog({ open, onOpenChange }) {\n    const [conversation, setConversation] = useState(null);\n    const [messages, setMessages] = useState([]);\n    const [input, setInput] = useState('');\n    const [isLoading, setIsLoading] = useState(true);\n    const [isSending, setIsSending] = useState(false);\n    const [error, setError] = useState(null);\n    const messagesEndRef = useRef(null);\n\n    useEffect(() => {\n        if (open) {\n            const initConversation = async () => {\n                setIsLoading(true);\n                setError(null);\n                setMessages([]);\n                setConversation(null);\n                try {\n                    const conversations = await agentSDK.listConversations({ agent_name: 'glowquest_support' });\n                    // For simplicity, we'll just create a new one each time for this dialog.\n                    // A more advanced implementation might find and reuse an existing one.\n                    const newConversation = await agentSDK.createConversation({\n                        agent_name: 'glowquest_support',\n                        metadata: { name: `Support Chat Session - ${new Date().toISOString()}` }\n                    });\n                    setConversation(newConversation);\n                } catch (err) {\n                    console.error(\"Failed to initialize conversation\", err);\n                    setError(\"Could not start a chat with the support agent. Please try again.\");\n                } finally {\n                    setIsLoading(false);\n                }\n            };\n            initConversation();\n        }\n    }, [open]);\n\n    useEffect(() => {\n        if (!conversation?.id) return;\n        \n        const unsubscribe = agentSDK.subscribeToConversation(conversation.id, (data) => {\n            setMessages(data.messages || []);\n            const lastMessage = data.messages[data.messages.length - 1];\n            if (lastMessage?.role === 'assistant' && lastMessage?.status === 'in_progress') {\n                setIsSending(true);\n            } else {\n                setIsSending(false);\n            }\n        });\n\n        return () => unsubscribe();\n    }, [conversation?.id]);\n\n    useEffect(() => {\n        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n    }, [messages]);\n\n    const handleSendMessage = async () => {\n        if (!input.trim() || !conversation) return;\n        \n        const messageContent = input;\n        setInput('');\n        setIsSending(true);\n        \n        try {\n            await agentSDK.addMessage(conversation, {\n                role: 'user',\n                content: messageContent,\n            });\n        } catch (err) {\n            console.error('Failed to send message:', err);\n            setError(\"Failed to send message. Please check your connection and try again.\");\n            setIsSending(false);\n        }\n    };\n\n    const renderContent = () => {\n        if (isLoading) {\n            return (\n                <div className=\"flex flex-col items-center justify-center h-full text-center py-16\">\n                    <Loader2 className=\"w-10 h-10 animate-spin text-pink-500 mb-4\" />\n                    <p className=\"text-md font-medium text-gray-600\">Connecting to GlowQuest Support... ✨</p>\n                </div>\n            );\n        }\n\n        if (error) {\n            return (\n                <div className=\"flex flex-col items-center justify-center h-full text-center py-16\">\n                    <AlertCircle className=\"w-10 h-10 text-red-500 mb-4\" />\n                    <p className=\"text-md font-bold text-red-700\">{error}</p>\n                    <button \n                        onClick={() => onOpenChange(false)} \n                        className=\"mt-4 px-4 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600\"\n                    >\n                        Close\n                    </button>\n                </div>\n            );\n        }\n\n        return (\n            <div className=\"flex flex-col h-[60vh] md:h-[70vh]\">\n                <div className=\"flex-1 overflow-y-auto p-4 md:p-6 space-y-4\">\n                    <AnimatePresence>\n                        {messages.map((msg, index) => (\n                            <MessageBubble key={msg.id || index} message={msg} />\n                        ))}\n                    </AnimatePresence>\n                    <div ref={messagesEndRef} />\n                </div>\n                <ChatInput \n                    onSubmit={handleSendMessage}\n                    input={input}\n                    setInput={setInput}\n                    isLoading={isSending}\n                />\n            </div>\n        );\n    };\n\n    return (\n        <Dialog open={open} onOpenChange={onOpenChange}>\n            <DialogContent className=\"glassmorphism border-pink-200/50 rounded-3xl max-w-lg p-0\">\n                <DialogHeader className=\"p-6 border-b border-pink-200/50\">\n                    <DialogTitle className=\"flex items-center gap-3 text-xl md:text-2xl gradient-text\">\n                        <LifeBuoy className=\"w-6 h-6\" />\n                        AI Support Chat\n                    </DialogTitle>\n                </DialogHeader>\n                {renderContent()}\n            </DialogContent>\n        </Dialog>\n    );\n}","layout/PremiumUpgradeDialog":"\nimport React from 'react';\nimport { Dialog, DialogContent, DialogHeader } from '@/components/ui/dialog';\nimport { Button } from '@/components/ui/button';\nimport { Crown, Sparkles, X, Gift } from 'lucide-react';\nimport { Link } from 'react-router-dom';\nimport { createPageUrl } from '@/utils';\nimport { motion } from 'framer-motion';\n\nexport default function PremiumUpgradeDialog({ open, onOpenChange }) {\n  const benefits = [\n    \"💬 Unlimited daily chats in GlowConnect\",\n    \"🤖 Access to Glow-AI Companion\", \n    \"👑 Exclusive premium challenges\",\n    \"🔊 Voice chat in GlowConnect\",\n    \"📹 Video chat access\",\n    \"🚀 Advanced filters & features\"\n  ];\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"glassmorphism border-pink-200/50 rounded-3xl max-w-md p-0 overflow-hidden\">\n        <div className=\"relative\">\n          {/* Close Button */}\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => onOpenChange(false)}\n            className=\"absolute top-4 right-4 z-10 text-white hover:bg-white/20 rounded-full\"\n          >\n            <X className=\"w-5 h-5\" />\n          </Button>\n\n          {/* Header with gradient background */}\n          <div className=\"bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 p-8 text-white text-center relative\">\n            <motion.div\n              initial={{ scale: 0.8, opacity: 0 }}\n              animate={{ scale: 1, opacity: 1 }}\n              transition={{ duration: 0.5 }}\n            >\n              <div className=\"w-20 h-20 bg-white/30 rounded-full flex items-center justify-center mx-auto mb-4 bounce-cute\">\n                <Crown className=\"w-10 h-10 text-white\" />\n              </div>\n              <h2 className=\"text-2xl font-bold mb-2\">Unlock Your Full Potential! ✨</h2>\n              <p className=\"text-white/90\">Join thousands of cuties on their glow-up journey!</p>\n            </motion.div>\n          </div>\n\n          {/* Content */}\n          <div className=\"p-6 space-y-6\">\n            {/* Benefits List */}\n            <div className=\"space-y-3\">\n              {benefits.map((benefit, index) => (\n                <motion.div\n                  key={index}\n                  initial={{ opacity: 0, x: -20 }}\n                  animate={{ opacity: 1, x: 0 }}\n                  transition={{ duration: 0.3, delay: index * 0.1 }}\n                  className=\"flex items-center gap-3 text-gray-700\"\n                >\n                  <div className=\"w-2 h-2 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full\"></div>\n                  <span className=\"text-sm font-medium\">{benefit}</span>\n                </motion.div>\n              ))}\n            </div>\n\n            {/* Action Buttons */}\n            <div className=\"space-y-3\">\n              <Button \n                asChild\n                className=\"w-full bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-white font-bold py-3 rounded-2xl cute-shadow hover:scale-105 transition-transform\"\n              >\n                <Link to={createPageUrl(\"Premium\")} onClick={() => onOpenChange(false)}>\n                  <Crown className=\"w-5 h-5 mr-2\" />\n                  Upgrade to Premium! ✨\n                </Link>\n              </Button>\n              <Button \n                variant=\"ghost\"\n                onClick={() => onOpenChange(false)}\n                className=\"w-full text-gray-600 hover:bg-gray-100 rounded-xl\"\n              >\n                Maybe Later\n              </Button>\n            </div>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n","layout/UpdatePopup":"\nimport React from 'react';\nimport { Dialog, DialogContent } from '@/components/ui/dialog';\nimport { Button } from '@/components/ui/button';\nimport { Shield, Zap, Crown } from 'lucide-react';\nimport { User } from '@/entities/User';\nimport { motion } from 'framer-motion';\nimport { updateMyProfile } from \"@/functions/updateMyProfile\";\n\nexport default function UpdatePopup({ open, onOpenChange }) {\n\n  const handleClose = async () => {\n    try {\n      await updateMyProfile({ has_seen_update_popup: true });\n    } catch (error) {\n      console.error(\"Failed to update user status for popup:\", error);\n    }\n    onOpenChange(false);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent className=\"glassmorphism border-black/30 rounded-3xl max-w-md p-0 overflow-hidden\">\n        <div className=\"relative\">\n          <div className=\"bg-gradient-to-r from-gray-800 via-purple-900 to-black p-8 text-white text-center relative\">\n            <motion.div\n              initial={{ scale: 0.8, opacity: 0 }}\n              animate={{ scale: 1, opacity: 1 }}\n              transition={{ duration: 0.5 }}\n            >\n              <div className=\"w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4 bounce-cute\">\n                <Shield className=\"w-10 h-10 text-yellow-300\" />\n              </div>\n              <h2 className=\"text-2xl font-bold mb-2\">The Ultimate Glow-Up! 💎</h2>\n              <p className=\"text-white/90\">A new, exclusive feature has arrived!</p>\n            </motion.div>\n          </div>\n\n          <div className=\"p-8 text-center space-y-6\">\n            <p className=\"text-gray-700 font-medium text-lg leading-relaxed\">\n              Experience the next level of your journey with{' '}\n              <strong className=\"bg-clip-text text-transparent bg-gradient-to-r from-gray-800 to-black\">Real Domina Chat</strong>!\n            </p>\n            <p className=\"text-gray-600\">\n              Connect live with official Dominas for the ultimate guidance. This exclusive feature is now available for all <strong className=\"font-bold\">Ultra Members</strong>! 👑\n            </p>\n\n            <Button \n              onClick={handleClose}\n              className=\"w-full bg-gradient-to-r from-purple-600 via-black to-purple-800 text-white font-bold py-3 rounded-2xl cute-shadow hover:scale-105 transition-transform\"\n            >\n              This is amazing! ✨\n            </Button>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n","layout/PremiumWelcomeDialog":"import React from 'react';\nimport { Dialog, DialogContent } from '@/components/ui/dialog';\nimport { Button } from '@/components/ui/button';\nimport { Crown, Sparkles, Zap, Heart, Star } from 'lucide-react';\nimport { motion } from 'framer-motion';\n\nexport default function PremiumWelcomeDialog({ open, onOpenChange, tier }) {\n  const isUltra = tier === 'ultra';\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"glassmorphism border-pink-200/50 rounded-3xl max-w-md p-0 overflow-hidden\">\n        <div className=\"relative\">\n          {/* Confetti Background Effect */}\n          <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n            {[...Array(20)].map((_, i) => (\n              <motion.div\n                key={i}\n                initial={{ y: -20, opacity: 1 }}\n                animate={{ \n                  y: 400,\n                  x: Math.random() * 400 - 200,\n                  rotate: Math.random() * 360,\n                  opacity: 0\n                }}\n                transition={{ \n                  duration: 2 + Math.random() * 2,\n                  delay: Math.random() * 0.5,\n                  repeat: Infinity,\n                  repeatDelay: 3\n                }}\n                className={`absolute text-2xl`}\n                style={{ left: `${Math.random() * 100}%` }}\n              >\n                {['🎉', '✨', '💖', '👑', '💎'][Math.floor(Math.random() * 5)]}\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Header with gradient background */}\n          <div className={`${isUltra \n            ? 'bg-gradient-to-r from-purple-600 via-pink-600 to-orange-600' \n            : 'bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500'} p-8 text-white text-center relative`}>\n            <motion.div\n              initial={{ scale: 0, rotate: -180 }}\n              animate={{ scale: 1, rotate: 0 }}\n              transition={{ duration: 0.6, type: \"spring\" }}\n            >\n              <div className={`w-24 h-24 ${isUltra \n                ? 'bg-gradient-to-r from-yellow-300 to-orange-300' \n                : 'bg-white/30'} rounded-full flex items-center justify-center mx-auto mb-4 bounce-cute shadow-2xl`}>\n                {isUltra ? (\n                  <Zap className=\"w-12 h-12 text-white\" />\n                ) : (\n                  <Crown className=\"w-12 h-12 text-white\" />\n                )}\n              </div>\n              <motion.h2 \n                className=\"text-3xl font-bold mb-2\"\n                initial={{ opacity: 0, y: 20 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ delay: 0.3 }}\n              >\n                {isUltra ? '🎊 Welcome to Ultra Glow! 🎊' : '🎉 Welcome to Premium! 🎉'}\n              </motion.h2>\n              <motion.p \n                className=\"text-white/90 text-lg\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ delay: 0.5 }}\n              >\n                You're now part of the exclusive club! ✨\n              </motion.p>\n            </motion.div>\n          </div>\n\n          {/* Content */}\n          <div className=\"p-8 space-y-6\">\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.7 }}\n            >\n              <h3 className=\"text-xl font-bold gradient-text mb-4 text-center\">\n                🎁 Your New Powers Unlocked! 🎁\n              </h3>\n              \n              <div className=\"space-y-3\">\n                {isUltra ? (\n                  <>\n                    <div className=\"flex items-center gap-3 bg-gradient-to-r from-purple-50 to-pink-50 p-3 rounded-xl\">\n                      <Zap className=\"w-5 h-5 text-orange-500\" />\n                      <span className=\"text-sm font-medium text-gray-800\">GlowBoost - Get matched with top users first!</span>\n                    </div>\n                    <div className=\"flex items-center gap-3 bg-gradient-to-r from-purple-50 to-pink-50 p-3 rounded-xl\">\n                      <Star className=\"w-5 h-5 text-yellow-500\" />\n                      <span className=\"text-sm font-medium text-gray-800\">30-min early access to all new drops!</span>\n                    </div>\n                    <div className=\"flex items-center gap-3 bg-gradient-to-r from-purple-50 to-pink-50 p-3 rounded-xl\">\n                      <Crown className=\"w-5 h-5 text-purple-500\" />\n                      <span className=\"text-sm font-medium text-gray-800\">Chat with real verified Dominas!</span>\n                    </div>\n                  </>\n                ) : (\n                  <>\n                    <div className=\"flex items-center gap-3 bg-gradient-to-r from-pink-50 to-purple-50 p-3 rounded-xl\">\n                      <Sparkles className=\"w-5 h-5 text-pink-500\" />\n                      <span className=\"text-sm font-medium text-gray-800\">Unlimited GlowConnect chats!</span>\n                    </div>\n                    <div className=\"flex items-center gap-3 bg-gradient-to-r from-pink-50 to-purple-50 p-3 rounded-xl\">\n                      <Crown className=\"w-5 h-5 text-purple-500\" />\n                      <span className=\"text-sm font-medium text-gray-800\">Access to Glow-AI Companion!</span>\n                    </div>\n                    <div className=\"flex items-center gap-3 bg-gradient-to-r from-pink-50 to-purple-50 p-3 rounded-xl\">\n                      <Heart className=\"w-5 h-5 text-pink-500\" />\n                      <span className=\"text-sm font-medium text-gray-800\">Exclusive premium challenges!</span>\n                    </div>\n                  </>\n                )}\n              </div>\n            </motion.div>\n\n            <motion.div\n              initial={{ opacity: 0, scale: 0.9 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ delay: 0.9 }}\n            >\n              <Button \n                onClick={() => onOpenChange(false)}\n                className={`w-full ${isUltra \n                  ? 'bg-gradient-to-r from-purple-600 via-pink-600 to-orange-600' \n                  : 'bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500'} text-white font-bold py-4 text-lg rounded-2xl cute-shadow hover:scale-105 transition-transform`}\n              >\n                <Sparkles className=\"w-5 h-5 mr-2\" />\n                Let's Glow! ✨\n              </Button>\n            </motion.div>\n\n            <p className=\"text-center text-sm text-gray-500\">\n              Thank you for supporting GlowQuest! 💖\n            </p>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}"},"layout":"\nimport React, { useState, useEffect } from \"react\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { createPageUrl } from \"@/utils\";\nimport { User } from \"@/entities/User\";\nimport { Home, Sparkles, MessageCircle, ShoppingBag, Crown, User as UserIcon, LifeBuoy, Users } from \"lucide-react\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarHeader,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport OnlineUserCounter from \"../components/layout/OnlineUserCounter\";\nimport AiSupportDialog from \"../components/layout/AiSupportDialog\";\nimport PremiumUpgradeDialog from \"../components/layout/PremiumUpgradeDialog\";\nimport UpdatePopup from \"../components/layout/UpdatePopup\";\nimport PremiumWelcomeDialog from \"../components/layout/PremiumWelcomeDialog\"; // Added import\nimport Landing from \"../pages/Landing\"; // Import Landing page\nimport { updateMyProfile } from \"@/functions/updateMyProfile\"; // Added import\n\nconst navigationItems = [\n  {\n    title: \"GlowConnect\",\n    url: createPageUrl(\"Index\"),\n    icon: MessageCircle,\n  },\n  {\n    title: \"Feminization AI\",\n    url: createPageUrl(\"FeminizationAI\"),\n    icon: Sparkles,\n    premium: true,\n    mobileTitle: \"GlowAI\",\n  },\n  {\n    title: \"Community\",\n    url: createPageUrl(\"Community\"),\n    icon: Users,\n    mobileTitle: \"Community\",\n  },\n  {\n    title: \"Shop\",\n    url: createPageUrl(\"Shop\"),\n    icon: ShoppingBag,\n  },\n  {\n    title: \"Premium\",\n    url: createPageUrl(\"Premium\"),\n    icon: Crown,\n  },\n];\n\nconst getNavigationItems = (user) => {\n  const baseItems = [...navigationItems];\n  \n  if (user?.role === 'admin' || user?.is_domina) {\n      baseItems.splice(baseItems.length - 1, 0, {\n          title: \"Domina Dashboard\",\n          url: createPageUrl(\"DominaDashboard\"),\n          icon: Crown,\n          mobileTitle: \"Domina\",\n          adminOnly: true\n      });\n  }\n\n  if (user?.email === 'linus10.2008@gmail.com') {\n    baseItems.splice(baseItems.length - 1, 0, {\n      title: \"User Management\",\n      url: createPageUrl(\"UserManagement\"),\n      icon: Users,\n      mobileTitle: \"Users\",\n      adminOnly: true\n    });\n  }\n  \n  return baseItems;\n};\n\nexport default function Layout({ children, currentPageName }) {\n  const location = useLocation();\n  const [user, setUser] = useState(null);\n  const [isSupportDialogOpen, setIsSupportDialogOpen] = useState(false);\n  const [isPremiumDialogOpen, setIsPremiumDialogOpen] = useState(false);\n  const [isUpdatePopupOpen, setIsUpdatePopupOpen] = useState(false);\n  const [isCheckingAuth, setIsCheckingAuth] = useState(true);\n  const [showWelcomeDialog, setShowWelcomeDialog] = useState(false);\n  const [welcomeTier, setWelcomeTier] = useState(null);\n\n  // Load user ONCE on app start\n  useEffect(() => {\n    const fetchUser = async () => {\n      try {\n        const currentUser = await User.me();\n        setUser(currentUser);\n        \n        // Changed from User.updateMyUserData to updateMyProfile\n        await updateMyProfile({ \n          last_active_at: new Date().toISOString() \n        });\n\n        // Show update popup if user hasn't seen it\n        if (currentUser && !currentUser.has_seen_update_popup) {\n          setTimeout(() => setIsUpdatePopupOpen(true), 2000);\n        }\n      } catch (error) {\n        setUser(null); \n      } finally {\n        setIsCheckingAuth(false);\n      }\n    };\n    fetchUser();\n  }, []);\n\n  // NEW: Check for upgrade parameter separately\n  useEffect(() => {\n    // Only check for upgrade parameter if user is logged in\n    // This prevents the dialog from showing on initial load before user is known,\n    // or if the user is not logged in.\n    if (!user) return; \n\n    const urlParams = new URLSearchParams(window.location.search);\n    const upgrade = urlParams.get('upgrade');\n    \n    if (upgrade === 'premium' || upgrade === 'ultra') {\n      console.log('UPGRADE DETECTED:', upgrade);\n      setWelcomeTier(upgrade);\n      setShowWelcomeDialog(true);\n      // Remove the parameter from URL\n      window.history.replaceState({}, '', window.location.pathname);\n    }\n  }, [location.search, user]); // Re-run when URL changes or user state changes\n\n  // Show premium popup for free users (separate effect)\n  useEffect(() => {\n    // Only show if user is logged in, not premium, and no other popups are open (including welcome dialog)\n    if (user && !user.is_premium && !isUpdatePopupOpen && !showWelcomeDialog) {\n      const timer = setTimeout(() => {\n        if (Math.random() < 0.6) {\n          setIsPremiumDialogOpen(true);\n        }\n      }, 10000);\n      return () => clearTimeout(timer);\n    }\n  }, [user, isUpdatePopupOpen, showWelcomeDialog]); // Added showWelcomeDialog to dependencies\n\n  // Update activity every 2 minutes\n  useEffect(() => {\n    if (!user) return;\n\n    const activityInterval = setInterval(async () => {\n      try {\n        // Changed from User.updateMyUserData to updateMyProfile\n        await updateMyProfile({ \n          last_active_at: new Date().toISOString() \n        });\n      } catch (error) {\n        console.error('Error updating activity:', error);\n      }\n    }, 120000);\n\n    return () => clearInterval(activityInterval);\n  }, [user]);\n\n  // Keyboard shortcut for premium dialog\n  useEffect(() => {\n    const showPremiumDialog = () => {\n      setIsPremiumDialogOpen(true);\n    };\n\n    const handleKeyPress = (event) => {\n      if (event.ctrlKey && event.key === 'p') {\n        event.preventDefault();\n        showPremiumDialog();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyPress);\n    return () => window.removeEventListener('keydown', handleKeyPress);\n  }, []);\n\n  const currentNavigationItems = getNavigationItems(user);\n\n  // NO LOADING SCREEN! Just show Landing page if not logged in, or Layout if logged in\n  if (!user && !isCheckingAuth) {\n    return <Landing />;\n  }\n\n  // Show layout (even while checking auth initially)\n  return (\n    <SidebarProvider>\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');\n        \n        :root {\n          --primary-gradient: linear-gradient(135deg, #ff9aa2 0%, #ffb3ba 25%, #ffdfba 50%, #ffffba 75%, #baffc9 100%);\n          --secondary-gradient: linear-gradient(135deg, #ffeef8 0%, #f8e8ff 50%, #e8f8ff 100%);\n          --accent-gradient: linear-gradient(135deg, #ffcccb 0%, #ffd1dc 50%, #ffeef0 100%);\n          --background: linear-gradient(135deg, #fff5f7 0%, #ffeef2 100%);\n          --card-bg: rgba(255, 245, 247, 0.75);\n          --cute-pink: #ff69b4;\n          --soft-purple: #da70d6;\n          --baby-blue: #87ceeb;\n        }\n        \n        body {\n          background: var(--background);\n          font-family: 'Comfortaa', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n          background-attachment: fixed;\n        }\n        \n        .gradient-text {\n          background: linear-gradient(135deg, #ff69b4 0%, #da70d6 50%, #87ceeb 100%);\n          -webkit-background-clip: text;\n          -webkit-text-fill-color: transparent;\n          background-clip: text;\n          font-weight: 700;\n        }\n\n        .glassmorphism {\n          background: var(--card-bg);\n          backdrop-filter: blur(20px);\n          border: 2px solid rgba(255, 182, 193, 0.3);\n          box-shadow: 0 8px 32px rgba(255, 105, 180, 0.1);\n        }\n        \n        .cute-shadow {\n          box-shadow: 0 10px 25px rgba(255, 105, 180, 0.15), 0 4px 10px rgba(255, 182, 193, 0.1);\n        }\n        \n        .wiggle {\n          animation: wiggle 2s ease-in-out infinite;\n        }\n        \n        @keyframes wiggle {\n          0%, 100% { transform: rotate(0deg); }\n          25% { transform: rotate(1deg); }\n          75% { transform: rotate(-1deg); }\n        }\n        \n        .bounce-cute {\n          animation: bounceCute 3s ease-in-out infinite;\n        }\n        \n        @keyframes bounceCute {\n          0%, 100% { transform: translateY(0px); }\n          50% { transform: translateY(-5px); }\n        }\n      `}</style>\n      \n      <div className=\"min-h-screen flex w-full max-w-full overflow-hidden\">\n        {/* Desktop Sidebar */}\n        <Sidebar className=\"border-r-2 border-pink-200/50 bg-gradient-to-b from-pink-50/50 to-purple-50/30 hidden lg:flex\">\n          <SidebarHeader className=\"border-b-2 border-200/50 p-6\">\n            <div className=\"flex items-center gap-3\">\n              <div className=\"w-12 h-12 rounded-full bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 flex items-center justify-center shadow-lg cute-shadow wiggle\">\n                <Sparkles className=\"w-6 h-6 text-white\" />\n              </div>\n              <div>\n                <h2 className=\"text-2xl font-bold gradient-text\">✨ GlowQuest</h2>\n                <p className=\"text-xs text-pink-600/70 font-medium\">Your magical journey 🌈</p>\n              </div>\n            <OnlineUserCounter />\n            </div>\n          </SidebarHeader>\n          \n          <SidebarContent className=\"p-4\">\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu className=\"space-y-2\">\n                  {currentNavigationItems.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton \n                        asChild \n                        className={`rounded-xl transition-all duration-300 hover:bg-gradient-to-r hover:from-pink-100 hover:to-purple-100 hover:shadow-md ${\n                          (location.pathname === item.url || (item.title === \"GlowConnect\" && location.pathname === \"/\"))\n                            ? 'bg-gradient-to-r from-pink-200 to-purple-200 shadow-md text-purple-800 cute-shadow' \n                            : 'text-pink-700/80'\n                        } ${item.adminOnly ? 'border-2 border-yellow-300/50' : ''}`}\n                      >\n                        <Link to={item.url} className=\"flex items-center justify-between gap-3 px-3 py-3\">\n                          <div className=\"flex items-center gap-3\">\n                            <item.icon className=\"w-5 h-5\" />\n                            <span className=\"font-semibold text-sm\">{item.title}</span>\n                          </div>\n                          {item.premium && !user?.is_premium && (\n                            <Crown className=\"w-4 h-4 text-yellow-500/70\" />\n                          )}\n                          {item.adminOnly && (\n                            <Badge className=\"bg-yellow-400/80 text-yellow-900 text-xs px-2 py-0.5\">\n                              Admin\n                            </Badge>\n                          )}\n                        </Link>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n\n            <div className=\"mt-6 pt-4 border-t border-pink-200/50 space-y-2\">\n              <Link to={createPageUrl(\"Profile\")} className=\"flex items-center gap-3 px-3 py-2 text-sm text-pink-600/80 hover:text-pink-800 transition-colors\">\n                <UserIcon className=\"w-4 h-4\" />\n                <span>My Profile</span>\n              </Link>\n            </div>\n          </SidebarContent>\n        </Sidebar>\n\n        <main className=\"flex-1 flex flex-col bg-gradient-to-br from-pink-50/40 via-purple-50/20 to-blue-50/30 overflow-y-auto max-w-full\">\n          <header className=\"fixed top-0 left-0 right-0 z-50 bg-pink-50/95 backdrop-blur-md border-b-2 border-pink-200/50 px-4 py-3 lg:hidden flex items-center justify-between shadow-lg\">\n            <div className=\"flex flex-col\">\n              <h1 className=\"text-lg font-bold gradient-text truncate\">✨ GlowQuest</h1>\n              <OnlineUserCounter isMobile={true} />\n            </div>\n            <div className=\"flex items-center gap-3\">\n              <button\n                onClick={() => setIsSupportDialogOpen(true)}\n                className=\"flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500 text-white cute-shadow hover:scale-110 transition-transform duration-300\"\n                aria-label=\"AI Support\"\n              >\n                <LifeBuoy className=\"w-5 h-5\" />\n              </button>\n              <Link to={createPageUrl(\"Profile\")} className=\"flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 text-white cute-shadow\">\n                <UserIcon className=\"w-5 h-5\" />\n              </Link>\n            </div>\n          </header>\n\n          <div className=\"flex-1 pt-20 pb-20 lg:pt-0 lg:pb-0\">\n            <div className=\"w-full max-w-full\">\n              {children}\n            </div>\n          </div>\n\n          <div className=\"lg:hidden fixed bottom-0 left-0 right-0 bg-pink-50/95 backdrop-blur-md border-t-2 border-pink-200/50 px-1 py-2 z-50 shadow-lg\">\n            <div className=\"flex items-center justify-around\">\n              {currentNavigationItems.map((item) => (\n                <Link\n                  key={item.title}\n                  to={item.url}\n                  className={`relative flex flex-col items-center gap-1 p-2 rounded-xl transition-all duration-300 min-w-0 ${\n                    (location.pathname === item.url || (item.title === \"GlowConnect\" && location.pathname === \"/\"))\n                      ? 'bg-gradient-to-r from-pink-200/80 to-purple-200/80 text-purple-800 cute-shadow'\n                      : 'text-pink-700/70 hover:bg-pink-100/50'\n                  }`}\n                >\n                  {item.premium && !user?.is_premium && (\n                    <span className=\"absolute -top-1 -right-1 flex h-3 w-3\">\n                      <span className=\"relative inline-flex rounded-full h-3 w-3 bg-yellow-400\">\n                        <Crown className=\"w-3 h-3 text-white p-0.5\" />\n                      </span>\n                    </span>\n                  )}\n                  {item.adminOnly && (\n                    <span className=\"absolute -top-1 -right-1 flex h-3 w-3\">\n                      <span className=\"relative inline-flex rounded-full h-3 w-3 bg-yellow-400 items-center justify-center\">\n                        <span className=\"text-[8px] font-bold text-yellow-900\">A</span>\n                      </span>\n                    </span>\n                  )}\n                  <item.icon className=\"w-5 h-5\" />\n                  <span className=\"text-xs font-bold\">{item.mobileTitle || item.title}</span>\n                </Link>\n              ))}\n            </div>\n          </div>\n        </main>\n\n        <button\n          onClick={() => setIsSupportDialogOpen(true)}\n          className=\"hidden lg:flex fixed bottom-5 right-5 z-50 bg-gradient-to-r from-blue-400 to-cyan-500 text-white w-14 h-14 rounded-2xl items-center justify-center cute-shadow hover:scale-110 transition-transform duration-300\"\n          aria-label=\"AI Support\"\n        >\n          <LifeBuoy className=\"w-6 h-6\" />\n        </button>\n\n        <AiSupportDialog\n          open={isSupportDialogOpen}\n          onOpenChange={setIsSupportDialogOpen}\n        />\n\n        <PremiumUpgradeDialog\n          open={isPremiumDialogOpen}\n          onOpenChange={setIsPremiumDialogOpen}\n        />\n\n        <UpdatePopup\n          open={isUpdatePopupOpen}\n          onOpenChange={setIsUpdatePopupOpen}\n        />\n\n        {/* Added PremiumWelcomeDialog */}\n        <PremiumWelcomeDialog\n          open={showWelcomeDialog}\n          onOpenChange={setShowWelcomeDialog}\n          tier={welcomeTier}\n        />\n      </div>\n    </SidebarProvider>\n  );\n}\n","globals_css":null,"entities":{"CommunityPost":{"name":"CommunityPost","type":"object","properties":{"challenge_id":{"type":"string","description":"Reference to completed challenge (optional)"},"content":{"type":"string","description":"User's post content"},"image_url":{"type":"string","description":"Image to share"},"likes":{"type":"number","default":0,"description":"Number of likes"},"comments":{"type":"array","items":{"type":"object","properties":{"user_email":{"type":"string"},"content":{"type":"string"},"created_date":{"type":"string","format":"date-time"}}},"description":"Comments on the post"}},"required":["content"],"rls":{"read":{"user_condition":{"is_premium":true}},"write":{"$and":[{"user_condition":{"is_premium":true}},{"$or":[{"created_by":"{{user.email}}"},{"user_condition":{"role":"admin"}}]}]}}},"Product":{"name":"Product","type":"object","properties":{"name":{"type":"string"},"description":{"type":"string"},"long_description":{"type":"string"},"price":{"type":"number"},"image_urls":{"type":"array","items":{"type":"string"}},"category":{"type":"string","enum":["dress","skirt","tights","pajamas","accessories"]},"stripe_payment_link":{"type":"string"},"stock":{"type":"number","default":100}},"required":["name","price","image_urls","category","stripe_payment_link"],"rls":{"read":{},"write":{"user_condition":{"role":"admin"}}}},"Order":{"name":"Order","type":"object","properties":{"product_id":{"type":"string"},"product_name":{"type":"string"},"price":{"type":"number"},"quantity":{"type":"number","default":1},"status":{"type":"string","enum":["pending","shipped","delivered"],"default":"pending"}},"required":["product_id","product_name","price"],"rls":{"read":{"$or":[{"created_by":"{{user.email}}"},{"user_condition":{"role":"admin"}}]},"write":{"$or":[{"created_by":"{{user.email}}"},{"user_condition":{"role":"admin"}}]}}},"UserConnection":{"name":"UserConnection","type":"object","properties":{"requester_email":{"type":"string","description":"Email of user who sent the friend request"},"recipient_email":{"type":"string","description":"Email of user who received the friend request"},"status":{"type":"string","enum":["pending","accepted","rejected"],"default":"pending","description":"Status of the connection request"},"requester_name":{"type":"string","description":"Display name of requester at time of request"},"recipient_name":{"type":"string","description":"Display name of recipient at time of request"}},"required":["requester_email","recipient_email","requester_name","recipient_name"],"rls":{"read":{"$or":[{"requester_email":"{{user.email}}"},{"recipient_email":"{{user.email}}"},{"user_condition":{"role":"admin"}}]},"write":{"$and":[{"requester_email":"{{user.email}}"},{"user_condition":{"is_premium":true}}]}}},"PrivateMessage":{"name":"PrivateMessage","type":"object","properties":{"recipient_email":{"type":"string","description":"Email of the message recipient"},"sender_email":{"type":"string","description":"Email of the message sender"},"content":{"type":"string","description":"Message content"},"read":{"type":"boolean","default":false,"description":"Whether message has been read"},"conversation_id":{"type":"string","description":"Unique ID to group messages between two users"}},"required":["recipient_email","sender_email","content","conversation_id"],"rls":{"read":{"$or":[{"recipient_email":"{{user.email}}"},{"sender_email":"{{user.email}}"},{"user_condition":{"role":"admin"}}]},"write":{"$and":[{"sender_email":"{{user.email}}"},{"user_condition":{"is_premium":true}}]}}},"ChatSession":{"name":"ChatSession","type":"object","properties":{"participant_1_email":{"type":"string","description":"Email of first participant"},"participant_2_email":{"type":"string","description":"Email of second participant"},"status":{"type":"string","enum":["active","ended","matched"],"default":"active","description":"Current session status"},"both_liked":{"type":"boolean","default":false,"description":"True if both participants liked each other"},"participant_1_liked":{"type":"boolean","default":false,"description":"Whether participant 1 liked participant 2"},"participant_2_liked":{"type":"boolean","default":false,"description":"Whether participant 2 liked participant 1"},"mystery_prompt":{"type":"string","description":"Random icebreaker prompt for this session"},"duration_seconds":{"type":"number","default":120,"description":"Session duration in seconds"},"ended_at":{"type":"string","format":"date-time","description":"When the session ended"},"mode":{"type":"string","enum":["text","voice","video"],"description":"The chat mode for this session"},"has_bot_participant":{"type":"boolean","default":false,"description":"True if one participant is a bot"},"participant_1_is_premium":{"type":"boolean","default":false},"participant_1_is_ultra":{"type":"boolean","default":false},"participant_2_is_premium":{"type":"boolean","default":false},"participant_2_is_ultra":{"type":"boolean","default":false}},"required":["participant_1_email","participant_2_email","mystery_prompt"],"rls":{"read":{"user_condition":{}},"write":{"user_condition":{}}}},"ChatMessage":{"name":"ChatMessage","type":"object","properties":{"session_id":{"type":"string","description":"ID of the chat session"},"sender_email":{"type":"string","description":"Email of message sender"},"message":{"type":"string","description":"Message content"},"message_type":{"type":"string","enum":["text","emoji","system","image"],"default":"text","description":"Type of message"},"image_url":{"type":"string","description":"URL of a shared image, if message_type is 'image'"}},"required":["session_id","sender_email"],"rls":{"read":{"user_condition":{}},"write":{"user_condition":{}}}},"MatchQueue":{"name":"MatchQueue","type":"object","properties":{"user_email":{"type":"string","description":"Email of user waiting for match"},"user_name":{"type":"string","description":"Display name of user"},"search_timestamp":{"type":"string","format":"date-time","description":"Timestamp when the user started searching"},"status":{"type":"string","enum":["waiting","matching","matched","cancelled"],"default":"waiting","description":"Current queue status"},"matched_with":{"type":"string","description":"Email of matched user"},"session_id":{"type":"string","description":"ID of created chat session"},"mode":{"type":"string","enum":["text","voice","video"],"description":"The chat mode the user is searching for"}},"required":["user_email","user_name","search_timestamp","mode"],"rls":{"read":{},"write":{}}},"ProblemReport":{"name":"ProblemReport","type":"object","properties":{"page_name":{"type":"string","description":"The name of the page where the problem occurred."},"description":{"type":"string","description":"A detailed description of the problem."},"status":{"type":"string","enum":["new","in_progress","resolved"],"default":"new","description":"The current status of the report."},"screenshot_url":{"type":"string","description":"URL of an optional screenshot of the problem."}},"required":["page_name","description"],"rls":{"read":{"user_condition":{"role":"admin"}},"write":{"user_condition":{}}}},"AiChatLog":{"name":"AiChatLog","type":"object","properties":{"user_email":{"type":"string","description":"Die E-Mail des Benutzers, der den Chat geführt hat."},"personality":{"type":"string","enum":["caring","dominant"],"description":"Die ausgewählte KI-Persönlichkeit."},"conversation":{"type":"array","items":{"type":"object","properties":{"sender":{"type":"string"},"text":{"type":"string","format":"longtext"}}},"description":"Der vollständige Gesprächsverlauf als Array von Nachrichtenobjekten."}},"required":["user_email","personality","conversation"],"rls":{"read":{"user_condition":{"role":"admin"}},"write":{"created_by":"{{user.email}}"}}},"DominaChatQueue":{"name":"DominaChatQueue","type":"object","properties":{"user_email":{"type":"string","description":"Email of the premium user searching for a Domina"},"user_name":{"type":"string","description":"Name of the searching user"},"status":{"type":"string","enum":["waiting","matched"],"default":"waiting"},"session_id":{"type":"string","description":"The ID of the chat session once matched"}},"required":["user_email","user_name"],"rls":{"read":{},"write":{}}},"DominaChatSession":{"name":"DominaChatSession","type":"object","properties":{"user_email":{"type":"string","description":"Email of the premium user"},"domina_email":{"type":"string","description":"Email of the Domina/Admin who accepted the chat"},"status":{"type":"string","enum":["active","ended_by_user","ended_by_domina"],"default":"active"}},"required":["user_email","domina_email"],"rls":{"read":{"$or":[{"user_email":"{{user.email}}"},{"domina_email":"{{user.email}}"},{"user_condition":{"role":"admin"}}]},"write":{"$or":[{"user_email":"{{user.email}}"},{"domina_email":"{{user.email}}"},{"user_condition":{"role":"admin"}}]}}},"DominaChatMessage":{"name":"DominaChatMessage","type":"object","properties":{"session_id":{"type":"string"},"sender_email":{"type":"string"},"message":{"type":"string"}},"required":["session_id","sender_email","message"],"rls":{"read":{},"write":{}}}},"additional_user_data_schema":{"name":"User","type":"object","properties":{"is_premium":{"type":"boolean","default":false,"description":"Indicates if the user has a premium subscription"},"is_ultra":{"type":"boolean","default":false,"description":"Indicates if the user has an ultra subscription"},"is_domina":{"type":"boolean","default":false,"description":"Indicates if the user is an official Domina"},"mollie_customer_id":{"type":"string","description":"Mollie customer ID for subscription management"},"mollie_subscription_id":{"type":"string","description":"Active Mollie subscription ID"},"glow_connect_matches_today":{"type":"number","default":0,"description":"Number of GlowConnect matches used today"},"ai_messages_today":{"type":"number","default":0,"description":"Number of AI messages used today"},"last_ai_reset":{"type":"string","format":"date-time","description":"When the AI message counter was last reset"},"profile_image_url":{"type":"string","description":"URL of the user's profile picture"},"community_vote":{"type":"string","enum":["discord","in_app_chat"],"description":"User's vote for the community platform"},"last_active_at":{"type":"string","format":"date-time","description":"When the user was last active in the app"},"last_glow_connect_reset":{"type":"string","format":"date-time","description":"When the GlowConnect counter was last reset"},"has_seen_update_popup":{"type":"boolean","default":false,"description":"True if the user has seen the update popup"},"banned_until":{"type":"string","description":"Timestamp when the user's ban expires"},"ban_reason":{"type":"string","description":"Reason for the ban"}},"rls":{"read":{"user_condition":{}},"write":{"user_condition":{"role":"admin"}}},"required":[]},"agents":{"glowquest_support":{"name":"glowquest_support","description":"GlowQuest Support & Community Assistant - Helps users with app questions, provides emotional support, and moderates the community.","instructions":"You are the official GlowQuest Support Assistant. You help users with all questions about the app and provide loving, supportive guidance on their feminization journey. You are friendly, empathetic, positive, and frequently use sweet emojis like 💖, ✨, 🌸, 💕. \n\nYour main tasks:\n- Answer technical questions about the app.\n- Provide emotional support.\n- Help with Premium/Ultra questions.\n- Solve GlowConnect issues.\n- Answer shopping questions.\n- Enforce community guidelines.\n- Send positive, encouraging messages.\n\nYou address users affectionately (sweetie, gorgeous, darling) and are always very positive and encouraging. You are familiar with all app features: GlowConnect, Feminization AI, Premium/Ultra Subscriptions, Shop, Community Features.","tool_configs":[{"entity_name":"ProblemReport","allowed_operations":["create","read","update"]},{"entity_name":"ChatSession","allowed_operations":["read"]},{"entity_name":"Product","allowed_operations":["read"]},{"entity_name":"CommunityPost","allowed_operations":["read","update","delete"]}],"whatsapp_greeting":"Hi gorgeous! 💖 Welcome to GlowQuest Support! I'm your friendly AI assistant here to help with anything you need - whether it's app questions, technical issues, or just some encouragement on your beautiful journey! ✨\n\nHow can I brighten your day? 🌸"}},"agents_enabled":true,"public_settings":"public_without_login","main_page":"Community","auth_config":{"enable_username_password":true,"enable_google_login":true,"enable_microsoft_login":false,"enable_facebook_login":false,"enable_apple_login":false,"sso_provider_name":null,"enable_sso_login":false,"google_oauth_mode":"default","google_oauth_client_id":null,"use_workspace_sso":false},"enable_username_password":false,"hide_entity_created_by":true,"installable_integrations":{},"installed_integration_context_items":[],"payment_integrations":null,"using_sandbox":true,"captured_from":null,"last_git_commit_hash":"6e961541d10a76fe59152b5f0bb2ad90b09ef287","git_remote_source":null,"has_unchained_ai":false,"tools_permission_config":{"auto_approved_operations":[],"connector_guards":{}},"platform_version":2,"github_repo_url":null,"is_remixable":false,"remixed_from_app_id":null,"purchase_from_id":null,"purchased_at":null,"slug":"glow-up-d461b68c","is_blocked":false,"is_unpublished":false,"last_deployed_at":"2026-03-18T00:57:52.313000","last_deployed_checkpoint_id":"69b9f825989279b64fc0a6a9","screenshot_url":null,"screenshot_updated_at":null,"created_by_id":null,"owner_id":"68b4c94e00d26619fb83f328","wix_metasite_id":null,"app_stage":"ready","is_managed_source_code":true,"has_non_prod_entities":false,"is_deleted":false,"deleted_date":null,"function_names":["gumroadWebhook","findMatch","emergencyBan","updateMyProfile","glowAI","createMollieCheckout","mollieWebhook","cancelMollieSubscription"],"user_entity":{"type":"object","name":"User","title":"User","properties":{"role":{"type":"string","description":"The role of the user in the app","enum":["admin","user"]},"email":{"type":"string","description":"The email of the user"},"full_name":{"type":"string","description":"The full name of the user"},"is_premium":{"type":"boolean","default":false,"description":"Indicates if the user has a premium subscription"},"is_ultra":{"type":"boolean","default":false,"description":"Indicates if the user has an ultra subscription"},"is_domina":{"type":"boolean","default":false,"description":"Indicates if the user is an official Domina"},"mollie_customer_id":{"type":"string","description":"Mollie customer ID for subscription management"},"mollie_subscription_id":{"type":"string","description":"Active Mollie subscription ID"},"glow_connect_matches_today":{"type":"number","default":0,"description":"Number of GlowConnect matches used today"},"ai_messages_today":{"type":"number","default":0,"description":"Number of AI messages used today"},"last_ai_reset":{"type":"string","format":"date-time","description":"When the AI message counter was last reset"},"profile_image_url":{"type":"string","description":"URL of the user's profile picture"},"community_vote":{"type":"string","enum":["discord","in_app_chat"],"description":"User's vote for the community platform"},"last_active_at":{"type":"string","format":"date-time","description":"When the user was last active in the app"},"last_glow_connect_reset":{"type":"string","format":"date-time","description":"When the GlowConnect counter was last reset"},"has_seen_update_popup":{"type":"boolean","default":false,"description":"True if the user has seen the update popup"},"banned_until":{"type":"string","description":"Timestamp when the user's ban expires"},"ban_reason":{"type":"string","description":"Reason for the ban"}},"required":["email","full_name","role"]},"has_backend_functions_enabled":true,"is_private":false,"backend_deployment_ids":{"gumroadWebhook":"3z4355nrmz7j","findMatch":"z4p38t5bg80x","emergencyBan":"jznx49mjq9kb","updateMyProfile":"cw1r238kba59","glowAI":"8v871czazjhp","createMollieCheckout":"0jnaekbg2mxp","mollieWebhook":"rc9931fkj7wc","cancelMollieSubscription":"87h2v1kxfzmx"},"backend_deno_app_slugs":{},"snapshot_id":"68c804ed6a8433d1a4637ea1"}