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

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/dashboard-custom.css' %}">
<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&display=swap');

  .roulette-manager-bg {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
    color: #f8f9fa;
    padding: 50px 0;
    min-height: 100vh;
  }

  .roulette-manager-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00d9ff;
    margin-bottom: 2rem;
    text-shadow: 0 0 20px rgba(13, 217, 255, 0.5);
  }

  .roulette-manager-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #6f42c1;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(111, 66, 193, 0.3);
    transition: all 0.3s ease;
    color: #f8f9fa;
    overflow: hidden;
  }

  .roulette-manager-card:hover {
    box-shadow: 0 12px 40px rgba(111, 66, 193, 0.5);
    transform: translateY(-2px);
  }

  .roulette-manager-header {
    background: linear-gradient(45deg, #6f42c1, #a855f7);
    padding: 1.5rem;
    margin: -1px -1px 0 -1px;
  }

  .roulette-manager-header-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin: 0;
  }

  .form-section {
    padding: 2rem;
  }

  .form-label {
    color: #f8f9fa;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }

  .form-control, .form-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(111, 66, 193, 0.3);
    border-radius: 10px;
    color: #f8f9fa;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
  }

  .form-control:focus, .form-select:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #00d9ff;
    box-shadow: 0 0 0 0.2rem rgba(13, 217, 255, 0.25);
    color: #f8f9fa;
  }

  .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  .form-select option {
    background: #1a1a2e;
    color: #f8f9fa;
  }

  .action-btn {
    display: inline-block;
    background: linear-gradient(45deg, #28a745, #20c997);
    border: none;
    border-radius: 50px;
    padding: 12px 30px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    cursor: pointer;
  }

  .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.6);
    color: white;
    text-decoration: none;
  }

  .action-btn-info {
    background: linear-gradient(45deg, #17a2b8, #138496);
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);
  }

  .action-btn-info:hover {
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.6);
  }

  .prizes-table-container {
    max-height: 600px;
    overflow-y: auto;
  }

  .prizes-table {
    width: 100%;
    color: #f8f9fa;
  }

  .prizes-table thead {
    position: sticky;
    top: 0;
    background: linear-gradient(45deg, #6f42c1, #a855f7);
    z-index: 10;
  }

  .prizes-table th {
    padding: 1rem;
    font-weight: 600;
    border: none;
    font-family: 'Orbitron', sans-serif;
  }

  .prizes-table tbody tr {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(111, 66, 193, 0.2);
    transition: all 0.3s ease;
  }

  .prizes-table tbody tr:hover {
    background: rgba(111, 66, 193, 0.2);
    transform: scale(1.01);
  }

  .prizes-table td {
    padding: 1rem;
    vertical-align: middle;
  }

  .prize-item-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .prize-item-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(111, 66, 193, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .prize-item-name {
    font-weight: 600;
    color: #00d9ff;
  }

  .prize-item-enchant {
    color: #ffc107;
    font-weight: 700;
  }

  .rarity-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .rarity-common {
    background: linear-gradient(45deg, #6c757d, #5a6268);
  }

  .rarity-rare {
    background: linear-gradient(45deg, #007bff, #0056b3);
  }

  .rarity-epic {
    background: linear-gradient(45deg, #a855f7, #7c3aed);
  }

  .rarity-legendary {
    background: linear-gradient(45deg, #ffc107, #ff6b35);
  }

  .weight-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .weight-input {
    max-width: 80px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(111, 66, 193, 0.3);
    border-radius: 8px;
    color: #f8f9fa;
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
  }

  .weight-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #00d9ff;
    outline: none;
  }

  .btn-save-weight {
    background: linear-gradient(45deg, #007bff, #0056b3);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-save-weight:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.5);
  }

  .btn-delete-prize {
    background: linear-gradient(45deg, #dc3545, #c82333);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-delete-prize:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
  }

  .empty-state {
    padding: 3rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
  }

  .empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  /* Scrollbar personalizada */
  .prizes-table-container::-webkit-scrollbar {
    width: 8px;
  }

  .prizes-table-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  .prizes-table-container::-webkit-scrollbar-thumb {
    background: rgba(111, 66, 193, 0.5);
    border-radius: 4px;
  }

  .prizes-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(111, 66, 193, 0.8);
  }

  .weight-legend-box {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem;
    border: 2px solid rgba(111, 66, 193, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  
  .weight-legend-title {
    color: #00d9ff;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Orbitron', sans-serif;
  }
  
  .weight-legend-content {
    color: #cbd5e0;
    line-height: 1.7;
    font-size: 0.95rem;
  }
  
  .weight-legend-content strong {
    color: #e2e8f0;
  }
  
  .weight-legend-example {
    background: rgba(111, 66, 193, 0.2);
    border-left: 3px solid #a855f7;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    border-radius: 6px;
    color: #e2e8f0;
    font-weight: 500;
    font-size: 0.9rem;
  }
  
  .weight-legend-example strong {
    color: #00d9ff;
    font-size: 1rem;
  }

  @media (max-width: 768px) {
    .roulette-manager-title {
      font-size: 2rem;
    }
    
    .form-section {
      padding: 1.5rem;
    }

    .prize-item-img {
      width: 36px;
      height: 36px;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="roulette-manager-bg">
  <div class="container">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4 fade-in-up">
      <div>
        <h1 class="roulette-manager-title">
          <i class="fas fa-dharmachakra me-3"></i>
          {% trans "Gerenciar Roleta" %}
        </h1>
      </div>
      <a href="{% url 'games:roulette_page' %}" class="action-btn action-btn-info">
        <i class="fas fa-eye me-2"></i>
        {% trans "Ver Roleta" %}
      </a>
    </div>

    <!-- Messages -->
    {% if messages %}
      <div class="fade-in-up mb-4">
        {% for message in messages %}
          <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
            <i class="fas fa-{% if message.tags == 'success' %}check-circle{% elif message.tags == 'error' %}exclamation-circle{% else %}info-circle{% endif %} me-2"></i>
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="row g-4">
      <!-- Formulário de Adicionar Prêmio -->
      <div class="col-12 col-lg-5">
        <div class="roulette-manager-card fade-in-up">
          <div class="roulette-manager-header">
            <h4 class="roulette-manager-header-title">
              <i class="fas fa-plus-circle me-2"></i>
              {% trans "Adicionar Prêmio" %}
            </h4>
          </div>
          <div class="form-section">
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="add" />
              
              {% if form.non_field_errors %}
                <div class="alert alert-danger">
                  <i class="fas fa-exclamation-triangle me-2"></i>
                  {{ form.non_field_errors }}
                </div>
              {% endif %}

              <div class="mb-3">
                <label for="{{ form.item.id_for_label }}" class="form-label">
                  <i class="fas fa-treasure-chest me-2"></i>
                  {{ form.item.label }}
                </label>
                {{ form.item }}
                {% if form.item.errors %}
                  <div class="text-danger mt-2">
                    <i class="fas fa-exclamation-circle me-1"></i>
                    {{ form.item.errors }}
                  </div>
                {% endif %}
              </div>

              <div class="mb-4">
                <label for="{{ form.weight.id_for_label }}" class="form-label">
                  <i class="fas fa-weight-hanging me-2"></i>
                  {{ form.weight.label }}
                </label>
                {{ form.weight }}
                <small class="d-block mt-1" style="color: #a0aec0; font-style: italic;">
                  <i class="fas fa-lightbulb me-1" style="color: #ffc107;"></i>
                  {% trans "Quanto maior o peso, maior a chance de sair" %}
                </small>
                {% if form.weight.errors %}
                  <div class="text-danger mt-2">
                    <i class="fas fa-exclamation-circle me-1"></i>
                    {{ form.weight.errors }}
                  </div>
                {% endif %}
              </div>

              <div class="text-end">
                <button type="submit" class="action-btn">
                  <i class="fas fa-plus me-2"></i>
                  {% trans "Adicionar Prêmio" %}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- Lista de Prêmios -->
      <div class="col-12 col-lg-7">
        <div class="roulette-manager-card fade-in-up h-100">
          <div class="roulette-manager-header">
            <h4 class="roulette-manager-header-title">
              <i class="fas fa-list me-2"></i>
              {% trans "Prêmios Cadastrados" %}
              <span class="badge bg-light text-dark ms-2">{{ prizes|length }}</span>
            </h4>
          </div>
          
          <div class="prizes-table-container">
            {% if prizes %}
              <table class="prizes-table">
                <thead>
                  <tr>
                    <th>
                      <i class="fas fa-gift me-2"></i>
                      {% trans "Item" %}
                    </th>
                    <th style="width:150px" class="text-center">
                      <i class="fas fa-weight-hanging me-2"></i>
                      {% trans "Peso" %}
                    </th>
                    <th style="width:120px" class="text-end">
                      <i class="fas fa-tools me-2"></i>
                      {% trans "Ações" %}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {% for p in prizes %}
                    <tr>
                      <td>
                        <div class="prize-item-info">
                          {% if p.item and p.item.image %}
                            <img src="{{ p.item.image.url }}" alt="{{ p.item.name }}" class="prize-item-img"/>
                          {% else %}
                            <div class="prize-item-img d-flex align-items-center justify-content-center bg-secondary">
                              <i class="fas fa-question"></i>
                            </div>
                          {% endif %}
                          <div>
                            <div class="prize-item-name">
                              {{ p.item.name|default:p.name }}
                              {% if p.item.enchant or p.enchant %}
                                <span class="prize-item-enchant">+{{ p.item.enchant|default:p.enchant }}</span>
                              {% endif %}
                            </div>
                            {% if p.item.rarity or p.rarity %}
                              <span class="rarity-badge rarity-{{ p.item.rarity|default:p.rarity }}">
                                {{ p.item.get_rarity_display|default:p.rarity }}
                              </span>
                            {% endif %}
                          </div>
                        </div>
                      </td>
                      <td class="text-center">
                        <form method="post" class="weight-form justify-content-center">
                          {% csrf_token %}
                          <input type="hidden" name="action" value="update_weight" />
                          <input type="hidden" name="prize_id" value="{{ p.id }}" />
                          <input type="number" class="weight-input" name="weight" value="{{ p.weight }}" min="1" required />
                          <button class="btn-save-weight" type="submit" title="{% trans 'Salvar' %}">
                            <i class="fas fa-check"></i>
                          </button>
                        </form>
                      </td>
                      <td class="text-end">
                        <form method="post" class="d-inline" onsubmit="return confirm('{% trans "Tem certeza que deseja remover este prêmio?" %}');">
                          {% csrf_token %}
                          <input type="hidden" name="action" value="delete" />
                          <input type="hidden" name="prize_id" value="{{ p.id }}" />
                          <button class="btn-delete-prize" type="submit" title="{% trans 'Remover' %}">
                            <i class="fas fa-trash"></i>
                          </button>
                        </form>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            {% else %}
              <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <h5>{% trans "Nenhum prêmio cadastrado" %}</h5>
                <p>{% trans "Adicione prêmios usando o formulário ao lado" %}</p>
              </div>
            {% endif %}
          </div>
          
          <!-- Legenda sobre o Peso -->
          <div class="weight-legend-box">
            <div class="weight-legend-title">
              <i class="fas fa-info-circle"></i>
              {% trans "Como funciona o Peso?" %}
            </div>
            <div class="weight-legend-content">
              <p class="mb-2">
                {% trans "O <strong>peso</strong> determina a probabilidade de cada prêmio ser sorteado na roleta." %}
              </p>
              <p class="mb-2">
                {% trans "Quanto maior o peso, maior a chance do item ser sorteado. A probabilidade é calculada proporcionalmente em relação ao peso total de todos os prêmios." %}
              </p>
              <div class="weight-legend-example">
                <strong>{% trans "Exemplo:" %}</strong><br>
                {% trans "• Prêmio A (peso 5) = 5/(5+3+2) = 50% de chance" %}<br>
                {% trans "• Prêmio B (peso 3) = 3/(5+3+2) = 30% de chance" %}<br>
                {% trans "• Prêmio C (peso 2) = 2/(5+3+2) = 20% de chance" %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}