import os
import streamlit as st

from app.backend.constant import LEADERBOARD_MAP
from app.backend.data_engine import DataEngine
from app.backend.data_page import render_page

# init global data engine
data_engine = DataEngine()
data_engine.jsons_to_df()
st.session_state["data_engine"] = data_engine

st.set_page_config(layout="wide")

# Add custom CSS
st.markdown("""
<style>
    /* Sidebar background color */
    section[data-testid="stSidebar"] {
        background-color: #f0f2f6;
    }
    
    /* Navigation button style */
    section[data-testid="stSidebar"] .stButton button {
        width: 100%;
        padding: 0.75rem 1rem;
        background-color: transparent;
        border: none;
        text-align: left;
        color: rgb(49, 51, 63);
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1.6;
        margin: 0.1rem 0;
    }
    
    .st-emotion-cache-64tehz {

         gap: 0rem; 
    }
    
    .st-emotion-cache-qsto9u {

        justify-content: left;
    
    }
    
    [data-testid="stVerticalBlock"] .stVerticalBlock {
        text-indent: 2rem;
    } 

    /* Navigation button hover effect */
    section[data-testid="stSidebar"] .stButton button:hover {
        background-color: rgba(151, 166, 195, 0.15);
    }
    
    /* Selected state */
    section[data-testid="stSidebar"] .stButton button.selected,
    section[data-testid="stSidebar"] .stButton button:active,
    section[data-testid="stSidebar"] .stButton button:focus {
        background-color: #fff;
        border: none;
        box-shadow: none;
    }
    
    /* Page title style */
    h1 {
        font-size: 3rem !important;
        font-weight: 600 !important;
        color: rgb(49, 51, 63) !important;
        margin-bottom: 1rem !important;
    }
    
    /* Divider style */
    hr {
        margin: 0.5rem 0;
        border-color: rgba(49, 51, 63, 0.1);
    }
    
    /* Subpage indentation */
    .child-page {
        padding-left: 1rem;
    }
</style>
""", unsafe_allow_html=True)

# Implement navigation using sidebar
with st.sidebar:
    # Initialize session state
    if "selected_page" not in st.session_state:
        st.session_state.selected_page = "text"

    # Text Leaderboard as clickable button
    selected_class = "selected" if st.session_state.selected_page == "text" else ""
    if st.button("📚 Text Leaderboard", key="text",
                 use_container_width=True,
                 ):
        st.session_state.selected_page = "text"
        st.rerun()

    # Subpage list
    pages = [
        ("law", "⚖️ Law"),
        ("multilingual", "🌎 Multilingual"),
        ("german", "🇩🇪 German"),
        ("code", "💻 Code"),
        ("tech", "🛠️ Tech")
    ]

    # Use container for indentation
    with st.container():
        st.markdown('<div class="child-page">', unsafe_allow_html=True)
        for page_id, page_title in pages:
            selected_class = "selected" if st.session_state.selected_page == page_id else ""
            if st.button(page_title, key=page_id, use_container_width=True):
                st.session_state.selected_page = page_id
                # st.rerun()
        st.markdown('</div>', unsafe_allow_html=True)

# Add page title
if st.session_state.selected_page == "text":
    st.title("📚 Text Leaderboard")
elif st.session_state.selected_page == "law":
    st.title("⚖️ Law")
elif st.session_state.selected_page == "multilingual":
    st.title("🌎 Multilingual")
elif st.session_state.selected_page == "german":
    st.title("🇩🇪 German")
elif st.session_state.selected_page == "code":
    st.title("💻 Code")
elif st.session_state.selected_page == "tech":
    st.title("🛠️ Tech")

# Render current selected page
render_page(st.session_state.selected_page)