import streamlit as st
import pandas as pd
import plotly.express as px
from streamlit_extras.stylable_container import stylable_container

# --- Configuration de la Page ---
st.set_page_config(
    page_title="Visualisation de la Population Indienne",
    page_icon="🇮🇳",
    layout="wide",
    initial_sidebar_state="expanded",
)

# --- Thème de Couleur Tendance et Professionnel ---
primary_color = "#6200EE"  # Violet profond (tendance Material Design)
secondary_color = "#03DAC6"  # Cyan vif (accentuation moderne)
background_color = "#F3F4F6"  # Gris très clair
text_color = "#212121"  # Noir foncé
accent_bg_color = "#E0F7FA"  # Bleu très clair pour les conteneurs d'informations
border_radius = "0.5rem"
box_shadow = "0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)"

# --- Styles CSS Personnalisés ---
st.markdown(
    f"""
    <style>
        .reportview-container {{
            background-color: {background_color};
        }}
        .main {{
            background-color: {background_color};
            padding: 2rem;
        }}
        h1 {{
            color: {primary_color};
            text-align: center;
            margin-bottom: 2.5rem;
        }}
        h2 {{
            color: {text_color};
            margin-top: 2rem;
            border-bottom: 2px solid {secondary_color};
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }}
        .st-sidebar h1 {{
            color: {primary_color};
            text-align: left;
            margin-bottom: 1rem;
        }}
        .st-sidebar .st-selectbox > div > div > div > div {{
            background-color: white;
            border: 1px solid #ced4da;
            border-radius: {border_radius};
            color: {text_color};
            padding: 0.5rem 1rem;
            font-size: 1rem;
            box-shadow: {box_shadow};
        }}
        .st-sidebar .st-selectbox label {{
            color: {text_color};
            font-weight: bold;
        }}
        .st-sidebar .st-button > button {{
            background-color: {primary_color};
            color: white;
            border: none;
            border-radius: {border_radius};
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            box-shadow: {box_shadow};
            cursor: pointer;
            transition: background-color 0.3s ease;
        }}
        .st-sidebar .st-button > button:hover {{
            background-color: #4a148c;
        }}
        .plot-container {{
            background-color: white;
            border-radius: {border_radius};
            box-shadow: {box_shadow};
            padding: 1.5rem;
            margin-top: 1rem;
        }}
        .info-container {{
            background-color: {accent_bg_color};
            border-radius: {border_radius};
            padding: 1rem;
            margin-top: 1rem;
            color: {text_color};
            border: 1px solid #B2EBF2;
        }}
    </style>
    """,
    unsafe_allow_html=True,
)

# --- Conteneur Principal ---
with stylable_container(key="main_container", css_styles=f"""
    padding: 2rem;
    border-radius: {border_radius};
    background-color: {background_color};
"""):
    # --- Titre de l'Application ---
    st.title('🇮🇳 Visualisation de la Population Indienne')
    st.write('Explorez la population des districts indiens à travers une carte interactive.')

    # --- Sidebar pour les Filtres ---
    with st.sidebar:
        st.header('⚙️ Configuration de la Visualisation')

        @st.cache_data
        def load_india_data():
            df = pd.read_csv('india.csv')
            return df

        india_df = load_india_data()
        list_of_states = ['Overall India'] + sorted(list(india_df['State'].unique()))
        selected_state = st.selectbox('Sélectionner un État', list_of_states)

        primary_param = st.selectbox('Paramètre Primaire (Taille)', sorted(india_df.columns[5:]))
        secondary_param = st.selectbox('Paramètre Secondaire (Couleur)', sorted(india_df.columns[5:]))

        plot_button = st.button('Afficher la Carte')

    # --- Affichage de la Carte ---
    if plot_button:
        st.subheader('🗺️ Carte de la Population Indienne')
        st.markdown(f'<div class="info-container">Taille des bulles représentant : <b>{primary_param}</b></div>', unsafe_allow_html=True)
        st.markdown(f'<div class="info-container">Couleur des bulles représentant : <b>{secondary_param}</b></div>', unsafe_allow_html=True)

        if selected_state == 'Overall India':
            fig = px.scatter_mapbox(india_df,
                                    lat='Latitude',
                                    lon='Longitude',
                                    color=secondary_param,
                                    size=primary_param,
                                    zoom=4,
                                    size_max=35,
                                    mapbox_style='carto-positron',
                                    width=1200,
                                    height=700,
                                    hover_name='District',
                                    title=f'Population et Caractéristiques des Districts (Inde)')
            st.plotly_chart(fig, use_container_width=True)
        else:
            df_state = india_df[india_df['State'] == selected_state]
            fig = px.scatter_mapbox(df_state,
                                    lat='Latitude',
                                    lon='Longitude',
                                    color=secondary_param,
                                    size=primary_param,
                                    zoom=6,  # Zoom plus important pour un état
                                    size_max=35,
                                    mapbox_style='carto-positron',
                                    width=1200,
                                    height=700,
                                    hover_name='District',
                                    title=f'Population et Caractéristiques des Districts ({selected_state})')
            st.plotly_chart(fig, use_container_width=True)

    st.markdown("---")
    st.caption("Application développée avec Streamlit.")