html_templates.py

from typing import Dict, List, Union, Any, Optional, Callable
from urllib.parse import quote

def get_akc_breeds_link(breed: str) -> str:
    """Generate AKC breed page URL with intelligent name handling."""
    breed_name = breed.lower()
    breed_name = breed_name.replace('_', '-')
    breed_name = breed_name.replace("'", '')
    breed_name = breed_name.replace(" ", '-')

    special_cases = {
        'mexican-hairless': 'xoloitzcuintli',
        'brabancon-griffon': 'brussels-griffon',
        'bull-mastiff': 'bullmastiff',
        'walker-hound': 'treeing-walker-coonhound'
    }

    breed_name = special_cases.get(breed_name, breed_name)
    return f"https://www.akc.org/dog-breeds/{breed_name}/"

def get_color_scheme(is_single_dog: bool) -> Union[str, List[str]]:
    """Get color scheme for dog detection visualization."""
    single_dog_color = '#34C759'  # 清爽的綠色作為單狗顏色
    color_list = [
        '#FF5733',  # 珊瑚紅
        '#28A745',  # 深綠色
        '#3357FF',  # 寶藍色
        '#FF33F5',  # 粉紫色
        '#FFB733',  # 橙黃色
        '#33FFF5',  # 青藍色
        '#A233FF',  # 紫色
        '#FF3333',  # 紅色
        '#33FFB7',  # 青綠色
        '#FFE033'   # 金黃色
    ]
    return single_dog_color if is_single_dog else color_list

def format_warning_html(message: str) -> str:
    """Format warning messages in a consistent style."""
    return f'''
        <div class="dog-info-card">
            <div class="breed-info">
                <p class="warning-message">
                    <span class="icon">⚠️</span>
                    {message}
                </p>
            </div>
        </div>
    '''
    

def format_error_message(color: str, index: int) -> str:
    """Format error message when confidence is too low."""
    return f'''
        <div class="dog-info-card" style="border-left: 8px solid {color};">
            <div class="dog-info-header" style="background-color: {color}10;">
                <span class="dog-label" style="color: {color};">Dog {index}</span>
            </div>
            <div class="breed-info">
                <div class="warning-message">
                    <span class="icon">⚠️</span>
                    The image is unclear or the breed is not in the dataset. Please upload a clearer image.
                </div>
            </div>
        </div>
    '''

def format_description_html(description: Dict[str, Any], breed: str) -> str:
    """Format basic breed description with tooltips."""
    if not isinstance(description, dict):
        return f"<p>{description}</p>"

    fields_order = [
        "Size", "Lifespan", "Temperament", "Exercise Needs",
        "Grooming Needs", "Care Level", "Good with Children",
        "Description"
    ]

    html_parts = []
    for field in fields_order:
        if field in description:
            value = description[field]
            tooltip_html = format_tooltip(field, value)
            html_parts.append(f'<li style="margin-bottom: 10px;">{tooltip_html}</li>')

    # Add any remaining fields
    for key, value in description.items():
        if key not in fields_order and key != "Breed":
            html_parts.append(f'<li style="margin-bottom: 10px;"><strong>{key}:</strong> {value}</li>')

    return f'<ul style="list-style-type: none; padding-left: 0;">{" ".join(html_parts)}</ul>'


def format_tooltip(key: str, value: str) -> str:
    """Format tooltip with content for each field."""
    tooltip_contents = {
        "Size": {
            "title": "Size Categories",
            "items": [
                "Small: Under 20 pounds",
                "Medium: 20-60 pounds",
                "Large: Over 60 pounds",
                "Giant: Over 100 pounds",
                "Varies: Depends on variety"
            ]
        },
        "Exercise Needs": {
            "title": "Exercise Needs",
            "items": [
                "Low: Short walks and play sessions",
                "Moderate: 1-2 hours of daily activity",
                "High: Extensive exercise (2+ hours/day)",
                "Very High: Constant activity and mental stimulation needed"
            ]
        },
        "Grooming Needs": {
            "title": "Grooming Requirements",
            "items": [
                "Low: Basic brushing, occasional baths",
                "Moderate: Weekly brushing, occasional grooming",
                "High: Daily brushing, frequent professional grooming needed",
                "Professional care recommended for all levels"
            ]
        },
        "Care Level": {
            "title": "Care Level Explained",
            "items": [
                "Low: Basic care and attention needed",
                "Moderate: Regular care and routine needed",
                "High: Significant time and attention needed",
                "Very High: Extensive care, training and attention required"
            ]
        },
        "Good with Children": {
            "title": "Child Compatibility",
            "items": [
                "Yes: Excellent with kids, patient and gentle",
                "Moderate: Good with older children",
                "No: Better suited for adult households"
            ]
        },
        "Lifespan": {
            "title": "Average Lifespan",
            "items": [
                "Short: 6-8 years",
                "Average: 10-15 years",
                "Long: 12-20 years",
                "Varies by size: Larger breeds typically have shorter lifespans"
            ]
        },
        "Temperament": {
            "title": "Temperament Guide",
            "items": [
                "Describes the dog's natural behavior and personality",
                "Important for matching with owner's lifestyle",
                "Can be influenced by training and socialization"
            ]
        }
    }

    tooltip = tooltip_contents.get(key, {"title": key, "items": []})
    tooltip_content = "<br>".join([f"• {item}" for item in tooltip["items"]])

    return f'''
        <span class="tooltip">
            <strong>{key}:</strong>
            <span class="tooltip-icon">ⓘ</span>
            <span class="tooltip-text">
                <strong>{tooltip["title"]}:</strong><br>
                {tooltip_content}
            </span>
        </span> {value}
    '''

def format_single_dog_result(breed: str, description: Dict[str, Any], color: str = "#34C759") -> str:
    """Format single dog detection result into HTML."""
    return f'''
        <div class="dog-info-card" style="border-left: 8px solid {color};">
            <div class="dog-info-header" style="background-color: {color}10;">
                <span class="dog-label" style="color: {color};">
                    <span class="icon">🐾</span> {breed}
                </span>
            </div>
            <div class="breed-info">
                <h2 class="section-title">
                    <span class="icon">📋</span> BASIC INFORMATION
                </h2>
                <div class="info-section">
                    <div class="info-item">
                        <span class="tooltip tooltip-left">
                            <span class="icon">📏</span>
                            <span class="label">Size:</span>
                            <span class="tooltip-icon">ⓘ</span>
                            <span class="tooltip-text">
                                <strong>Size Categories:</strong><br>
                                • Small: Under 20 pounds<br>
                                • Medium: 20-60 pounds<br>
                                • Large: Over 60 pounds<br>
                                • Giant: Over 100 pounds<br>
                                • Varies: Depends on variety
                            </span>
                        </span>
                        <span class="value">{description['Size']}</span>
                    </div>
                    <div class="info-item">
                        <span class="tooltip">
                            <span class="icon">⏳</span>
                            <span class="label">Lifespan:</span>
                            <span class="tooltip-icon">ⓘ</span>
                            <span class="tooltip-text">
                                <strong>Average Lifespan:</strong><br>
                                • Short: 6-8 years<br>
                                • Average: 10-15 years<br>
                                • Long: 12-20 years<br>
                                • Varies by size: Larger breeds typically have shorter lifespans
                            </span>
                        </span>
                        <span class="value">{description['Lifespan']}</span>
                    </div>
                </div>
                <h2 class="section-title">
                    <span class="icon">🐕</span> TEMPERAMENT & PERSONALITY
                </h2>
                <div class="temperament-section">
                    <span class="tooltip">
                        <span class="value">{description['Temperament']}</span>
                        <span class="tooltip-icon">ⓘ</span>
                        <span class="tooltip-text">
                            <strong>Temperament Guide:</strong><br>
                            • Describes the dog's natural behavior and personality<br>
                            • Important for matching with owner's lifestyle<br>
                            • Can be influenced by training and socialization
                        </span>
                    </span>
                </div>
                <h2 class="section-title">
                    <span class="icon">💪</span> CARE REQUIREMENTS
                </h2>
                <div class="care-section">
                    <div class="info-item">
                        <span class="tooltip tooltip-left">
                            <span class="icon">🏃</span>
                            <span class="label">Exercise:</span>
                            <span class="tooltip-icon">ⓘ</span>
                            <span class="tooltip-text">
                                <strong>Exercise Needs:</strong><br>
                                • Low: Short walks and play sessions<br>
                                • Moderate: 1-2 hours of daily activity<br>
                                • High: Extensive exercise (2+ hours/day)<br>
                                • Very High: Constant activity and mental stimulation needed
                            </span>
                        </span>
                        <span class="value">{description['Exercise Needs']}</span>
                    </div>
                    <div class="info-item">
                        <span class="tooltip">
                            <span class="icon">✂️</span>
                            <span class="label">Grooming:</span>
                            <span class="tooltip-icon">ⓘ</span>
                            <span class="tooltip-text">
                                <strong>Grooming Requirements:</strong><br>
                                • Low: Basic brushing, occasional baths<br>
                                • Moderate: Weekly brushing, occasional grooming<br>
                                • High: Daily brushing, frequent professional grooming needed<br>
                                • Professional care recommended for all levels
                            </span>
                        </span>
                        <span class="value">{description['Grooming Needs']}</span>
                    </div>
                    <div class="info-item">
                        <span class="tooltip">
                            <span class="icon">⭐</span>
                            <span class="label">Care Level:</span>
                            <span class="tooltip-icon">ⓘ</span>
                            <span class="tooltip-text">
                                <strong>Care Level Explained:</strong><br>
                                • Low: Basic care and attention needed<br>
                                • Moderate: Regular care and routine needed<br>
                                • High: Significant time and attention needed<br>
                                • Very High: Extensive care, training and attention required
                            </span>
                        </span>
                        <span class="value">{description['Care Level']}</span>
                    </div>
                </div>
                <h2 class="section-title">
                    <span class="icon">👨‍👩‍👧‍👦</span> FAMILY COMPATIBILITY
                </h2>
                <div class="family-section">
                    <div class="info-item">
                        <span class="tooltip">
                            <span class="icon"></span>
                            <span class="label">Good with Children:</span>
                            <span class="tooltip-icon">ⓘ</span>
                            <span class="tooltip-text">
                                <strong>Child Compatibility:</strong><br>
                                • Yes: Excellent with kids, patient and gentle<br>
                                • Moderate: Good with older children<br>
                                • No: Better suited for adult households
                            </span>
                        </span>
                        <span class="value">{description['Good with Children']}</span>
                    </div>
                </div>
                <h2 class="section-title">
                    <span class="icon">📝</span>
                    <span class="tooltip">
                        DESCRIPTION
                        <span class="tooltip-icon">ⓘ</span>
                        <span class="tooltip-text">
                            <strong>About This Description:</strong><br>
                            • Comprehensive breed overview<br>
                            • Personality and characteristics<br>
                            • Historical background<br>
                            • Typical behaviors and traits
                        </span>
                    </span>
                </h2>
                <div class="description-section">
                    <p>{description.get('Description', '')}</p>
                </div>
                <div class="action-section">
                    <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
                        <span class="icon">🌐</span>
                        Learn more about {breed} on AKC website
                    </a>
                </div>
            </div>
        </div>
    '''

def format_multiple_breeds_result(
    topk_breeds: List[str],
    relative_probs: List[str],
    color: str,
    index: int,
    get_dog_description: Callable
) -> str:
    """Format multiple breed predictions into HTML with complete information."""
    result = f'''
        <div class="dog-info-card" style="border-left: 8px solid {color};">
            <div class="dog-info-header" style="background-color: {color}10;">
                <span class="dog-label" style="color: {color};">Dog {index+1}</span>
            </div>
            <div class="breed-info">
                <div class="model-uncertainty-note">
                    <span class="icon">ℹ️</span>
                    Note: The model is showing some uncertainty in its predictions.
                    Here are the most likely breeds based on the available visual features.
                </div>
                <div class="breeds-list">
    '''

    for j, (breed, prob) in enumerate(zip(topk_breeds, relative_probs)):
        description = get_dog_description(breed)
        result += f'''
            <div class="breed-option uncertainty-mode">
                <div class="breed-header" style="background-color: {color}10;">
                    <span class="option-number">Option {j+1}</span>
                    <span class="breed-name">{breed}</span>
                    <span class="confidence-badge" style="background-color: {color}20; color: {color};">
                        Confidence: {prob}
                    </span>
                </div>
                <div class="breed-content">
                    <div class="breed-info">
                        <!-- BASIC INFORMATION -->
                        <h2 class="section-title">
                            <span class="icon">📋</span> BASIC INFORMATION
                        </h2>
                        <div class="info-section">
                            <div class="info-item">
                                <span class="tooltip tooltip-left">
                                    <span class="icon">📏</span>
                                    <span class="label">Size:</span>
                                    <span class="tooltip-icon">ⓘ</span>
                                    <span class="tooltip-text">
                                        <strong>Size Categories:</strong><br>
                                        • Small: Under 20 pounds<br>
                                        • Medium: 20-60 pounds<br>
                                        • Large: Over 60 pounds<br>
                                        • Giant: Over 100 pounds<br>
                                        • Varies: Depends on variety
                                    </span>
                                </span>
                                <span class="value">{description['Size']}</span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">⏳</span>
                                    <span class="label">Lifespan:</span>
                                    <span class="tooltip-icon">ⓘ</span>
                                    <span class="tooltip-text">
                                        <strong>Average Lifespan:</strong><br>
                                        • Short: 6-8 years<br>
                                        • Average: 10-15 years<br>
                                        • Long: 12-20 years<br>
                                        • Varies by size: Larger breeds typically have shorter lifespans
                                    </span>
                                </span>
                                <span class="value">{description['Lifespan']}</span>
                            </div>
                        </div>
                        <!-- TEMPERAMENT & PERSONALITY -->
                        <h2 class="section-title">
                            <span class="icon">🐕</span> TEMPERAMENT & PERSONALITY
                        </h2>
                        <div class="temperament-section">
                            <span class="tooltip">
                                <span class="value">{description['Temperament']}</span>
                                <span class="tooltip-icon">ⓘ</span>
                                <span class="tooltip-text">
                                    <strong>Temperament Guide:</strong><br>
                                    • Describes the dog's natural behavior and personality<br>
                                    • Important for matching with owner's lifestyle<br>
                                    • Can be influenced by training and socialization
                                </span>
                            </span>
                        </div>
                        <!-- CARE REQUIREMENTS -->
                        <h2 class="section-title">
                            <span class="icon">💪</span> CARE REQUIREMENTS
                        </h2>
                        <div class="care-section">
                            <div class="info-item">
                                <span class="tooltip tooltip-left">
                                    <span class="icon">🏃</span>
                                    <span class="label">Exercise:</span>
                                    <span class="tooltip-icon">ⓘ</span>
                                    <span class="tooltip-text">
                                        <strong>Exercise Needs:</strong><br>
                                        • Low: Short walks and play sessions<br>
                                        • Moderate: 1-2 hours of daily activity<br>
                                        • High: Extensive exercise (2+ hours/day)<br>
                                        • Very High: Constant activity and mental stimulation needed
                                    </span>
                                </span>
                                <span class="value">{description['Exercise Needs']}</span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">✂️</span>
                                    <span class="label">Grooming:</span>
                                    <span class="tooltip-icon">ⓘ</span>
                                    <span class="tooltip-text">
                                        <strong>Grooming Requirements:</strong><br>
                                        • Low: Basic brushing, occasional baths<br>
                                        • Moderate: Weekly brushing, occasional grooming<br>
                                        • High: Daily brushing, frequent professional grooming needed<br>
                                        • Professional care recommended for all levels
                                    </span>
                                </span>
                                <span class="value">{description['Grooming Needs']}</span>
                            </div>
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon">⭐</span>
                                    <span class="label">Care Level:</span>
                                    <span class="tooltip-icon">ⓘ</span>
                                    <span class="tooltip-text">
                                        <strong>Care Level Explained:</strong><br>
                                        • Low: Basic care and attention needed<br>
                                        • Moderate: Regular care and routine needed<br>
                                        • High: Significant time and attention needed<br>
                                        • Very High: Extensive care, training and attention required
                                    </span>
                                </span>
                                <span class="value">{description['Care Level']}</span>
                            </div>
                        </div>
                        <!-- FAMILY COMPATIBILITY -->
                        <h2 class="section-title">
                            <span class="icon">👨‍👩‍👧‍👦</span> FAMILY COMPATIBILITY
                        </h2>
                        <div class="family-section">
                            <div class="info-item">
                                <span class="tooltip">
                                    <span class="icon"></span>
                                    <span class="label">Good with Children:</span>
                                    <span class="tooltip-icon">ⓘ</span>
                                    <span class="tooltip-text">
                                        <strong>Child Compatibility:</strong><br>
                                        • Yes: Excellent with kids, patient and gentle<br>
                                        • Moderate: Good with older children<br>
                                        • No: Better suited for adult households
                                    </span>
                                </span>
                                <span class="value">{description['Good with Children']}</span>
                            </div>
                        </div>
                        <!-- DESCRIPTION -->
                        <h2 class="section-title">
                            <span class="icon">📝</span>
                            <span class="tooltip">
                                DESCRIPTION
                                <span class="tooltip-icon">ⓘ</span>
                                <span class="tooltip-text">
                                    <strong>About This Description:</strong><br>
                                    • Comprehensive breed overview<br>
                                    • Personality and characteristics<br>
                                    • Historical background<br>
                                    • Typical behaviors and traits
                                </span>
                            </span>
                        </h2>
                        <div class="description-section">
                            <p>{description.get('Description', '')}</p>
                        </div>
                        <!-- ACTION SECTION -->
                        <div class="action-section">
                            <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
                                <span class="icon">🌐</span>
                                Learn more about {breed} on AKC website
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        '''

    result += '</div></div></div>'
    return result


def format_multi_dog_container(dogs_info: str) -> str:
    """Wrap multiple dog detection results in a container."""
    return f"""
        <div class="dog-info-card">
            {dogs_info}
        </div>
    """

def format_breed_details_html(description: Dict[str, Any], breed: str) -> str:
    """Format breed details for the show_details_html function."""
    return f"""
    <div class="dog-info">
        <h2>{breed}</h2>
        <div class="breed-details">
            {format_description_html(description, breed)}
            <div class="action-section">
                <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
                    <span class="icon">🌐</span>
                    Learn more about {breed} on AKC website
                </a>
            </div>
        </div>
    </div>
    """

def format_comparison_result(breed1: str, breed2: str, comparison_data: Dict) -> str:
    """Format breed comparison results into HTML."""
    return f"""
    <div class="comparison-container">
        <div class="comparison-header">
            <h3>Comparison: {breed1} vs {breed2}</h3>
        </div>
        <div class="comparison-content">
            <div class="breed-column">
                <h4>{breed1}</h4>
                {format_comparison_details(comparison_data[breed1])}
            </div>
            <div class="breed-column">
                <h4>{breed2}</h4>
                {format_comparison_details(comparison_data[breed2])}
            </div>
        </div>
    </div>
    """

def format_comparison_details(breed_data: Dict) -> str:
    """Format individual breed details for comparison."""
    original_data = breed_data.get('Original_Data', {})
    return f"""
        <div class="comparison-details">
            <p><strong>Size:</strong> {original_data.get('Size', 'N/A')}</p>
            <p><strong>Exercise Needs:</strong> {original_data.get('Exercise Needs', 'N/A')}</p>
            <p><strong>Care Level:</strong> {original_data.get('Care Level', 'N/A')}</p>
            <p><strong>Grooming Needs:</strong> {original_data.get('Grooming Needs', 'N/A')}</p>
            <p><strong>Good with Children:</strong> {original_data.get('Good with Children', 'N/A')}</p>
            <p><strong>Temperament:</strong> {original_data.get('Temperament', 'N/A')}</p>
        </div>
    """

def format_header_html() -> str:
    """Format the application header HTML."""
    return """
    <header style='text-align: center; padding: 20px; margin-bottom: 20px;'>
        <h1 style='font-size: 2.5em; margin-bottom: 10px; color: #2D3748;'>
            🐾 PawMatch AI
        </h1>
        <h2 style='font-size: 1.2em; font-weight: normal; color: #4A5568; margin-top: 5px;'>
            Your Smart Dog Breed Guide
        </h2>
        <div style='width: 50px; height: 3px; background: linear-gradient(90deg, #4299e1, #48bb78); margin: 15px auto;'></div>
        <p style='color: #718096; font-size: 0.9em;'>
            Powered by AI • Breed Recognition • Smart Matching • Companion Guide
        </p>
    </header>
    """