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: #050505 !important;
    padding: 0.5rem 0 0 0;
}
header, #MainMenu, footer {visibility: hidden;}
.category-button {
    background-color: #0A0A0A;
    color: #FFFFFF;
    border: none;
    text-align: left;
    font-size: 0.77rem;
    font-weight: bold;
    padding: 10px 10px 10px 15px;
    width: 100%;
    margin: 0;
    transition: background-color 0.3s;
}
.category-button:hover {
    background-color: #0F0F0F;
}
.category-button:focus {
    outline: none;
}
.selected-category {
    background-color: #151515 !important;
    color: #FFFFFF !important;
}
.submenu-button {
    background-color: #0C0C0C;
    color: #FFFFFF;
    border: none;
    text-align: left;
    font-size: 0.7rem;
    padding: 6px 6px 6px 25px;
    width: 100%;
    margin: 0;
    transition: background-color 0.3s;
}
.submenu-button:hover {
    background-color: #111111;
}
.submenu-button:focus {
    outline: none;
}
.selected-submenu {
    background-color: #181818 !important;
    color: #FFFFFF !important;
    font-weight: bold;
}
.sidebar .sidebar-content {
    width: 100%;
    margin-left: 0;
}
"""

# 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 = {
    "베스트 TOP 10": ["FLUX LoRA 스튜디오", "[서치+VisionLLM] 한국어 JinJavis","FLUX 확장 이미지 생성","이미지와 한글 프롬프트로 이미지 변형","LOGO 디자인 생성","FLUX GIF 생성","이미지와 프롬프트로 영상 생성","텍스트로 객체만 잘라내고 배경 투명화","상품 사진 업로드+프롬프트로 배경을 합성","EveryText: 모든 문자가 이미지 생성에 반영"],
    "FLUXLoRA스튜디오 스페셜": ["FLUXLoRA스튜디오 서버#1", "FLUXLoRA스튜디오 서버#2", "FLUXLoRA스튜디오 서버#3", "FLUXLoRA스튜디오 서버#4"], 
    "FLUX 스페셜": ["FLUX LoRA 스튜디오", "FLUX 확장 이미지 생성", "FLUX GIF 생성", "LOGO 디자인 생성","FLUX 프롬프트 생성", "FLUX LoRA: 기블리 스타일","FLUX LoRA: 카툰 스타일",  "FLUX 8step LoRA 이미지 생성","FLUX 텍스트 TO 비디오 생성","FLUX 패션모델 생성",  "FLUX Controlnet", "FLUX NF4 이미지 생성"],
    "이미지/영상 생성": ["이미지와 한글 프롬프트로 영상 생성 I","이미지와 한글 프롬프트로 영상 생성 II","이미지와 한글 프롬프트로 이미지 변형","상품 사진 업로드+프롬프트로 배경을 합성","텍스트로 이미지 생성: Accracy 모델","텍스트로 이미지 생성: Playground 모델","텍스트로 이미지 생성: AuraFlow 모델",  "EveryText: 모든 문자가 이미지 생성에 반영", "내 얼굴 사진으로 이미지 생성 I","내 얼굴 사진으로 이미지 생성 II","고해상도 이미지 생성 REALVISXL V5"],
    "멀티모달": ["텍스트로 객체만 잘라내고 배경 투명화","비디오 인식 QnA 챗봇","이미지 스케일업(화질개선)","이미지 배경 제거","비디오 배경 제거","텍스트 입력으로 음악 생성" ],
    "LLM(비교 체험)": ["[서치+VisionLLM] 한국어 JinJavis","MS PHI 3.5 Vision","NSFW kAI","메타 LLAMA 3.1 405B","메타 LLAMA 3.1 70B","메타 LLAMA 3.1 8B","미스트랄 7B Instruct v0.3","MS Phi 3 mini 4k-instruct","중국 Yi 1.5 34B",    "미스트랄 Mixtral 8X7B ","미스트랄 Nemo Instruct 2407"   ],
    "전문가 모델": ["전문 블로그 생성","의학 전문 블로그 생성","약리학 전문 블로그 생성"],
    "마케팅 스페셜": ["블로그 자동(컨펌/단수) 생성","블로그 자동(무인/복수) 생성"  ],    
    "[관리 모니터링]": ["24X7 모니터링"]    
}

# 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.markdown('<h1 style="font-size: 1.4rem; margin-left: 15px;">메뉴</h1>', unsafe_allow_html=True)

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 = {
    "FLUX LoRA 스튜디오": "https://ginipick-flxloraexp.hf.space",        
    "[서치+VisionLLM] 한국어 JinJavis": "https://fantos-jinjavis.hf.space",                             
    "FLUX 확장 이미지 생성": "https://fantaxy-ofai-flx-expl-store.hf.space",  
    "이미지와 한글 프롬프트로 이미지 변형": "https://fantos-kolcontrl.hf.space",                   
    "LOGO 디자인 생성": "https://fantaxy-ofai-flx-logo.hf.space",    
    "FLUX GIF 생성": "https://aiqtech-flxgif.hf.space",
    "이미지와 프롬프트로 영상 생성": "https://fantaxy-ofai-it2v2.hf.space",  
    "텍스트로 객체만 잘라내고 배경 투명화": "https://fantos-textcutobject.hf.space",                    
    "상품 사진 업로드+프롬프트로 배경을 합성": "https://aiqtech-producbrmg.hf.space",                      
    "EveryText: 모든 문자가 이미지 생성에 반영": "https://fantos-EveryText.hf.space",  

    "FLUXLoRA스튜디오 서버#1": "https://seawolf2357-flxloraexp.hf.space",
    "FLUXLoRA스튜디오 서버#2": "https://fantaxy-flxloraexp.hf.space",
    "FLUXLoRA스튜디오 서버#3": "https://fantos-flxloraexp.hf.space",
    "FLUXLoRA스튜디오 서버#4": "https://ginipick-flxloraexp.hf.space",
    
    "FLUX LoRA 스튜디오": "https://fantos-flxloraexp.hf.space",        
    "FLUX 확장 이미지 생성": "https://fantaxy-ofai-flx-expl-store.hf.space",
    "FLUX GIF 생성": "https://aiqtech-flxgif.hf.space",
    "LOGO 디자인 생성": "https://fantaxy-ofai-flx-logo.hf.space",
    "FLUX 프롬프트 생성": "https://ginipick-flux-prompt-generator.hf.space", 
    "FLUX LoRA: 기블리 스타일": "https://aiqtech-flux-ghibli-studio-lora.hf.space",
    "FLUX LoRA: 카툰 스타일": "https://aiqtech-flxani.hf.space",  
    "FLUX 8step LoRA 이미지 생성": "https://fantos-flx8lora.hf.space",
    "FLUX 텍스트 TO 비디오 생성": "https://fantos-cogvidx.hf.space",
    "FLUX 패션모델 생성": "https://fantos-flxfashmodel.hf.space",  
    "FLUX Controlnet": "https://fantos-flxcontrol.hf.space",  
    "FLUX NF4 이미지 생성": "https://ginipick-ofai-flxnf4.hf.space",   

    "이미지와 한글 프롬프트로 영상 생성 I": "https://fantaxy-ofai-it2v2.hf.space",
    "이미지와 한글 프롬프트로 영상 생성 II": "https://aiqtech-cinevid.hf.space",
    "이미지와 한글 프롬프트로 이미지 변형": "https://fantos-kolcontrl.hf.space",            
    "상품 사진 업로드+프롬프트로 배경을 합성": "https://aiqtech-producbrmg.hf.space",
    "텍스트로 이미지 생성: Accracy 모델": "https://ginipick-accdiffusion.hf.space",
    "텍스트로 이미지 생성: Playground 모델": "https://fantaxy-playground25.hf.space",
    "텍스트로 이미지 생성: AuraFlow 모델": "https://fantaxy-auroflow-v3.hf.space",  
    "EveryText: 모든 문자가 이미지 생성에 반영": "https://fantos-EveryText.hf.space",               
    "내 얼굴 사진으로 이미지 생성 I": "https://aiqtech-kofaceid.hf.space",
    "내 얼굴 사진으로 이미지 생성 II": "https://aiqtech-sdfacid.hf.space",
    "고해상도 이미지 생성 REALVISXL V5": "https://seawolf2357-REALVISXL-V5.hf.space",  
    
    "텍스트로 객체만 잘라내고 배경 투명화": "https://fantos-textcutobject.hf.space",        
    "비디오 인식 QnA 챗봇": "https://ginipick-vidiqa.hf.space",
    "이미지 스케일업(화질개선)": "https://ginipick-finegrain-image-enhancer.hf.space",
    "이미지 배경 제거": "https://ginipick-background-removal.hf.space",
    "비디오 배경 제거": "https://fantaxy-remove-video-background.hf.space",
    "텍스트 입력으로 음악 생성": "https://fantaxy-stable-audio-open-zero.hf.space",      

    "[서치+VisionLLM] 한국어 JinJavis": "https://fantos-jinjavis.hf.space",            
    "MS PHI 3.5 Vision": "https://aiqtech-phi35-vision.hf.space",
    "NSFW kAI": "https://fantaxy-ofai-kai.hf.space",
    "메타 LLAMA 3.1 405B": "https://seawolf2357-ofai-405.hf.space",
    "메타 LLAMA 3.1 70B": "https://fantaxy-ofai-70.hf.space",            
    "메타 LLAMA 3.1 8B": "https://seawolf2357-ofai-8.hf.space",
    "미스트랄 7B Instruct v0.3": "https://fantaxy-ofai-mis7b.hf.space",
    "MS Phi 3 mini 4k-instruct": "https://fantaxy-ofai-phi.hf.space",
    "중국 Yi 1.5 34B": "https://fantaxy-ofai-yi.hf.space",    
    "미스트랄 Mixtral 8X7B ": "https://fantaxy-ofai-8x7b.hf.space",
    "미스트랄 Nemo Instruct 2407": "https://seawolf2357-ofai-mistral-nemo.hf.space" ,    

    "전문 블로그 생성": "https://seawolf2357-ofai-jinjavis-blog.hf.space",
    "의학 전문 블로그 생성": "https://seawolf2357-ofai-jinjavis-blog-medi.hf.space",            
    "약리학 전문 블로그 생성": "https://seawolf2357-ofai-jinjavis-blog-pharm.hf.space" ,   

    "블로그 자동(컨펌/단수) 생성": "https://fantaxy-blogger-send-webhook-confirm-image.hf.space",
    "블로그 자동(무인/복수) 생성": "https://fantaxy-blogger-send-webhook-auto-image.hf.space" ,     

    "24X7 모니터링": "https://seawolf2357-bnews3.hf.space"    
}


if st.session_state.selected_item in content_map:
    iframe_url = content_map[st.session_state.selected_item]
    main_content.markdown(
        f'''
        <iframe src="{iframe_url}" 
                width="100%" 
                height="800" 
                frameborder="0" 
                allow="microphone *; camera *; fullscreen *; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen>
        </iframe>
        ''',
        unsafe_allow_html=True
    )
else:
    main_content.markdown("<h2>메뉴에서 항목을 선택하세요.</h2>")

# Add JavaScript for dynamic iframe resizing, microphone permission, and enhanced iframe communication
st.markdown("""
<script>
function resizeIframe() {
    var iframe = document.querySelector('iframe');
    if (iframe) {
        iframe.style.height = window.innerHeight + 'px';
    }
}

async function requestMicrophonePermission() {
    try {
        await navigator.mediaDevices.getUserMedia({ audio: true });
        console.log("Microphone permission granted");
    } catch (err) {
        console.error("Error requesting microphone permission:", err);
    }
}

function postMessageToIframe(message) {
    var iframe = document.querySelector('iframe');
    if (iframe) {
        iframe.contentWindow.postMessage(message, '*');
    }
}

window.addEventListener('message', function(event) {
    if (event.data === 'requestMicrophoneAccess') {
        requestMicrophonePermission();
    }
});

window.addEventListener('resize', resizeIframe);
resizeIframe();
requestMicrophonePermission();

// Attempt to enable microphone access after a short delay
setTimeout(() => {
    postMessageToIframe('enableMicrophone');
}, 2000);
</script>
""", unsafe_allow_html=True)