# Import core tools for Dash app building
import warnings; warnings.filterwarnings("ignore")
import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import pandas as pd

# Let's start and preview a blank Dash app
app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1('Hello, Dash!'),
    html.P('Welcome to your first app.')
])

# This will not run here, but locally use:
# app.run_server(debug=True)

# Data setup: Load a real time series dataset for live Dash experience
url = "https://raw.githubusercontent.com/jbrownlee/Datasets/master/airline-passengers.csv"
df = pd.read_csv(url)
print(df.shape)
print(df.head())

# Quick line chart of airline passengers over time
fig = px.line(df, x='Month', y='Passengers', title='Airline Passengers Over Time')
fig.show()

# Layout with chart and helper text
app.layout = html.Div([
    html.H2('Line chart example'),
    dcc.Graph(figure=fig),
    html.P('Try adding your own numbers below!')
])

# Adding input box for interactive dashboard
app.layout = html.Div([
    html.H2('Try typing a note:'),
    dcc.Input(id='input-text', type='text', value=''),
    html.Div(id='output-text')
])

# Making things react: a simple callback
@app.callback(
    Output('output-text', 'children'),
    Input('input-text', 'value')
)
def update_output(value):
    return f'You typed: {value}'

# Side by side charts using flex layout
layout_row = html.Div([
    html.Div([dcc.Graph(figure=fig)], style={'width': '48%', 'display': 'inline-block'}),
    html.Div([html.P('Second chart or info goes here.')], style={'width': '48%', 'display': 'inline-block'})
], style={'display': 'flex', 'justify-content': 'space-between'})

app.layout = layout_row

# Layout with dropdown and text input
app.layout = html.Div([
    dcc.Dropdown(
        options=[
            {'label': 'Passengers', 'value': 'Passengers'},
            {'label': 'Month (as text)', 'value': 'Month'}
        ],
        value='Passengers',
        id='column-dropdown'
    ),
    dcc.Input(id='input-text', type='text', value=''),
    html.Div(id='multi-output')
])
    )
])

# Callback with multiple inputs: combines dropdown and input box
@app.callback(
    Output('multi-output', 'children'),
    Input('column-dropdown', 'value'),
    Input('input-text', 'value')
)
def update_multi(selected_column, user_text):
    if selected_column == 'Passengers':
        col_preview = df[selected_column].head().to_list()
    else:
        col_preview = df[selected_column].astype(str).head().to_list()
    return f'Column preview: {col_preview}, You typed: {user_text}'

# Showing errors safely: what if a column is missing?
try:
    df['FakeColumn']
except KeyError as e:
    print("Column not found! Error was:", e)
    

# Example: include this at the bottom of your script for cloud hosting
if __name__ == "__main__":
    app.run_server(debug=False, host='0.0.0.0', port=8050)
    

# Challenge: let the user choose a date range and see that part of the data
from dash import dash_table
import datetime

app.layout = html.Div([
    dcc.DatePickerRange(
        id='date-range',
        start_date=df['Month'].iloc[0],
        end_date=df['Month'].iloc[-1]
    ),
    dash_table.DataTable(id='table-display'),
])
])

# Callback: update the table to match user-selected date range
@app.callback(
    Output('table-display', 'data'),
    Output('table-display', 'columns'),
    Input('date-range', 'start_date'),
    Input('date-range', 'end_date')
)
def update_table(start, end):
    dff = df[(df['Month'] >= start) & (df['Month'] <= end)]
    columns = [{'name': col, 'id': col} for col in dff.columns]
    data = dff.to_dict('records')
    return data, columns

# Extra tip: Add a theme for better looks
import dash_bootstrap_components as dbc
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.CYBORG])