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

{% block title %}{{ competition.name }} - TikiStats{% endblock %}

{% block extra_head %}
<style>
/* ========================================
   VARIABLES GLOBALES (Consistentes)
======================================== */
: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
======================================== */
.card {
    background: var(--color-card-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px;
    color: var(--color-light) !important;
}

.card-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 18px 20px;
    color: var(--color-light) !important;
}

.card-header h5 {
    color: var(--color-light-green) !important;
    margin: 0;
}

.card-body {
    background: var(--color-card-bg) !important;
    padding: 20px;
    color: var(--color-light) !important;
}

/* ========================================
   BREADCRUMB
======================================== */
.breadcrumb {
    background: rgba(128, 218, 71, 0.05);
    border: 1px solid rgba(128, 218, 71, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
}

.breadcrumb-item a {
    color: var(--color-green);
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
    color: var(--color-light-green);
}

.breadcrumb-item.active {
    color: var(--color-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-muted);
}

/* ========================================
   ESTADÍSTICAS (STAT CARDS)
======================================== */
.stat-number {
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-label {
    color: var(--color-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ========================================
   TABS (NAVEGACIÓN)
======================================== */
.nav-tabs {
    border-bottom: 2px solid var(--color-border);
}

.nav-tabs .nav-link {
    background: transparent;
    border: none;
    color: var(--color-muted);
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--color-light-green);
    border-bottom-color: rgba(128, 218, 71, 0.3);
}

.nav-tabs .nav-link.active {
    color: var(--color-green);
    background: transparent;
    border-bottom-color: var(--color-green);
}

/* ========================================
   TABLA DE PARTIDOS
======================================== */
.table-responsive {
    background: var(--color-card-bg) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.table {
    background: var(--color-card-bg) !important;
    color: var(--color-light) !important;
    margin-bottom: 0;
}

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

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

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

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

.table tbody td,
.table tbody th {
    padding: 16px 12px;
    vertical-align: middle;
    border-top: none !important;
    background-color: transparent !important;
    color: var(--color-light) !important;
}

/* Filas destacadas (equipo del usuario) */
.table tbody tr[style*="background: rgba(128, 218, 71, 0.1)"] {
    background: linear-gradient(90deg, rgba(128, 218, 71, 0.15) 0%, rgba(128, 218, 71, 0.05) 100%) !important;
    border-left: 3px solid var(--color-green) !important;
}

/* ========================================
   BADGES Y RESULTADOS
======================================== */
.badge {
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
}

.badge.bg-secondary {
    background: rgba(158, 158, 158, 0.2) !important;
    color: var(--color-muted) !important;
}

/* Badge de resultado (cuando existe score) */
span.badge[style*="background: rgba(128, 218, 71, 0.2)"] {
    background: rgba(128, 218, 71, 0.2) !important;
    color: var(--color-green) !important;
    border: 2px solid rgba(128, 218, 71, 0.3);
    font-weight: 700;
}

/* ========================================
   BOTONES
======================================== */
.btn-outline-primary {
    background: rgba(128, 218, 71, 0.1);
    color: var(--color-green);
    border: 1px solid rgba(128, 218, 71, 0.3);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: var(--color-green);
    color: #1a1a1a;
    border-color: var(--color-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(128, 218, 71, 0.3);
}

/* ========================================
   TEXTOS Y COLORES
======================================== */
.text-muted {
    color: var(--color-muted) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-light);
}

p {
    color: var(--color-light);
}

strong {
    color: var(--color-light);
}

small {
    color: var(--color-muted);
}

/* Destacar equipo del usuario */
strong[style*="color: var(--color-green)"] {
    font-weight: 700;
}

/* ========================================
   ELIMINAR FONDOS BLANCOS DE BOOTSTRAP
======================================== */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

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

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: transparent !important;
}

/* ========================================
   TAB CONTENT
======================================== */
.tab-content {
    background: transparent;
}

.tab-pane {
    background: transparent;
}

/* ========================================
   FASE DE GRUPOS - TABLA PEQUEÑA
======================================== */
.table-sm thead th {
    background-color: rgba(128, 218, 71, 0.08) !important;
    color: var(--color-light-green) !important;
    padding: 10px 8px;
}

.table-sm tbody td {
    background-color: transparent !important;
    color: var(--color-light) !important;
    padding: 10px 8px;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
    .card-body {
        padding: 15px;
    }
    
    .table {
        font-size: 0.85rem;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
}

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

.card {
    animation: fadeIn 0.3s ease-out;
}

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

/* ========================================
   SCROLLBAR PERSONALIZADO
======================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-green) var(--color-card-bg);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-card-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-green);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-green);
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    
    <!-- Header con Breadcrumb -->
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{% url 'dashboard:dashboard' %}">
                            <i class="fas fa-home"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{% url 'dashboard:competitions_list' %}">
                            <i class="fas fa-trophy"></i> Competiciones
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ competition.name }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>
    
    <!-- Título y Info Básica -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="mb-2" style="color: var(--color-green);">
                                <i class="fas fa-trophy me-2"></i>
                                {{ competition.name }}
                            </h1>
                            <p class="text-muted mb-0">
                                <i class="fas fa-layer-group me-2"></i>
                                {{ competition.division.name }}
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            {% if competition.start_date or competition.end_date %}
                            <div class="mb-2">
                                <small class="text-muted">
                                    <i class="fas fa-calendar me-1"></i>
                                    {% if competition.start_date %}
                                        {{ competition.start_date|date:"d/m/Y" }}
                                    {% endif %}
                                    {% if competition.start_date and competition.end_date %}
                                        -
                                    {% endif %}
                                    {% if competition.end_date %}
                                        {{ competition.end_date|date:"d/m/Y" }}
                                    {% endif %}
                                </small>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Estadísticas del Equipo en la Competición -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="stat-number" style="font-size: 2.5rem; color: var(--color-green);">
                        {{ stats.played_matches }}
                    </div>
                    <div class="stat-label">Partidos Jugados</div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 mb-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="stat-number" style="font-size: 2.5rem; color: #4CAF50;">
                        {{ stats.wins }}
                    </div>
                    <div class="stat-label">Victorias</div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 mb-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="stat-number" style="font-size: 2.5rem; color: #FFC107;">
                        {{ stats.draws }}
                    </div>
                    <div class="stat-label">Empates</div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3 mb-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="stat-number" style="font-size: 2.5rem; color: #F44336;">
                        {{ stats.losses }}
                    </div>
                    <div class="stat-label">Derrotas</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Más Estadísticas -->
    <div class="row mb-4">
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted mb-2">Goles a Favor</h6>
                    <div style="font-size: 2rem; color: var(--color-green);">
                        {{ stats.goals_for }}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted mb-2">Goles en Contra</h6>
                    <div style="font-size: 2rem; color: #F44336;">
                        {{ stats.goals_against }}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted mb-2">Diferencia de Goles</h6>
                    {% if stats.goal_difference > 0 %}
                        <div style="font-size: 2rem; color: var(--color-green);">
                            +{{ stats.goal_difference }}
                        </div>
                    {% elif stats.goal_difference < 0 %}
                        <div style="font-size: 2rem; color: #F44336;">
                            {{ stats.goal_difference }}
                        </div>
                    {% else %}
                        <div style="font-size: 2rem; color: #FFC107;">
                            {{ stats.goal_difference }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Tabs: Partidos / Fase de Grupos / Playoffs -->
    <div class="row">
        <div class="col-12">
            <ul class="nav nav-tabs mb-4" id="competitionTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="matches-tab" data-bs-toggle="tab" data-bs-target="#matches" type="button" role="tab">
                        <i class="fas fa-futbol me-2"></i> Partidos
                    </button>
                </li>
                
                {% if groups_data %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="groups-tab" data-bs-toggle="tab" data-bs-target="#groups" type="button" role="tab">
                        <i class="fas fa-users me-2"></i> Fase de Grupos
                    </button>
                </li>
                {% endif %}
                
                {% if playoff_data %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="playoffs-tab" data-bs-toggle="tab" data-bs-target="#playoffs" type="button" role="tab">
                        <i class="fas fa-trophy me-2"></i> Playoffs
                    </button>
                </li>
                {% endif %}
            </ul>
            
            <div class="tab-content" id="competitionTabsContent">
                
                <!-- TAB 1: Partidos -->
                <div class="tab-pane fade show active" id="matches" role="tabpanel">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Todos los Partidos</h5>
                        </div>
                        <div class="card-body">
                            {% if all_matches %}
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Fecha</th>
                                            <th>Local</th>
                                            <th class="text-center">Resultado</th>
                                            <th>Visitante</th>
                                            <th class="text-center">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for match in all_matches %}
                                        <tr>
                                            <td>
                                                <small class="text-muted">
                                                    {{ match.date|date:"d/m/Y" }}
                                                </small>
                                            </td>
                                            <td>
                                                <strong {% if match.home_team_division == team_division %}style="color: var(--color-green);"{% endif %}>
                                                    {{ match.home_team_division.team.name }}
                                                </strong>
                                            </td>
                                            <td class="text-center">
                                                {% if match.score_home is not None %}
                                                    <span class="badge" style="background: rgba(128, 218, 71, 0.2); color: var(--color-green); font-size: 1rem; padding: 8px 15px;">
                                                        {{ match.score_home }} - {{ match.score_away }}
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-secondary">
                                                        Por jugar
                                                    </span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <strong {% if match.away_team_division == team_division %}style="color: var(--color-green);"{% endif %}>
                                                    {{ match.away_team_division.team.name }}
                                                </strong>
                                            </td>
                                            <td class="text-center">
                                                <a href="{% url 'dashboard:match_detail' match_id=match.id %}" class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i> Ver
                                                </a>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <p class="text-center text-muted">No hay partidos registrados</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- TAB 2: Fase de Grupos -->
                {% if groups_data %}
                <div class="tab-pane fade" id="groups" role="tabpanel">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Fase de Grupos</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {% for group in groups_data %}
                                <div class="col-md-6 mb-4">
                                    <h6 class="mb-3" style="color: var(--color-green);">
                                        <i class="fas fa-users me-2"></i>
                                        {{ group.name }}
                                    </h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Pos</th>
                                                    <th>Equipo</th>
                                                    <th class="text-center">PJ</th>
                                                    <th class="text-center">Pts</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for standing in group.standings %}
                                                <tr {% if standing.team.id == team.id %}style="background: rgba(128, 218, 71, 0.1);"{% endif %}>
                                                    <td><strong>{{ standing.position }}</strong></td>
                                                    <td>{{ standing.team.name }}</td>
                                                    <td class="text-center">{{ standing.matches_played }}</td>
                                                    <td class="text-center"><strong>{{ standing.points }}</strong></td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                {% endfor %} 
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- TAB 3: Playoffs -->
                {% if playoff_data %}
                <div class="tab-pane fade" id="playoffs" role="tabpanel">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Playoffs</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted text-center">
                                <i class="fas fa-trophy"></i>
                                Bracket de playoffs disponible
                            </p>
                        </div>
                    </div>
                </div>
                {% endif %}
                
            </div>
        </div>
    </div>
    
</div>
{% endblock %}