"""Badge components for status and severity display."""

import gradio as gr


def StatusBadge(status: str, status_colors: dict | None = None) -> gr.HTML:
    """
    Render a colored status badge.

    Args:
        status: Status text (e.g., "open", "in_progress", "resolved")
        status_colors: Optional dict mapping status to colors
    """
    default_colors = {
        "open": "#ef4444",
        "in_progress": "#f59e0b",
        "in progress": "#f59e0b",
        "resolved": "#22c55e",
        "closed": "#6b7280",
    }
    colors = status_colors or default_colors
    color = colors.get(status.lower(), "#6b7280")

    html = f'''
    <span style="
        background-color: {color}20;
        color: {color};
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    ">{status}</span>
    '''
    return gr.HTML(html)


def SeverityBadge(severity: str) -> gr.HTML:
    """
    Render a severity badge (P1-P4).

    Args:
        severity: Severity level (e.g., "P1", "P2", "P3", "P4")
    """
    severity_colors = {
        "p1": "#dc2626",
        "p1 - critical": "#dc2626",
        "critical": "#dc2626",
        "p2": "#ea580c",
        "p2 - high": "#ea580c",
        "high": "#ea580c",
        "p3": "#ca8a04",
        "p3 - medium": "#ca8a04",
        "medium": "#ca8a04",
        "p4": "#6b7280",
        "p4 - low": "#6b7280",
        "low": "#6b7280",
    }
    color = severity_colors.get(severity.lower(), "#6b7280")

    html = f'''
    <span style="
        background-color: {color};
        color: white;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
    ">{severity.upper()}</span>
    '''
    return gr.HTML(html)