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

{% block extrastyle %}
<style>
.bonus-bg {
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
  min-height: 100vh;
  padding: 30px 0;
}
.bonus-header {
  color: #f8f9fa;
}
.bonus-card {
  background: linear-gradient(to bottom right, #1a1a2e, #121220);
  border: 2px solid #6f42c1;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(111, 66, 193, 0.5), 0 0 25px rgba(13, 202, 240, 0.3);
  transition: transform 0.2s ease-in-out, box-shadow 0.3s;
}
.bonus-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(111, 66, 193, 0.7), 0 0 30px rgba(13, 202, 240, 0.5);
}
.bonus-day-badge {
  background: #0dcaf0;
  color: #0b132b;
  font-weight: 700;
}
.bonus-meta { color: #adb5bd !important; font-size: 0.9rem; }
.bonus-fixed { color: #4dabf7; }
.bonus-random { color: #c77dff; }
.bonus-claimed { opacity: 0.65; }
.bonus-today {
  outline: 2px solid #ffc107;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
}
</style>
{% endblock %}

{% block content %}
<div class="bonus-bg">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4 bonus-header">
      <h3 class="m-0">{% trans "Bônus Diário" %}</h3>
      <div class="d-flex gap-2">
        <a href="{% url 'games:daily_bonus_history' %}" class="btn btn-info btn-lg rounded-pill">
          <i class="bi bi-clock-history me-2"></i> {% trans "Histórico" %}
        </a>
        {% if can_claim %}
          <a href="{% url 'games:daily_bonus_claim' %}" class="btn btn-warning btn-lg rounded-pill">
            <i class="bi bi-gift me-2"></i> {% trans "Resgatar prêmio de hoje" %}
          </a>
        {% else %}
          <button class="btn btn-secondary btn-lg rounded-pill" disabled>
            {% trans "Sem prêmio disponível agora" %}
          </button>
        {% endif %}
      </div>
    </div>

    {% if not season %}
      {% if season_status %}
        {% if season_status.reason == 'ended' %}
          <div class="alert alert-danger" role="alert">
            <h5><i class="bi bi-calendar-x me-2"></i>{% trans "Temporada Finalizada" %}</h5>
            <p class="mb-0">
              {% trans "A temporada" %} <strong>"{{ season_status.season.name }}"</strong> {% trans "finalizou em" %} 
              <strong>{{ season_status.season.end_date|date:"d/m/Y" }}</strong>.
              <br>
              {% trans "Não há temporada ativa no momento. Aguarde o início de uma nova temporada." %}
            </p>
          </div>
        {% elif season_status.reason == 'not_started' %}
          <div class="alert alert-info" role="alert">
            <h5><i class="bi bi-calendar-event me-2"></i>{% trans "Temporada em Breve" %}</h5>
            <p class="mb-0">
              {% trans "A temporada" %} <strong>"{{ season_status.season.name }}"</strong> {% trans "ainda não começou." %}
              <br>
              {% trans "Ela iniciará em" %} <strong>{{ season_status.season.start_date|date:"d/m/Y" }}</strong>.
            </p>
          </div>
        {% else %}
          <div class="alert alert-warning" role="alert">{% trans "Nenhuma temporada ativa de bônus diário." %}</div>
        {% endif %}
      {% else %}
        <div class="alert alert-warning" role="alert">
          <h5><i class="bi bi-exclamation-triangle me-2"></i>{% trans "Nenhuma Temporada Ativa" %}</h5>
          <p class="mb-0">{% trans "Não há temporada de bônus diário ativa no momento. Aguarde o início de uma nova temporada." %}</p>
        </div>
      {% endif %}
    {% else %}
      <div class="mb-3 small text-white-50">
        {% trans "Temporada" %}: <strong>{{ season.name }}</strong> • {% trans "Reset" %}: {{ season.reset_hour_utc }}:00 UTC
      </div>

      <div class="row g-3 row-cols-2 row-cols-md-4 row-cols-lg-7">
        {% for d in days %}
          <div class="col">
            <div class="card bonus-card h-100 text-white {% if d.claimed %}bonus-claimed{% endif %} {% if d.is_today %}bonus-today{% endif %}">
              <div class="card-body d-flex flex-column text-center">
                <div>
                  <span class="badge bonus-day-badge mb-2">{% trans "Dia" %} {{ d.day }}</span>
                </div>
                {% if d.mode == 'FIXED' and d.fixed_item %}
                  <div class="bonus-meta bonus-fixed">{% trans "Fixo" %}: {{ d.fixed_item.name }} +{{ d.fixed_item.enchant }}</div>
                {% else %}
                  <div class="bonus-meta bonus-random">{% trans "Aleatório do Pool" %}</div>
                {% endif %}
                <div class="mt-auto">
                  {% if d.claimed %}
                    <span class="badge bg-secondary">{% trans "Já resgatado" %}</span>
                  {% elif d.is_today %}
                    {% if can_claim %}
                      <a href="{% url 'games:daily_bonus_claim' %}" class="btn btn-primary btn-sm mt-2">{% trans "Resgatar" %}</a>
                    {% else %}
                      <span class="badge bg-warning text-dark">{% trans "Disponível hoje" %}</span>
                    {% endif %}
                  {% elif allow_retroactive and d.can_claim %}
                    <a href="{% url 'games:daily_bonus_claim' %}?day={{ d.day }}" class="btn btn-success btn-sm mt-2">{% trans "Resgatar" %}</a>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}