{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard - TikiStats{% endblock %}

{% block nav_dashboard %}active{% endblock %}

{% block extra_head %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* ========================================
   VARIABLES GLOBALES
======================================== */
:root {
    --color-dark-bg: #1a1a1a;
    --color-card-bg: #242424;
    --color-card-hover: #2a2a2a;
    --color-green: #80da47;
    --color-light-green: #a8e380;
    --color-light: #e0e0e0;
    --color-muted: #9e9e9e;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-success: #4CAF50;
    --color-warning: #FFC107;
    --color-danger: #F44336;
}

/* ========================================
   TARJETAS GENERALES
======================================== */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(128, 218, 71, 0.2);
}

/* ========================================
   TARJETAS DE ESTADÍSTICAS
======================================== */
.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 1.5rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: scale(1.05);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(40%, -40%);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* ========================================
   TARJETAS DE GRUPOS
======================================== */
.group-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.group-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(128, 218, 71, 0.25);
    border-color: var(--color-green);
}

/* Grupo del usuario */
.group-card.user-group {
    border: 2px solid var(--color-green);
    box-shadow: 0 6px 20px rgba(128, 218, 71, 0.35);
    background: linear-gradient(180deg, #242424 0%, rgba(128, 218, 71, 0.05) 100%);
}

/* ========================================
   HEADER DEL GRUPO
======================================== */
.group-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
}

.group-header.user-group-header {
    background: linear-gradient(135deg, rgba(128, 218, 71, 0.2) 0%, rgba(128, 218, 71, 0.1) 100%);
    border-bottom: 1px solid var(--color-green);
}

.group-header h5 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

/* Badge "Tu grupo" */
.badge-user-group {
    background: var(--color-green);
    color: #1a1a1a;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* ========================================
   TABLA DE POSICIONES
======================================== */
.standings-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.standings-table thead {
    background: rgba(128, 218, 71, 0.08);
}

.standings-table thead th {
    color: var(--color-light-green);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 10px;
    border-bottom: 2px solid rgba(128, 218, 71, 0.2);
}

.standings-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.standings-table tbody tr:hover {
    background: rgba(128, 218, 71, 0.08);
}

.standings-table tbody tr:last-child {
    border-bottom: none;
}

/* Fila del equipo del usuario */
.user-team-row {
    background: linear-gradient(90deg, rgba(128, 218, 71, 0.15) 0%, rgba(128, 218, 71, 0.05) 100%);
    border-left: 3px solid var(--color-green) !important;
}

.user-team-row:hover {
    background: linear-gradient(90deg, rgba(128, 218, 71, 0.25) 0%, rgba(128, 218, 71, 0.1) 100%);
}

.standings-table tbody td {
    padding: 14px 10px;
    color: var(--color-light);
    font-size: 0.9rem;
}

/* ========================================
   ELEMENTOS DE LA TABLA
======================================== */

/* Badge de posición */
.position-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(128, 218, 71, 0.15);
    color: var(--color-green);
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid rgba(128, 218, 71, 0.3);
}

.user-team-row .position-badge {
    background: var(--color-green);
    color: #1a1a1a;
    border-color: var(--color-green);
}

/* Nombre del equipo */
.team-name {
    color: var(--color-light);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.4;
}

.user-team-row .team-name {
    color: var(--color-green);
    font-weight: 700;
}

/* Badge de clasificado */
.qualified-badge {
    background: linear-gradient(135deg, var(--color-success) 0%, #66BB6A 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Estadísticas numéricas */
.stat-cell {
    color: var(--color-light);
    font-weight: 500;
}

.stat-wins {
    color: var(--color-success);
    font-weight: 600;
}

.stat-draws {
    color: var(--color-warning);
    font-weight: 600;
}

.stat-losses {
    color: var(--color-danger);
    font-weight: 600;
}

/* Diferencia de goles */
.goal-diff-positive {
    color: var(--color-success);
    font-weight: 700;
}

.goal-diff-negative {
    color: var(--color-danger);
    font-weight: 700;
}

.goal-diff-neutral {
    color: var(--color-muted);
    font-weight: 500;
}

/* Puntos */
.points-cell {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-green);
}

.user-team-row .points-cell {
    color: var(--color-green);
    text-shadow: 0 0 10px rgba(128, 218, 71, 0.5);
}

/* ========================================
   FOOTER DEL GRUPO
======================================== */
.group-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--color-border);
    padding: 12px;
    text-align: center;
}

.group-footer small {
    color: var(--color-muted);
    font-size: 0.8rem;
}

/* ========================================
   LEYENDA
======================================== */
.legend-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.legend-card .card-body {
    padding: 12px 20px;
}

.legend-item {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.legend-item strong {
    color: var(--color-light);
}

/* ========================================
   UTILIDADES DE TEXTO
======================================== */
.text-green {
    color: var(--color-green) !important;
}

.text-light {
    color: var(--color-light) !important;
}

.text-light-green {
    color: var(--color-light-green) !important;
}

.text-muted-custom {
    color: var(--color-muted) !important;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
    .group-card {
        margin-bottom: 20px;
    }
    
    .standings-table {
        font-size: 0.85rem;
    }
    
    .standings-table thead th {
        padding: 10px 6px;
        font-size: 0.7rem;
    }
    
    .standings-table tbody td {
        padding: 12px 6px;
    }
    
    .team-name {
        font-size: 0.85rem;
    }
    
    .position-badge {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
}

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

.group-card {
    animation: fadeInUp 0.5s ease-out;
}

.group-card:nth-child(1) { animation-delay: 0.1s; }
.group-card:nth-child(2) { animation-delay: 0.2s; }
.group-card:nth-child(3) { animation-delay: 0.3s; }
.group-card:nth-child(4) { animation-delay: 0.4s; }

/* ========================================
   🔥 CLASES ADICIONALES PARA DEBUG
======================================== */

/* Colores de diferencia de goles */
.goal-diff-text-positive {
    color: #4CAF50 !important;
}

.goal-diff-text-negative {
    color: #F44336 !important;
}

.goal-diff-text-neutral {
    color: #9e9e9e !important;
}

/* Bordes condicionales para destacar equipos */
.debug-team-border-user {
    background: #1a1a1a;
    border-left: 3px solid #80da47;
    padding-left: 10px;
}

.debug-team-border-other {
    background: #1a1a1a;
    border-left: 3px solid #555;
    padding-left: 10px;
}

</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    
    {% if division_context %}
    
        <!-- ========================================
             SECCIÓN 1: Header de Competición Activa
        ======================================== -->
        {% if active_competition %}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-success">
                    <div class="card-header bg-success text-white">
                        <h4 class="mb-0">
                            <i class="fas fa-trophy"></i> 
                            {{ active_competition.name }}
                        </h4>
                        <small>
                            {{ active_competition.season }}
                            {% if active_competition.start_date and active_competition.end_date %}
                            | {{ active_competition.start_date|date:"d/m/Y" }} - {{ active_competition.end_date|date:"d/m/Y" }}
                            {% endif %}
                        </small>
                    </div>
                    <div class="card-body">
                        {% if division_context.competition_stage == 'groups' %}
                            <span class="badge bg-primary">Fase de Grupos</span>
                        {% elif division_context.competition_stage == 'playoffs' %}
                            <span class="badge bg-warning">Playoffs</span>
                        {% elif division_context.competition_stage == 'finished' %}
                            <span class="badge bg-secondary">Finalizada</span>
                        {% else %}
                            <span class="badge bg-info">En Curso</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- ========================================
             SECCIÓN 2: Fase de Grupos
        ======================================== -->
        {% if groups_data %}
        <div class="row mb-4">
            <div class="col-12">
                <h3 class="mb-4 text-light">
                    <i class="fas fa-users me-2"></i> Fase de Grupos
                </h3>
            </div>
        </div>

        <!-- ✅ AGREGAR justify-content-center AQUÍ -->
        <div class="row mb-4 justify-content-center" style="gap: 10rem;">
            {% for group_data in groups_data %}
            <div class="col-lg-6 col-xl-4 mb-4">
                <div class="group-card {% if group_data.user_team_in_group %}user-group{% endif %}">
                    
                    <!-- ========================================
                        HEADER DEL GRUPO
                    ======================================== -->
                    <div class="group-header {% if group_data.user_team_in_group %}user-group-header{% endif %}">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="{% if group_data.user_team_in_group %}text-green{% else %}text-light{% endif %}">
                                <i class="fas fa-layer-group me-2"></i>
                                {{ group_data.name }}
                            </h5>
                            {% if group_data.user_team_in_group %}
                            <span class="badge-user-group">
                                <i class="fas fa-check-circle me-1"></i>
                                Tu grupo
                            </span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- ========================================
                        TABLA DE POSICIONES
                    ======================================== -->
                    <div class="table-responsive">
                        <table class="standings-table">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 50px;">#</th>
                                    <th>Equipo</th>
                                    <th class="text-center" style="width: 45px;" title="Partidos Jugados">PJ</th>
                                    <th class="text-center" style="width: 40px;" title="Ganados">G</th>
                                    <th class="text-center" style="width: 40px;" title="Empatados">E</th>
                                    <th class="text-center" style="width: 40px;" title="Perdidos">P</th>
                                    <th class="text-center" style="width: 50px;" title="Diferencia de Goles">DG</th>
                                    <th class="text-center" style="width: 55px;" title="Puntos">Pts</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for standing in group_data.standings %}
                                <tr class="{% if team and standing.team.id == team.id %}user-team-row{% endif %}">
                                    
                                    <!-- POSICIÓN -->
                                    <td class="text-center">
                                        <span class="position-badge">
                                            {{ standing.position }}
                                        </span>
                                    </td>
                                    
                                    <!-- EQUIPO -->
                                    <td>
                                        <div class="team-name">
                                            {{ standing.team.name|truncatewords:4 }}
                                        </div>
                                        {% if standing.qualified %}
                                        <div class="mt-1">
                                            <span class="qualified-badge">
                                                <i class="fas fa-trophy"></i>
                                                Clasificado
                                            </span>
                                        </div>
                                        {% endif %}
                                    </td>
                                    
                                    <!-- PARTIDOS JUGADOS -->
                                    <td class="text-center stat-cell">
                                        {{ standing.matches_played }}
                                    </td>
                                    
                                    <!-- GANADOS -->
                                    <td class="text-center stat-wins">
                                        {{ standing.wins }}
                                    </td>
                                    
                                    <!-- EMPATADOS -->
                                    <td class="text-center stat-draws">
                                        {{ standing.draws }}
                                    </td>
                                    
                                    <!-- PERDIDOS -->
                                    <td class="text-center stat-losses">
                                        {{ standing.losses }}
                                    </td>
                                    
                                    <!-- DIFERENCIA DE GOLES -->
                                    <td class="text-center">
                                        <span class="{% if standing.goal_difference > 0 %}goal-diff-positive{% elif standing.goal_difference < 0 %}goal-diff-negative{% else %}goal-diff-neutral{% endif %}">
                                            {% if standing.goal_difference > 0 %}+{% endif %}{{ standing.goal_difference }}
                                        </span>
                                    </td>
                                    
                                    <!-- PUNTOS -->
                                    <td class="text-center points-cell">
                                        {{ standing.points }}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="8" class="text-center py-4" style="color: var(--color-muted);">
                                        <i class="fas fa-info-circle me-2"></i>
                                        No hay equipos en este grupo
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- ========================================
                        FOOTER DEL GRUPO
                    ======================================== -->
                    <div class="group-footer">
                        <small>
                            <i class="fas fa-info-circle me-1"></i>
                            {{ group_data.teams_count }} equipo{{ group_data.teams_count|pluralize }}
                        </small>
                    </div>
                    
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- ========================================
            LEYENDA
        ======================================== -->
        <div class="row mb-5">
            <div class="col-12">
                <div class="card legend-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-center align-items-center flex-wrap gap-4">
                            <span class="legend-item">
                                <strong>PJ:</strong> Partidos Jugados
                            </span>
                            <span class="legend-item">
                                <strong>G:</strong> Ganados
                            </span>
                            <span class="legend-item">
                                <strong>E:</strong> Empatados
                            </span>
                            <span class="legend-item">
                                <strong>P:</strong> Perdidos
                            </span>
                            <span class="legend-item">
                                <strong>DG:</strong> Diferencia de Goles
                            </span>
                            <span class="legend-item">
                                <strong>Pts:</strong> Puntos
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- ========================================
             SECCIÓN 3: Playoffs (si aplica)
        ======================================== 
        TODO: REVISAR ESTO, PARA ORGANIZARLO.-->
        {% if playoff_data %}
        <div class="row mb-4">
            <div class="col-12">
                <h3><i class="fas fa-sitemap"></i> Bracket de Playoffs</h3>
                <div class="alert alert-info">
                    Sistema de playoffs detectado. Visualización próximamente.
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- ========================================
             SECCIÓN 4: Partidos Recientes y Próximos
        ======================================== -->
        <div class="row mb-4">
            <!-- Partidos Recientes -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-history"></i> Últimos Partidos</h5>
                    </div>
                    <div class="card-body">
                        {% if division_context.recent_matches %}
                        <ul class="list-unstyled">
                            {% for match in division_context.recent_matches %}
                            <li class="mb-2">
                                <strong>{{ match.home_team_division.team.name }}</strong> 
                                {{ match.score_home }} - {{ match.score_away }} 
                                <strong>{{ match.away_team_division.team.name }}</strong>
                                <br>
                                <small class="text-muted">{{ match.date|date:"d/m/Y" }}</small>
                            </li>
                            {% endfor %}
                        </ul>
                        {% else %}
                        <p class="text-muted">No hay partidos recientes.</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            
        </div>

        <!-- ========================================
             SECCIÓN 5: Estadísticas Generales
        ======================================== -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card stat-card">
                    <div class="stat-number">{{ division_context.stats.total_teams }}</div>
                    <div class="stat-label">Equipos</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card stat-card">
                    <div class="stat-number">{{ division_context.stats.total_players }}</div>
                    <div class="stat-label">Jugadores</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card stat-card">
                    <div class="stat-number">{{ division_context.stats.matches_played }}</div>
                    <div class="stat-label">Partidos Jugados</div>
                </div>
            </div>
        </div>
        
    {% else %}
        <!-- ========================================
             MENSAJE: No hay división seleccionada
        ======================================== -->
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> 
            Selecciona una división para ver su información.
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Inicializar tooltips
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
{% endblock %}