import dash
from dash import dcc, html, Input, Output
import plotly.graph_objs as go
import requests
from datetime import datetime
from weather_model import get_weather_data  # Assuming this file exists

# Initialize Dash app
app = dash.Dash(__name__)
app.title = "Weather Forecast Dashboard"

# Replace with your OpenWeatherMap API key
API_KEY = "53d50455f91b6bc3c920959e2954576d"

# Layout
app.layout = html.Div([
    html.Div([
        html.H1("Weather Forecast Dashboard", style={'textAlign': 'center', 'color': '#FFFFFF'}),
        html.P("Get real-time updates and predictions for your location.", 
               style={'textAlign': 'center', 'color': '#D3D9D4'})
    ], style={'backgroundColor': '#212A31', 'padding': '20px'}),

    html.Div([
        dcc.Input(id='city-input', type='text', value='New York', 
                  style={'width': '50%', 'margin': '10px', 'padding': '5px'}),
        html.Button('Get Weather', id='submit-btn', n_clicks=0, 
                    style={'backgroundColor': '#748D92', 'color': '#212A31', 'padding': '5px 15px'}),
        dcc.Dropdown(id='forecast-days', options=[
            {'label': '5 Days', 'value': 5},
            {'label': '10 Days', 'value': 10}
        ], value=5, style={'width': '50%', 'margin': '10px'})
    ], style={'backgroundColor': '#2E3944', 'padding': '20px', 'borderRadius': '10px'}),

    html.Div(id='weather-summary', style={'color': '#FFFFFF', 'padding': '20px'}),
    dcc.Graph(id='temperature-graph'),
    dcc.Graph(id='precipitation-graph'),
    dcc.Graph(id='wind-graph'),
], style={'backgroundColor': '#1A2329', 'fontFamily': 'Arial', 'minHeight': '100vh'})

# Callback to update dashboard
@app.callback(
    [Output('weather-summary', 'children'),
     Output('temperature-graph', 'figure'),
     Output('precipitation-graph', 'figure'),
     Output('wind-graph', 'figure')],
    [Input('submit-btn', 'n_clicks')],
    [dash.dependencies.State('city-input', 'value'),
     dash.dependencies.State('forecast-days', 'value')]
)
def update_dashboard(n_clicks, city, days):
    if n_clicks == 0:
        return "Enter a city and click 'Get Weather'.", {}, {}, {}

    weather_data = get_weather_data(city, days, API_KEY)
    if not weather_data:
        return "City not found!", {}, {}, {}

    # Summary
    current = weather_data['current']
    summary = html.Div([
        html.H3(f"Current Weather in {city}"),
        html.P(f"Temperature: {current['temp']}°C"),
        html.P(f"Condition: {current['weather']}"),
        html.P(f"Humidity: {current['humidity']}%"),
        html.P(f"Wind Speed: {current['wind_speed']} km/h"),
    ])

    # Temperature Graph
    dates = [d['date'] for d in weather_data['forecast']]
    temps = [d['temp'] for d in weather_data['forecast']]
    temp_fig = {
        'data': [go.Scatter(x=dates, y=temps, mode='lines+markers', name='Temperature')],
        'layout': go.Layout(title='Temperature Forecast', xaxis={'title': 'Date'}, 
                           yaxis={'title': 'Temperature (°C)'}, template='plotly_dark')
    }

    # Precipitation Graph
    precip = [d['precipitation'] for d in weather_data['forecast']]
    precip_fig = {
        'data': [go.Bar(x=dates, y=precip, name='Precipitation')],
        'layout': go.Layout(title='Precipitation Forecast', xaxis={'title': 'Date'}, 
                           yaxis={'title': 'Precipitation (mm)'}, template='plotly_dark')
    }

    # Wind Speed Graph
    wind = [d['wind_speed'] for d in weather_data['forecast']]
    wind_fig = {
        'data': [go.Scatter(x=dates, y=wind, mode='lines+markers', name='Wind Speed')],
        'layout': go.Layout(title='Wind Speed Forecast', xaxis={'title': 'Date'}, 
                           yaxis={'title': 'Wind Speed (km/h)'}, template='plotly_dark')
    }

    return summary, temp_fig, precip_fig, wind_fig

# Run server on port 7860 for Hugging Face Spaces
if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port=7860)