def get_chart_colors():
    # if is_dark_theme():
    #     return {
    #         "Private": "#60A5FA",  # accent-blue
    #         "Open source": "#A78BFA",  # accent-purple
    #         "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
    #         "text": "#FFFFFF",
    #         "background": "#1a1b1e",
    #         "grid": (1, 1, 1, 0.1),  # RGBA tuple for grid
    #     }
    return {
        "Private": "#593B1D",  # rich brown for API
        "Open source": "#FACC15",  # warm amber for OSS
        "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
        "text": "#111827",
        "background": "#FFFFFF",
        "grid": (0, 0, 0, 0.1),  # RGBA tuple for grid
    }


def get_rank_badge(rank):
    """Generate HTML for rank badge with appropriate styling"""
    tag_background = "#593B1D"
    tag_text_color = "#FFFFFF"
    badge_styles = {
        1: ("1st", tag_background, tag_text_color),
        2: ("2nd", tag_background, tag_text_color),
        3: ("3rd", tag_background, tag_text_color),
    }

    if rank in badge_styles:
        label, gradient, text_color = badge_styles[rank]
        return f"""
            <div style="
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 48px;
                padding: 4px 12px;
                background: {gradient};
                color: {text_color};
                border-radius: 6px;
                font-weight: 600;
                font-size: 0.9em;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            ">
                {label}
            </div>
        """
    return f"""
        <div style="
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            color: #a1a1aa;
            font-weight: 500;
        ">
            {rank}
        </div>
    """


def get_type_badge(model_type):
    """Generate HTML for model type badge"""
    colors = get_chart_colors()
    color_map = {
        "Open source": colors.get("Open source", "#FACC15"),
        "Proprietary": colors.get("Private", "#593B1D"),
        "Private": colors.get("Private", "#593B1D"),
    }
    label_map = {
        "Open source": "OSS",
        "Proprietary": "API",
        "Private": "API",
    }
    bg_color = color_map.get(model_type, "#593B1D")
    display_label = label_map.get(model_type, model_type)
    text_color = "#111827" if display_label == "OSS" else "#FFFFFF"
    return f"""
        <div style="
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            background: {bg_color};
            color: {text_color};
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: 500;
        ">
            {display_label}
        </div>
    """


def get_score_bar(score):
    """Generate HTML for score bar with gradient styling"""
    width = score * 100
    return f"""
        <div style="display: flex; align-items: center; gap: 12px; width: 100%;">
            <div style="
                flex-grow: 1;
                height: 8px;
                background: var(--score-bg, rgba(255, 255, 255, 0.1));
                border-radius: 4px;
                overflow: hidden;
                max-width: 200px;
            ">
                <div style="
                    width: {width}%;
                    height: 100%;
                    background: linear-gradient(90deg, var(--accent-blue, #60A5FA), var(--accent-purple, #A78BFA));
                    border-radius: 4px;
                    transition: width 0.3s ease;
                "></div>
            </div>
            <span style="
                font-family: 'SF Mono', monospace;
                font-weight: 600;
                color: var(--text-primary, #ffffff);
                min-width: 60px;
            ">{score:.3f}</span>
        </div>
    """


def get_output_type_badge(output_type):
    """Generate HTML for output type badges with different colors, supporting both light and dark themes"""
    type_styles = {
        "Normal": {
            "light": {"bg": "#F3F4F6", "color": "#374151"},
            "dark": {"bg": "#374151", "color": "#F3F4F6"},
        },
        "Reasoning": {
            "light": {"bg": "#DBEAFE", "color": "#1E40AF"},
            "dark": {"bg": "#1E40AF", "color": "#DBEAFE"},
        },
    }

    style = type_styles.get(output_type, type_styles["Normal"])
    return f"""
        <span style="
            background: var(--bg-color, {style['light']['bg']});
            color: var(--text-color, {style['light']['color']});
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 500;
        ">
            {output_type}
        </span>
    """