components/sidebar.py

import streamlit as st
import datetime
from utils.auth import logout

def render_sidebar():
    """Render the sidebar with navigation links and user info"""
    with st.sidebar:
        # App logo/title
        st.markdown(
            """
            <div style="text-align: center; margin-bottom: 16px;">
                <h2 style="margin-bottom: 0;">🤗 HF Model Manager</h2>
            </div>
            """,
            unsafe_allow_html=True,
        )

        # User information with badge
        st.markdown(
            f"""
            <div style="margin-bottom: 24px; padding: 16px; background-color: #F3F4F6; 
                 border-radius: 8px; border: 1px solid #E5E7EB; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <div style="font-size: 13px; color: #6B7280; margin-bottom: 4px;">Logged in as</div>
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <div style="font-weight: bold; font-size: 16px;">{st.session_state.username}</div>
                    <div class="badge hf-badge" style="padding: 2px 6px; font-size: 10px;">
                        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" 
                             alt="HF" style="height: 10px; margin-right: 2px;">
                        Pro
                    </div>
                </div>
                <div style="font-size: 12px; color: #6B7280; margin-top: 8px;">
                    Last login: {datetime.datetime.now().strftime("%B %d, %Y")}
                </div>
            </div>
            """,
            unsafe_allow_html=True,
        )

        # Navigation with tooltips
        st.markdown(
            """
            <h3 style="font-size: 16px; margin-bottom: 12px; color: #1A1A1A;">
                Navigation
            </h3>
            """,
            unsafe_allow_html=True,
        )

        # Home button
        if st.button("🏠 Home", use_container_width=True, key="home_btn"):
            st.session_state.page = "home"
            st.session_state.selected_model = None
            st.rerun()

        # Repositories button
        if st.button(
            "📚 Manage Repositories", use_container_width=True, key="repo_btn"
        ):
            st.session_state.page = "repository_management"
            st.rerun()

        # Create new repository button with prominent styling
        st.markdown(
            """
            <div style="margin: 16px 0;">
            """,
            unsafe_allow_html=True,
        )
        if st.button(
            "➕ Create New Repository", 
            use_container_width=True, 
            key="create_new_repo"
        ):
            st.session_state.page = "repository_management"
            st.rerun()

        # Analytics button
        if st.button("📊 Analytics", use_container_width=True, key="analytics_btn"):
            st.session_state.page = "analytics"
            st.session_state.selected_model = None
            st.rerun()

        # Batch Operations button
        if st.button("🔄 Batch Operations", use_container_width=True, key="batch_btn"):
            st.session_state.page = "batch_operations"
            st.session_state.selected_model = None
            st.rerun()


        # Refresh models button
        if st.button(
            "🔄 Refresh Models", use_container_width=True, key="refresh_models"
        ):
            with st.spinner("Refreshing models..."):
                try:
                    st.session_state.models = st.session_state.client.get_user_models()
                    st.success("Models refreshed!")
                except Exception as e:
                    st.error(f"Error refreshing models: {str(e)}")

        # Spacer
        st.markdown(
            """
            <div style="flex-grow: 1; min-height: 20px;"></div>
            """,
            unsafe_allow_html=True,
        )

        # Bottom links with improved styling
        st.markdown(
            """
            <hr style="margin: 16px 0; border: none; height: 1px; background-color: #E5E7EB;">
            """,
            unsafe_allow_html=True,
        )

        # Helpful links section
        st.markdown(
            """
            <div style="margin-bottom: 16px;">
                <a href="https://huggingface.co/docs" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #6B7280; font-size: 13px; padding: 8px 0;">
                    <span style="margin-right: 8px;">📚</span> Hugging Face Documentation
                </a>
                <a href="https://huggingface.co/models" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #6B7280; font-size: 13px; padding: 8px 0;">
                    <span style="margin-right: 8px;">🔍</span> Browse Models
                </a>
                <a href="https://huggingface.co/spaces" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #6B7280; font-size: 13px; padding: 8px 0;">
                    <span style="margin-right: 8px;">🚀</span> Explore Spaces
                </a>
            </div>
            """,
            unsafe_allow_html=True,
        )

        # Version info
        st.markdown(
            """
            <div style="font-size: 12px; color: #9CA3AF; text-align: center; margin-bottom: 12px;">
                HF Model Manager v1.0.0
            </div>
            """,
            unsafe_allow_html=True,
        )

        # Logout button
        if st.button("🚪 Logout", use_container_width=True, key="logout_btn"):
            logout()