src/ui/theme.py

"""
F1 Predictor 2026 - Theme System
Consolidated: colors, CSS, page config, plotly helpers, team colors
"""

import streamlit as st
import streamlit.components.v1 as components

# ── Color Palette ───────────────────────────────────────────
# STRICT: skyblue, darkblue, darkgray, black, red, green ONLY
COLORS = {
    "skyblue": "#3B82F6",
    "skyblue_dark": "#2563EB",
    "skyblue_light": "#60A5FA",
    "darkblue": "#1E3A8A",
    "darkgray": "#475569",
    "black": "#0F172A",
    "red": "#EF4444",
    "green": "#10B981",
    "amber": "#F59E0B",
    "cyan": "#06B6D4",
    "gold": "#FBBF24",
    "silver": "#9CA3AF",
    "bronze": "#D97706",
    "bg": "#F8FAFC",
    "bg_card": "#F1F5F9",
    "border": "#E2E8F0",
    "text": "#0F172A",
    "text_secondary": "#475569",
    "text_muted": "#94A3B8",
    "team_red_bull": "#1E41FF",
    "team_ferrari": "#DC0000",
    "team_mercedes": "#00D2BE",
    "team_mclaren": "#FF8000",
    "team_aston_martin": "#006F62",
    "team_alpine": "#0093CC",
    "team_williams": "#005AFF",
    "team_rb": "#2B4562",
    "team_kick_sauber": "#00E701",
    "team_haas": "#B6BABD",
}

TEAM_COLOR_MAP = {
    "red_bull": "#1E41FF", "ferrari": "#DC0000", "mercedes": "#00D2BE",
    "mclaren": "#FF8000", "aston_martin": "#006F62", "alpine": "#0093CC",
    "williams": "#005AFF", "rb": "#2B4562", "kick_sauber": "#00E701",
    "haas": "#B6BABD", "red bull": "#1E41FF", "aston martin": "#006F62",
    "kick sauber": "#00E701", "racing bulls": "#2B4562", "sauber": "#00E701",
    "visa cash app rb": "#2B4562",
}


def bar_colors_from_teams(predictions):
    """Generate bar colors based on team affiliation."""
    return [TEAM_COLOR_MAP.get(
        p.get("team", "").lower().strip().replace(" ", "_").replace("-", "_"),
        "#3B82F6"
    ) for p in predictions]


def f1_plotly_layout(title="", show_legend=False):
    """Return a Plotly layout dict styled for the F1 light theme."""
    return {
        "paper_bgcolor": "rgba(0,0,0,0)",
        "plot_bgcolor": "rgba(0,0,0,0)",
        "font": {"color": "#0F172A", "family": "Inter, sans-serif"},
        "title": {"text": title, "font": {"color": "#0F172A", "size": 18}},
        "xaxis": {
            "gridcolor": "rgba(71,85,105,0.15)", "linecolor": "rgba(71,85,105,0.3)",
            "tickfont": {"color": "#475569"}, "title": {"font": {"color": "#475569"}},
        },
        "yaxis": {
            "gridcolor": "rgba(71,85,105,0.15)", "linecolor": "rgba(71,85,105,0.3)",
            "tickfont": {"color": "#475569"}, "title": {"font": {"color": "#475569"}},
        },
        "legend": {"font": {"color": "#475569"}, "bgcolor": "rgba(0,0,0,0)"} if show_legend else {},
        "margin": {"l": 60, "r": 20, "t": 60, "b": 60},
    }


# ── Complete CSS ──────────────────────────────────────────
CSS = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

html, body, .stApp, [data-testid="stAppViewContainer"], .main, .block-container {
    background: #F8FAFC !important; background-color: #F8FAFC !important;
}
body {
    font-family: 'Inter', -apple-system, sans-serif; color: #0F172A; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
#MainMenu, header, footer, .stApp > header, [data-testid="stToolbar"] {
    display: none !important;
}

/* Top Navigation Bar */
.top-nav-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    padding: 0.75rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.nav-item {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    color: #475569;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-block;
}

.nav-item.active {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: #F8FAFC;
    border: 1px solid #3B82F6;
}

.nav-item:hover:not(.active) {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}

/* Buttons */
.stButton > button {
    background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
    color: #F8FAFC !important; border: none !important; border-radius: 8px !important;
    padding: 0.6rem 1.5rem !important; font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.stButton > button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3) !important;
}

/* Inputs */
.stSelectbox > div > div, .stNumberInput > div > div, .stSlider > div > div {
    background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
}
.stSelectbox label, .stNumberInput label, .stSlider label, .stCheckbox label {
    color: #475569 !important; font-weight: 600 !important;
}

/* Metrics */
[data-testid="stMetric"] {
    background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important; padding: 1rem !important;
}
[data-testid="stMetric"] label { color: #94A3B8 !important; font-size: 0.75rem !important; text-transform: uppercase; letter-spacing: 0.5px; }
[data-testid="stMetric"] .css-1xarl3l { color: #0F172A !important; font-size: 1.5rem !important; font-weight: 800 !important; }

/* Tabs */
.stTabs [data-baseweb="tab-list"] {
    background: #F1F5F9 !important; border-radius: 10px 10px 0 0 !important;
    border-bottom: 2px solid #E2E8F0 !important;
}
.stTabs [data-baseweb="tab"] { color: #94A3B8 !important; font-weight: 500 !important; }
.stTabs [aria-selected="true"] { color: #3B82F6 !important; border-bottom: 2px solid #3B82F6 !important; }

/* DataFrames */
.stDataFrame {
    background: #F1F5F9 !important; border-radius: 10px !important;
    border: 1px solid #E2E8F0 !important;
}
.stDataFrame th { background: #E2E8F0 !important; color: #0F172A !important; font-weight: 700 !important; }
.stDataFrame td { color: #1E293B !important; }
.stDataFrame tr:hover td { background: #F8FAFC !important; }

/* Expanders */
.stExpander {
    background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
}

/* Sidebar */
section[data-testid="stSidebar"] {
    background: #F1F5F9 !important; border-right: 1px solid #E2E8F0 !important;
}
section[data-testid="stSidebar"] .stMarkdown, section[data-testid="stSidebar"] label {
    color: #0F172A !important;
}

/* Sidebar Toggle Button - POSITIONED & VISIBLE */
button[kind="icon"][data-testid="collapsedControl"],
[data-testid="collapsedControl"],
.stSidebarToggle {
    background-color: #EF4444 !important;
    border: 2px solid #DC2626 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important;
    position: fixed !important;
    top: 10px !important;
    left: 250px !important;
    z-index: 9999 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

button[kind="icon"][data-testid="collapsedControl"]:hover,
[data-testid="collapsedControl"]:hover,
.stSidebarToggle:hover {
    background-color: #DC2626 !important;
    transform: scale(1.05);
}

button[kind="icon"][data-testid="collapsedControl"] svg,
[data-testid="collapsedControl"] svg,
.stSidebarToggle svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Radio */
.stRadio > div { background: #F1F5F9 !important; border-radius: 8px !important; padding: 0.5rem !important; }
.stRadio label span { color: #475569 !important; }

/* Alerts */
.stAlert { background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important; border-radius: 10px !important; }
.stAlert [data-testid="stAlertContent"] { color: #0F172A !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb { background: #CBD5E0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Plotly */
.js-plotly-plot .plotly { border-radius: 10px; }
"""


def apply_theme():
    """Inject theme CSS into Streamlit."""
    js_code = """
    <script>
    (function() {
        function adjustSidebarTogglePosition() {
            // Find the sidebar toggle button
            const toggleButtons = document.querySelectorAll('button[kind="icon"][data-testid="collapsedControl"]');
            const sidebar = document.querySelector('section[data-testid="stSidebar"]');
            
            if (toggleButtons.length > 0 && sidebar) {
                const toggle = toggleButtons[0];
                
                // Get sidebar width to determine if it's expanded or collapsed
                const computedStyle = window.getComputedStyle(sidebar);
                const sidebarWidth = parseFloat(computedStyle.width);
                
                // If sidebar width is small (~4.5rem or ~72px), it's collapsed
                // If wider (~260px+), it's expanded
                if (sidebarWidth > 200) {
                    // Sidebar is expanded - position toggle at 250px
                    toggle.style.left = '250px';
                } else {
                    // Sidebar is collapsed - position toggle at 10px
                    toggle.style.left = '10px';
                }
            }
        }
        
        // Run immediately
        adjustSidebarTogglePosition();
        
        // Run when the page loads
        window.addEventListener('load', adjustSidebarTogglePosition);
        
        // Run periodically to catch sidebar state changes
        setInterval(adjustSidebarTogglePosition, 500);
        
        // Watch for DOM mutations that might affect sidebar
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'attributes' && 
                    (mutation.attributeName === 'style' || mutation.target.matches('[data-testid="stSidebar"]'))) {
                    setTimeout(adjustSidebarTogglePosition, 100);
                }
            });
        });
        
        observer.observe(document.body, { 
            attributes: true, 
            subtree: true,
            attributeFilter: ['style', 'class']
        });
    })();
    </script>
    """
    
    st.markdown(f"<style>{CSS}</style>", unsafe_allow_html=True)
    st.components.v1.html(js_code, height=0)



def apply_page_config():
    """Set Streamlit page config."""
    st.set_page_config(
        page_title="F1 Predictor 2026",
        page_icon="🏎️",
        layout="wide",
        initial_sidebar_state="expanded",
    )