import gradio as gr
import os

URL_EDITOR = "https://selfit-camera-omni-image-editor.hf.space/?__theme=dark"
URL_VIDEO = "https://frameai4687-omni-video-factory.hf.space/?__theme=dark"

css = """
.gradio-container { 
    max-width: 100% !important; 
    padding: 0 !important; 
    background-color: #0b0f19 !important; 
}
#status-bar {
    background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
    color: #38bdf8;
    padding: 10px;
    font-weight: bold;
    border-bottom: 2px solid #38bdf8;
    text-align: center;
    font-size: 1em;
    /* รองรับพื้นที่ปลอดภัยสำหรับมือถือที่มีติ่งหน้าจอ */
    padding-top: env(safe-area-inset-top, 10px); 
}
iframe {
    width: 100%;
    height: 85vh;
    border: none;
}
/* ปรับแต่งสำหรับหน้าจอขนาดเล็ก (Mobile) */
@media (max-width: 768px) {
    #status-bar { font-size: 0.8em; }
    iframe { height: 80vh; }
    .tabs button { font-size: 0.7em !important; padding: 5px !important; }
}
"""

js_func = """
function() {
    const tabs = document.querySelectorAll('.tabs button');
    const statusBar = document.querySelector('#status-bar span');
    if(tabs && statusBar) {
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                statusBar.innerText = tab.innerText.toUpperCase();
            });
        });
    }
}
"""

with gr.Blocks(css=css, title="Omni Studio Pro", js=js_func) as demo:
    gr.HTML('<div id="status-bar">SYSTEM ACTIVE: <span>🎨 OMNI IMAGE EDITOR</span></div>')

    with gr.Tabs() as tabs:
        with gr.Tab("🎨 Omni Image Editor"):
            gr.HTML(f'<iframe src="{URL_EDITOR}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>')

        with gr.Tab("🎬 Omni Video Factory"):
            gr.HTML(f'<iframe src="{URL_VIDEO}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>')

if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", server_port=int(os.getenv("PORT", "7860")))