import streamlit as st

# --- Page Configuration ---
# This sets the title and icon that appear in the default header
st.set_page_config(
    page_title="SBS V2.0 mapper", # This title will appear in the sticky header
    # Use the logo image here if you want it in the header (optional)
    # page_icon="images/menu_book_60dp_75FBFD.png",
    layout="wide" # Optional: Use wide layout
)

# --- Custom CSS for Sticky Default Header (with !important) ---
st.markdown("""
<style>
    /* Target the default Streamlit header element */
    /* This is typically the <header> tag containing the title, menu, and status */
    header {
        position: sticky !important; /* Force sticky positioning */
        top: 0px !important;         /* Force sticking to the top edge */
        z-index: 999 !important;     /* Force a high z-index */
        background-color: rgb(255, 255, 255) !important; /* Force background color */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow (usually doesn't need !important) */
        /* Ensure no conflicting height/overflow properties */
        height: auto !important; /* Force height to adjust */
        overflow: visible !important; /* Force overflow visible */
    }

    /* Add padding to the main content area to prevent it from starting behind the fixed header */
    /* This targets the main container div where your app content and pages are rendered */
    /* Adjust this value based on the header's actual height after inspecting the deployed app */
    [data-testid="stAppViewContainer"] {
        padding-top: 60px; /* Estimate header height (~60px). Adjust if needed. */
    }

    /* Adjust padding for the sidebar content as well */
     [data-testid="stSidebar"] {
         padding-top: 60px; /* Use the same padding value as the main content */
     }

    /* Ensure the main content block within the container also has correct top padding */
    .main .block-container {
        padding-top: 1rem; /* Keep or adjust default Streamlit content padding */
    }

    /* Ignore the data-testid="stMain" observation for the header stickiness,
       as stMain is typically the main content area, not the header bar with status.
       The sticky CSS should target the <header> tag.
       If you confirmed the element you want sticky is truly not the <header> tag,
       then the CSS selector above needs to be changed to target that specific element
       and its parents examined for overflow/transform issues.
    */

</style>
""", unsafe_allow_html=True)

# --- App Content (will scroll below the sticky header) ---

# The st.logo call here will place the logo in the sidebar or main body,
# not in the sticky default header. If you want a logo in the header,
# use the page_icon parameter in st.set_page_config above.
st.logo(image="images/menu_book_60dp_75FBFD.png")


st.sidebar.header("SBS V2.0 mapper")
st.sidebar.write("(work in progress)")
st.sidebar.text("Demo by JA-RAD")

# Note: st.title and st.subheader here will appear *below* the sticky header,
# as they are part of the main app content flow. The title in the sticky header
# comes from st.set_page_config.
st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
st.subheader("Select specific Chapter for quicker results")


# --- NAVIGATION SETUP ---
# Keep your existing navigation setup
type_text_page = st.Page(
    page="pages/type_text.py",
    title="DEMO (work in progress)",
    icon=":material/keyboard:", # This icon can appear in the tab/bookmark
    default=True,
)

pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
pg.run()

# Add some extra content to make the page scrollable for testing
# Remove this loop in your final application if you have enough content already
for i in range(100):
    st.write(f"This is scrollable content line {i}")