import gradio as gr
from i18n import get_text

def create_welcome_tab(initial_lang: str):
    """
    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-container"]):
            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():
                with gr.Column(scale=1):
                    welcome_chat_desc_md = gr.Markdown(f"### {get_text('tab_chat', initial_lang)}\n{get_text('welcome_chat_desc', initial_lang)}")
                with gr.Column(scale=1):
                    welcome_code_desc_md = gr.Markdown(f"### {get_text('tab_code', initial_lang)}\n{get_text('welcome_code_desc', initial_lang)}")
                with gr.Column(scale=1):
                    welcome_writer_desc_md = gr.Markdown(f"### {get_text('tab_writer', initial_lang)}\n{get_text('welcome_writer_desc', initial_lang)}")

            gr.Markdown("---")
            
            with gr.Row():
                welcome_lang_select_md = gr.Markdown(f"### {get_text('welcome_select_language', initial_lang)}")
            
            with gr.Row():
                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' } })); }"
            )

    # 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_md,
        "code_description": welcome_code_desc_md,
        "writer_description": welcome_writer_desc_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=f"### {get_text('tab_chat', lang)}\n{get_text('welcome_chat_desc', lang)}"),
        components["code_description"]: gr.update(value=f"### {get_text('tab_code', lang)}\n{get_text('welcome_code_desc', lang)}"),
        components["writer_description"]: gr.update(value=f"### {get_text('tab_writer', lang)}\n{get_text('welcome_writer_desc', lang)}"),
        components["lang_select_header"]: gr.update(value=f"### {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