src/display_utils.py

from dataclasses import dataclass

from .about import Tasks


@dataclass(frozen=True)
class ColumnContent:
    name: str
    type: str
    displayed_by_default: bool
    hidden: bool = False


# Define leaderboard columns
@dataclass(frozen=True)
class LeaderboardColumn:
    model = ColumnContent("Model", "str", True)
    events = ColumnContent("Events", "number", True)
    average = ColumnContent("Average", "number", True)
    # Task-specific columns will be added dynamically

    # Additional model info (hidden by default)
    correct_predictions = ColumnContent("Correct Predictions", "number", False)


# Get column names for display
def get_display_columns():
    """Get list of column names for display"""
    base_cols = ["Rank", "Model", "Events", "Average"]
    task_cols = [task.value.col_name for task in Tasks]
    return base_cols + task_cols


def get_all_columns():
    """Get all column names including hidden ones"""
    base_cols = get_display_columns()
    hidden_cols = ["Correct Predictions"]
    return base_cols + hidden_cols


# Formatting helpers
def make_clickable_model(model_name):
    """Make model name clickable with link to HuggingFace"""
    if "/" in model_name:
        link = f"https://huggingface.co/{model_name}"
        return f'<a target="_blank" href="{link}" style="color: var(--link-text-color); text-decoration: underline;">{model_name}</a>'
    return model_name


def format_percentage(value):
    """Format accuracy as percentage"""
    if value is None or value == "N/A":
        return "N/A"
    try:
        return f"{float(value):.1f}%"
    except (ValueError, TypeError):
        return "N/A"


def has_valid_scores(df, required_columns):
    """Check if dataframe has valid scores for required columns"""
    return df[required_columns].notna().all(axis=1)


# CSS styling
CUSTOM_CSS = """
/* Global styling */
body {
    background: linear-gradient(135deg, #1e1e2f 0%, #2d2d44 100%) !important;
}

/* Add consistent margins and centering */
.gradio-container,
.container,
.main {
    margin: 0 auto !important;
    max-width: 1400px !important;
    padding: 0 60px !important;
}

.block {
    margin: 0 auto !important;
    max-width: 100% !important;
}

.markdown-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

/* Larger font for introduction text */
.section-card {
    font-size: 22px !important;
    line-height: 1.7 !important;
}

.section-card p {
    font-size: 22px !important;
    line-height: 1.7 !important;
}

.section-card .markdown-text {
    font-size: 22px !important;
    line-height: 1.7 !important;
}

/* Header styling */
#space-title {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    margin-bottom: 0.5rem !important;
}

.center-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0.25rem 0 0.5rem 0 !important;
}

.center-logo img {
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    object-fit: cover !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
    border: 3px solid rgba(255,255,255,0.1) !important;
}

/* Tab styling */
.tab-nav {
    margin: 1rem 0 !important;
    display: flex !important;
    justify-content: center !important;
}

.tab-buttons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.tab-buttons button {
    font-size: 22px !important;
    padding: 16px 32px !important;
    margin: 0 6px !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.tab-buttons button:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: translateY(-2px) !important;
}

.tab-buttons button.selected {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

/* Leaderboard table styling */
#leaderboard-table {
    margin: 20px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
}

#leaderboard-table table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

#leaderboard-table th {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: white !important;
    padding: 22px !important;
    font-weight: 600 !important;
    text-align: left !important;
    border: none !important;
    font-size: 16px !important;
}

#leaderboard-table td {
    padding: 20px 22px !important;
    border: none !important;
    font-size: 16px !important;
}

#leaderboard-table tr:nth-child(even) {
    background: rgba(255,255,255,0.05) !important;
}

#leaderboard-table tr:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    transform: scale(1.01) !important;
    transition: all 0.2s ease !important;
}

/* Rank column styling */
#leaderboard-table td:nth-child(1),
#leaderboard-table th:nth-child(1) {
    text-align: center !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Model column styling */
#leaderboard-table td:nth-child(2),
#leaderboard-table th:nth-child(2) {
    min-width: 180px !important;
    max-width: 300px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
}

/* Events column styling (numeric) */
#leaderboard-table td:nth-child(3),
#leaderboard-table th:nth-child(3) {
    text-align: center !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Average column styling (percentage) */
#leaderboard-table td:nth-child(4),
#leaderboard-table th:nth-child(4) {
    text-align: center !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #10b981 !important;
}

/* Task-specific columns (News, PolyMarket) - compact percentage columns */
#leaderboard-table td:nth-child(n+5),
#leaderboard-table th:nth-child(n+5) {
    text-align: center !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Dropdown styling */
.dropdown {
    margin: 20px 0 !important;
    width: 100% !important;
}

.dropdown select {
    background: rgba(255,255,255,0.1) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    color: white !important;
    font-size: 16px !important;
    width: 100% !important;
    max-width: 300px !important;
}

/* Button styling */
#refresh-button, .refresh-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

#refresh-button:hover, .refresh-btn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* Cards and sections */
.section-card {
    background: rgba(255,255,255,0.05) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin: 15px 0 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    max-width: 100% !important;
}

/* Metrics and stats */
.metric-highlight {
    color: #10b981 !important;
    font-weight: 600 !important;
}

.model-rank-1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.model-rank-2 {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db) !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.model-rank-3 {
    background: linear-gradient(135deg, #cd7c2f, #a16207) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* Performance badges */
.rank-badge {
    display: inline-block !important;
    padding: 4px 8px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-right: 8px !important;
}

.rank-1 .rank-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1f2937 !important;
}

.rank-2 .rank-badge {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db) !important;
    color: #1f2937 !important;
}

.rank-3 .rank-badge {
    background: linear-gradient(135deg, #cd7c2f, #a16207) !important;
    color: white !important;
}

/* Progress bars for accuracy */
.accuracy-bar {
    width: 100% !important;
    height: 6px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 3px !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}

.accuracy-progress {
    height: 100% !important;
    background: linear-gradient(90deg, #10b981, #059669) !important;
    border-radius: 3px !important;
    transition: width 0.8s ease !important;
}

/* Enhanced summary section */
.summary-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    margin: 20px 0 !important;
}

.stat-card {
    background: rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
}

.stat-card:hover {
    transform: translateY(-4px) !important;
}

.stat-value {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    color: #10b981 !important;
    margin-bottom: 8px !important;
}

.stat-label {
    font-size: 0.775rem !important;
    color: rgba(255,255,255,0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Better section headers */
.section-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 15px 0 !important;
    font-size: 1.675rem !important;
    font-weight: 600 !important;
}

.section-icon {
    font-size: 1.375rem !important;
}

/* Improved table styling */
#leaderboard-table tr:first-child td:first-child {
    position: relative !important;
}

#leaderboard-table tr:nth-child(1) {
    background: rgba(251, 191, 36, 0.1) !important;
}

#leaderboard-table tr:nth-child(2) {
    background: rgba(229, 231, 235, 0.1) !important;
}

#leaderboard-table tr:nth-child(3) {
    background: rgba(205, 124, 47, 0.1) !important;
}

/* Loading animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out !important;
}

/* Staggered animations */
.stagger-1 { animation-delay: 0.1s !important; }
.stagger-2 { animation-delay: 0.2s !important; }
.stagger-3 { animation-delay: 0.3s !important; }
.stagger-4 { animation-delay: 0.4s !important; }

/* Enhanced buttons */
.icon-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.icon-button::before {
    font-size: 1.0em !important;
}

/* Improved markdown styling */
.markdown-text h1 {
    color: #10b981 !important;
    border-bottom: 2px solid rgba(16, 185, 129, 0.3) !important;
    padding-bottom: 8px !important;
}

.markdown-text h2 {
    color: #6366f1 !important;
    margin-top: 2rem !important;
}

.markdown-text h3 {
    color: #8b5cf6 !important;
}

.markdown-text ul {
    padding-left: 20px !important;
}

.markdown-text li {
    margin: 8px 0 !important;
    list-style-type: none !important;
    position: relative !important;
}

.markdown-text li::before {
    content: "▸" !important;
    color: #10b981 !important;
    position: absolute !important;
    left: -16px !important;
    font-weight: bold !important;
}

/* Responsive design */
@media (max-width: 768px) {
    /* Adjust container margins for mobile */
    .gradio-container,
    .container,
    .main {
        padding: 0 30px !important;
    }

    #space-title {
        font-size: 2.375rem !important;
    }

    .center-logo img {
        width: 150px !important;
        height: 150px !important;
    }

    .tab-buttons button {
        font-size: 18px !important;
        padding: 14px 24px !important;
    }

    .summary-stats {
        grid-template-columns: 1fr !important;
    }

    .stat-value {
        font-size: 1.375rem !important;
    }

    /* Maintain readable font sizes on mobile */
    #leaderboard-table th {
        font-size: 14px !important;
        padding: 16px 12px !important;
    }

    #leaderboard-table td {
        font-size: 14px !important;
        padding: 16px 12px !important;
    }

    /* Adjust column widths for mobile */
    #leaderboard-table td:nth-child(1),
    #leaderboard-table th:nth-child(1) {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    #leaderboard-table td:nth-child(n+5),
    #leaderboard-table th:nth-child(n+5) {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }
}
"""