src/modules/forecasting.py

import streamlit as st
import streamlit.components.v1 as components
import pandas as pd
import sys
import os
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import numpy as np

sys.path.append(os.path.join(os.path.dirname(__file__), '..'))
from Analytics.VortexOutFlux import VortexOutFlux
from Analytics.DataSyncForecasting import actualiser_forecasting_depuis_prets, forecasting_needs_sync


# ============================================================================
# CSS — STYLE TACTIQUE / MILITAIRE
# Seules les règles SCOPED sous #forecasting-module sont conservées ici.
# Les règles globales (.stApp h1/h2/h3, metrics, boutons, etc.) sont
# centralisées dans streamlit_app.py pour garantir l'uniformité entre modules.
# ============================================================================

def apply_forecasting_styles():
    st.markdown("""
    <style>
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&display=swap');

    /* ── FORCE JETBRAINS MONO dans le scope forecasting ── */
    #forecasting-module,
    #forecasting-module p,
    #forecasting-module div:not([class*="Icon"]),
    #forecasting-module label,
    #forecasting-module input,
    #forecasting-module select,
    #forecasting-module textarea,
    #forecasting-module h1,
    #forecasting-module h2,
    #forecasting-module h3 {
        font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    }

    /* Protection icônes Material */
    .stIcon, .material-icons, .material-symbols-rounded, [class*="Icon"], svg, svg * {
        font-family: 'Material Symbols Rounded', 'Material Icons', sans-serif !important;
    }

    /* ── HEADERS — scope #forecasting-module uniquement ──
       (Les règles .stApp h1/h2/h3 sont retirées d'ici : elles vivent
        dans streamlit_app.py et s'appliquent uniformément à tous les modules) */
    #forecasting-module h1 {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase;
        color: #a8b8c8 !important;
        border-bottom: 1px solid rgba(168, 184, 200, 0.25);
        padding-bottom: 10px;
        margin-bottom: 20px !important;
        font-family: 'JetBrains Mono', monospace !important;
    }

    #forecasting-module h2 {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        letter-spacing: 2.5px !important;
        text-transform: uppercase;
        color: #6a7a8a !important;
        margin-bottom: 14px !important;
        margin-top: 0 !important;
        font-family: 'JetBrains Mono', monospace !important;
    }

    #forecasting-module h3 {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        color: #58a6ff !important;
        margin-bottom: 10px !important;
        font-family: 'JetBrains Mono', monospace !important;
    }

    /* ── METRICS ── */
    [data-testid="stMetric"] {
        background: rgba(15, 20, 26, 0.85) !important;
        border: 1px solid rgba(100, 120, 140, 0.25) !important;
        border-top: 2px solid rgba(100, 120, 140, 0.5) !important;
        padding: 14px 16px !important;
        border-radius: 0px !important;
    }

    [data-testid="stMetricLabel"] p,
    [data-testid="stMetricLabel"] span,
    [data-testid="stMetricLabel"] div {
        color: #5a6a7a !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        font-family: 'JetBrains Mono', monospace !important;
    }

    [data-testid="stMetricValue"] div,
    [data-testid="stMetricValue"] p {
        color: #a8b8c8 !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        font-family: 'JetBrains Mono', monospace !important;
    }

    [data-testid="stMetricDelta"] div {
        font-size: 0.8rem !important;
        font-family: 'JetBrains Mono', monospace !important;
    }

    /* ── CAPTIONS ── */
    [data-testid="stCaptionContainer"],
    [data-testid="stCaptionContainer"] p,
    .stCaption, .stCaption p {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 0.7rem !important;
        color: #4a5a6a !important;
        letter-spacing: 0.5px !important;
    }

    /* ── ALERTS ── */
    [data-testid="stAlert"] p,
    [data-testid="stAlert"] span {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 0.8rem !important;
    }
    [data-testid="stAlert"] {
        border-radius: 0 !important;
    }

    /* ── EXPANDERS ── */
    [data-testid="stExpander"] summary {
        font-size: 0.72rem !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: #5a6a7a !important;
    }
    [data-testid="stExpander"] summary p {
        font-family: 'JetBrains Mono', monospace !important;
    }

    /* ── BOUTONS ── */
    .stButton > button {
        background: transparent !important;
        border: 1px solid rgba(88, 166, 255, 0.5) !important;
        color: #7a8a9a !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        border-radius: 0 !important;
        padding: 8px 16px !important;
        transition: all 0.15s ease !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .stButton > button p {
        font-family: 'JetBrains Mono', monospace !important;
    }
    .stButton > button:hover {
        border-color: #58a6ff !important;
        color: #58a6ff !important;
        background: rgba(88, 166, 255, 0.1) !important;
    }
    .stButton > button:focus {
        box-shadow: none !important;
        outline: none !important;
    }

    /* ── SPINNER ── */
    [data-testid="stSpinner"] p {
        font-family: 'JetBrains Mono', monospace !important;
    }

    /* ── SÉPARATEURS ── */
    hr {
        border: none !important;
        border-top: 1px solid rgba(80, 100, 120, 0.2) !important;
        margin: 22px 0 !important;
    }

    /* ── CARTES SIGNAL / PRÉDICTION ── */
    .tac-card {
        background: rgba(15, 20, 26, 0.85);
        border: 1px solid rgba(100, 120, 140, 0.25);
        border-left: 3px solid rgba(100, 120, 140, 0.5);
        padding: 18px 20px;
        margin: 0;
    }
    .tac-card.signal-reduce  { border-left-color: #c0392b; }
    .tac-card.signal-maintain{ border-left-color: #5a6a7a; }
    .tac-card.signal-increase{ border-left-color: #58a6ff; }

    .tac-card-label {
        font-size: 0.62rem; font-weight: 700; letter-spacing: 2px;
        text-transform: uppercase; color: #5a6a7a;
        font-family: 'JetBrains Mono', monospace; margin-bottom: 6px;
    }
    .tac-card-value {
        font-size: 1.6rem; font-weight: 800; color: #a8b8c8;
        font-family: 'JetBrains Mono', monospace; line-height: 1.1; margin-bottom: 4px;
    }
    .tac-card-sub {
        font-size: 0.75rem; color: #5a6a7a;
        font-family: 'JetBrains Mono', monospace; margin-top: 4px;
    }
    .tac-card-evolution {
        font-size: 1.1rem; font-weight: 700;
        font-family: 'JetBrains Mono', monospace; margin-top: 6px;
    }
    .tac-card-evolution.up   { color: #c0392b; }
    .tac-card-evolution.down { color: #58a6ff; }
    .tac-card-evolution.flat { color: #5a6a7a; }

    /* ── SIGNAL OPÉRATIONNEL ── */
    .signal-block {
        background: rgba(10, 14, 18, 0.9);
        border: 1px solid rgba(100, 120, 140, 0.2);
        border-left: 4px solid;
        padding: 16px 20px;
        margin-top: 16px;
    }
    .signal-block.reduce   { border-left-color: #c0392b; }
    .signal-block.maintain { border-left-color: #5a6a7a; }
    .signal-block.increase { border-left-color: #58a6ff; }

    .signal-header {
        font-size: 0.62rem; font-weight: 700; letter-spacing: 2.5px;
        text-transform: uppercase; color: #5a6a7a;
        font-family: 'JetBrains Mono', monospace; margin-bottom: 8px;
    }
    .signal-title {
        font-size: 0.9rem; font-weight: 800; letter-spacing: 2px;
        text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 8px;
    }
    .signal-title.reduce   { color: #c0392b; }
    .signal-title.maintain { color: #8a9aaa; }
    .signal-title.increase { color: #58a6ff; }
    .signal-body {
        font-size: 0.82rem; color: #7a8a9a;
        font-family: 'JetBrains Mono', monospace; line-height: 1.6;
    }

    /* ── CARTE FORECAST MOIS ── */
    .forecast-month-card {
        background: rgba(15, 20, 26, 0.85);
        border: 1px solid rgba(100, 120, 140, 0.2);
        padding: 14px 16px; margin: 8px 0;
    }
    .fmc-month {
        font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
        color: #5a6a7a; font-family: 'JetBrains Mono', monospace; margin-bottom: 6px;
    }
    .fmc-amount {
        font-size: 1.3rem; font-weight: 700; color: #a8b8c8;
        font-family: 'JetBrains Mono', monospace;
    }
    .fmc-bounds {
        font-size: 0.72rem; color: #4a5a6a;
        font-family: 'JetBrains Mono', monospace; margin-top: 4px;
    }
    .fmc-margin {
        font-size: 0.7rem; color: #5a6a7a;
        font-family: 'JetBrains Mono', monospace; margin-top: 2px;
    }

    /* ── SECTION TAG ── */
    .section-tag {
        display: inline-block;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.6rem; font-weight: 700; letter-spacing: 2.5px;
        text-transform: uppercase; color: #3a4a5a;
        border: 1px solid rgba(60, 80, 100, 0.25);
        padding: 3px 8px; margin-bottom: 14px;
    }

    /* ── CONFIDENCE BLOCK ── */
    .confidence-block {
        background: rgba(10, 14, 18, 0.9);
        border: 1px solid rgba(100, 120, 140, 0.2);
        border-left: 4px solid #58a6ff;
        padding: 18px 22px; margin-top: 0;
    }
    .confidence-label {
        font-size: 0.62rem; font-weight: 700; letter-spacing: 2.5px;
        text-transform: uppercase; color: #5a6a7a;
        font-family: 'JetBrains Mono', monospace; margin-bottom: 10px;
    }
    .confidence-score {
        font-size: 2.2rem; font-weight: 800;
        font-family: 'JetBrains Mono', monospace; line-height: 1; margin-bottom: 6px;
    }
    .confidence-score.high   { color: #2ecc71; }
    .confidence-score.medium { color: #f39c12; }
    .confidence-score.low    { color: #c0392b; }
    .confidence-detail {
        font-size: 0.75rem; color: #5a6a7a;
        font-family: 'JetBrains Mono', monospace; line-height: 1.7; margin-top: 8px;
    }
    .confidence-bar-track {
        height: 4px; background: rgba(60, 80, 100, 0.3);
        margin: 10px 0 6px 0; position: relative;
    }
    .confidence-bar-fill {
        height: 4px; position: absolute; top: 0; left: 0;
        transition: width 0.3s ease;
    }
    .confidence-bar-fill.high   { background: #2ecc71; }
    .confidence-bar-fill.medium { background: #f39c12; }
    .confidence-bar-fill.low    { background: #c0392b; }

    </style>
    """, unsafe_allow_html=True)


# ============================================================================
# HELPERS DE RENDU
# ============================================================================

def _fmt(n):
    return f"{int(round(n)):,}".replace(",", " ")


def render_signal_block(signal_data):
    css_cls = {
        'REDUIRE':   ('reduce',   'ORDRE : REDUIRE LES ENGAGEMENTS'),
        'MAINTENIR': ('maintain', 'ORDRE : MAINTENIR LES ENGAGEMENTS'),
        'AUGMENTER': ('increase', 'ORDRE : AUGMENTER LES ENGAGEMENTS'),
    }
    cls, titre = css_cls.get(signal_data['signal'], ('maintain', 'ORDRE : MAINTENIR'))
    return f"""
    <div class="signal-block {cls}">
        <div class="signal-header">Analyse predictive — {signal_data['mois_predit']}</div>
        <div class="signal-title {cls}">{titre}</div>
        <div class="signal-body">{signal_data['message_signal']}</div>
    </div>
    """


def render_next_month_cards(signal_data):
    evo = signal_data['evolution_pct']
    if evo > 2:
        evo_class, evo_sign = 'up', '+'
    elif evo < -2:
        evo_class, evo_sign = 'down', ''
    else:
        evo_class, evo_sign = 'flat', ''

    signal_cls = {
        'REDUIRE':   'signal-reduce',
        'MAINTENIR': 'signal-maintain',
        'AUGMENTER': 'signal-increase',
    }.get(signal_data['signal'], 'signal-maintain')

    card_predit = f"""
    <div class="tac-card {signal_cls}">
        <div class="tac-card-label">Capital predit — {signal_data['mois_predit']}</div>
        <div class="tac-card-value">{_fmt(signal_data['capital_predit'])} XOF</div>
        <div class="tac-card-sub">Modele de regression lineaire</div>
    </div>
    """
    card_evo = f"""
    <div class="tac-card">
        <div class="tac-card-label">Evolution predictible vs {signal_data['mois_actuel']}</div>
        <div class="tac-card-value">{_fmt(signal_data['capital_reel_actuel'])} XOF</div>
        <div class="tac-card-sub">Capital reel — {signal_data['mois_actuel']}</div>
        <div class="tac-card-evolution {evo_class}">{evo_sign}{evo:.1f}%</div>
    </div>
    """
    return card_predit, card_evo


def render_forecast_month_card(row):
    montant = row['Montant_Predit']
    lower   = row['Borne_Inf']
    upper   = row['Borne_Sup']
    margin  = ((upper - lower) / 2) / montant * 100 if montant > 0 else 0
    mois    = row['Date'].strftime('%B %Y').upper()
    return f"""
    <div class="forecast-month-card">
        <div class="fmc-month">{mois}</div>
        <div class="fmc-amount">{_fmt(montant)} XOF</div>
        <div class="fmc-bounds">Intervalle 95% : {_fmt(lower)} — {_fmt(upper)} XOF</div>
        <div class="fmc-margin">Marge d erreur : +/- {margin:.1f}%</div>
    </div>
    """


def render_confidence_block(confidence_data):
    score = confidence_data['score']
    if score >= 70:
        css_cls = 'high'
    elif score >= 40:
        css_cls = 'medium'
    else:
        css_cls = 'low'

    bar_width = min(score, 100)

    return f"""
    <div class="confidence-block">
        <div class="confidence-label">Indice de confiance — Prediction mois suivant</div>
        <div class="confidence-score {css_cls}">{score:.0f}%</div>
        <div class="confidence-bar-track">
            <div class="confidence-bar-fill {css_cls}" style="width:{bar_width}%"></div>
        </div>
        <div class="confidence-detail">
            Ecart moyen absolu : {_fmt(confidence_data['mae_moy'])} XOF
            &nbsp;|&nbsp; Ecart relatif moyen : {confidence_data['mape']:.1f}%<br>
            Stabilite des ecarts (CV) : {confidence_data['cv_residus']:.1f}%
            &nbsp;|&nbsp; R² du modele : {confidence_data['r_squared']:.3f}<br>
            {confidence_data['interpretation']}
        </div>
    </div>
    """


def render_comparison_table_html(df_cmp):
    rows_html = ""
    for _, row in df_cmp.iterrows():
        evo = row['Evolution_Pct']
        if evo is None or (isinstance(evo, float) and np.isnan(evo)):
            evo_str   = "—"
            evo_color = "#5a6a7a"
        elif evo > 0:
            evo_str   = f"+{evo:.1f}%"
            evo_color = "#c0392b"
        elif evo < 0:
            evo_str   = f"{evo:.1f}%"
            evo_color = "#58a6ff"
        else:
            evo_str   = "0.0%"
            evo_color = "#5a6a7a"

        rows_html += f"""
        <tr>
            <td>{row['Mois']}</td>
            <td style="text-align:right">{_fmt(row['Capital_Reel'])} XOF</td>
            <td style="text-align:right; color:{evo_color}">{evo_str}</td>
            <td style="text-align:right">{_fmt(row['Capital_Predit'])} XOF</td>
        </tr>
        """

    # La couleur "bleu" du theme BLEU devient ambre en theme NOIR (core/theme.py).
    from core import theme
    couleur_baisse = "Ambre" if theme.est_noir() else "Bleu"

    return f"""
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        * {{ margin:0; padding:0; box-sizing:border-box; }}
        body {{ background: transparent; font-family: 'JetBrains Mono', 'Courier New', monospace; }}
        table {{ width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.82rem; }}
        th {{ background: rgba(15, 20, 26, 0.95); border-bottom: 1px solid rgba(100, 120, 140, 0.3); padding: 10px 14px; text-align: left; font-size: 0.62rem; letter-spacing: 1.8px; text-transform: uppercase; color: #5a6a7a; font-weight: 700; }}
        td {{ padding: 9px 14px; border-bottom: 1px solid rgba(50, 60, 70, 0.3); color: #8a9aaa; background: rgba(15, 20, 26, 0.6); }}
        tr:hover td {{ background: rgba(30, 38, 48, 0.7); color: #a8b8c8; }}
        .caption {{ font-size: 0.68rem; color: #3a4a5a; font-family: 'JetBrains Mono', monospace; padding: 8px 2px 0 2px; letter-spacing: 0.4px; }}
    </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Mois</th>
                    <th style="text-align:right">Capital Reel</th>
                    <th style="text-align:right">Evolution Reelle</th>
                    <th style="text-align:right">Capital Predit</th>
                </tr>
            </thead>
            <tbody>{rows_html}</tbody>
        </table>
        <div class="caption">
            EVOLUTION REELLE : variation du capital sorti vs mois precedent.
            Rouge = hausse des sorties. {couleur_baisse} = baisse des sorties.
        </div>
    </body>
    </html>
    """


# ============================================================================
# MODULE PRINCIPAL
# ============================================================================

def _stats_residus(valeurs):
    """Resume numerique de la distribution des residus (graphique H), pour le chat JASMINE."""
    if not valeurs:
        return {}
    import statistics
    return {
        "n": len(valeurs), "moyenne": round(statistics.fmean(valeurs), 2),
        "ecart_type": round(statistics.pstdev(valeurs), 2) if len(valeurs) > 1 else 0.0,
        "min": round(min(valeurs), 2), "max": round(max(valeurs), 2),
    }


def show_forecasting_module(client, sheet_name):
    apply_forecasting_styles()
    st.markdown('<div id="forecasting-module">', unsafe_allow_html=True)

    st.header("JASMINE — PREVISION DES FLUX DE SORTIE")
    st.caption("ANALYSE PREDICTIVE / REGRESSION LINEAIRE / TEMPS REEL")

    st.divider()
    col_sync1, col_sync2 = st.columns([4, 1])

    with col_sync1:
        st.markdown("""
        <div style="background:rgba(10,14,18,0.7);border-left:3px solid rgba(80,100,120,0.4);padding:10px 14px;">
            <span style="font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:#5a6a7a;">
                SOURCE : Prets_Master / Date_Deblocage + Montant_Capital.
                Cliquez sur SYNC pour actualiser les donnees de la feuille Forecasting.
            </span>
        </div>
        """, unsafe_allow_html=True)

    with col_sync2:
        if st.button("SYNC", use_container_width=True):
            with st.spinner("Synchronisation..."):
                result = actualiser_forecasting_depuis_prets(client, sheet_name)
            if result['success']:
                stats = result['stats']
                st.success(f"OK — {stats['nb_conserves']} conserves, "
                           f"{stats['nb_mis_a_jour']} mis a jour, "
                           f"{stats['nb_ajoutes']} ajoutes.")
                with st.expander("DETAILS SYNCHRONISATION", expanded=False):
                    c1, c2, c3 = st.columns(3)
                    c1.metric("Conserves",  stats['nb_conserves'])
                    c2.metric("Mis a jour", stats['nb_mis_a_jour'])
                    c3.metric("Ajoutes",    stats['nb_ajoutes'])
                st.rerun()
            else:
                st.error(f"ERREUR : {result['message']}")

    try:
        if forecasting_needs_sync(client, sheet_name):
            with st.spinner("Actualisation automatique des previsions..."):
                actualiser_forecasting_depuis_prets(client, sheet_name)

        sh             = client.open(sheet_name)
        ws_forecasting = sh.worksheet("Forecasting")
        df_forecasting = pd.DataFrame(ws_forecasting.get_all_records())

        if df_forecasting.empty or len(df_forecasting) < 2:
            st.warning("Donnees insuffisantes — minimum 2 points requis.")
            st.markdown('</div>', unsafe_allow_html=True)
            return

        if 'Date' not in df_forecasting.columns or 'Montant_Total_Sortie' not in df_forecasting.columns:
            st.error("Structure invalide. Colonnes requises : Date, Montant_Total_Sortie")
            st.markdown('</div>', unsafe_allow_html=True)
            return

        analyzer = VortexOutFlux(df_forecasting)

    except Exception as e:
        st.error(f"Erreur de connexion : {e}")
        st.markdown('</div>', unsafe_allow_html=True)
        return

    try:
        predictions_result = analyzer.predict_next_months(n_months=3)

        if 'error' in predictions_result:
            st.error(f"Erreur modele : {predictions_result['error']}")
            st.markdown('</div>', unsafe_allow_html=True)
            return

        predictions_df  = predictions_result['predictions']
        models          = predictions_result['models']
        viz_data        = analyzer.generate_visualization_data(predictions_result)
        interpretations = viz_data['interpretations']

    except Exception as e:
        st.error(f"Erreur lors du calcul predictif : {e}")
        st.exception(e)
        st.markdown('</div>', unsafe_allow_html=True)
        return

    # Chat JASMINE scoppé à cette page : questions sur les prévisions, l'historique et le signal.
    from modules.jasmine_widget import render_scoped_widget
    render_scoped_widget(
        client, sheet_name,
        scope_label="Prévision des flux de sortie (historique Forecasting, prévisions 3 mois, régression linéaire)",
        context_data={
            "historique_recent": df_forecasting.tail(24).to_dict("records"),
            "previsions_3_mois": predictions_df.to_dict("records") if hasattr(predictions_df, "to_dict") else predictions_df,
            "interpretations": interpretations,
            "nb_points_historique": int(len(df_forecasting)),
            "metriques_modele": viz_data["metrics"],
            # Graphique C : historique reel vs ajuste par le modele, et prevision
            "graphique_C_historique": [
                {"date": d, "reel": round(v, 2), "ajuste_modele": round(p, 2)}
                for d, v, p in zip(viz_data["historical"]["dates"], viz_data["historical"]["values"],
                                   viz_data["historical"]["predictions_hist"])
            ],
            "graphique_C_prevision": viz_data["future"],
            # Graphique H (section « H — ANALYSE DES RESIDUS ») : un point par mois = (valeur predite, residu = reel - predit)
            "graphique_H_residus_vs_predits": [
                {"valeur_predite": round(p, 2), "residu": round(r, 2)}
                for p, r in zip(viz_data["residuals"]["predictions"], viz_data["residuals"]["values"])
            ],
            "graphique_H_stats_residus": _stats_residus(viz_data["residuals"]["values"]),
            "graphique_H_lecture": ("Axe X = valeur predite par le modele, axe Y = residu (reel - predit). "
                                    "Un bon modele a des residus epars autour de 0 sans structure ; "
                                    "une tendance ou une forme en eventail indique un biais ou une heteroscedasticite. "
                                    "Second panneau : distribution des residus (histogramme)."),
        },
        key_prefix="forecasting",
    )

    # =========================================================================
    # SECTION A — SIGNAL OPÉRATIONNEL
    # =========================================================================
    st.divider()
    st.markdown('<div class="section-tag">A — Signal operationnel</div>', unsafe_allow_html=True)

    try:
        signal_data = analyzer.compute_next_month_signal(models)
        card_predit, card_evo = render_next_month_cards(signal_data)

        col_c1, col_c2 = st.columns(2)
        with col_c1:
            st.markdown(card_predit, unsafe_allow_html=True)
        with col_c2:
            st.markdown(card_evo, unsafe_allow_html=True)

        st.markdown(render_signal_block(signal_data), unsafe_allow_html=True)

    except Exception as e:
        st.warning(f"Signal non disponible : {e}")

    # =========================================================================
    # SECTION B — KPIs HISTORIQUES
    # =========================================================================
    st.divider()
    st.markdown('<div class="section-tag">B — Donnees historiques</div>', unsafe_allow_html=True)

    nb_points  = len(analyzer.df)
    flux_moy   = analyzer.df['Montant_Total_Sortie'].mean()
    flux_total = analyzer.df['Montant_Total_Sortie'].sum()
    periode    = (f"{analyzer.df['Date'].min().strftime('%m/%Y')} — "
                  f"{analyzer.df['Date'].max().strftime('%m/%Y')}")

    st.markdown(f"""
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px;">
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">Points</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;color:#a8b8c8;">{nb_points}</div>
        </div>
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">Flux moyen</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;color:#a8b8c8;">{_fmt(flux_moy)} XOF</div>
        </div>
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">Flux total</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;color:#a8b8c8;">{_fmt(flux_total)} XOF</div>
        </div>
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">Periode</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;color:#a8b8c8;">{periode}</div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # =========================================================================
    # SECTION C — GRAPHIQUE PRINCIPAL
    # =========================================================================
    st.divider()
    st.markdown('<div class="section-tag">C — Visualisation historique et prediction</div>', unsafe_allow_html=True)

    fig = go.Figure()

    fig.add_trace(go.Scatter(
        x=viz_data['historical']['dates'], y=viz_data['historical']['values'],
        mode='lines+markers', name='Capital reel sorti',
        line=dict(color='#a8b8c8', width=1.5),
        marker=dict(size=5, symbol='circle', color='#a8b8c8'),
    ))
    fig.add_trace(go.Scatter(
        x=viz_data['historical']['dates'], y=viz_data['historical']['predictions_hist'],
        mode='lines', name='Regression (historique)',
        line=dict(color='#3a5a8a', width=1, dash='dot'),
    ))
    fig.add_trace(go.Scatter(
        x=viz_data['future']['dates'], y=viz_data['future']['predictions'],
        mode='lines+markers', name='Prediction',
        line=dict(color='#58a6ff', width=1.5, dash='dash'),
        marker=dict(size=7, symbol='diamond', color='#58a6ff'),
    ))
    fig.add_trace(go.Scatter(
        x=viz_data['future']['dates'] + viz_data['future']['dates'][::-1],
        y=viz_data['future']['upper_bound'] + viz_data['future']['lower_bound'][::-1],
        fill='toself', fillcolor='rgba(88,166,255,0.07)',
        line=dict(color='rgba(88,166,255,0)'),
        name='Intervalle 95%', showlegend=True,
    ))

    last_hist_date = pd.Timestamp(viz_data['historical']['dates'][-1])
    fig.add_vline(
        x=last_hist_date.timestamp() * 1000,
        line_width=1, line_dash='dot', line_color='rgba(100,120,140,0.4)',
        annotation_text='HISTORIQUE / PREDICTION',
        annotation_position='top left',
        annotation_font_size=9, annotation_font_color='#4a5a6a',
    )

    fig.update_layout(
        height=440, margin=dict(l=0, r=0, t=30, b=0),
        plot_bgcolor='rgba(10,14,18,0.9)', paper_bgcolor='rgba(15,20,26,0.0)',
        font=dict(family='JetBrains Mono, Courier New, monospace', color='#5a6a7a', size=10),
        xaxis=dict(gridcolor='rgba(50,65,80,0.25)', linecolor='rgba(80,100,120,0.3)',
                   tickcolor='rgba(80,100,120,0.3)', title_text=''),
        yaxis=dict(gridcolor='rgba(50,65,80,0.25)', linecolor='rgba(80,100,120,0.3)',
                   tickcolor='rgba(80,100,120,0.3)', title_text='XOF'),
        legend=dict(bgcolor='rgba(15,20,26,0.85)', bordercolor='rgba(80,100,120,0.2)',
                    borderwidth=1, font=dict(size=10, family='JetBrains Mono, monospace')),
        hovermode='x unified',
    )

    st.plotly_chart(fig, use_container_width=True)

    # =========================================================================
    # SECTION D — PRÉDICTIONS 3 MOIS
    # =========================================================================
    st.divider()
    st.markdown('<div class="section-tag">D — Predictions 3 prochains mois</div>', unsafe_allow_html=True)

    cols_pred = st.columns(3)
    for idx, (_, row) in enumerate(predictions_df.iterrows()):
        with cols_pred[idx]:
            st.markdown(render_forecast_month_card(row), unsafe_allow_html=True)

    # =========================================================================
    # SECTION E — TABLEAU COMPARATIF
    # =========================================================================
    st.divider()
    from core import exercice as ex
    annee_cmp = ex.exercice_selectionne()
    debut_cmp, fin_cmp = ex.bornes(annee_cmp) if annee_cmp else (pd.Timestamp("2000-01-01"), None)
    titre_cmp = f"exercice {annee_cmp}" if annee_cmp else "toutes annees"
    st.markdown(f'<div class="section-tag">E — Comparatif reel vs predit ({titre_cmp})</div>', unsafe_allow_html=True)

    try:
        df_cmp = analyzer.build_comparison_table(models, cutoff_date=debut_cmp, end_date=fin_cmp)
        if df_cmp.empty:
            st.info(f"Aucune donnee disponible pour l'{titre_cmp}.")
        else:
            nb_lignes     = len(df_cmp)
            hauteur_table = 45 + nb_lignes * 38 + 40
            components.html(render_comparison_table_html(df_cmp), height=hauteur_table, scrolling=False)
    except Exception as e:
        st.warning(f"Tableau non disponible : {e}")

    # =========================================================================
    # SECTION F — PERFORMANCE DU MODÈLE
    # =========================================================================
    st.divider()
    st.markdown('<div class="section-tag">F — Performance du modele</div>', unsafe_allow_html=True)

    r2    = models['r_squared']
    r     = models['r_coefficient']
    mae   = models['mae']
    rmse  = models['rmse']
    pente = models['pente']

    st.markdown(f"""
    <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px;">
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">R²</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;color:#a8b8c8;">{r2:.3f}</div>
        </div>
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">R</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;color:#a8b8c8;">{r:.3f}</div>
        </div>
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">MAE</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;color:#a8b8c8;">{_fmt(mae)} XOF</div>
        </div>
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">RMSE</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;color:#a8b8c8;">{_fmt(rmse)} XOF</div>
        </div>
        <div style="background:rgba(15,20,26,0.85);border:1px solid rgba(100,120,140,0.25);border-top:2px solid rgba(100,120,140,0.5);padding:14px 16px;">
            <div style="font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#5a6a7a;margin-bottom:6px;">Pente</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;color:#a8b8c8;">{pente:.2f} XOF/j</div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    st.markdown(f"""
    <div style="margin-top:4px;background:rgba(10,14,18,0.7);border-left:3px solid rgba(80,100,120,0.35);
        padding:12px 16px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:#5a6a7a;line-height:1.7;">
        <strong style="color:#7a8a9a;letter-spacing:1px;">TENDANCE : {interpretations['tendance']}</strong><br>
        {interpretations['message_principal']}<br>
        {interpretations['message_fiabilite']}<br>
        {interpretations['message_precision']}
    </div>
    """, unsafe_allow_html=True)

    # =========================================================================
    # SECTION G — INDICE DE CONFIANCE
    # =========================================================================
    st.divider()
    st.markdown('<div class="section-tag">G — Indice de confiance de la prediction</div>', unsafe_allow_html=True)

    try:
        confidence_data = analyzer.compute_confidence_score(models)
        st.markdown(render_confidence_block(confidence_data), unsafe_allow_html=True)
    except Exception as e:
        st.warning(f"Indice de confiance non disponible : {e}")

    # =========================================================================
    # SECTION H — RÉSIDUS
    # =========================================================================
    st.divider()
    with st.expander("H — ANALYSE DES RESIDUS (DIAGNOSTIC DU MODELE)", expanded=False):
        fig_res = make_subplots(
            rows=1, cols=2,
            subplot_titles=("Residus vs Valeurs Predites", "Distribution des Residus"),
            specs=[[{"type": "scatter"}, {"type": "histogram"}]],
        )
        fig_res.add_trace(go.Scatter(
            x=viz_data['residuals']['predictions'], y=viz_data['residuals']['values'],
            mode='markers', marker=dict(color='#58a6ff', size=6, opacity=0.7), name='Residus',
        ), row=1, col=1)
        fig_res.add_hline(y=0, line_dash='dot', line_color='rgba(100,120,140,0.5)', row=1, col=1)
        fig_res.add_trace(go.Histogram(
            x=viz_data['residuals']['values'],
            marker=dict(color='#3a5a8a', line=dict(color='#5a7aaa', width=0.5)),
            nbinsx=12, name='Distribution',
        ), row=1, col=2)

        _ax = dict(gridcolor='rgba(50,65,80,0.25)', linecolor='rgba(80,100,120,0.3)',
                   tickcolor='rgba(80,100,120,0.3)')
        fig_res.update_xaxes(**_ax)
        fig_res.update_yaxes(**_ax)
        fig_res.update_layout(
            height=320, margin=dict(l=0, r=0, t=30, b=0),
            plot_bgcolor='rgba(10,14,18,0.9)', paper_bgcolor='rgba(15,20,26,0.0)',
            font=dict(family='JetBrains Mono, monospace', color='#5a6a7a', size=9),
            showlegend=False,
        )
        st.plotly_chart(fig_res, use_container_width=True)
        st.markdown("""
        <span style="font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:#4a5a6a;">
        Un bon modele presente des residus aleatoirement distribues autour de zero, sans structure apparente.
        </span>
        """, unsafe_allow_html=True)

    # =========================================================================
    # SECTION I — NOTE MÉTHODOLOGIQUE
    # =========================================================================
    st.divider()
    st.markdown("""
    <div style="font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:#3a4a5a;line-height:1.8;padding:12px 0;">
        NOTE METHODOLOGIQUE — Modele : regression lineaire simple (sklearn).
        Intervalles de confiance : 95% par methode d erreur standard des residus.
        Signal operationnel : seuil de reduction a -10%, seuil d augmentation a +10%.
        Indice de confiance : base sur MAPE, CV des residus et R² du modele.
        Mise a jour des donnees : automatique si perimee (+ de 12h) ou absente, ou manuellement via bouton SYNC.
        Pour des patterns saisonniers complexes, envisager SARIMA ou Prophet.
    </div>
    """, unsafe_allow_html=True)

    st.markdown('</div>', unsafe_allow_html=True)