import streamlit as st
import os

# Custom CSS to style the markdown content
def local_css(file_name):
    with open(file_name) "r") as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

# Function to read markdown files
def load_markdown_file(path):
    with open(path, "r") as file:
        content = file.read()
    return content

# Initialize the app with a nicer layout
st.set_page_config(layout="wide")

# Apply some custom styles for better appearance
local_css("style.css")  # Assume you have a style.css file for custom styles

# Streamlit UI
st.title('📚 Documentation')

# Assuming your documentation is in the 'docs' folder
docs_base_path = './docs'

# Create columns for sidebar and main content
col1, col2 = st.columns([1, 3])

with col1:
    st.write("## Navigation")
    
    # List categories based on folder names
    categories = [d for d in os.listdir(docs_base_path) if os.path.isdir(os.path.join(docs_base_path, d))]
    category = st.selectbox('Select a Category', categories)
    
    # List pages based on markdown files in the selected category folder
    pages_path = os.path.join(docs_base_path, category)
    pages = [f for f in os.listdir(pages_path) if os.path.isfile(os.path.join(pages_path, f))]
    page = st.selectbox('Select a Page', pages)

with col2:
    st.write(f"## {page[:-3]}")  # Remove .md extension and display as title
    
    # Load and display the selected markdown file
    markdown_path = os.path.join(pages_path, page)
    markdown_content = load_markdown_file(markdown_path)
    st.markdown(markdown_content, unsafe_allow_html=True)