import gradio as gr

def get_weather_data(city):
    # Simulated values — replace with real API later
    temp_c = 42
    temp_f = round(temp_c * 9 / 5 + 32, 1)
    pressure = 1010
    wind_speed = 18
    wind_deg = 45
    wind_direction = "NE"

    return [
        city.title(),
        f"{temp_c} °C",
        f"{temp_f} °F",
        f"{pressure} hPa",
        f"{wind_speed} km/h",
        f"{wind_direction} ({wind_deg}°)"
    ]

with gr.Blocks(theme=gr.themes.Soft(),
               css="""
        #city_box, #temp_c_box, #temp_f_box, #pressure_box, #wind_box, #dir_box {
            background-color: #f0f8ff;
            border-radius: 10px;
            font-weight: bold;
            padding: 10px;
        }

        .gr-button {
            background-color: #0066cc !important;
            color: white !important;
            font-size: 16px !important;
            border-radius: 8px !important;
            padding: 12px 20px !important;
        }

        .gr-textbox label {
            font-weight: 600;
            color: #333;
        }
        """) as app:
    gr.Markdown(
        """
        <h1 style='text-align:center; color:#0066cc;'>🌦️ <span style="color:#333">UAE Weather Dashboard</span></h1>
        <p style='text-align:center; font-size:16px;'>Type in your city to get the latest weather insights!</p>
        """)

    with gr.Row():
        city_input = gr.Textbox(label="🏙️ City", placeholder="e.g., Dubai")

    get_weather_btn = gr.Button("🔍 Get Weather")

    with gr.Row():
        with gr.Column():
            city_output = gr.Textbox(label="📍 City", interactive=False, show_label=True, elem_id="city_box")
            temp_c_output = gr.Textbox(label="🌡️ Temperature (°C)", interactive=False, elem_id="temp_c_box")
            temp_f_output = gr.Textbox(label="🌡️ Temperature (°F)", interactive=False, elem_id="temp_f_box")
        with gr.Column():
            pressure_output = gr.Textbox(label="💨 Pressure (hPa)", interactive=False, elem_id="pressure_box")
            wind_speed_output = gr.Textbox(label="🌬️ Wind Speed", interactive=False, elem_id="wind_box")
            wind_dir_output = gr.Textbox(label="🧭 Wind Direction", interactive=False, elem_id="dir_box")

    get_weather_btn.click(get_weather_data, inputs=[city_input], outputs=[
        city_output, temp_c_output, temp_f_output, pressure_output, wind_speed_output, wind_dir_output
    ])


app.launch(share=True)