import gradio as gr
from interface_pages.home_page import home_page
from interface_pages.about_page import about_page
from interface_pages.yoga_position_from_stream import yoga_position_from_stream
from interface_pages.yoga_position_from_video import yoga_position_from_video
import time


def main(page):
    if page == "Home":
        return home_page()
    elif page == "About us":
        return about_page()
    elif page == "Yoga from stream":
        return yoga_position_from_stream()
    elif page == "Yoga from video":
        return yoga_position_from_video()


def interface():
    css_version = int(time.time())  # Use current timestamp as version

    theme = gr.themes.Soft(
        primary_hue="indigo",
        secondary_hue="blue",
        font=[gr.themes.GoogleFont("Roboto"), "sans-serif"],
    ).set(
        body_text_color="#303030",
        block_title_text_size="24px",
        block_label_text_size="20px",
        input_text_size="18px",
        button_large_text_size="20px",
        button_small_text_size="18px",
        checkbox_label_text_size="18px",
    )

    with gr.Blocks(theme=theme, css=f"static/styles.css?v={css_version}") as demo:
        # ASCII Logo at the top with inline gradient style
        ascii_logo = """
                 ___           ___           ___                 
                /\  \         /\__\         /\  \                
     ___       /::\  \       /:/ _/_       /::\  \       ___     
    /|  |     /:/\:\  \     /:/ /\  \     /:/\:\  \     /\__\    
   |:|  |    /:/  \:\  \   /:/ /::\  \   /:/ /::\  \   /:/__/    
   |:|  |   /:/__/ \:\__\ /:/__\/\:\__\ /:/_/:/\:\__\ /::\  \    
 __|:|__|   \:\  \ /:/  / \:\  \ /:/  / \:\/:/  \/__/ \/\:\  \__ 
/::::\  \    \:\  /:/  /   \:\  /:/  /   \::/__/       ~~\:\/\__\\
~~~~\:\  \    \:\/:/  /     \:\/:/  /     \:\  \          \::/  /
     \:\__\    \::/  /       \::/  /       \:\__\         /:/  / 
      \/__/     \/__/         \/__/         \/__/         \/__/  
        """
        gr.HTML(
            f"""
            <div class="ascii-logo-container" style="display: flex; justify-content: center; width: 100%;">
                <pre class="ascii-logo" style="
                    font-family: monospace;
                    font-size: 1.8em;
                    line-height: 1.2;
                    white-space: pre;
                    text-align: center;
                    background: linear-gradient(to right, #4f46e5, #3b82f6);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    display: inline-block;
                    margin-bottom: 20px;
                ">{ascii_logo}</pre>
            </div>
            """
        )

        # Layout with a Row to hold buttons and content
        with gr.Row():
            with gr.Column(scale=1, elem_classes=["menu-column"]):
                # Vertical Navigation Buttons
                home_button = gr.Button(
                    "Home", elem_classes=["menu-button", "large-font"]
                )
                about_button = gr.Button(
                    "About us", elem_classes=["menu-button", "large-font"]
                )
                yoga_stream_button = gr.Button(
                    "Yoga from stream", elem_classes=["menu-button", "large-font"]
                )
                yoga_video_button = gr.Button(
                    "Yoga from video", elem_classes=["menu-button", "large-font"]
                )

        # Create page contents
        with gr.Column(elem_id="page-content") as page_content:
            home_page_content = home_page()
            about_page_content = about_page()
            yoga_stream_content = yoga_position_from_stream()
            yoga_video_content = yoga_position_from_video()

        # Set initial visibility
        home_page_content.visible = True
        about_page_content.visible = False
        yoga_stream_content.visible = False
        yoga_video_content.visible = False

        # Button click handlers
        def show_page(page):
            return [
                gr.update(visible=(content == page))
                for content in [
                    home_page_content,
                    about_page_content,
                    yoga_stream_content,
                    yoga_video_content,
                ]
            ]

        home_button.click(
            lambda: show_page(home_page_content),
            outputs=[
                home_page_content,
                about_page_content,
                yoga_stream_content,
                yoga_video_content,
            ],
        )
        about_button.click(
            lambda: show_page(about_page_content),
            outputs=[
                home_page_content,
                about_page_content,
                yoga_stream_content,
                yoga_video_content,
            ],
        )
        yoga_stream_button.click(
            lambda: show_page(yoga_stream_content),
            outputs=[
                home_page_content,
                about_page_content,
                yoga_stream_content,
                yoga_video_content,
            ],
        )
        yoga_video_button.click(
            lambda: show_page(yoga_video_content),
            outputs=[
                home_page_content,
                about_page_content,
                yoga_stream_content,
                yoga_video_content,
            ],
        )

    return demo


if __name__ == "__main__":
    interface().launch()