import streamlit as st
import os
import requests
from datetime import datetime, timedelta
import pytz

# 1. Page Setup
st.set_page_config(page_title="SkyCast Pro", page_icon="☁️", layout="centered")

# 2. Styling (Glassmorphism)
st.markdown("""
    <style>
    .stApp { background-color: #0f172a; }
    h1 { color: white !important; text-align: center; font-weight: 200; letter-spacing: 4px; padding-bottom: 10px; }
    .weather-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 30px;
        color: white;
        text-align: center;
        margin-top: 20px;
    }
    .temp-large { font-size: 80px; font-weight: bold; margin: 5px 0; color: #38bdf8; }
    .city-name { font-size: 24px; opacity: 0.8; margin-bottom: 5px; }
    .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
    .detail-item { font-size: 14px; opacity: 0.7; }
    </style>
    """, unsafe_allow_html=True)

st.title("SKYCAST PRO")

# 3. API Logic
API_KEY = os.environ.get('Api_key')

def get_weather(city_name):
    if not API_KEY: return {"error": "API Key missing!"}
    url = f"https://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={API_KEY}&units=metric"
    try:
        r = requests.get(url, timeout=10)
        return r.json() if r.status_code == 200 else {"error": "City not found"}
    except: return {"error": "Connection error"}

# 4. Search & Dropdown (Duplicate City Fix)
# Humne common cities ke options de diye hain taaki confusion na ho
search_mode = st.radio("Search Method", ["Direct Search", "Quick Select"], horizontal=True)

selected_city = ""
if search_mode == "Quick Select":
    city_options = {
        "Hyderabad, Pakistan": "Hyderabad,PK",
        "Hyderabad, India": "Hyderabad,IN",
        "Karachi, Pakistan": "Karachi,PK",
        "Mumbai, India": "Mumbai,IN",
        "London, UK": "London,GB",
        "New York, USA": "New York,US"
    }
    choice = st.selectbox("Choose a City:", list(city_options.keys()))
    selected_city = city_options[choice]
else:
    selected_city = st.text_input("Search Location", placeholder="e.g. Hyderabad,PK")

# 5. Result Display
if selected_city:
    with st.spinner("Fetching data..."):
        data = get_weather(selected_city)
        
        if "error" in data:
            st.error(data["error"])
        else:
            # 6. CALCULATING LOCAL TIME
            # OpenWeather gives timezone offset in seconds from UTC
            timezone_offset = data['timezone'] 
            utc_now = datetime.now(pytz.utc)
            local_time = utc_now + timedelta(seconds=timezone_offset)
            formatted_time = local_time.strftime('%H:%M | %A')

            # Extracting Details
            city = data['name']
            country = data['sys']['country']
            temp = round(data['main']['temp'])
            feels_like = round(data['main']['feels_like'])
            desc = data['weather'][0]['description'].title()
            humidity = data['main']['humidity']
            wind = data['wind']['speed']
            icon = data['weather'][0]['icon']

            st.markdown(f"""
                <div class="weather-card">
                    <div class="city-name">{city}, {country}</div>
                    <div style="font-size: 14px; color: #38bdf8;">Local Time: {formatted_time}</div>
                    <img src="http://openweathermap.org/img/wn/{icon}@2x.png" alt="icon">
                    <div class="temp-large">{temp}°C</div>
                    <div style="font-size: 18px; margin-bottom: 10px;">{desc}</div>
                    <div class="details-grid">
                        <div class="detail-item">
                            <div>FEELS LIKE</div>
                            <div style="color: white; font-size: 18px;">{feels_like}°C</div>
                        </div>
                        <div class="detail-item">
                            <div>HUMIDITY</div>
                            <div style="color: white; font-size: 18px;">{humidity}%</div>
                        </div>
                        <div class="detail-item">
                            <div>WIND SPEED</div>
                            <div style="color: white; font-size: 18px;">{wind} m/s</div>
                        </div>
                        <div class="detail-item">
                            <div>STATUS</div>
                            <div style="color: white; font-size: 18px;">Live Sync</div>
                        </div>
                    </div>
                </div>
            """, unsafe_allow_html=True)
else:
    st.info("Search bar mein city aur country code likhen (e.g. Hyderabad,PK)")

st.markdown("<p style='text-align:center; opacity:0.3; margin-top:50px;'>SkyCast Pro | Powered by OpenWeather</p>", unsafe_allow_html=True)