import gradio as gr
import requests
import pandas as pd
import plotly.express as px

# ŞEHİRLER
cities = {
    "Adana": (37.0, 35.3),
    "Istanbul": (41.0, 29.0),
    "Ankara": (39.9, 32.8),
    "Izmir": (38.4, 27.1)
}

# VERİ
def get_weather(city):
    lat, lon = cities[city]

    url = f"https://api.open-meteo.com/v1/forecast?latitude={lat}&longitude={lon}&daily=temperature_2m_max,temperature_2m_min&timezone=auto"
    data = requests.get(url).json()

    df = pd.DataFrame({
        "date": data["daily"]["time"],
        "max_temp": data["daily"]["temperature_2m_max"],
        "min_temp": data["daily"]["temperature_2m_min"]
    })

    return df

# ANA
def forecast(city):
    df = get_weather(city)

    fig = px.line(
        df,
        x="date",
        y=["max_temp", "min_temp"],
        markers=True
    )

    # mobil için daha kompakt
    fig.update_layout(
        height=300,
        margin=dict(l=10, r=10, t=30, b=10)
    )

    return df, fig

# UI (MOBİL FIRST)
with gr.Blocks(theme=gr.themes.Soft(), css="""
.container {max-width: 420px; margin: auto;}
""") as demo:

    gr.Markdown("## 🌤️ Weather")
    
    city = gr.Dropdown(
        list(cities.keys()), 
        value="Adana", 
        label="City"
    )

    btn = gr.Button("🔍 Forecast", size="lg")

    table = gr.Dataframe(label="📊 Data")

    plot = gr.Plot(label="📈 Forecast")

    btn.click(
        fn=forecast,
        inputs=city,
        outputs=[table, plot]
    )

demo.launch()