import gradio as gr
import os

# --- CSS STYLING (Replicating the dark purple UI) ---
# We inject custom CSS to make it match your screenshot design.
custom_css = """
/* Overall App Background */
.gradio-container {
    background-color: #121212 !important;
    color: #E0E0E0 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header Section */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}
.header-logo {
    font-size: 1.5em;
    font-weight: bold;
    color: #FFC107; /* Yellow AMINA text */
}
.header-title {
    color: #E0E0E0;
    font-weight: 300;
}
.header-nav {
    display: flex;
    gap: 20px;
    color: #BDBDBD;
}
.header-nav a:hover {
    color: #BB86FC; /* Purple accent on hover */
}

/* Sidebar Styling */
.sidebar {
    background-color: #1e1e1e !important;
    padding: 20px !important;
    border-right: 1px solid #333;
}
.new-project-btn button {
    background-color: #BB86FC !important;
    color: black !important;
    border-radius: 8px !important;
    font-weight: bold;
}
.recent-projects-label {
    color: #757575;
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 0.9em;
}
.project-item {
    padding: 10px;
    border-radius: 5px;
    color: #E0E0E0;
    cursor: pointer;
}
.project-item:hover {
    background-color: #333;
}
.project-item.active {
    background-color: #212121;
    border-left: 3px solid #BB86FC;
}

/* Main Content Area */
.content-area {
    background-color: #121212 !important;
    padding: 30px !important;
}
.video-title {
    font-size: 1.8em;
    font-weight: bold;
    color: #E0E0E0;
    margin-bottom: 20px;
}

/* Video Display Box */
.video-box {
    background-color: #1e1e1e;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid #333;
}
.video-box .wrap {
    background-color: #000; /* Black background for video player */
}
.video-description {
    color: #BDBDBD;
    font-size: 0.95em;
    line-height: 1.5em;
    margin-top: 15px;
}

/* Prompt Input Box */
.prompt-box {
    background-color: #1e1e1e;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #333;
}
.prompt-box textarea {
    background-color: transparent !important;
    color: #E0E0E0 !important;
    border: none !important;
    font-size: 1.1em;
}
.prompt-box .label {
    display: none !important; /* Hide standard label */
}
.tag-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.tag-btn {
    background-color: #333 !important;
    color: #E0E0E0 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 5px 15px !important;
    font-size: 0.85em;
    cursor: pointer;
}
.tag-btn:hover {
    background-color: #444 !important;
}
.icon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    color: #BB86FC; /* Purple icon color */
}
.icon-row .left-icons, .icon-row .right-icons {
    display: flex;
    gap: 15px;
    font-size: 1.2em;
}
.icon-row svg {
    cursor: pointer;
}

"""

# --- GRADIO UI LAYOUT ---

with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
    
    # 1. Header Component (Custom HTML to match screenshot)
    gr.HTML("""
    <div class="main-header">
        <div class="header-logo"><span style="color: #FFC107;">AMINA</span><br>X STUDIO</div>
        <div class="header-nav">
            <a href="#">🏠 Home</a>
            <a href="#">📁 My Library</a>
            <a href="#">🧩 Template</a>
            <a href="#">💲 Pricing</a>
        </div>
        <div class="header-profile">
            <img src="https://api.dicebear.com/8.x/adventurer/svg?seed=Alexander" style="width:40px; height:40px; border-radius:50%;" alt="Avatar">
        </div>
    </div>
    """)
    
    with gr.Row(elem_classes="content-area"):
        
        # 2. Sidebar Component
        with gr.Column(scale=1, elem_classes="sidebar"):
            gr.Button("+ New Project", elem_classes="new-project-btn")
            gr.Markdown("Recent Project", elem_classes="recent-projects-label")
            
            # Project List Items (Clickable placeholders)
            gr.HTML('<div class="project-item active">Wonders of the Amazon</div>')
            gr.HTML('<div class="project-item">NBA Documentary</div>')
            gr.HTML('<div class="project-item">Kalvin and the Jungle...</div>')

        # 3. Main Content Component
        with gr.Column(scale=4):
            gr.Markdown("Wonders of the Amazon", elem_classes="video-title")
            
            # Video Player & Description Box
            with gr.Column(elem_classes="video-box"):
                gr.Video(value="https://videos.pexels.com/video-files/8543534/8543534-sd_540_960_25fps.mp4", label="Project Video")
                gr.Markdown("""
                    A slow, cinematic drone shot flying toward a massive, hidden waterfall deep within the Amazon rainforest. 
                    The waterfall plunges over 200 feet down a moss-covered cliff face, crashing into a turquoise pool below. 
                    Thick white mist rises from the base, catching golden sunlight. Surrounding the waterfall are ancient trees draped in 
                    vines, bromeliads, and bright pink and orange orchids. A rainbow forms in the spray. Scarlet macaws fly across 
                    the frame. Howler monkeys call in the distance. The camera slowly orbits around the waterfall, revealing the 
                    lush canopy stretching endlessly in all directions. Warm, humid atmosphere, golden hour lighting, 
                    photorealistic, 8K, BBC Planet Earth style,
                """, elem_classes="video-description")

            # Prompt Input Section
            with gr.Column(elem_classes="prompt-box"):
                gr.HTML("""
                    <div class="tag-buttons">
                        <button class="tag-btn">Unreal Landscape</button>
                        <button class="tag-btn">Cyberpunk Tokyo</button>
                        <button class="tag-btn">Animal/Wildlife</button>
                        <button class="tag-btn">Historical</button>
                    </div>
                """)
                # Actual Gradio Textbox, styled via CSS above
                gr.Textbox(placeholder="What video do you have in mind? AMINA can help you out", lines=1, show_label=False)
                
                # Bottom Icons (Placeholders for icons)
                gr.HTML("""
                    <div class="icon-row">
                        <div class="left-icons">
                            <span>🖼️</span>
                            <span style="font-weight:bold; font-size:1em;">📺 16:9</span>
                            <span>⬇️</span>
                            <span>✨</span>
                        </div>
                        <div class="right-icons">
                            <span>💾</span>
                            <span>⬆️</span>
                        </div>
                    </div>
                """)

# --- LAUNCH ---
if __name__ == "__main__":
    # Important: Share=True makes it accessible via public URL
    demo.launch(server_name="0.0.0.0", server_port=7860)