import streamlit as st

# CSS styles
css = """
body {
    background-color: #000000;
    color: #FFFFFF;
}
.main {
    background-color: #000000;
}
.main .block-container {
    padding: 0rem;
    background-color: #000000;
}
.sidebar .sidebar-content {
    background-color: #D9D9D9 !important;
    padding: 1rem;
}
header, #MainMenu, footer {visibility: hidden;}
.category-button {
    background-color: #D9D9D9;
    color: #333333;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 10px;
    width: 100%;
    margin-bottom: 5px;
    transition: background-color 0.3s;
}
.category-button:hover {
    background-color: #C0C0C0;
}
.category-button:focus {
    outline: none;
}
.selected-category {
    background-color: #C0C0C0 !important;
    color: #000000 !important;
}
.submenu-button {
    background-color: #E6E6E6;
    color: #333333;
    border: none;
    text-align: left;
    font-size: 1rem;
    padding: 6px 20px;
    width: 100%;
    margin-bottom: 3px;
    transition: background-color 0.3s;
}
.submenu-button:hover {
    background-color: #D0D0D0;
}
.submenu-button:focus {
    outline: none;
}
.selected-submenu {
    background-color: #C0C0C0 !important;
    color: #000000 !important;
    font-weight: bold;
}
"""

# Set page config
st.set_page_config(
    layout="wide",
    page_title="Web UI",
    page_icon=":ghost:",
    initial_sidebar_state="expanded"
)

# Apply CSS
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)

# Menu structure (can be easily extended for multi-language support)
menu_structure = {
    "A 카테고리": ["a", "b"],
    "B 카테고리": ["c", "d"]
}

# Initialize session state
if 'expanded_category' not in st.session_state:
    st.session_state.expanded_category = None
if 'selected_item' not in st.session_state:
    st.session_state.selected_item = None

# Functions
def toggle_category(category):
    if st.session_state.expanded_category == category:
        st.session_state.expanded_category = None
    else:
        st.session_state.expanded_category = category

def select_item(item):
    st.session_state.selected_item = item

# Sidebar menu
st.sidebar.title("메뉴")

for category, items in menu_structure.items():
    is_expanded = st.session_state.expanded_category == category
    category_label = f"{'▼' if is_expanded else '▶'} {category}"
    if st.sidebar.button(category_label, key=f"category_{category}", on_click=toggle_category, args=(category,)):
        pass
    
    if is_expanded:
        for item in items:
            is_selected = st.session_state.selected_item == item
            if st.sidebar.button(item, key=f"submenu_{item}", on_click=select_item, args=(item,)):
                pass

# Main content
main_content = st.empty()

# Content mapping
content_map = {
    "a": "https://seawolf2357-flxloraexp.hf.space",
    "b": "https://seawolf2357-timer2.hf.space",
    "c": "https://seawolf2357-timer3.hf.space",
    "d": "https://seawolf2357-timer4.hf.space"
}

if st.session_state.selected_item in content_map:
    main_content.markdown(
        f'<iframe src="{content_map[st.session_state.selected_item]}" width="100%" height="800" frameborder="0"></iframe>',
        unsafe_allow_html=True
    )
else:
    main_content.markdown("<h2>메뉴에서 항목을 선택하세요.</h2>")

# Add JavaScript for dynamic iframe resizing
st.markdown("""
<script>
function resizeIframe() {
    var iframe = document.querySelector('iframe');
    if (iframe) {
        iframe.style.height = window.innerHeight + 'px';
    }
}
window.addEventListener('resize', resizeIframe);
resizeIframe();
</script>
""", unsafe_allow_html=True)