ui/components.py

import gradio as gr
from core.utils.translations import translations


def get_custom_css():
    """Enhanced CSS with medical theme"""
    css = """
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

    * {
        font-family: 'Inter', sans-serif !important;
    }

    .gradio-container {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }


/* Prevent dropdown menus from being cut off */
.gradio-container, body {
    overflow: visible !important;
}

.gr-dropdown .wrap, .gr-dropdown .container {
    position: relative !important;
    z-index: 9999 !important;
}

/* Optional: Better dropdown style */
.gr-dropdown {
    min-height: 42px;
    font-size: 1rem;
}


    .button.example-scenario-btn {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-overflow: unset !important;
    max-width: 100% !important;
}

    
    .main-container {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 30px;
        margin: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .header-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 25px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    
    .query-container {
        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
        border-radius: 15px;
        padding: 20px;
        margin: 15px 0;
        border: 2px solid #667eea;
        transition: all 0.3s ease;
    }
    
    .response-container {
        background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
        border-radius: 15px;
        padding: 20px;
        margin: 15px 0;
        border: 2px solid #4CAF50;
        min-height: 300px;
    }
    
    .submit-btn {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 15px 30px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3) !important;
    }
    
    .submit-btn:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4) !important;
    }
    
    .stats-container {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        border-radius: 12px;
        padding: 15px;
        margin: 10px 0;
        border-left: 5px solid #2196F3;
        font-size: 14px;
    }

    .example-scenario-btn {
    white-space: normal !important;
    text-overflow: unset !important;
    overflow-wrap: break-word !important;
    font-size: 1rem;
    padding: 0.7rem 1rem;
    width: 100%;
    text-align: left;
    background-color: #f8f9fc;
    border: 1px solid #d0d7e2;
    border-radius: 8px;
    margin-bottom: 0.5rem;


    .button-radio input[type="radio"] {
    display: none;
}

.button-radio label {
    display: inline-block;
    padding: 10px 20px;
    margin: 6px 8px;
    border-radius: 999px;
    border: 2px solid #4098ff;
    background-color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.button-radio input[type="radio"]:checked + label {
    background-color: #4098ff;
    color: white;
    border-color: #1465c0;
}

}




   .quiz-container {
        background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
        border-radius: 20px;
        padding: 30px;
        margin: 20px 0;
        border: 2px solid #4CAF50;
        box-shadow: 0 15px 35px rgba(76, 175, 80, 0.15);
        transition: all 0.3s ease;
    }
    
    .quiz-container:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 45px rgba(76, 175, 80, 0.2);
    }
    
    .quiz-question {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 15px;
        padding: 20px;
        margin: 15px 0;
        border-left: 5px solid #667eea;
        font-size: 1.1em;
        font-weight: 600;
        color: #2c3e50;
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
    }
    
    .quiz-options {
        margin: 20px 0;
    }
    
    .quiz-option {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        border: 2px solid #e3f2fd;
        border-radius: 12px;
        padding: 15px 20px;
        margin: 10px 0;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
        color: #34495e;
        position: relative;
        overflow: hidden;
    }
    
    .quiz-option:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
        transition: left 0.5s;
    }
    
    .quiz-option:hover {
        border-color: #667eea;
        transform: translateX(5px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }
    
    .quiz-option:hover:before {
        left: 100%;
    }
    
    .quiz-option.selected {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #5a67d8;
        transform: translateX(8px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    
    .quiz-submit-btn {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 15px !important;
        padding: 18px 40px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin: 20px 0 !important;
        width: 100% !important;
        max-width: 300px !important;
    }
    
    .quiz-submit-btn:hover {
        transform: translateY(-3px) scale(1.02) !important;
        box-shadow: 0 12px 35px rgba(76, 175, 80, 0.4) !important;
        background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%) !important;
    }
    
    .quiz-submit-btn:active {
        transform: translateY(-1px) scale(0.98) !important;
    }
    
    .quiz-results {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        border-radius: 15px;
        padding: 25px;
        margin: 20px 0;
        border-left: 5px solid #f39c12;
        box-shadow: 0 10px 25px rgba(243, 156, 18, 0.15);
    }
    
    .quiz-result-item {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin: 15px 0;
        border-left: 4px solid #3498db;
        box-shadow: 0 5px 15px rgba(52, 152, 219, 0.1);
        transition: all 0.3s ease;
    }
    
    .quiz-result-item:hover {
        transform: translateX(5px);
        box-shadow: 0 8px 20px rgba(52, 152, 219, 0.15);
    }
    
    .quiz-result-correct {
        border-left-color: #27ae60 !important;
        background: linear-gradient(135deg, #d5f4e6 0%, #ffffff 100%) !important;
    }
    
    .quiz-result-incorrect {
        border-left-color: #e74c3c !important;
        background: linear-gradient(135deg, #ffeaea 0%, #ffffff 100%) !important;
    }
    
    .quiz-feedback {
        background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
        border-radius: 10px;
        padding: 15px;
        margin: 10px 0;
        border-left: 3px solid #27ae60;
        font-style: italic;
        color: #2d5a2d;
    }
    
    .quiz-header {
        text-align: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px;
        padding: 25px;
        margin: 20px 0;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    
    .quiz-header h2 {
        margin: 0;
        font-size: 2em;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .quiz-progress {
        background: #e3f2fd;
        border-radius: 10px;
        padding: 10px 20px;
        margin: 15px 0;
        text-align: center;
        font-weight: 600;
        color: #1976d2;
        border: 2px solid #bbdefb;
    }
    
    /* Animation for quiz generation */
    @keyframes quiz-fade-in {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .quiz-container {
        animation: quiz-fade-in 0.6s ease-out;
    }
    
    /* Responsive design for quiz components */
    @media (max-width: 768px) {
        .quiz-container {
            padding: 20px;
            margin: 10px;
        }
        
        .quiz-question {
            padding: 15px;
            font-size: 1rem;
        }
        
        .quiz-option {
            padding: 12px 15px;
            font-size: 0.9rem;
        }
        
        .quiz-submit-btn {
            padding: 15px 30px !important;
            font-size: 16px !important;
        }
        
        .quiz-header h2 {
            font-size: 1.5em;
        }
    }

        .quiz-block-container {
        max-height: none !important;
        overflow: visible !important;
    }

    .gradio-container {
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    html, body {
        scroll-behavior: smooth;
    }

    .quiz-result-output {
        margin-top: 2em;
    }

    /* Dark Mode Adjustments */
    @media (prefers-color-scheme: dark) {
        .main-container {
            background: rgba(40, 40, 40, 0.95);
            color: #e0e0e0;
            border: 1px solid rgba(70, 70, 70, 0.2);
        }
        .header-section {
            background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        .query-container {
            background: linear-gradient(135deg, #303030 0%, #252525 100%);
            border: 2px solid #555;
        }
        .response-container {
            background: linear-gradient(135deg, #252525 0%, #303030 100%);
            border: 2px solid #666;
        }
        .stats-container {
            background: linear-gradient(135deg, #353535 0%, #404040 100%);
            border-left: 5px solid #666;
        }
        .example-scenario-btn {
            background-color: #333;
            border: 1px solid #555;
            color: #e0e0e0;
        }
        .quiz-container {
            background: linear-gradient(135deg, #303030 0%, #252525 100%);
            border: 2px solid #666;
        }
        .quiz-question {
            background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
            border-left: 5px solid #666;
            color: #e0e0e0;
        }
        .quiz-option {
            background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
            border: 2px solid #444;
            color: #e0e0e0;
        }
        .quiz-option:hover {
            border-color: #888;
        }
        .quiz-option.selected {
            background: linear-gradient(135deg, #555 0%, #666 100%);
            border-color: #777;
        }
        .quiz-results {
            background: linear-gradient(135deg, #303030 0%, #252525 100%);
            border-left: 5px solid #888;
        }
        .quiz-result-item {
            background: #333;
            border-left: 4px solid #666;
            color: #e0e0e0;
        }
        .quiz-result-correct {
            border-left-color: #4CAF50 !important;
            background: linear-gradient(135deg, #2d4d2d 0%, #3a3a3a 100%) !important;
        }
        .quiz-result-incorrect {
            border-left-color: #e74c3c !important;
            background: linear-gradient(135deg, #4d2d2d 0%, #3a3a3a 100%) !important;
        }
        .quiz-feedback {
            background: linear-gradient(135deg, #3a3a3a 0%, #404040 100%);
            border-left: 3px solid #4CAF50;
            color: #a0a0a0;
        }
        .quiz-header {
            background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
        }
        .quiz-progress {
            background: #3a3a3a;
            border: 2px solid #555;
            color: #a0a0a0;
        }
    }


    .quiz-result-output {
    border: 1px solid #ccc;
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 10px;
    margin-top: 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Quiz question blocks */
.gr-markdown {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* Radio buttons */
.gr-radio {
    margin-bottom: 1.5rem;
}

/* Submit button spacing */
button {
    margin-top: 1rem;
}

/* Result highlights */
.quiz-result-output strong {
    color: #333;
}
.quiz-result-output .correct {
    color: green;
    font-weight: bold;
}
.quiz-result-output .incorrect {
    color: red;
    font-weight: bold;
}

/* Quiz summary at the top */
.quiz-result-output h2, .quiz-result-output h3 {
    margin-top: 1rem;
    color: #1e40af;
}



    .scenario-generator-container {
        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
        border-radius: 20px;
        padding: 30px;
        margin: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        border: 2px solid #667eea;
        transition: all 0.3s ease;
    }

    .scenario-generator-container:hover {
        transform: translateY(-2px);
        box-shadow: 0 25px 50px rgba(102, 126, 234, 0.15);
    }

    .scenario-generator-container .gr-textbox {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 12px;
        border: 2px solid #e3f2fd;
        padding: 15px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .scenario-generator-container .gr-textbox:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        transform: translateY(-1px);
    }

    .scenario-generator-container .gr-slider {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 12px;
        border: 2px solid #e3f2fd;
        padding: 15px;
        margin: 10px 0;
    }

    .scenario-generator-container .gr-button {
        border-radius: 12px;
        padding: 15px 30px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .scenario-generator-container .gr-button[variant="primary"] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
    }

    .scenario-generator-container .gr-button[variant="primary"]:hover {
        transform: translateY(-3px) scale(1.02) !important;
        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4) !important;
        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    }

    .scenario-generator-container .gr-label {
        font-weight: 600;
        color: #2c3e50;
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .scenario-generator-container .gr-markdown h3 {
        color: #2c3e50;
        font-size: 1.8em;
        font-weight: 700;
        margin-bottom: 1.5em;
        text-align: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .scenario-generator-container .gr-markdown {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 12px;
        padding: 15px;
        margin: 10px 0;
        border-left: 4px solid #667eea;
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Enhanced quiz styling within scenario generator */
    .scenario-generator-container .quiz-result-output {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        border-radius: 15px;
        padding: 25px;
        margin: 20px 0;
        border-left: 5px solid #f39c12;
        box-shadow: 0 10px 25px rgba(243, 156, 18, 0.15);
        font-size: 1.05rem;
        line-height: 1.6;
    }

    .scenario-generator-container .gr-radio {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 10px;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #e3f2fd;
    }

    /* Dark mode adjustments for scenario generator */
    @media (prefers-color-scheme: dark) {
        .scenario-generator-container {
            background: linear-gradient(135deg, #303030 0%, #252525 100%);
            color: #e0e0e0;
            border: 2px solid #555;
        }
        
        .scenario-generator-container .gr-textbox {
            background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
            border: 2px solid #444;
            color: #e0e0e0;
        }
        
        .scenario-generator-container .gr-textbox:focus {
            border-color: #888;
            box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.1);
        }
        
        .scenario-generator-container .gr-slider {
            background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
            border: 2px solid #444;
        }
        
        .scenario-generator-container .gr-label {
            color: #e0e0e0;
        }
        
        .scenario-generator-container .gr-markdown h3 {
            color: #e0e0e0;
            background: linear-gradient(135deg, #888 0%, #666 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .scenario-generator-container .gr-markdown {
            background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
            border-left: 4px solid #666;
            color: #e0e0e0;
        }
        
        .scenario-generator-container .gr-button[variant="primary"] {
            background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%) !important;
            color: #e0e0e0 !important;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
        }
        
        .scenario-generator-container .gr-button[variant="primary"]:hover {
            background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
        }
        
        .scenario-generator-container .quiz-result-output {
            background: linear-gradient(135deg, #303030 0%, #252525 100%);
            border-left: 5px solid #888;
            color: #e0e0e0;
        }
        
        .scenario-generator-container .gr-radio {
            background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
            border: 1px solid #444;
        }
    }


    """
    return css

def create_header_section(language="English"):
    from core.utils.translations import translations
    t = translations.get(language, translations["English"])
    
    return gr.HTML(f"""
    <div class="header-section">
        <h1 style="margin: 0; font-size: 2.5em; font-weight: 700;">
            {t['header_title']}
        </h1>
        <h2 style="margin: 10px 0 0 0; font-size: 1.2em; font-weight: 400; opacity: 0.9;">
            {t['header_subtitle']}
        </h2>
        <p style="margin: 15px 0 0 0; font-size: 1em; opacity: 0.8;">
            {t['header_description']}
        </p>
    </div>
    """)


def create_query_input_section(language="English"):
    from core.utils.translations import translations
    t = translations.get(language, translations["English"])

    with gr.Group(elem_classes=["query-container"]) as container:
        gr.Markdown(t["query_heading"])
        query_input = gr.Textbox(
            label=t["query_input_label"],
            placeholder=t["query_placeholder"],
            lines=4
        )
        
        with gr.Row():
            submit_btn = gr.Button(
                t["submit_btn"], 
                variant="primary",
                elem_classes=["submit-btn"],
                scale=3
            )
            clear_btn = gr.Button(
                t["clear_btn"], 
                variant="secondary",
                scale=1
            )

    return container, query_input, submit_btn, clear_btn



def create_response_output_section(language="English"):
    from core.utils.translations import translations
    t = translations.get(language, translations["English"])

    with gr.Group(elem_classes=["response-container"]) as container:
        gr.Markdown(t["response_heading"])

        response_output = gr.Textbox(
            label=t["response_label"],
            lines=15,
            interactive=False,
            placeholder=t["response_placeholder"]
        )
        
        with gr.Row():
            with gr.Column(scale=1):
                metadata_output = gr.Textbox(
                    label=t["metadata_label"],
                    lines=2,
                    interactive=False,
                    placeholder=t["metadata_placeholder"]
                )
            with gr.Column(scale=1):
                status_output = gr.Textbox(
                    label=t["safety_label"],
                    lines=2,
                    interactive=False,
                    placeholder=t["safety_placeholder"]
                )

    return container, response_output, metadata_output, status_output


def create_quick_access_section(language="English"):
    from core.utils.translations import translations
    t = translations.get(language, translations["English"])    

    return gr.Markdown(f"""
    ### ⚡ {t['quick_heading']}
    
    **🚀 {t['quick_performance']}:**
    - {t['quick_faiss']}
    - {t['quick_embedding']}
    - {t['quick_speed']}
    - {t['quick_context']}
    
    **📚 {t['quick_knowledge']}:**
    - {t['quick_who']}
    - {t['quick_icrc']}
    - {t['quick_msf']}
    - {t['quick_adaptations']}
    
    **🛡️ {t['quick_safety']}:**
    - {t['quick_factcheck']}
    - {t['quick_contraindications']}
    - {t['quick_resource_warnings']}
    - {t['quick_disclaimer']}
    """)


def create_example_scenarios(query_input, language="English"):
    from core.utils.translations import translations
    t = translations.get(language, translations["English"])     

    # Translate these if needed later
    example_queries = t.get("example_queries", [
        "How to treat severe burns when clean water is extremely limited?",
        "Managing gunshot wounds with only basic household supplies",
        "Recognizing and treating infection in wounds without antibiotics",
        "Emergency care for children during extended power outages",
        "Treating compound fractures without proper medical equipment"
    ])

    with gr.Column(elem_classes=["example-scenarios"]):
        gr.Markdown(f"### 💡 {t['example_heading']}\n[🧪 {t['example_hint']}](#)")
        
        for query in example_queries:
            # Use default arguments to avoid late binding bug
            def set_query(q=query):
                return q

            gr.Button(query, elem_classes=["example-scenario-btn"]).click(
                fn=set_query,
                outputs=[query_input]
            )

def create_scenario_component():
    with gr.Column(elem_classes=["scenario-container"]) as container:
        scenario_question = gr.Markdown("", elem_id="scenario-question")
        scenario_options = gr.Radio(choices=[], label="Choose your answer", interactive=True, elem_classes=["button-radio"], elem_id="scenario-options")
        scenario_feedback = gr.Markdown("", elem_id="scenario-feedback")
        scenario_next_button = gr.Button("Next Question", visible=False, elem_classes=["submit-btn"], elem_id="scenario-next-button")
        scenario_start_button = gr.Button("Start Scenario", visible=True, elem_classes=["submit-btn"], elem_id="scenario-start-button")
        scenario_query_input = gr.Textbox(label="Enter a medical query to generate a scenario", placeholder="e.g., choking baby", lines=2, elem_id="scenario-query-input")
        scenario_generate_button = gr.Button("Generate Scenario", elem_classes=["submit-btn"], elem_id="scenario-generate-button")
    return container, scenario_question, scenario_options, scenario_feedback, scenario_next_button, scenario_start_button, scenario_query_input, scenario_generate_button


import gradio as gr

def gradio_user_selector():
    """Gradio dropdown for user role selection"""
    return gr.Radio(choices=["🙋 Volunteer", "📋 Event Organizer"], label="Select your role", value="🙋 Volunteer", interactive=True, elem_classes=["button-radio"])


def gradio_sidebar_controls():
    """Gradio sidebar settings with language selector"""
    language_dropdown = gr.Radio(choices=["English", "Arabic"], label="🌐 Language", value="English", interactive=True, elem_classes=["button-radio"])
    return language_dropdown


def gradio_show_response(response: str, metadata: dict, safety: dict):
    """Gradio equivalent of Streamlit's show_response"""

    # Prepare the response content
    response_text = gr.Markdown(f"### AI Response\n{response}")

    # Prepare the metadata display
    confidence = metadata.get("confidence", 0)
    response_time = metadata.get("response_time", 0)
    metadata_text = f"### Metadata\n- Confidence: {confidence:.1%}\n- Response Time: {response_time}s"
    metadata_display = gr.Markdown(metadata_text)

    # Prepare the safety display
    safety_status = ""
    if safety.get("is_safe", False):
        safety_status += "✅ Safe Response\n"
    else:
        safety_status += "⚠️ Review Needed\n"

    if safety.get("warnings"):
        safety_status += "Warnings: " + ", ".join(safety["warnings"]) + "\n"
    if safety.get("issues"):
        safety_status += "Issues: " + ", ".join(safety["issues"]) + "\n"

    safety_display = gr.Markdown(f"### Safety Check\n{safety_status}")

    return response_text, metadata_display, safety_display