import gradio as gr
import requests
from datetime import datetime, timedelta
import random

# =========================
# 🔑 API Keys
# =========================
WEATHER_API_KEY = "3a97c8c63350b72e8439c42e8d371b07"

# =========================
# 🇧🇩 Bangladesh Divisions & Districts
# =========================
BANGLADESH_LOCATIONS = {
    "Dhaka Division": [
        "Dhaka", "Faridpur", "Gazipur", "Gopalganj", "Kishoreganj", 
        "Madaripur", "Manikganj", "Munshiganj", "Narayanganj", "Narsingdi", 
        "Rajbari", "Shariatpur", "Tangail"
    ],
    "Chattogram Division": [
        "Chattogram", "Bandarban", "Brahmanbaria", "Chandpur", "Cumilla", 
        "Cox's Bazar", "Feni", "Khagrachhari", "Lakshmipur", "Noakhali", 
        "Rangamati"
    ],
    "Rajshahi Division": [
        "Rajshahi", "Bogura", "Joypurhat", "Naogaon", "Natore", 
        "Chapainawabganj", "Pabna", "Sirajganj"
    ],
    "Khulna Division": [
        "Khulna", "Bagerhat", "Chuadanga", "Jessore", "Jhenaidah", 
        "Kushtia", "Magura", "Meherpur", "Narail", "Satkhira"
    ],
    "Barishal Division": [
        "Barishal", "Barguna", "Bhola", "Jhalokathi", "Patuakhali", 
        "Pirojpur"
    ],
    "Sylhet Division": [
        "Sylhet", "Habiganj", "Moulvibazar", "Sunamganj"
    ],
    "Rangpur Division": [
        "Rangpur", "Dinajpur", "Gaibandha", "Kurigram", "Lalmonirhat", 
        "Nilphamari", "Panchagarh", "Thakurgaon"
    ],
    "Mymensingh Division": [
        "Mymensingh", "Jamalpur", "Netrokona", "Sherpur"
    ]
}

# =========================
# 📿 50 Moral Hadiths (English + Bengali)
# =========================
HADITHS = [
    {
        "english": "The best among you are those who have the best manners and character.",
        "bengali": "তোমাদের মধ্যে সর্বোত্তম সেই ব্যক্তি যার চরিত্র ও আচরণ সবচেয়ে সুন্দর।",
        "reference": "Sahih Bukhari",
        "happy_message": "Let your beautiful character shine today and spread joy to everyone you meet! 😊",
        "salam": "As-Salamu Alaikum Wa Rahmatullahi Wa Barakatuh! 🌙"
    },
    {
        "english": "Kindness is a mark of faith, and whoever is not kind has no faith.",
        "bengali": "দয়া ঈমানের নিদর্শন, এবং যে দয়ালু নয় তার ঈমান নেই।",
        "reference": "Sahih Muslim",
        "happy_message": "Your kindness can change someone's entire day - be that light! ✨",
        "salam": "As-Salamu Alaikum! May Allah bless your day! 🤲"
    },
    {
        "english": "None of you truly believes until he loves for his brother what he loves for himself.",
        "bengali": "তোমাদের কেউ প্রকৃত মুমিন হতে পারবে না যতক্ষণ না সে তার ভাইয়ের জন্য তাই পছন্দ করে যা নিজের জন্য পছন্দ করে।",
        "reference": "Sahih Bukhari & Muslim",
        "happy_message": "Wishing good for others brings blessings to your own life! 🌟",
        "salam": "As-Salamu Alaikum Wa Rahmatullah! Peace be upon you! 🕊️"
    },
    {
        "english": "A smile for your brother is charity.",
        "bengali": "তোমার ভাইয়ের জন্য হাসি দেখানো সদকা।",
        "reference": "Tirmidhi",
        "happy_message": "Your beautiful smile is a gift - share it generously today! 😄",
        "salam": "As-Salamu Alaikum! Keep smiling and spreading joy! 🌈"
    },
    {
        "english": "The most beloved to Allah is he who is most beneficial to people.",
        "bengali": "আল্লাহর কাছে সবচেয়ে প্রিয় সেই ব্যক্তি যে মানুষের জন্য সবচেয়ে বেশি উপকারী।",
        "reference": "Al-Mu'jam Al-Awsat",
        "happy_message": "Help someone today and feel the joy of making a difference! 💫",
        "salam": "As-Salamu Alaikum Wa Rahmatullahi Wa Barakatuh! 🌙✨"
    },
    {
        "english": "Do not belittle any good deed, even meeting your brother with a cheerful face.",
        "bengali": "কোনো ভালো কাজকে ছোট মনে করো না, এমনকি তোমার ভাইয়ের সাথে হাসিমুখে দেখা করাও।",
        "reference": "Sahih Muslim",
        "happy_message": "Every small act of goodness counts - start with a smile! 😊",
        "salam": "As-Salamu Alaikum! May your day be filled with goodness! 🌸"
    },
    {
        "english": "The strong person is not the one who overpowers others, but the one who controls his anger.",
        "bengali": "শক্তিশালী ব্যক্তি সেই নয় যে অন্যকে পরাজিত করে, বরং সেই যে নিজের ক্রোধ নিয়ন্ত্রণ করে।",
        "reference": "Sahih Bukhari & Muslim",
        "happy_message": "True strength lies in patience and self-control! 💪",
        "salam": "As-Salamu Alaikum Wa Rahmatullah! Stay strong and peaceful! 🕊️"
    },
    {
        "english": "Feed the hungry, visit the sick, and free the captive.",
        "bengali": "ক্ষুধার্তকে খাওয়াও, অসুস্থকে দেখতে যাও এবং বন্দীকে মুক্ত করো।",
        "reference": "Sahih Bukhari",
        "happy_message": "Reach out to those in need - your care matters! 🤲",
        "salam": "As-Salamu Alaikum! May Allah reward your compassion! 🌟"
    },
    {
        "english": "Show mercy to those on earth, and He who is in the heavens will show mercy to you.",
        "bengali": "পৃথিবীতে যারা আছে তাদের প্রতি দয়া করো, তাহলে আসমানে যিনি আছেন তিনি তোমার প্রতি দয়া করবেন।",
        "reference": "Tirmidhi",
        "happy_message": "Your mercy today brings divine mercy tomorrow! 🌙",
        "salam": "As-Salamu Alaikum Wa Rahmatullahi Wa Barakatuh! 💝"
    },
    {
        "english": "He who does not show mercy to others, will not be shown mercy.",
        "bengali": "যে অন্যদের প্রতি দয়া করে না, তাকেও দয়া করা হবে না।",
        "reference": "Sahih Muslim",
        "happy_message": "Be kind, be merciful - it comes back to you! 🔄",
        "salam": "As-Salamu Alaikum! Spread mercy and love! ❤️"
    },
    {
        "english": "Make things easy and do not make them difficult.",
        "bengali": "জিনিসগুলো সহজ করো এবং কঠিন করো না।",
        "reference": "Sahih Bukhari",
        "happy_message": "Life is easier when we help each other! 🤝",
        "salam": "As-Salamu Alaikum! May Allah make things easy for you! 🌈"
    },
    {
        "english": "Speak good or remain silent.",
        "bengali": "ভালো কথা বলো অথবা চুপ থাকো।",
        "reference": "Sahih Bukhari & Muslim",
        "happy_message": "Your words have power - use them wisely and kindly! 💬",
        "salam": "As-Salamu Alaikum Wa Rahmatullah! Speak with wisdom! 📿"
    },
    {
        "english": "The believer is not a slanderer, nor obscene, nor harsh.",
        "bengali": "মুমিন ব্যক্তি নিন্দুক নয়, অশ্লীল নয়, কঠোরও নয়।",
        "reference": "Sahih Muslim",
        "happy_message": "Be gentle in your words and actions - it's beautiful! 🌺",
        "salam": "As-Salamu Alaikum! May your character be noble! 👑"
    },
    {
        "english": "Remove harmful things from the path; this is charity.",
        "bengali": "পথ থেকে ক্ষতিকর জিনিস সরিয়ে দাও; এটি সদকা।",
        "reference": "Sahih Bukhari & Muslim",
        "happy_message": "Small acts of cleanliness bring great rewards! 🧹✨",
        "salam": "As-Salamu Alaikum! Keep your surroundings clean! 🌿"
    },
    {
        "english": "Do not envy one another, do not hate one another, do not turn away from one another.",
        "bengali": "একে অপরকে হিংসা করো না, ঘৃণা করো না, একে অপর থেকে মুখ ফিরিয়ে নিও না।",
        "reference": "Sahih Muslim",
        "happy_message": "Celebrate others' success - there's enough blessings for everyone! 🎉",
        "salam": "As-Salamu Alaikum Wa Rahmatullahi Wa Barakatuh! 💖"
    },
]

# =========================
# 🕌 Get Real Prayer Times from Aladhan API
# =========================
def get_prayer_times(city):
    """Get real-time prayer times using Aladhan API for Bangladesh"""
    try:
        # Get current date
        today = datetime.now()
        date_str = today.strftime("%d-%m-%Y")
        
        # Aladhan API endpoint for city-based timings
        url = f"http://api.aladhan.com/v1/timingsByCity/{date_str}"
        params = {
            "city": city,
            "country": "Bangladesh",
            "method": 2  # ISNA (Islamic Society of North America)
        }
        
        response = requests.get(url, params=params, timeout=10)
        data = response.json()
        
        if data.get("code") == 200 and data.get("data"):
            timings = data["data"]["timings"]
            
            # Extract prayer times
            fajr = timings.get("Fajr", "N/A")
            dhuhr = timings.get("Dhuhr", "N/A")
            asr = timings.get("Asr", "N/A")
            maghrib = timings.get("Maghrib", "N/A")
            isha = timings.get("Isha", "N/A")
            sunrise = timings.get("Sunrise", "N/A")
            sunset = timings.get("Sunset", "N/A")
            
            # For Ramadan: Sehri ends at Fajr, Iftar starts at Maghrib
            return {
                "fajr": fajr,
                "sehri_end": fajr,  # Sehri ends at Fajr
                "sunrise": sunrise,
                "dhuhr": dhuhr,
                "asr": asr,
                "maghrib": maghrib,
                "iftar_start": maghrib,  # Iftar starts at Maghrib
                "sunset": sunset,
                "isha": isha,
                "success": True
            }
        else:
            return {"success": False}
            
    except Exception as e:
        print(f"Prayer times API error: {e}")
        return {"success": False}

# =========================
# 🌡️ Temperature-Based Advice
# =========================
def get_temperature_advice(temp, weather_main):
    """Generate personalized advice based on temperature and weather"""
    advice = []
    
    if temp > 35:
        advice.append("🔥 অত্যন্ত গরম সতর্কতা!")
        advice.append("• দুপুর ১২টা থেকে বিকেল ৪টা পর্যন্ত ঘরের ভিতরে থাকুন")
        advice.append("• কেনাকাটা: ভোর ৬-৯টা অথবা সন্ধ্যা ৭-১০টায় যান")
        advice.append("• ইফতারের পর প্রতি ১৫-২০ মিনিটে পানি পান করুন")
        advice.append("• ভারী শারীরিক পরিশ্রম এড়িয়ে চলুন - বিশ্রাম নিন!")
        advice.append("• ঘরে থেকে কুরআন তিলাওয়াত ও পরিবারের সাথে সময় কাটান")
    elif temp > 30:
        advice.append("🌡️ গরম আবহাওয়া")
        advice.append("• সকালের হাঁটা: সকাল ৯টার আগে সবচেয়ে ভালো")
        advice.append("• কেনাকাটা: সন্ধ্যা ৬টার পর আরামদায়ক")
        advice.append("• হাইড্রেশন: সেহরি থেকে ইফতার পর্যন্ত ৮-১০ গ্লাস পানি")
        advice.append("• সন্ধ্যায় হালকা বাইরের কাজকর্ম করা যায়")
        advice.append("• দিনে বাইরে গেলে ছাতা ও সানস্ক্রিন ব্যবহার করুন")
    elif temp > 25:
        advice.append("☀️ মনোরম উষ্ণ আবহাওয়া")
        advice.append("• ইফতারের পর সন্ধ্যার হাঁটার জন্য চমৎকার (৩০-৪৫ মিনিট)")
        advice.append("• কেনাকাটা: যেকোনো সময় আরামদায়ক, বিকেল ৪-৮টা সবচেয়ে ভালো")
        advice.append("• মাঝারি বাইরের কাজকর্ম ঠিক আছে")
        advice.append("• পার্ক/মসজিদে পরিবারের সাথে বেড়ানোর জন্য দারুণ আবহাওয়া")
        advice.append("• নিয়মিত পানি পান ভুলবেন না!")
    elif temp > 20:
        advice.append("🌤️ আরামদায়ক আবহাওয়া")
        advice.append("• সারাদিন বাইরের কাজের জন্য আদর্শ")
        advice.append("• কেনাকাটা, হাঁটা, হালকা ব্যায়ামের জন্য উপযুক্ত")
        advice.append("• আরামদায়ক পোশাক পরিধান করুন")
        advice.append("• কমিউনিটি ইফতার ও সমাবেশের জন্য দারুণ")
        advice.append("• সুন্দর আবহাওয়া উপভোগ করুন - আল্লাহর রহমত!")
    elif temp > 15:
        advice.append("🍃 শীতল আবহাওয়া")
        advice.append("• সন্ধ্যার নামাজের জন্য হালকা জ্যাকেট পরুন")
        advice.append("• তারাবীহ'র পর হাঁটার জন্য চমৎকার আবহাওয়া")
        advice.append("• আত্মীয়-স্বজন দেখতে যাওয়ার জন্য ভালো")
        advice.append("• শীতল, সতেজ বাতাস উপভোগ করুন!")
        advice.append("• ইফতারে গরম খেজুর ও চা উপযুক্ত")
    else:
        advice.append("❄️ ঠান্ডা আবহাওয়া")
        advice.append("• মসজিদে যাওয়ার সময় গরম কাপড় পরুন")
        advice.append("• ঘরের ভিতরের কাজকর্ম করুন")
        advice.append("• সেহরি ও ইফতারে গরম স্যুপ ও পানীয়")
        advice.append("• বয়স্ক ও শিশুদের বিশেষ যত্ন নিন")
        advice.append("• তাহাজ্জুদ নামাজের জন্য উষ্ণ কম্বল 🤲")
    
    # Weather-specific advice
    if weather_main == "rain":
        advice.append("\n☔ বৃষ্টির দিনের বিশেষ:")
        advice.append("• তারাবীহ নামাজের জন্য ছাতা নিন")
        advice.append("• ঘরে থেকে ইবাদত ও জিকিরের জন্য উপযুক্ত")
        advice.append("• প্রচুর দোয়া করুন - বৃষ্টি বরকতময় সময়! 🤲")
        advice.append("• সম্ভব হলে ঘরে থাকুন, পরিবারের সাথে কুরআন পড়ুন")
    elif weather_main == "thunderstorm":
        advice.append("\n⛈️ ঝড়ের সতর্কতা:")
        advice.append("• একান্ত প্রয়োজন ছাড়া বাইরে যাবেন না")
        advice.append("• পড়ুন: সুবহানাল্লাহি ওয়া বিহামদিহি")
        advice.append("• পরিবারের সাথে নিরাপদে ঘরে থাকুন")
        advice.append("• আল্লাহর আশ্রয় প্রার্থনার জন্য উপযুক্ত সময়")
    elif weather_main == "clouds":
        advice.append("\n☁️ মেঘলা ও মনোরম:")
        advice.append("• কড়া রোদ নেই - কেনাকাটার জন্য চমৎকার!")
        advice.append("• বাইরের কাজের জন্য আরামদায়ক")
        advice.append("• আত্মীয়স্বজন দেখতে যাওয়ার জন্য দারুণ দিন")
    
    return "\n".join(advice)

# =========================
# 🌙 Main Ramadan Dashboard
# =========================
def get_ramadan_dashboard(division, district):
    if not division or not district:
        return """
        <div style="text-align:center; padding:60px; background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); color:white; border-radius: 30px; font-family: 'Poppins', sans-serif;">
            <h2 style="font-size: 36px; margin-bottom: 20px;">⚠️ দয়া করে বিভাগ এবং জেলা নির্বাচন করুন</h2>
            <p style="font-size: 20px;">Please select Division and District</p>
            <div style="margin-top: 30px; font-size: 50px;">🕌 🌙 ⭐</div>
        </div>
        """
    
    # Get random daily Hadith
    daily_hadith = random.choice(HADITHS)
    
    # Get real prayer times
    prayer_times = get_prayer_times(district)
    
    # Get weather data for Bangladesh
    weather_url = f"http://api.openweathermap.org/data/2.5/weather?q={district},Bangladesh&appid={WEATHER_API_KEY}&units=metric"
    
    try:
        weather_response = requests.get(weather_url, timeout=10)
        weather_data = weather_response.json()
    except:
        return """
        <div style="text-align:center; padding:40px; color:#ff6b6b;">
            <h3>❌ আবহাওয়া সেবার সাথে সংযোগ ত্রুটি</h3>
            <p>Error connecting to weather service</p>
        </div>
        """
    
    if weather_response.status_code != 200:
        return f"""
        <div style="text-align:center; padding:40px; color:#ff6b6b;">
            <h3>🔍 '{district}' জেলা খুঁজে পাওয়া যায়নি!</h3>
            <p>District not found! Please check selection</p>
        </div>
        """
    
    # Extract weather data
    temp = weather_data["main"]["temp"]
    feels_like = weather_data["main"]["feels_like"]
    humidity = weather_data["main"]["humidity"]
    description = weather_data["weather"][0]["description"].title()
    weather_main = weather_data["weather"][0]["main"].lower()
    wind_speed = weather_data["wind"]["speed"]
    
    # Temperature advice
    temp_advice = get_temperature_advice(temp, weather_main)
    
    # Weather gradients with vibrant colors
    weather_gradients = {
        "clear": "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
        "clouds": "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
        "rain": "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
        "drizzle": "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
        "thunderstorm": "linear-gradient(135deg, #30cfd0 0%, #330867 100%)",
        "snow": "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
        "mist": "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",
    }
    gradient = weather_gradients.get(weather_main, "linear-gradient(135deg, #667eea 0%, #764ba2 100%)")
    
    # Weather icons
    weather_icons = {
        "clear": "☀️",
        "clouds": "☁️",
        "rain": "🌧️",
        "thunderstorm": "⛈️",
        "snow": "❄️",
        "mist": "🌫️",
    }
    icon = weather_icons.get(weather_main, "🌤️")
    
    # Build HTML with enhanced animations and professional design
    html = f"""
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800;900&family=Noto+Sans+Bengali:wght@400;600;700;900&family=Amiri:wght@400;700&display=swap');
        
        @keyframes fadeInUp {{
            from {{
                opacity: 0;
                transform: translateY(60px);
            }}
            to {{
                opacity: 1;
                transform: translateY(0);
            }}
        }}
        
        @keyframes pulse {{
            0%, 100% {{
                transform: scale(1);
                opacity: 1;
            }}
            50% {{
                transform: scale(1.08);
                opacity: 0.85;
            }}
        }}
        
        @keyframes float {{
            0%, 100% {{
                transform: translateY(0px) rotate(0deg);
            }}
            50% {{
                transform: translateY(-20px) rotate(5deg);
            }}
        }}
        
        @keyframes twinkle {{
            0%, 100% {{
                opacity: 1;
                transform: scale(1);
            }}
            50% {{
                opacity: 0.2;
                transform: scale(0.8);
            }}
        }}
        
        @keyframes slideInLeft {{
            from {{
                opacity: 0;
                transform: translateX(-100px) rotate(-5deg);
            }}
            to {{
                opacity: 1;
                transform: translateX(0) rotate(0deg);
            }}
        }}
        
        @keyframes slideInRight {{
            from {{
                opacity: 0;
                transform: translateX(100px) rotate(5deg);
            }}
            to {{
                opacity: 1;
                transform: translateX(0) rotate(0deg);
            }}
        }}
        
        @keyframes glow {{
            0%, 100% {{
                box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.4);
            }}
            50% {{
                box-shadow: 0 0 50px rgba(255, 215, 0, 0.9), 0 0 100px rgba(255, 215, 0, 0.6);
            }}
        }}
        
        @keyframes rainbow {{
            0% {{ filter: hue-rotate(0deg); }}
            100% {{ filter: hue-rotate(360deg); }}
        }}
        
        @keyframes bounceIn {{
            0% {{
                opacity: 0;
                transform: scale(0.3);
            }}
            50% {{
                opacity: 1;
                transform: scale(1.05);
            }}
            70% {{
                transform: scale(0.9);
            }}
            100% {{
                transform: scale(1);
            }}
        }}
        
        @keyframes rotateGlow {{
            0% {{
                transform: rotate(0deg);
                filter: brightness(1);
            }}
            50% {{
                transform: rotate(180deg);
                filter: brightness(1.3);
            }}
            100% {{
                transform: rotate(360deg);
                filter: brightness(1);
            }}
        }}
        
        .dashboard-container {{
            animation: fadeInUp 1s ease-out;
            font-family: 'Poppins', 'Noto Sans Bengali', sans-serif;
        }}
        
        .card {{
            background: white;
            border-radius: 30px;
            padding: 40px;
            margin: 30px 0;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            animation: fadeInUp 0.8s ease-out;
            position: relative;
            overflow: hidden;
        }}
        
        .card::before {{
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            animation: shimmer 3s infinite;
        }}
        
        @keyframes shimmer {{
            0% {{ transform: translateX(-100%) translateY(-100%) rotate(45deg); }}
            100% {{ transform: translateX(100%) translateY(100%) rotate(45deg); }}
        }}
        
        .card:hover {{
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 30px 80px rgba(0,0,0,0.25);
        }}
        
        .mosque-decoration {{
            animation: float 5s ease-in-out infinite;
            font-size: 60px;
            display: inline-block;
            filter: drop-shadow(0 0 10px rgba(255,215,0,0.5));
        }}
        
        .star {{
            animation: twinkle 2s ease-in-out infinite;
            display: inline-block;
            filter: drop-shadow(0 0 5px rgba(255,255,255,0.8));
        }}
        
        .crescent {{
            animation: rotateGlow 6s linear infinite;
            display: inline-block;
            filter: drop-shadow(0 0 20px rgba(255,215,0,0.8));
        }}
        
        .ramzan-header {{
            animation: glow 3s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }}
        
        .ramzan-header::before {{
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: slide 3s infinite;
        }}
        
        @keyframes slide {{
            0% {{ left: -100%; }}
            100% {{ left: 100%; }}
        }}
        
        .prayer-card {{
            animation: slideInLeft 1s ease-out;
        }}
        
        .weather-card {{
            animation: slideInRight 1s ease-out;
        }}
        
        .baby-decoration {{
            animation: bounceIn 2s ease-out infinite;
            font-size: 45px;
            display: inline-block;
            filter: drop-shadow(0 0 8px rgba(255,192,203,0.6));
        }}
        
        .gradient-text {{
            background: linear-gradient(45deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: rainbow 5s linear infinite;
        }}
        
        .pulse-glow {{
            animation: pulse 2s ease-in-out infinite;
            filter: drop-shadow(0 0 15px currentColor);
        }}
    </style>
    
    <div class="dashboard-container" style="max-width: 1000px; margin: 0 auto; padding: 25px; background: linear-gradient(135deg, #E8F5E9 0%, #F3E5F5 50%, #FFF9C4 100%); border-radius: 40px;">
        
        <!-- Beautiful Ramadan Header with Advanced Decorations -->
        <div class="ramzan-header" style="text-align: center; background: linear-gradient(135deg, #90EE90 0%, #98FB98 50%, #00FA9A 100%); color: white; padding: 60px 40px; border-radius: 40px; margin-bottom: 35px; position: relative; overflow: hidden;">
            <div style="position: absolute; top: 15px; left: 30px; font-size: 35px;">
                <span class="star">🌸</span>
                <span class="star" style="animation-delay: 0.3s;">🌺</span>
                <span class="star" style="animation-delay: 0.6s;">🌼</span>
                <span class="star" style="animation-delay: 0.9s;">🌻</span>
            </div>
            <div style="position: absolute; top: 15px; right: 30px; font-size: 35px;">
                <span class="star" style="animation-delay: 0.2s;">🌸</span>
                <span class="star" style="animation-delay: 0.5s;">🌺</span>
                <span class="star" style="animation-delay: 0.8s;">🌼</span>
                <span class="star" style="animation-delay: 1.1s;">🌻</span>
            </div>
            
            <div style="margin-bottom: 25px;">
                <span class="mosque-decoration">🏛️</span>
                <span class="crescent" style="font-size: 70px; margin: 0 25px;">🌙</span>
                <span class="mosque-decoration">🏛️</span>
            </div>
            
            <h1 style="font-size: 58px; margin: 20px 0; text-shadow: 4px 4px 8px rgba(0,0,0,0.4); font-weight: 900; letter-spacing: 2px;">
                Ramadan Mubarak 2025
            </h1>
            <h2 style="font-size: 62px; margin: 15px 0; font-family: 'Noto Sans Bengali', sans-serif; text-shadow: 3px 3px 6px rgba(0,0,0,0.4); font-weight: 900;">
                রমজান মুবারক ১৪৪৬
            </h2>
            
            <div style="margin: 25px 0;">
                <span class="baby-decoration">🐱</span>
                <span class="baby-decoration" style="animation-delay: 0.4s;">🐈</span>
                <span class="baby-decoration" style="animation-delay: 0.8s;">😺</span>
                <span class="baby-decoration" style="animation-delay: 1.2s;">😸</span>
            </div>
            
            <div style="background: rgba(255,255,255,0.15); padding: 20px; border-radius: 20px; backdrop-filter: blur(10px); margin: 20px auto; max-width: 600px;">
                <p style="font-size: 28px; margin: 10px 0; opacity: 0.95; font-weight: 700;">
                    🇧🇩 {district}, {division}
                </p>
                <p style="font-size: 32px; margin: 10px 0; font-family: 'Noto Sans Bengali', sans-serif; font-weight: 700;">
                    {district}, {division}
                </p>
                <p style="font-size: 20px; opacity: 0.9; margin-top: 10px;">
                    {datetime.now().strftime("%A, %B %d, %Y")} | {datetime.now().strftime("%I:%M %p")}
                </p>
            </div>
            
            <div style="margin-top: 30px; font-size: 32px;">
                <span class="star pulse-glow">🌸</span>
                <span class="star pulse-glow" style="animation-delay: 0.3s;">🌺</span>
                <span class="star pulse-glow" style="animation-delay: 0.6s;">🌼</span>
                <span class="star pulse-glow" style="animation-delay: 0.9s;">🌻</span>
            </div>
        </div>
        
        <!-- Real-Time Prayer Times Card -->
        <div class="card prayer-card" style="background: linear-gradient(135deg, #0F9D58 0%, #16C172 50%, #10B981 100%); color: white;">
            <div style="text-align: center; margin-bottom: 30px;">
                <h2 style="font-size: 42px; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: 800;">🕌 নামাজের সময়সূচী (Prayer Times)</h2>
                <p style="font-size: 20px; opacity: 0.95;">রিয়েল-টাইম সময় • Real-time for {district}, Bangladesh</p>
            </div>
    """
    
    if prayer_times["success"]:
        html += f"""
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-bottom: 35px;">
                <div style="text-align: center; background: rgba(255,255,255,0.3); padding: 30px; border-radius: 25px; backdrop-filter: blur(15px); transition: all 0.3s ease; border: 2px solid rgba(255,255,255,0.4);">
                    <div style="font-size: 55px; margin-bottom: 15px; animation: float 3s ease-in-out infinite;">🌅</div>
                    <h3 style="font-size: 26px; margin: 12px 0; font-weight: 700;">সেহরি শেষ (Sehri Ends)</h3>
                    <h3 style="font-size: 24px; margin: 10px 0; font-weight: 600;">ফজর (Fajr)</h3>
                    <p style="font-size: 44px; font-weight: 900; margin: 15px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">{prayer_times['sehri_end']}</p>
                    <p style="font-size: 17px; opacity: 0.95; font-weight: 600;">এই সময়ের আগে খাওয়া বন্ধ করুন</p>
                    <p style="font-size: 16px; opacity: 0.9;">Stop eating before this time</p>
                </div>
                <div style="text-align: center; background: rgba(255,255,255,0.3); padding: 30px; border-radius: 25px; backdrop-filter: blur(15px); transition: all 0.3s ease; border: 2px solid rgba(255,255,255,0.4);">
                    <div style="font-size: 55px; margin-bottom: 15px; animation: float 3s ease-in-out infinite; animation-delay: 0.5s;">🌇</div>
                    <h3 style="font-size: 26px; margin: 12px 0; font-weight: 700;">ইফতার শুরু (Iftar Starts)</h3>
                    <h3 style="font-size: 24px; margin: 10px 0; font-weight: 600;">মাগরিব (Maghrib)</h3>
                    <p style="font-size: 44px; font-weight: 900; margin: 15px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">{prayer_times['iftar_start']}</p>
                    <p style="font-size: 17px; opacity: 0.95; font-weight: 600;">এই সময়ে রোজা ভাঙ্গুন</p>
                    <p style="font-size: 16px; opacity: 0.9;">Break your fast at this time</p>
                </div>
            </div>
            
            <div style="background: rgba(255,255,255,0.25); padding: 30px; border-radius: 25px; backdrop-filter: blur(15px); border: 2px solid rgba(255,255,255,0.3);">
                <h3 style="text-align: center; font-size: 28px; margin-bottom: 25px; font-weight: 700;">📿 দৈনিক নামাজের সময়সূচী (Daily Prayer Schedule)</h3>
                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center;">
                    <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;">
                        <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">সূর্যোদয় (Sunrise)</p>
                        <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['sunrise']}</p>
                    </div>
                    <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;">
                        <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">যোহর (Dhuhr)</p>
                        <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['dhuhr']}</p>
                    </div>
                    <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;">
                        <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">আসর (Asr)</p>
                        <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['asr']}</p>
                    </div>
                </div>
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; text-align: center; margin-top: 20px;">
                    <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;">
                        <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">সূর্যাস্ত (Sunset)</p>
                        <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['sunset']}</p>
                    </div>
                    <div style="background: rgba(255,255,255,0.2); padding: 20px; border-radius: 20px;">
                        <p style="font-size: 18px; opacity: 0.95; margin: 8px 0; font-weight: 600;">এশা (Isha)</p>
                        <p style="font-size: 28px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{prayer_times['isha']}</p>
                    </div>
                </div>
            </div>
        """
    else:
        html += """
            <div style="text-align: center; padding: 40px; background: rgba(255,255,255,0.25); border-radius: 25px; border: 2px solid rgba(255,255,255,0.3);">
                <p style="font-size: 24px; font-weight: 700;">⚠️ নামাজের সময় পাওয়া যায়নি</p>
                <p style="font-size: 20px; opacity: 0.95; margin-top: 12px;">Could not fetch prayer times</p>
                <p style="font-size: 18px; opacity: 0.9; margin-top: 10px;">দয়া করে আপনার জেলার নাম চেক করুন</p>
            </div>
        """
    
    html += f"""
        </div>
        
        <!-- Weather Card with Advanced Animation -->
        <div class="card weather-card">
            <div style="text-align: center; margin-bottom: 25px;">
                <h2 class="gradient-text" style="font-size: 40px; margin-bottom: 12px; font-weight: 800;">🌡️ লাইভ আবহাওয়া (Live Weather)</h2>
            </div>
            <div style="text-align: center; background: {gradient}; color: white; padding: 50px; border-radius: 30px; position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.2);">
                <div style="font-size: 120px; margin: 25px 0; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));">
                    {icon}
                </div>
                <h1 style="font-size: 84px; margin: 20px 0; font-weight: 900; text-shadow: 3px 3px 6px rgba(0,0,0,0.3);">{temp:.1f}°C</h1>
                <p style="font-size: 32px; margin: 15px 0; text-transform: capitalize; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">{description}</p>
                <p style="font-size: 24px; opacity: 0.95; font-weight: 600;">অনুভূতি (Feels like) {feels_like:.1f}°C</p>
                <div style="margin-top: 30px; font-size: 22px; display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;">
                    <div style="background: rgba(255,255,255,0.2); padding: 15px 30px; border-radius: 20px; backdrop-filter: blur(10px);">
                        <span style="font-weight: 700;">💧 আর্দ্রতা: {humidity}%</span>
                    </div>
                    <div style="background: rgba(255,255,255,0.2); padding: 15px 30px; border-radius: 20px; backdrop-filter: blur(10px);">
                        <span style="font-weight: 700;">🌬️ বাতাস: {wind_speed} m/s</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Temperature-Based Recommendations -->
        <div class="card" style="animation-delay: 0.3s;">
            <h2 class="gradient-text" style="font-size: 38px; margin-bottom: 30px; text-align: center; font-weight: 800;">
                💡 আপনার ব্যক্তিগত রমজান গাইড
            </h2>
            <h3 style="text-align: center; color: #FF6B6B; font-size: 28px; margin-bottom: 25px; font-weight: 700;">
                Your Personalized Ramadan Guide
            </h3>
            <div style="background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 50%, #FFF0F5 100%); padding: 35px; border-radius: 25px; border-left: 8px solid #FF6B6B; box-shadow: inset 0 0 20px rgba(255,107,107,0.1);">
                <div style="line-height: 2.2; white-space: pre-line; font-size: 18px; font-weight: 500; color: #2c3e50;">
{temp_advice}
                </div>
            </div>
            
            <div style="margin-top: 30px; text-align: center; background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%); padding: 25px; border-radius: 20px; border: 2px solid #2196F3;">
                <p style="font-size: 20px; color: #0D47A1; font-weight: 700; line-height: 1.6;">
                    💙 মনে রাখবেন: রোজার সময় আপনার স্বাস্থ্য গুরুত্বপূর্ণ। আপনার শরীরের কথা শুনুন!
                </p>
                <p style="font-size: 18px; color: #1565C0; font-weight: 600; margin-top: 10px;">
                    Remember: Your health is important during fasting. Listen to your body!
                </p>
            </div>
        </div>
        
        <!-- Daily Hadith Card with Enhanced Design -->
        <div class="card" style="background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%); color: white; animation-delay: 0.4s; border: 3px solid rgba(255,255,255,0.3);">
            <div style="text-align: center; margin-bottom: 35px;">
                <h2 style="font-size: 44px; margin-bottom: 20px; text-shadow: 3px 3px 6px rgba(0,0,0,0.3); font-weight: 900;">📿 আজকের হাদিস (Today's Hadith)</h2>
                <div style="font-size: 35px; margin: 20px 0;">
                    <span class="star pulse-glow">🌸</span>
                    <span class="star pulse-glow" style="animation-delay: 0.3s;">🌺</span>
                    <span class="star pulse-glow" style="animation-delay: 0.6s;">🌼</span>
                    <span class="star pulse-glow" style="animation-delay: 0.9s;">🌻</span>
                </div>
            </div>
            
            <div style="background: rgba(255,255,255,0.3); padding: 35px; border-radius: 25px; margin-bottom: 30px; backdrop-filter: blur(15px); border: 2px solid rgba(255,255,255,0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
                <p style="font-size: 24px; line-height: 2; margin-bottom: 25px; font-style: italic; text-align: center; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
                    "{daily_hadith['english']}"
                </p>
                <div style="height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); margin: 25px 0;"></div>
                <p style="font-size: 22px; line-height: 2; font-family: 'Noto Sans Bengali', sans-serif; opacity: 0.98; text-align: center; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
                    "{daily_hadith['bengali']}"
                </p>
                <p style="text-align: right; font-size: 20px; margin-top: 25px; opacity: 0.95; font-weight: 700; font-style: italic;">
                    — {daily_hadith['reference']}
                </p>
            </div>
            
            <div style="background: rgba(255,255,255,0.25); padding: 30px; border-radius: 25px; margin-bottom: 25px; text-align: center; border: 2px solid rgba(255,255,255,0.3);">
                <div style="font-size: 40px; margin-bottom: 20px;">
                    <span class="baby-decoration">😊</span>
                    <span class="baby-decoration" style="animation-delay: 0.3s;">💖</span>
                    <span class="baby-decoration" style="animation-delay: 0.6s;">🌸</span>
                    <span class="baby-decoration" style="animation-delay: 0.9s;">🐱</span>
                </div>
                <p style="font-size: 22px; line-height: 1.8; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
                    {daily_hadith['happy_message']}
                </p>
            </div>
            
            <div style="text-align: center; background: rgba(255,255,255,0.2); padding: 30px; border-radius: 25px; border: 2px solid rgba(255,255,255,0.3);">
                <p style="font-size: 30px; font-weight: 800; margin: 12px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
                    {daily_hadith['salam']}
                </p>
            </div>
        </div>
        
        <!-- Beautiful Footer with Enhanced Islamic Decoration -->
        <div style="text-align: center; padding: 50px 40px; background: linear-gradient(135deg, #87CEEB 0%, #00BFFF 50%, #1E90FF 100%); color: white; border-radius: 30px; margin-top: 35px; box-shadow: 0 15px 50px rgba(30,144,255,0.3); position: relative; overflow: hidden;">
            <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,%3Csvg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M0 0h100v100H0z\" fill=\"none\"/%3E%3Cpath d=\"M50 30l5 15h16l-13 9 5 15-13-9-13 9 5-15-13-9h16z\" fill=\"rgba(255,255,255,0.05)\"/%3E%3C/svg%3E'); opacity: 0.3;"></div>
            
            <div style="position: relative; z-index: 1;">
                <div style="font-size: 50px; margin-bottom: 25px;">
                    <span class="mosque-decoration">🏛️</span>
                    <span class="crescent" style="font-size: 60px; margin: 0 20px;">🌙</span>
                    <span class="mosque-decoration">🏛️</span>
                </div>
                
                <h3 style="font-size: 32px; margin: 20px 0; font-weight: 800; text-shadow: 2px 2px 4px rgba(0,0,0,0.4);">
                    May Allah Accept Your Fasting & Prayers
                </h3>
                <h3 style="font-size: 36px; margin: 15px 0; font-family: 'Noto Sans Bengali', sans-serif; font-weight: 900; text-shadow: 2px 2px 4px rgba(0,0,0,0.4);">
                    আল্লাহ আপনার রোজা ও নামাজ কবুল করুন
                </h3>
                
                <div style="margin: 30px 0; font-size: 40px;">
                    <span class="baby-decoration">🐱</span>
                    <span class="baby-decoration" style="animation-delay: 0.3s;">🐈</span>
                    <span class="baby-decoration" style="animation-delay: 0.6s;">😺</span>
                    <span class="baby-decoration" style="animation-delay: 0.9s;">😸</span>
                </div>
                
                <div style="background: rgba(255,255,255,0.15); padding: 20px; border-radius: 20px; backdrop-filter: blur(10px); margin: 25px auto; max-width: 500px;">
                    <p style="font-size: 24px; opacity: 0.98; margin: 10px 0; font-weight: 700;">
                        Ramadan Kareem 2025! 🌙
                    </p>
                    <p style="font-size: 28px; opacity: 0.98; margin: 10px 0; font-family: 'Noto Sans Bengali', sans-serif; font-weight: 800;">
                        রমজান করীম ১৪৪৬! 🌸
                    </p>
                </div>
                
                <div style="margin-top: 25px; font-size: 32px;">
                    <span class="star pulse-glow">🌸</span>
                    <span class="star pulse-glow" style="animation-delay: 0.2s;">🌺</span>
                    <span class="star pulse-glow" style="animation-delay: 0.4s;">🌼</span>
                    <span class="star pulse-glow" style="animation-delay: 0.6s;">🌻</span>
                    <span class="star pulse-glow" style="animation-delay: 0.8s;">🌸</span>
                </div>
            </div>
        </div>
        
    </div>
    """
    
    return html

# =========================
# 🎨 Gradio Interface with Bangladesh Divisions & Districts
# =========================
custom_css = """
    .gradio-container {
        background: linear-gradient(135deg, #E8F5E9 0%, #F3E5F5 40%, #FFF9C4 70%, #FFEBEE 100%) !important;
    }
    
    footer {
        display: none !important;
    }
    
    .contain {
        max-width: 1200px !important;
    }
    
    .gr-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: none !important;
        color: white !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        padding: 12px 30px !important;
        border-radius: 15px !important;
        transition: all 0.3s ease !important;
    }
    
    .gr-button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4) !important;
    }
"""

def update_districts(division):
    """Update district dropdown based on selected division"""
    if division in BANGLADESH_LOCATIONS:
        return gr.Dropdown(
            choices=BANGLADESH_LOCATIONS[division],
            value=BANGLADESH_LOCATIONS[division][0],
            label=f"🏘️ জেলা নির্বাচন করুন (Select District) - {division}",
            interactive=True
        )
    return gr.Dropdown(choices=[], label="🏘️ জেলা নির্বাচন করুন (Select District)", interactive=True)

with gr.Blocks(css=custom_css) as demo:
    gr.HTML("""
        <div style='text-align: center; padding: 35px; background: linear-gradient(135deg, #87CEEB 0%, #00BFFF 50%, #1E90FF 100%); color: white; border-radius: 25px; margin-bottom: 30px; box-shadow: 0 15px 40px rgba(30,144,255,0.3);'>
            <h1 style='font-size: 48px; margin-bottom: 20px; font-weight: 900; text-shadow: 3px 3px 6px rgba(0,0,0,0.4);'>🏛️ রমজান ড্যাশবোর্ড ২০২৫ 🌙</h1>
            <h2 style='font-size: 42px; margin-bottom: 20px; font-weight: 800;'>Ultimate Ramadan Dashboard 2025</h2>
            <p style='font-size: 22px; margin: 12px 0; font-weight: 600;'>🌸 রিয়েল-টাইম নামাজের সময় • লাইভ আবহাওয়া • দৈনিক হাদিস • স্মার্ট পরামর্শ 🌸</p>
            <p style='font-size: 20px; margin: 10px 0; opacity: 0.95;'>Real Prayer Times • Live Weather • Daily Hadith • Smart Advice</p>
            <p style='font-size: 18px; opacity: 0.95; margin-top: 15px;'>🇧🇩 সমস্ত বাংলাদেশ বিভাগ ও জেলা সমর্থিত • All Bangladesh Divisions & Districts Supported</p>
            <div style='margin-top: 20px; font-size: 28px;'>
                <span>🏛️</span> <span>🌙</span> <span>🐱</span> <span>🌸</span> <span>🐈</span> <span>🌺</span>
            </div>
        </div>
    """)
    
    with gr.Row():
        division_dropdown = gr.Dropdown(
            choices=list(BANGLADESH_LOCATIONS.keys()),
            value="Dhaka Division",
            label="🗺️ বিভাগ নির্বাচন করুন (Select Division)",
            interactive=True
        )
        
        district_dropdown = gr.Dropdown(
            choices=BANGLADESH_LOCATIONS["Dhaka Division"],
            value="Dhaka",
            label="🏘️ জেলা নির্বাচন করুন (Select District)",
            interactive=True
        )
    
    submit_btn = gr.Button("🌙 রমজান ড্যাশবোর্ড দেখুন (View Ramadan Dashboard)", size="lg")
    
    output = gr.HTML(label="🌙 Your Complete Ramadan Companion")
    
    # Update districts when division changes
    division_dropdown.change(
        fn=update_districts,
        inputs=[division_dropdown],
        outputs=[district_dropdown]
    )
    
    # Submit button click
    submit_btn.click(
        fn=get_ramadan_dashboard,
        inputs=[division_dropdown, district_dropdown],
        outputs=[output]
    )
    
    # Auto-load on page load
    demo.load(
        fn=get_ramadan_dashboard,
        inputs=[division_dropdown, district_dropdown],
        outputs=[output]
    )

if __name__ == "__main__":
    demo.launch(
        share=False,
        server_name="0.0.0.0",
        server_port=7860,
        theme=gr.themes.Soft(
            primary_hue="purple",
            secondary_hue="blue",
        ),
    )