import streamlit as st
from streamlit_extras.switch_page_button import switch_page
import os
import sys

# Add the project root to the path
sys.path.append(os.path.dirname(os.path.abspath(__file__)))

# Set page configuration
st.set_page_config(
    page_title="Samuel Lima Braz | CV Journey",
    page_icon="🧠",
    layout="wide",
    initial_sidebar_state="expanded",
)

# Custom CSS for better styling
st.markdown(
    """
<style>
    .main .block-container {
        padding-top: 2rem;
    }
    h1, h2, h3 {
        margin-top: 0;
    }
    .stTabs [data-baseweb="tab-list"] {
        gap: 2rem;
    }
    .stTabs [data-baseweb="tab"] {
        height: 4rem;
        white-space: pre-wrap;
        background-color: transparent;
        border-radius: 4px 4px 0 0;
        gap: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    a {
        text-decoration: none;
    }
    .badge {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .badge-primary {
        color: #fff;
        background-color: #007bff;
    }
    .badge-secondary {
        color: #fff;
        background-color: #6c757d;
    }
    .badge-success {
        color: #fff;
        background-color: #28a745;
    }
    .badge-info {
        color: #fff;
        background-color: #17a2b8;
    }
    .tech-list {
        list-style-type: none;
        padding-left: 0;
    }
    .tech-list li {
        margin-bottom: 0.5rem;
    }
    .tech-list li::before {
        content: "•";
        color: #ff4b4b;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }
</style>
""",
    unsafe_allow_html=True,
)

# Title and introduction
st.title("My Computer Vision Journey")
st.subheader("Presented by Samuel Lima Braz")

# Profile image - create a column layout
col1, col2 = st.columns([1, 3])

with col1:
    st.image("assets/profile.jpg", width=200)

with col2:
    st.markdown(
        """
    Hi, I'm **Samuel Lima Braz**, a Computer Engineering student at UNIFEI (Universidade Federal de Itajubá) 
    and Machine Learning Engineer at Tech4Humans in Brazil. 
    
    My programming journey began in 2018 with C during my technical course in Industrial Automation. 
    I entered the world of Computer Vision in 2023 when I joined Black Bee Drones, the first autonomous 
    drone team in Latin America, where I continue to develop cutting-edge solutions for autonomous flight.
    """
    )

st.markdown("---")

st.markdown("#### Presentation Goal:")
st.markdown(
    """
This interactive presentation, built entirely with Streamlit, walks you through my key projects in Computer Vision, 
from autonomous drones to fine-tuning Vision Language Models. We'll explore concepts, challenges, and see some live demos along the way!
"""
)

# Navigation section
st.markdown("### Navigate Through My Journey")

col1, col2, col3 = st.columns(3)

with col1:
    black_bee_btn = st.button("🐝 Black Bee Drones", use_container_width=True)
    if black_bee_btn:
        switch_page("black_bee_drones")

    cafe_dl_btn = st.button("☕ CafeDL Project", use_container_width=True)
    if cafe_dl_btn:
        switch_page("cafe_dl")

with col2:
    asimov_btn = st.button("🤖 Asimo Foundation", use_container_width=True)
    if asimov_btn:
        switch_page("asimo_foundation")

    tech4humans_btn = st.button("💼 Tech4Humans", use_container_width=True)
    if tech4humans_btn:
        switch_page("tech4humans")

with col3:
    conclusion_btn = st.button("✅ Conclusion", use_container_width=True)
    if conclusion_btn:
        switch_page("conclusion")


# Add information about this presentation
st.sidebar.markdown("## About This Presentation")
st.sidebar.markdown(
    """
This interactive presentation was built with Streamlit as an alternative to traditional slides.

Navigate through the sections using the buttons above or the pages in the sidebar.

Each section includes:
- Project description
- Technologies used
- Interactive demos (where applicable)
- Code examples & visualizations
"""
)

# Add contact information in the sidebar
st.sidebar.markdown("## Connect With Me")
st.sidebar.markdown(
    """
- [GitHub](https://github.com/samuellimabraz)
- [LinkedIn](https://www.linkedin.com/in/samuel-lima-braz/)
- [Hugging Face](https://huggingface.co/samuellimabraz)
"""
)