src/streamlit_app.py

import streamlit as st
import streamlit.components.v1 as components
import pandas as pd
import numpy as np
import joblib
import plotly.graph_objects as go
from feature_pipeline import create_features
from sklearn.metrics import r2_score, mean_squared_error, mean_absolute_error

# --- 1. PAGE CONFIGURATION ---
st.set_page_config(
    page_title="Group 5 Hanoi Weather Hub",
    page_icon="☀️",
    layout="wide"
)

# --- CONSTANTS ---
PLOT_COLORS = {'past': '#005aa7', 'forecast': "#1547eb", 'actual': "#d0b51b"}
# --- FEATURE DESCRIPTIONS (COMPLETE 46 FEATURES) ---
# This dictionary maps each of the 46 features used by the model to a user-friendly description.
FEATURE_DESCRIPTIONS = {
    # Core & Cyclical Features
    "temp": "The average temperature of the current day (°C).",
    "cos_day_of_year": "Cosine of the day of the year. Captures the main seasonal cycle.",
    "sin_day_of_year": "Sine of the day of the year. Works with cosine to pinpoint the exact time of year.",
    
    # Temperature-based Features
    "temp_ewm_30": "30-day Exponentially Weighted Moving Average of temperature. Represents the long-term temperature trend.",
    "temp_ewm_7": "7-day Exponentially Weighted Moving Average of temperature. Represents the short-term temperature trend.",
    "temp_diff_1": "Difference between today's and yesterday's temperature. Shows if it's warming up or cooling down.",
    "temp_roll_min_7": "The minimum temperature recorded over the past 7 days.",
    "temp_lag_1": "The average temperature from the previous day.",
    "temp_range": "The difference between the maximum (tempmax) and minimum (tempmin) temperature of the day.",
    "temp_resid_yearly": "The residual (irregular noise) component after removing trend and seasonality from the temperature series.",
    "temp_trend_yearly": "The long-term trend component of the temperature (e.g., gradual warming over years).",
    
    # Weather Condition Features
    "solarradiation": "The amount of solar energy received per unit area. A primary driver of heat.",
    "windgust": "The highest instantaneous wind speed recorded during the day (km/h).",
    "cloudcover": "The percentage of the sky covered by clouds.",
    "humidity": "The relative humidity of the air (%).",
    "precip": "The amount of precipitation (rain) recorded (mm).",
    "precipprob": "The probability of precipitation occurring (%).",
    "visibility": "The distance at which objects can be clearly seen (km).",
    "windspeed": "The average wind speed for the day (km/h).",
    
    # Wind-related Features
    "winddir_cos": "Cosine of the wind direction. Helps the model understand easterly vs. westerly wind components.",
    "wind_vector_ew": "East-West wind vector component, calculated from wind speed and direction.",
    "windspeed_roll_std_14": "Standard deviation of wind speed over the past 14 days, indicating wind volatility.",
    
    # Interaction & Advanced Features
    "interaction_wind_clearsky_effect": "An interaction term between wind speed and cloud cover, modeling the wind chill effect on clear days.",
    
    # Seasonal & Holiday Features
    "season_Winter": "A binary flag (1 if Winter, 0 otherwise).",
    "season_Summer": "A binary flag (1 if Summer, 0 otherwise).",
    
    # Lag Features (Past Values)
    "precip_lag_3": "Precipitation from 3 days ago.",
    "precip_lag_4": "Precipitation from 4 days ago.",
    "precip_lag_5": "Precipitation from 5 days ago.",
    "windspeed_lag_8": "Wind speed from 8 days ago.",
    
    # Rolling Window Statistics (Recent History)
    "precip_roll_mean_3": "The average precipitation over the past 3 days.",
    "precip_roll_min_30": "The minimum precipitation recorded in the past 30 days.",
    "cloudcover_roll_std_3": "Standard deviation of cloud cover over the past 3 days, indicating cloudiness stability.",
    "humidity_roll_std_3": "Standard deviation of humidity over the past 3 days.",
    "windspeed_roll_min_30": "The minimum wind speed recorded in the past 30 days.",
    "windspeed_roll_max_30": "The maximum wind speed recorded in the past 30 days.",
    "temp_roll_std_3": "Standard deviation of temperature over the past 3 days, indicating temperature stability.",
    "temp_roll_std_7": "Standard deviation of temperature over the past 7 days.",
    
    # Difference Features (Rate of Change)
    "humidity_diff_7": "The difference between today's humidity and the humidity from 7 days ago.",
    "windspeed_diff_7": "The difference between today's wind speed and the wind speed from 7 days ago.",
    "cloudcover_diff_7": "The difference between today's cloud cover and the cloud cover from 7 days ago.",
    
    # Fourier Features (Advanced Cycles)
    "fft_cos_freq_1": "A cyclical feature derived from Fourier analysis, capturing a dominant underlying cycle in the temperature data.",
    "fft_sin_freq_1": "A cyclical feature paired with fft_cos_freq_1 to pinpoint the phase of the dominant cycle.",
    "fft_cos_freq_2": "A feature capturing the second most dominant underlying cycle.",
    "fft_sin_freq_2": "A feature paired with fft_cos_freq_2.",
    
    # Other
    "Clear": "A binary flag indicating if the weather condition was 'Clear'."
}

# --- 2. CUSTOM CSS FOR STYLING ---
def load_css():
    st.markdown("""
        <style>
            /* ===== Background gradient ===== */
            [data-testid="stAppViewContainer"] {
                background-image: linear-gradient(to bottom, #d4e1da 20%, #005aa7 100%) !important;
                background-attachment: fixed !important;
                background-size: cover !important;
            }
            /* ===== Global text ===== */
            .stApp, h1, h2, h3, p, label {
                color: #0A1931;
            }
            /* ===== Tabs ===== */
            button[data-baseweb="tab"][aria-selected="true"] {
                background-color: #FFFFFF !important;
                color: #005aa7 !important;
                padding: 10px 16px !important;
                border-radius: 10px 10px 0 0 !important;
                font-weight: 700 !important;
                border-bottom: 3px solid #e53935 !important;
            }
            button[data-baseweb="tab"][aria-selected="false"] {
                background-color: rgba(255,255,255,0.3) !important;
                color: #284270 !important;
                padding: 10px 16px !important;
            }
            /* ===== Metrics: Forecast titles, main numbers, and Actual (delta) ===== */
            [data-testid="stMetricLabel"] p,
            div[data-testid="stMetricValue"] {
                font-weight: 700 !important;
                text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
            }
            div[data-testid="stMetricLabel"] p:contains("Forecast for") {
                color: #ffffff !important;
                font-size: 2.2rem !important;
                font-weight: 800 !important;
                text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
                background: none !important;
                border: none !important;
            }
            div[data-testid="stMetricValue"] {
                color: #fefefe !important;
                font-size: 1.9rem !important;
                text-shadow: 1px 1px 6px rgba(0,0,0,0.5);
            }
            div[data-testid="stMetricLabel"] p {
                color: #dce9ff !important;
                font-weight: 700 !important;
                letter-spacing: 0.3px;
            }
            div[data-testid="stMetricLabel"] p {
                color: #e8f1ff !important;
                font-size: 1.4rem !important; 
                font-weight: 700 !important;
                text-shadow: none !important; 
                background: rgba(0, 0, 0, 0.15);
                padding: 4px 8px;
                border-radius: 6px;
            }
            div[data-testid="stMetricValue"] {
                color: #ffffff !important;
                font-size: 1.8rem !important;
                text-shadow: 0 0 3px rgba(0,0,0,0.3); 
                background: rgba(0,0,0,0.15);
                border-radius: 6px;
                padding: 6px 10px;
            }          
            div[data-testid="stMetricValue"] {
                color: #fefefe !important;
                font-size: 1.4rem !important;
                text-shadow: 1px 1px 6px rgba(0,0,0,0.5);
            }
            div[data-testid="stMetricLabel"] p {
                color: #dce9ff !important;
                font-weight: 700 !important;
                letter-spacing: 0.3px;
            }
            div[data-testid="stMetricValue"], 
            div[data-testid="stMetricLabel"] p {
                filter: drop-shadow(0 0 3px rgba(255,255,255,0.4));
            }                                                           
            /* ===== Custom feature cards (Tab 2) ===== */
            .custom-card-transparent {
                background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(0,0,0,0.25));
                border: 1px solid rgba(255,255,255,0.25);
                border-radius: 12px;
                padding: 14px;
                text-align: center;
                transition: all 0.25s ease;
                box-shadow: 0 2px 8px rgba(0,0,0,0.15);
                width: 95%;
                margin: 0 auto;
            }
            .custom-card-transparent:hover {
                transform: translateY(-3px);
                box-shadow: 0 4px 12px rgba(0,0,0,0.25);
                filter: brightness(1.1);
            }
            .custom-card-transparent h2 {
                color: #fefefe !important;
                font-size: 1.6rem !important; 
                font-weight: 700 !important;
                text-shadow: 0 0 4px rgba(255,255,255,0.25);
                margin-top: 10px;
            }
            .feature-tag-final {
                background-color: #1c3d70 !important;
                padding: 5px 10px;
                border-radius: 8px;
                font-size: 0.9rem;
                font-weight: 600;
                color: #e3eeff !important;
                text-shadow: 0 0 2px rgba(255,255,255,0.15);
                display: inline-block;
                margin-bottom: 3px;
            }
            /* ===== Restored missing pieces ===== */
            div[data-testid="stExpander"] {
                background-color: rgba(255, 255, 255, 0.85) !important;
                border-radius: 12px !important;
                border: 1px solid rgba(0, 90, 167, 0.25) !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
                margin-top: 2rem;
            }
            div.st-emotion-cache-1e5k5x7 {
                background-color: rgba(230, 240, 255, 0.5) !important;
                border-radius: 15px !important;
                padding: 1rem 0.5rem !important;
                border: 1px solid rgba(255, 255, 255, 0.3);
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                margin: 1rem 0;
            }
            div.st-emotion-cache-1e5k5x7 div[data-testid="stMetricValue"] {
                color: white !important;
                text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
            }
            div.st-emotion-cache-1e5k5x7 div[data-testid="stMetricLabel"] p {
                color: #0A1931 !important;
                font-weight: 600 !important;
            }
            button[data-baseweb="tab"][aria-selected="true"] {
                border-bottom: 2px solid rgba(229,57,53,0.9) !important;
            }
            div[data-testid="stMetricLabel"] p:contains("Forecast for") {
                color: #ffffff !important;
                font-size: 2.2rem !important;
                font-weight: 800 !important;
                text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
                background: none !important;
                border: none !important;
            }
            div[data-testid="stMetricValue"] {
                color: #ffffff !important;
                font-size: 2.2rem !important;
                font-weight: 800 !important;
                text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
                background: none !important;
                border: none !important;
                padding: 0 !important;
            }
            [data-testid="stMetricDelta"] {
                font-size: 1.2rem !important;
                font-weight: 700 !important;
                color: #ffea7a !important;
                text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
            }
            div[data-testid="stMetricLabel"] p {
                font-size: 1.5rem !important;
                font-weight: 700 !important;
                color: #06285a !important;
                text-shadow: none !important;
                background: none !important;
            }
            div[data-testid="stMetricValue"], 
            div[data-testid="stMetricLabel"] p {
                filter: none !important;
            }
            /* ===== Custom Styling for Date INPUT FIELD ONLY ===== */
            div[data-testid="stDateInput"] input {
                background-color: #f0f2f6 !important; 
                color: #0A1931 !important; 
                border: 0.5px solid #cccccc !important; 
                border-radius: 4px; 
                padding: 8px 10px; 
                box-shadow: inset 0 1px 2px rgba(75, 98, 138); 
                transition: border-color 0.2s ease, box-shadow 0.2s ease; 
            }
            div[data-testid="stDateInput"] button {
                display: none !important;
            }
            div[data-testid="stDateInput"] input:hover,
            div[data-testid="stDateInput"] input:focus {
                border-color: #1547eb !important; 
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 2px rgba(21, 71, 235, 0.2); 
            }
            
        </style>
    """, unsafe_allow_html=True)

# --- 3. DATA & MODEL LOADING ---
@st.cache_data
def load_raw_data():
    raw_df = pd.read_csv('data/Hanoi Daily 10 years.csv')
    y_test = pd.read_csv('data/y_test.csv', index_col='datetime', parse_dates=True)
    feature_importances = pd.read_csv('data/feature_importances.csv')
    return raw_df, y_test, feature_importances

@st.cache_resource
def load_model_and_features():
    model = joblib.load('artifacts/hanoi_temp_predictor.joblib')
    selected_features = joblib.load('artifacts/selected_features.joblib')
    return model, selected_features

@st.cache_data
def process_data(_raw_df):
    return create_features(_raw_df)

# --- 4. MAIN APP LOGIC ---
load_css()
st.title("☀️ Group 5 Hanoi Weather Hub")
st.write("An interactive dashboard to forecast Hanoi's temperature for the next 5 days.")

raw_df, y_test, feature_importances = load_raw_data()
model, selected_features = load_model_and_features()

with st.spinner("Running feature engineering pipeline..."):
    processed_df = process_data(raw_df)

col1, col2 = st.columns([1, 2])
with col1:
    selected_date = st.date_input(
        label="Select a date to forecast from:",
        value=processed_df.index.max(),
        min_value=processed_df.index.min(),
        max_value=processed_df.index.max(),
        format="YYYY-MM-DD"
    )

tab1, tab2, tab3 = st.tabs(["📈 Interactive Forecast", "🧠 Forecast Deep Dive", "📊 Model Performance"])

# --- TAB 1 ---
with tab1:
    selected_date_ts = pd.Timestamp(selected_date)
    st.header(f"5-Day Forecast from {selected_date_ts.strftime('%Y-%m-%d')}")
    input_data = processed_df.loc[[selected_date_ts]]
    input_features = input_data[selected_features]
    prediction = model.predict(input_features)[0]
    actual_values = []
    is_in_test_set = selected_date_ts in y_test.index
    if is_in_test_set:
        st.info("This is a backtest. 'Actual' values are shown for comparison.", icon="ℹ️")
        actual_values = y_test.loc[selected_date_ts].values
    else:
        st.warning("This is a live forecast. 'Actual' values are not yet available.", icon="⚠️")
    pred_cols = st.columns(5)
    forecast_dates = pd.date_range(start=selected_date_ts, periods=6, freq='D')[1:]
    for i, date in enumerate(forecast_dates):
        delta_text = ""
        if is_in_test_set and len(actual_values) > i:
            delta_text = f"Actual: {actual_values[i]:.1f}°C"
        pred_cols[i].metric(label=f"Forecast for {date.strftime('%b %d')}", value=f"{prediction[i]:.1f}°C", delta=delta_text, delta_color="off")
    st.subheader("Visualizations")
    st.markdown("#### Historical Context: Past 30 Days")
    hist_data = processed_df.loc[selected_date_ts - pd.Timedelta(days=30):selected_date_ts, 'temp']
    fig_hist = go.Figure()
    fig_hist.add_trace(go.Scatter(x=hist_data.index, y=hist_data, mode='lines', name='Past 30 Days', line=dict(color='#636EFA')))
    fig_hist.update_layout(title={'text': "<b>Actual Temperature - Past 30 Days</b>", 'x': 0.5}, xaxis_title="Date", yaxis_title="Temperature (°C)", paper_bgcolor="#fafbfc", plot_bgcolor="#e5ecf6")
    components.html(fig_hist.to_html(include_plotlyjs='cdn'), height=450)
    if is_in_test_set:
        st.markdown("#### Forecast vs. Actual Comparison")
        fig_comp = go.Figure()
        fig_comp.add_trace(go.Scatter(x=forecast_dates, y=prediction, mode='lines+markers', name='5-Day Forecast', line=dict(color=PLOT_COLORS['forecast'])))
        if len(actual_values) > 0:
            fig_comp.add_trace(go.Scatter(x=forecast_dates, y=actual_values, mode='lines+markers', name='5-Day Actual', line=dict(color=PLOT_COLORS['actual'])))
        fig_comp.update_layout(title={'text': "<b>5-Day Forecast vs. Actual Temperature</b>", 'x': 0.5}, xaxis_title="Date", yaxis_title="Temperature (°C)", paper_bgcolor='#fafbfc', plot_bgcolor='#e5ecf6')
        components.html(fig_comp.to_html(include_plotlyjs='cdn'), height=450)

# --- TAB 2 ---
with tab2:
    # --- Section 1: Key Factors for the selected date ---
    st.header("What were the most important factors for this forecast?")
    st.write(f"For the forecast made on **{selected_date.strftime('%Y-%m-%d')}**, the model paid most attention to these factors:")
    
    top_5_features = feature_importances.head(5)['Feature'].tolist()
    key_factor_cols = st.columns(len(top_5_features))
    
    for i, feature in enumerate(top_5_features):
        value = processed_df.loc[pd.Timestamp(selected_date), feature]
        with key_factor_cols[i]:
            st.markdown(f"""
            <div class="custom-card-transparent">
                <span class="feature-tag-final">{feature}</span>
                <h2>{value:.2f}</h2>
            </div>
            """, unsafe_allow_html=True)

    # Add a visual separator (a bit of space)
    st.markdown("<br>", unsafe_allow_html=True)
    
    # --- Section 2: Overall Feature Importance Chart ---
    st.subheader("Overall Feature Importance")
    top_10_df = feature_importances.head(10)
    fig_imp = go.Figure(go.Bar(
        x=top_10_df['Importance_Mean'], 
        y=top_10_df['Feature'], 
        orientation='h', 
        marker_color='#005aa7'
    ))
    
    fig_imp.update_layout(
        title={'text': '<b>Top 10 Most Important Features (Overall)</b>', 'x': 0.5},
        xaxis_title='Permutation Importance Score',
        yaxis={
            'title': '',  # Y-axis title is removed as requested
            'autorange': "reversed",
        },
        margin=dict(l=150, r=20, t=50, b=70),
        yaxis_ticklabelposition="outside top",
        paper_bgcolor='#fafbfc', plot_bgcolor='#e5ecf6'
    )
    # Render the chart using the robust HTML component method
    components.html(fig_imp.to_html(include_plotlyjs='cdn'), height=520)

    # Add another visual separator
    st.markdown("<br>", unsafe_allow_html=True)

    # --- Section 3: Feature Glossary ---
    st.header("Feature Glossary")
    with st.expander("Click to learn about all 46 model features", expanded=False):
        # Create a DataFrame from the dictionary for easy handling
        glossary_df = pd.DataFrame(
            FEATURE_DESCRIPTIONS.items(), 
            columns=['Feature', 'Description']
        ).sort_values(by='Feature').reset_index(drop=True)

        # Use Markdown to create a custom table with borders
        st.markdown("""
        <style>
            .glossary-table {
                width: 100%;
                border-collapse: collapse;
            }
            .glossary-table th, .glossary-table td {
                border: 1px solid #cccccc;
                padding: 8px;
                text-align: left;
            }
            .glossary-table th {
                background-color: #f2f2f2;
                font-weight: bold;
            }
        </style>
        """, unsafe_allow_html=True)

        # Build the HTML for the table
        html_table = "<table class='glossary-table'><tr><th>Feature</th><th>Description</th></tr>"
        for index, row in glossary_df.iterrows():
            html_table += f"<tr><td><b>{row['Feature']}</b></td><td>{row['Description']}</td></tr>"
        html_table += "</table>"

        st.markdown(html_table, unsafe_allow_html=True)

# --- TAB 3 ---
with tab3:
    st.header("Model Performance on the Entire Test Set")
    X_test_filtered = processed_df.loc[y_test.index][selected_features]
    y_pred_test = model.predict(X_test_filtered)
    macro_r2, macro_rmse, macro_mae = r2_score(y_test, y_pred_test), np.sqrt(mean_squared_error(y_test, y_pred_test)), mean_absolute_error(y_test, y_pred_test)
    m_cols = st.columns(3)
    m_cols[0].metric("Average R2 Score", f"{macro_r2:.3f}")
    m_cols[1].metric("Average RMSE", f"{macro_rmse:.3f}°C")
    m_cols[2].metric("Average MAE", f"{macro_mae:.3f}°C")
    st.subheader("Prediction vs. Actual Values")
    y_test_flat, y_pred_flat = y_test.values.flatten(), y_pred_test.flatten()
    fig_scatter = go.Figure()
    fig_scatter.add_trace(go.Scatter(x=y_test_flat, y=y_pred_flat, mode='markers', marker=dict(color="rgba(73, 82, 199, 0.6)"), name='Predictions'))
    fig_scatter.add_trace(go.Scatter(x=[y_test_flat.min(), y_test_flat.max()], y=[y_test_flat.min(), y_test_flat.max()], mode='lines', line=dict(color='#EF553B', dash='dash'), name='Perfect Prediction Line'))
    fig_scatter.update_layout(title={'text': "<b>How well do predictions match actual values?</b>", 'x': 0.5}, xaxis_title="Predicted Temperature (°C)", yaxis_title="Predicted Temperature (°C)", paper_bgcolor='#fafbfc', plot_bgcolor='#e5ecf6')
    components.html(fig_scatter.to_html(include_plotlyjs='cdn'), height=600)