{% extends "layouts/base.html" %}
{% load static i18n %}

{% block title %}{{ season.name }} - {% trans "Battle Pass Manager" %}{% endblock %}

{% block extrastyle %}
<style>
.manager-bg { 
    background: radial-gradient(ellipse at center, #0f172a 0%, #1a1a2e 50%, #0f0f1e 100%); 
    min-height: 100vh; 
    padding: 40px 0; 
    position: relative;
}
.manager-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(111, 66, 193, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(13, 202, 240, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.card-glow { 
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.95) 0%, rgba(18, 18, 32, 0.95) 100%); 
    border: 1px solid rgba(111, 66, 193, 0.3); 
    border-radius: 16px; 
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(111, 66, 193, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.level-card { 
    border: 1px solid rgba(111, 66, 193, 0.2); 
    border-radius: 12px; 
    padding: 20px; 
    margin-bottom: 20px; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.6) 0%, rgba(18, 18, 32, 0.6) 100%);
    position: relative;
    overflow: hidden;
}
.level-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}
.level-card:hover::before {
    width: 100%;
    opacity: 0.05;
}
.level-card:hover { 
    border-color: rgba(111, 66, 193, 0.6); 
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.8) 0%, rgba(18, 18, 32, 0.8) 100%);
    transform: translateX(5px);
    box-shadow: 0 8px 24px rgba(111, 66, 193, 0.2);
}

.level-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.level-number {
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.xp-badge {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.2) 0%, rgba(13, 202, 240, 0.1) 100%);
    border: 1px solid rgba(13, 202, 240, 0.3);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #0dcaf0;
    font-weight: 600;
}

.reward-list {
    margin-top: 16px;
    padding-left: 24px;
    border-left: 2px solid rgba(111, 66, 193, 0.3);
    position: relative;
}

.reward-item {
    background: rgba(111, 66, 193, 0.05);
    border: 1px solid rgba(111, 66, 193, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reward-item:hover {
    background: rgba(111, 66, 193, 0.1);
    border-color: rgba(111, 66, 193, 0.4);
    transform: translateX(5px);
}

.reward-badge { 
    padding: 4px 10px; 
    border-radius: 6px; 
    font-size: 0.75rem; 
    margin-left: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
} 
.reward-premium { 
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
} 
.reward-free { 
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.empty-rewards {
    background: rgba(245, 158, 11, 0.05);
    border: 1px dashed rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 16px;
    color: rgba(245, 158, 11, 0.8);
    font-size: 0.9rem;
}

.btn-group .btn {
    border-radius: 8px !important;
    margin: 0 2px;
}

.page-header h2 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #a8b4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-solid-white {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border: none !important;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}
.btn-solid-white:hover {
    background: #f8f9fa !important;
    color: #1a1a2e !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}
.btn-solid-white:focus {
    background: #ffffff !important;
    color: #1a1a2e !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
</style>
{% endblock %}

{% block content %}
<div class="manager-bg">
    <div class="container">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-5">
            <div class="page-header mb-3 mb-md-0">
                <h2 class="mb-2">
                    <i class="bi bi-trophy-fill text-warning me-2"></i>
                    {{ season.name }}
                </h2>
                <p class="text-white-50 mb-0">
                    <i class="bi bi-calendar-event me-1"></i>
                    {% trans "De" %} {{ season.start_date|date:"d/m/Y H:i" }} 
                    {% trans "até" %} {{ season.end_date|date:"d/m/Y H:i" }}
                    {% if season.is_active %}
                    <span class="badge bg-success ms-2">
                        <i class="bi bi-check-circle me-1"></i>{% trans "Ativa" %}
                    </span>
                    {% else %}
                    <span class="badge bg-secondary ms-2">
                        <i class="bi bi-x-circle me-1"></i>{% trans "Inativa" %}
                    </span>
                    {% endif %}
                </p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{% url 'games:battle_pass_manager' %}" class="btn btn-solid-white">
                    <i class="bi bi-arrow-left me-2"></i>{% trans "Voltar" %}
                </a>
                <a href="{% url 'games:battle_pass_manager_season_edit' season_id=season.id %}" class="btn btn-warning">
                    <i class="bi bi-pencil me-2"></i>{% trans "Editar" %}
                </a>
                <a href="{% url 'games:battle_pass_manager_level_create' season_id=season.id %}" class="btn btn-info">
                    <i class="bi bi-plus-circle me-2"></i>{% trans "Adicionar Nível" %}
                </a>
                <a href="{% url 'games:battle_pass_manager_milestone_list' season_id=season.id %}" class="btn btn-warning">
                    <i class="bi bi-trophy me-2"></i>{% trans "Milestones" %}
                </a>
            </div>
        </div>

        <!-- Season Info -->
        <div class="card card-glow mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <p class="text-white mb-2">
                            <strong>{% trans "Preço Premium:" %}</strong> 
                            <span class="text-warning">{{ season.premium_price }} {% trans "moedas" %}</span>
                        </p>
                    </div>
                    <div class="col-md-4">
                        <p class="text-white mb-2">
                            <strong>{% trans "Total de Níveis:" %}</strong> 
                            <span class="text-info">{{ levels|length }}</span>
                        </p>
                    </div>
                    <div class="col-md-4">
                        <p class="text-white mb-2">
                            <strong>{% trans "Usuários Participando:" %}</strong> 
                            <span class="text-success">{{ total_users }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Levels -->
        <div class="card card-glow">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="text-white mb-0">
                    <i class="bi bi-list-ol me-2 text-info"></i>
                    {% trans "Níveis e Recompensas" %}
                </h5>
            </div>
            <div class="card-body">
                {% if levels %}
                {% for level in levels %}
                <div class="level-card">
                    <div class="level-header">
                        <div>
                            <div class="d-flex align-items-center gap-3 mb-2">
                                <span class="level-number">
                                    <i class="bi bi-star-fill me-2"></i>
                                    {% trans "Nível" %} {{ level.level }}
                                </span>
                                <span class="xp-badge">
                                    <i class="bi bi-lightning-charge me-1"></i>
                                    {{ level.required_xp }} XP
                                </span>
                            </div>
                        </div>
                        <div class="btn-group">
                            <a href="{% url 'games:battle_pass_manager_level_edit' level_id=level.id %}" 
                               class="btn btn-sm btn-warning" title="{% trans 'Editar Nível' %}">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <a href="{% url 'games:battle_pass_manager_level_delete' level_id=level.id %}" 
                               class="btn btn-sm btn-danger" title="{% trans 'Deletar Nível' %}">
                                <i class="bi bi-trash"></i>
                            </a>
                            <a href="{% url 'games:battle_pass_manager_reward_create' level_id=level.id %}" 
                               class="btn btn-sm btn-success" title="{% trans 'Adicionar Recompensa' %}">
                                <i class="bi bi-plus-circle me-1"></i>{% trans "Recompensa" %}
                            </a>
                        </div>
                    </div>
                    
                    <!-- Rewards -->
                    {% with rewards=level.battlepassreward_set.all %}
                    {% if rewards %}
                    <div class="reward-list">
                        <h6 class="text-white-50 mb-3 d-flex align-items-center">
                            <i class="bi bi-gift me-2"></i>
                            {% trans "Recompensas" %} ({{ rewards|length }})
                        </h6>
                        {% for reward in rewards %}
                        <div class="reward-item">
                            <div class="flex-grow-1">
                                <div class="d-flex align-items-center flex-wrap gap-2">
                                    <span class="text-white fw-semibold">{{ reward.description }}</span>
                                    {% if reward.item_name %}
                                    <small class="text-white-50">
                                        <i class="bi bi-box me-1"></i>
                                        {{ reward.item_name }}
                                        {% if reward.item_amount > 1 %}
                                        <span class="badge bg-secondary ms-1">x{{ reward.item_amount }}</span>
                                        {% endif %}
                                        {% if reward.item_enchant > 0 %}
                                        <span class="badge bg-info ms-1">+{{ reward.item_enchant }}</span>
                                        {% endif %}
                                    </small>
                                    {% endif %}
                                    <span class="reward-badge {% if reward.is_premium %}reward-premium{% else %}reward-free{% endif %}">
                                        {% if reward.is_premium %}
                                        <i class="bi bi-star-fill"></i> Premium
                                        {% else %}
                                        <i class="bi bi-check-circle"></i> Free
                                        {% endif %}
                                    </span>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="{% url 'games:battle_pass_manager_reward_edit' reward_id=reward.id %}" 
                                   class="btn btn-sm btn-outline-warning" title="{% trans 'Editar' %}">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <a href="{% url 'games:battle_pass_manager_reward_delete' reward_id=reward.id %}" 
                                   class="btn btn-sm btn-outline-danger" title="{% trans 'Deletar' %}">
                                    <i class="bi bi-trash"></i>
                                </a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="empty-rewards">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        {% trans "Nenhuma recompensa configurada para este nível" %}
                    </div>
                    {% endif %}
                    {% endwith %}
                </div>
                {% endfor %}
                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-list-ol" style="font-size: 4rem; color: #6f42c1; opacity: 0.5;"></i>
                    <h4 class="text-white mt-3">{% trans "Nenhum nível configurado" %}</h4>
                    <p class="text-white-50">{% trans "Adicione níveis para esta temporada" %}</p>
                    <a href="{% url 'games:battle_pass_manager_level_create' season_id=season.id %}" class="btn btn-info mt-3">
                        <i class="bi bi-plus-circle me-2"></i>{% trans "Adicionar Primeiro Nível" %}
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}