import gradio as gr

def create_comparison_tab(dog_breeds, get_dog_description):
    """创建品种比较标签页
    
    Args:
        dog_breeds: 狗品种列表
        get_dog_description: 获取品种描述的函数
    """
    with gr.TabItem("Breed Comparison"):
        gr.HTML("<p style='text-align: center;'>Select two dog breeds to compare their characteristics and care requirements.</p>")

        with gr.Row():
            breed1_dropdown = gr.Dropdown(
                choices=dog_breeds,
                label="Select First Breed",
                value="Golden_Retriever"
            )
            breed2_dropdown = gr.Dropdown(
                choices=dog_breeds,
                label="Select Second Breed",
                value="Border_Collie"
            )

        compare_btn = gr.Button("Compare Breeds")
        comparison_output = gr.HTML(label="Comparison Results")

        def show_comparison(breed1, breed2):
            if not breed1 or not breed2:
                return "Please select two breeds to compare"

            breed1_info = get_dog_description(breed1)
            breed2_info = get_dog_description(breed2)

            html_output = f"""
            <div class="dog-info-card">
                <div class="comparison-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div class="breed-info">
                        <h2 class="section-title">
                            <span class="icon">🐕</span> {breed1.replace('_', ' ')}
                        </h2>
                        <div class="info-section">
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">📏</span>
                                    <span class="label">Size:</span>
                                    <span class="value">{breed1_info['Size']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">🏃</span>
                                    <span class="label">Exercise Needs:</span>
                                    <span class="value">{breed1_info['Exercise Needs']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">✂️</span>
                                    <span class="label">Grooming:</span>
                                    <span class="value">{breed1_info['Grooming Needs']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">👨‍👩‍👧‍👦</span>
                                    <span class="label">Good with Children:</span>
                                    <span class="value">{breed1_info['Good with Children']}</span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="breed-info">
                        <h2 class="section-title">
                            <span class="icon">🐕</span> {breed2.replace('_', ' ')}
                        </h2>
                        <div class="info-section">
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">📏</span>
                                    <span class="label">Size:</span>
                                    <span class="value">{breed2_info['Size']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">🏃</span>
                                    <span class="label">Exercise Needs:</span>
                                    <span class="value">{breed2_info['Exercise Needs']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">✂️</span>
                                    <span class="label">Grooming:</span>
                                    <span class="value">{breed2_info['Grooming Needs']}</span>
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">👨‍👩‍👧‍👦</span>
                                    <span class="label">Good with Children:</span>
                                    <span class="value">{breed2_info['Good with Children']}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            """
            return html_output

        compare_btn.click(
            show_comparison,
            inputs=[breed1_dropdown, breed2_dropdown],
            outputs=comparison_output
        )

    return {
        'breed1_dropdown': breed1_dropdown,
        'breed2_dropdown': breed2_dropdown,
        'compare_btn': compare_btn,
        'comparison_output': comparison_output
    }