import gradio as gr
from apscheduler.schedulers.background import BackgroundScheduler
from src.css_html_js import custom_css
from src.envs import API, REPO_ID
from src.process_leaderboard_data import Leaderboard


def restart_space():
    API.restart_space(repo_id=REPO_ID)


demo = gr.Blocks(css=custom_css)
with demo:
    # Init class Leaderboard
    leaderboard = Leaderboard()

    # Custom CSS styling for tab-item components
    demo.css = """
    .tab-item {
        font-size: 10px;
        padding: 10px 20px;
    }
    """

    # Title and Description of the Leaderboard
    gr.HTML("""
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
    </style>
    <h1 style="text-align:center; font-family: 'Ubuntu', sans-serif; font-size: 48px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);">
        Open Voice Cloning Leaderboard
    </h1>
    <p style="text-align:center; font-size: 17px; width: 85%; margin: 0 auto;">
        Welcome to the <strong>Open Voice Cloning Leaderboard</strong> – an innovative platform for ranking voice cloning models, 
        offering precise evaluations of their performance. This leaderboard stands out for its detailed analysis of key audio features, 
        allowing users to not only assess the overall quality of a model but also gain a deeper understanding of how specific aspects of sound 
        influence the final outcome.
    </p>
    """)


    """
    ============
    Leaderboard
    ============
    """
    with gr.Tabs(elem_classes="tab-buttons") as tabs:
        with gr.TabItem("🏅 Leaderboard", elem_id="Leaderboard", id=0, elem_classes="tab-item"):

            '''
            ========
            Overall
            ========
            '''
            with gr.TabItem("Overall", elem_id="Overall", id=1, elem_classes="tab-item"):
                gr.Markdown(value="""
                ### Overall Leaderboard

                <div style="text-align: center;">
                    This 'Overall' leaderboard presents WavLM metric values across all datasets. 
                    It includes an 'Average' column for the overall score and 
                    dedicated columns displaying WavLM values for each dataset individually. 
                    Additionally, the leaderboard includes the LibriSpeech Test Clean dataset, 
                    which was used to evaluate the quality of generative models like Voicebox.
                </div>
                """)
                # Create and display leaderboard table
                leaderboard_dataframe = leaderboard.create_leaderboard_data('All', 'wavlm', 'emotion')
                leaderboard_table = gr.DataFrame(leaderboard_dataframe,
                                                 datatype= ["markdown" if col == "Model" else "str" for col in leaderboard_dataframe.columns],
                                                 interactive=False,
                )

            '''
            =========
            Emotions
            =========
            '''
            with gr.TabItem("Emotions", elem_id="Emotions", id=2, elem_classes="tab-item"):
                gr.Markdown(value="""
                ### Emotions Leadreboard

                <div style="text-align: center;">
                    This 'Emotions' leaderboard provides WavLM metric values with filtering options for both 'Emotion' and 'Dataset'. 
                    Selecting 'Emotion' generates a table with columns representing datasets, 
                    each showing the WavLM score for the chosen emotion. Alternatively, 
                    selecting 'Dataset' creates a table with columns representing emotions, 
                    displaying the WavLM score for each within the selected dataset.
                </div>
                """)

                # UI for selecting dataset and emotion options
                with gr.Row():
                    with gr.Column():
                        dataset = gr.Radio(
                                choices = leaderboard.get_emotional_dataset_list(),
                                value = None,
                                label = "Dataset",
                            )
                    with gr.Column(min_width=750):
                        emotion = gr.Radio(
                                choices = leaderboard.get_emotion_list(),
                                value = "Anger",
                                label = "Emotion",
                            )
                        
                # Create and display leaderboard table
                leaderboard_dataframe = leaderboard.create_leaderboard_data(emotion.value, 'wavlm', 'emotion')
                leaderboard_table = gr.DataFrame(leaderboard_dataframe,
                                                 datatype= ["markdown" if col == "Model" else "str" for col in leaderboard_dataframe.columns],
                                                 interactive=False,
                )

                # Update leaderboard table based on user selection changes in emotion or dataset options.
                dataset.change(leaderboard.update_leaderboard_data_in_emotion_section,
                    [dataset, gr.State('dataset'), leaderboard_table],
                    [emotion, leaderboard_table]
                )
                emotion.change(leaderboard.update_leaderboard_data_in_emotion_section,
                    [emotion, gr.State('emotion'), leaderboard_table],
                    [dataset, leaderboard_table]
                )


            '''
            =========
            Features
            =========
            '''
            with gr.TabItem("Features", elem_id="Features", id=3, elem_classes="tab-item"):
                gr.Markdown(value="""
                ### Features Leadreboard

                <div style="text-align: center;">
                    This 'Features' leaderboard provides filtering options similar to the 'Emotions' tab, 
                    with additional flexibility through a 'Feature' filter. Users can select 'Emotion' to generate a table 
                    with columns representing datasets, each displaying scores for the chosen emotion, 
                    or 'Dataset' to view columns for emotions within the selected dataset. 
                    The 'Feature' filter lets users select a specific feature for display, 
                    focusing this leaderboard on metrics other than WavLM
                </div>
                """)

                # UI for selecting dataset, emotion, and feature options
                with gr.Row():
                    with gr.Column():
                        dataset = gr.Radio(
                                choices = leaderboard.get_emotional_dataset_list(),
                                value = None,
                                elem_id = "dataset_features",
                                label = "Dataset",
                            )
                    with gr.Column(min_width=750):
                        emotion = gr.Radio(
                                choices = leaderboard.get_emotion_list(),
                                value = "Anger",
                                elem_id = "emotion_features",
                                label = "Emotion",
                            )
                with gr.Row():
                        hidden_columns = ['model', 'dataset', 'emotion', 'wavlm']
                        feature = gr.Radio(
                            choices = [kol for kol in list(leaderboard.get_models_performance_dataframe_column()) if kol not in hidden_columns],
                            value = "pitch",
                            label = "Feature",
                        )

                # Create and display leaderboard table
                leaderboard_dataframe = leaderboard.create_leaderboard_data(emotion.value, feature.value, 'emotion')
                leaderboard_table = gr.DataFrame(leaderboard_dataframe,
                                                 datatype= ["markdown" if col == "Model" else "str" for col in leaderboard_dataframe.columns],
                                                 interactive=False,
                )

                # Update leaderboard table based on user selection changes in emotion, dataset, or feature options.
                emotion.change(leaderboard.update_leaderboard_data_in_feature_section,
                    [emotion, feature, gr.State('emotion'), leaderboard_table],
                    [dataset, leaderboard_table]
                )
                dataset.change(leaderboard.update_leaderboard_data_in_feature_section,
                    [dataset, feature, gr.State('dataset'), leaderboard_table],
                    [emotion, leaderboard_table]
                )
                feature.change(leaderboard.update_leaderboard_data_by_feature,
                    [emotion, dataset, feature],
                    [leaderboard_table]
                )


        '''
        ======
        About
        ======
        '''
        with gr.TabItem("📝 About", elem_id="About", id=4):
            gr.Markdown('TO DO', elem_classes="markdown-text")


        '''
        =============
        Submit here!
        =============
        '''
        with gr.TabItem("🚀 Submit here! ", elem_id="Submit", id=5):
            with gr.Row():
                gr.Markdown(
                    """
                    <h1 style="text-align:center; font-size:2rem; margin-bottom:0.5rem;">
                        ✉️✨ <b>Submit Your Model Here!</b> ✨✉️
                    </h1>
                    <p style="text-align:center; font-size:1rem; margin-top:0; color:gray;">
                        Help us improve the leaderboard by submitting your voice cloning model.
                    </p>
                    """,
                    elem_classes="markdown-text"
                )
            with gr.Row():
                gr.Markdown(
                    """
                    <div style="background: linear-gradient(135deg, #007B83, #2E2E2E); padding:1.5rem; border-radius:10px; color:#EEEEEE; font-size:1rem; line-height:1.8;">
                        <h2>📌 <b>How to Submit Your Model:</b></h2>
                        <div style="margin-left:1rem;">
                            <p style="margin-bottom:1rem;">✉️ <b>Step 1:</b> Send an email to <b><a href="mailto:cloneval@csi.wmi.amu.edu.pl" style="color:#FFD369; text-decoration:none;" onmouseover="this.style.color='#FFF'" onmouseout="this.style.color='#FFD369'">cloneval@csi.wmi.amu.edu.pl</a></b>.</p>
                            <p style="margin-bottom:1rem;">🔗 <b>Step 2:</b> Include the link to your voice cloning model.</p>
                            <p style="margin-bottom:1rem;">🏆 <b>Step 3:</b> Once evaluated, your model will join the leaderboard.</p>
                        </div>
                        <p style="margin-top:1rem; font-style:italic; text-align:center;">Thanks for sharing your work with us and making this project even better!</p>
                    </div>
                    """
                )


scheduler = BackgroundScheduler()
scheduler.add_job(restart_space, "interval", seconds=1800)
scheduler.start()
demo.queue(default_concurrency_limit=40).launch()