src/components/header.py

import streamlit as st
import base64
from pathlib import Path


def get_image_base64(image_path: Path) -> str:
    """Convert image to base64 string"""
    if not image_path.exists():
        st.error(f"Logo not found at {image_path}")
        return ""

    with open(image_path, "rb") as img_file:
        return base64.b64encode(img_file.read()).decode("utf-8")


def render_contribution_guide():
    """Render the contribution guide section"""
    # Session state for visibility
    if "show_guide" not in st.session_state:
        st.session_state.show_guide = True

    if st.session_state.show_guide:
        # Container for the guide with dismiss button
        with st.container():
            col1, col2 = st.columns([0.8, 0.2])
            with col1:
                st.markdown("### 🚀 Contribute")
            with col2:
                if st.button("✕", help="Dismiss guide"):
                    st.session_state.show_guide = False
                    st.rerun()

            st.markdown(
                """
                How does your device stack up? Benchmark your phone and join the leaderboard!
                """
            )

            col1, col2 = st.columns([0.5, 0.5])
            with col1:
                # Google Play badge
                playstore_badge = Path("src/static/images/GetItOnGooglePlay_Badge.png")
                if playstore_badge.exists():
                    st.markdown(
                        f'<a href="https://play.google.com/store/apps/details?id=com.pocketpalai" target="_blank">'
                        f'<img src="data:image/png;base64,{get_image_base64(playstore_badge)}" '
                        'class="store-badge" alt="Get it on Google Play">'
                        "</a>",
                        unsafe_allow_html=True,
                    )

            with col2:
                # App Store badge
                appstore_badge = Path(
                    "src/static/images/Download_on_the_App_Store_Badge.svg"
                )
                if appstore_badge.exists():
                    st.markdown(
                        f'<a href="https://apps.apple.com/de/app/pocketpal-ai/id6502579498" target="_blank">'
                        f'<img src="data:image/svg+xml;base64,{get_image_base64(appstore_badge)}" '
                        'class="store-badge" alt="Download on the App Store">'
                        "</a>",
                        unsafe_allow_html=True,
                    )

            # Quick steps
            st.markdown(
                """
                #### Quick Guide:
                1. **Download** PocketPal AI
                2. **Get** your preferred model
                3. **Run** benchmark
                4. **Submit** to leaderboard
                """
            )

            # Demo video/gif
            demo_gif = Path("src/static/images/Bench.gif")
            if demo_gif.exists():
                st.markdown(
                    f'<div class="demo-container">'
                    f'<img src="data:image/gif;base64,{get_image_base64(demo_gif)}" '
                    'class="demo-gif" alt="Benchmark Demo">'
                    "</div>",
                    unsafe_allow_html=True,
                )

    else:
        # Show restore button when guide is dismissed
        if st.button("Guide", help="Show contribution guide"):
            st.session_state.show_guide = True
            st.rerun()


def render_header():
    """Render the application header with logos"""
    # Logo paths
    pocketpal_logo_path = Path("src/static/images/pocketpal-ai-logo.png")

    # Create header columns with the same ratio as main content
    if "show_guide" not in st.session_state:
        st.session_state.show_guide = True

    header_main, header_side = st.columns(
        [
            0.9 if not st.session_state.show_guide else 0.8,
            0.1 if not st.session_state.show_guide else 0.2,
        ]
    )

    with header_main:
        header_html = f"""
            <div class="header-container">
                <div class="logos-container">
                    <img src="data:image/png;base64,{get_image_base64(pocketpal_logo_path)}" class="logo pocketpal" alt="PocketPal AI Logo">
                </div>
                <h1 class="header-title">AI Phone Leaderboard</h1>
                <p class="header-subtitle">Comparing Large Language Models performance across AI Phones. Powered by PocketPal AI.</p>
            </div>
        """
        st.markdown(header_html, unsafe_allow_html=True)