import gradio as gr
from i18n import get_text

def create_welcome_tab(initial_lang: str, tabs: gr.Tabs):
    """
    Creates the UI components for the Welcome Tab.
    Returns a dictionary of all component handles that need dynamic updates.
    """
    with gr.TabItem(get_text("welcome_tab_title", initial_lang)) as welcome_tab:
        with gr.Column(elem_classes=["welcome-content"], scale=1):
            welcome_header_md = gr.Markdown(f"# {get_text('welcome_header', initial_lang)}")
            welcome_desc_md = gr.Markdown(get_text('welcome_description', initial_lang))
            with gr.Row(equal_height=True):
                welcome_chat_desc_btn = gr.Button(get_text('welcome_chat_desc', initial_lang))
                welcome_code_desc_btn = gr.Button(get_text('welcome_code_desc', initial_lang))
                welcome_writer_desc_btn = gr.Button(get_text('welcome_writer_desc', initial_lang))
            
            gr.Markdown(" ")
            welcome_model_links_header_md = gr.Markdown(get_text('welcome_model_links_header', initial_lang))

            with gr.Row(equal_height=True):    
                welcome_hf_link_md = gr.Markdown(get_text('welcome_hf_link', initial_lang), padding=True, container=True)
                welcome_hf_report_md = gr.Markdown(get_text('welcome_hf_report', initial_lang), padding=True, container=True)
                welcome_x_account_md = gr.Markdown(get_text('welcome_x_account', initial_lang), padding=True, container=True)
            
            gr.Markdown(" ")
            welcome_lang_select_md = gr.Markdown(get_text('welcome_select_language', initial_lang))
            
            with gr.Row():
                with gr.Column(elem_classes=["language-buttons"]):
                    en_button = gr.Button(get_text('lang_en', initial_lang))
                    zh_button = gr.Button(get_text('lang_zh', initial_lang))
        
        en_button.click(
            fn=None,
            inputs=[],
            js="() => { window.dispatchEvent(new CustomEvent('langChange.SpaceApp', { detail: { lang: 'en' } })); }"
        )
        zh_button.click(
            fn=None,
            inputs=[],
            js="() => { window.dispatchEvent(new CustomEvent('langChange.SpaceApp', { detail: { lang: 'zh' } })); }"
        )

        welcome_chat_desc_btn.click(
            fn=lambda: gr.Tabs(selected="chat"),
            inputs=[],
            outputs=[tabs]
        )

        welcome_code_desc_btn.click(
            fn=lambda: gr.Tabs(selected="code"),
            inputs=[],
            outputs=[tabs]
        )

        welcome_writer_desc_btn.click(
            fn=lambda: gr.Tabs(selected="writer"),
            inputs=[],
            outputs=[tabs]
        )

    # Return a dictionary for easier access in app.py
    components = {
        "tab": welcome_tab,
        "header": welcome_header_md,
        "description": welcome_desc_md,
        "chat_description": welcome_chat_desc_btn,
        "code_description": welcome_code_desc_btn,
        "writer_description": welcome_writer_desc_btn,
        "model_links_header": welcome_model_links_header_md,
        "hf_link": welcome_hf_link_md,
        "hf_report": welcome_hf_report_md,
        "x_account": welcome_x_account_md,
        "lang_select_header": welcome_lang_select_md,
        "en_button": en_button,
        "zh_button": zh_button
    }
    
    return components

def update_language(lang: str, components: dict):
    """
    Returns a dictionary mapping components to their gr.update calls.
    """
    updates = {
        components["tab"]: gr.update(label=get_text("welcome_tab_title", lang)),
        components["header"]: gr.update(value=f"# {get_text('welcome_header', lang)}"),
        components["description"]: gr.update(value=get_text('welcome_description', lang)),
        components["chat_description"]: gr.update(value=get_text('welcome_chat_desc', lang)),
        components["code_description"]: gr.update(value=get_text('welcome_code_desc', lang)),
        components["writer_description"]: gr.update(value=get_text('welcome_writer_desc', lang)),
        components["model_links_header"]: gr.update(value=get_text('welcome_model_links_header', lang)),
        components["hf_link"]: gr.update(value=get_text('welcome_hf_link', lang)),
        components["hf_report"]: gr.update(value=get_text('welcome_hf_report', lang)),
        components["x_account"]: gr.update(value=get_text('welcome_x_account', lang)),
        components["lang_select_header"]: gr.update(value=get_text('welcome_select_language', lang)),
        components["en_button"]: gr.update(value=get_text('lang_en', lang)),
        components["zh_button"]: gr.update(value=get_text('lang_zh', lang)),
    }
    return updates