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

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'roulette/style.css' %}">
<style>
.box-dashboard-bg {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
    color: #f8f9fa;
    padding: 50px 0;
    min-height: 100vh;
}

.box-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;
}

.box-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.7), 0 0 30px rgba(13, 202, 240, 0.5);
}

.box-card .card-title {
    color: #f8f9fa;
    text-shadow: 1px 1px 2px #000;
}

.box-card .card-text {
    color: #ccc !important;
}

.box-card .card-text strong {
    color: #00d9ff;
    text-shadow: 1px 1px 2px #000;
}

.saldo-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);
    padding: 20px;
    margin-bottom: 30px;
}

.saldo-card h4 {
    color: #f8f9fa;
    text-shadow: 1px 1px 2px #000;
}

.saldo-card .badge {
    font-size: 1.2rem !important;
    padding: 10px 20px;
}

.box-card img {
    border: 2px solid #6f42c1;
    box-shadow: 0 0 10px rgba(111, 66, 193, 0.3);
    transition: transform 0.2s ease-in-out;
}

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

/* === Z-INDEX PARA MODAIS === */
#confirmBoxModal,
#confirmResetModal,
#buyTokensModal,
#itemsModal {
    z-index: 9999 !important;
}

#confirmBoxModal .modal-dialog,
#confirmResetModal .modal-dialog,
#buyTokensModal .modal-dialog,
#itemsModal .modal-dialog {
    z-index: 10000 !important;
    position: relative;
}

#confirmBoxModal .modal-content,
#confirmResetModal .modal-content,
#buyTokensModal .modal-content,
#itemsModal .modal-content {
    z-index: 10001 !important;
    position: relative;
}

/* Garantir que o backdrop do modal tenha z-index apropriado */
.modal-backdrop.show {
    z-index: 9998 !important;
}
</style>
{% endblock extrastyle %}

{% block content %}
<div class="box-dashboard-bg">
    <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>{% trans "Tipos de Caixa Disponíveis" %}</h2>

        <!-- Botão de Comprar Fichas -->
        <div class="text-center mt-4 mb-4">
            <button class="btn btn-warning btn-lg rounded-pill" data-bs-toggle="modal" data-bs-target="#buyTokensModal">
                <i class="bi bi-cart-plus me-2"></i> Comprar Fichas
            </button>
        </div>
    </div>

    <!-- Exibir saldo do usuário -->
    <div class="saldo-card text-center">
        <h4 class="mb-3">{% trans "Seu Saldo" %}</h4>
        <div class="d-flex justify-content-center gap-4 flex-wrap">
            <div>
                <span class="badge bg-primary fs-5">R$ {{ user_balance }}</span>
            </div>
            <div>
                <span class="badge bg-warning text-dark fs-5">
                    <i class="bi bi-coin me-1"></i>{% trans "Fichas" %}: {{ user_fichas }}
                </span>
            </div>
        </div>
    </div>

    {% if box_types %}
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for box_type in box_types %}
        <div class="col">
            <div class="card box-card h-100 text-center border-0">
                <div class="card-body d-flex flex-column justify-content-between">
                    <div>
                                                 <img src="{% static 'assets/img/box/box/'|add:box_type.get_highest_rarity|add:'.png' %}" alt="{{ box_type.name }}" class="img-fluid mb-3" style="max-width: 150px; border-radius: 10px;" onerror="this.style.display='none';">
                        <h5 class="card-title text-uppercase fw-bold">{{ box_type.name }}</h5>
                        <p class="card-text text-muted small mb-3">
                            {% trans "Preço" %}: <strong>R$ {{ box_type.price }}</strong><br>
                            {% trans "Boosters" %}: {{ box_type.boosters_amount }}<br>
                            {% trans "Comum" %}: {{ box_type.chance_common }}% |
                            {% trans "Rara" %}: {{ box_type.chance_rare }}%<br>
                            {% trans "Épica" %}: {{ box_type.chance_epic }}% |
                            {% trans "Lendária" %}: {{ box_type.chance_legendary }}%
                        </p>
                    </div>

                    {% with box=user_boxes|get_item:box_type.id %}
                        {% if box %}
                            <p class="mb-2">
                                <strong>{% trans "Caixa já comprada!" %}</strong><br>
                                <span class="badge bg-info">
                                    {% trans "Boosters restantes" %}: {{ box.remaining_boosters }}
                                </span>
                            </p>
                            <div class="d-flex gap-2">
                                <button class="btn btn-success mt-auto flex-fill" onclick="openBoxAjax({{ box.id }})" id="openBoxBtn{{ box.id }}">
                                    <i class="bi bi-box-arrow-up me-1"></i>
                                    {% trans "Abrir Caixa" %}
                                </button>
                                <button class="btn btn-warning mt-auto" data-bs-toggle="modal" data-bs-target="#confirmResetModal" data-box-id="{{ box.id }}" data-box-price="{{ box_type.price }}" data-box-name="{{ box_type.name }}">
                                    <i class="bi bi-arrow-clockwise me-1"></i>
                                    {% trans "Resetar" %}
                                </button>
                            </div>
                            <button class="btn btn-outline-info mt-2" data-bs-toggle="modal" data-bs-target="#itemsModal"
                                data-box-name="{{ box_type.name|escape }}" data-box-type-id="{{ box_type.id }}">
                                {% trans "Ver Itens" %}
                            </button>
                        {% else %}
                            {% if user_fichas > 0 %}
                                <button class="btn btn-primary mt-auto" data-bs-toggle="modal" data-bs-target="#confirmBoxModal" data-box-id="{{ box_type.id }}" data-has-fichas="true">
                                    {% trans "Comprar e Abrir Caixa" %}
                                </button>
                            {% else %}
                                <button class="btn btn-primary mt-auto" data-bs-toggle="modal" data-bs-target="#confirmBoxModal" data-box-id="{{ box_type.id }}" data-has-fichas="false">
                                    {% trans "Comprar Caixa" %}
                                </button>
                            {% endif %}
                        {% endif %}
                    {% endwith %}
                    <script type="application/json" id="box-items-{{ box_type.id }}">{{ box_type|get_item_list_json|safe }}</script>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="alert alert-warning mt-4" role="alert">
        {% trans "Nenhum tipo de caixa disponível no momento." %}
    </div>
    {% endif %}
    </div>
</div>

<!-- Modal de Confirmação de Compra -->
<div class="modal fade" id="confirmBoxModal" tabindex="-1" aria-labelledby="confirmBoxModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content text-center p-4 text-white bg-dark">
      <h5 class="modal-title mb-3" id="confirmBoxModalLabel">{% trans "Confirmar Compra" %}</h5>
      <p id="boxModalMessage"></p>
      <p id="boxPrice" class="fw-bold"></p>
      <div class="d-flex justify-content-between">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
        <a href="#" id="confirmPurchaseButton" class="btn btn-primary">{% trans "Confirmar Compra" %}</a>
      </div>
    </div>
  </div>
</div>

<!-- Modal de Confirmação de Reset -->
<div class="modal fade" id="confirmResetModal" tabindex="-1" aria-labelledby="confirmResetModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content text-center p-4 text-white bg-dark">
      <h5 class="modal-title mb-3" id="confirmResetModalLabel">{% trans "Confirmar Reset" %}</h5>
      <p>{% trans "Você tem certeza de que deseja resetar esta caixa?" %}</p>
      <p class="text-warning mb-2">{% trans "ATENÇÃO: Ao resetar, você precisará comprar a caixa novamente!" %}</p>
      <p id="resetBoxPrice" class="fw-bold"></p>
      <p class="text-muted small">{% trans "Todos os boosters serão recriados e o preço será cobrado novamente." %}</p>
      <div class="d-flex justify-content-between">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
        <a href="#" id="confirmResetButton" class="btn btn-warning">{% trans "Confirmar Reset" %}</a>
      </div>
    </div>
  </div>
</div>

<!-- Modal de Compra de Fichas -->
<div class="modal fade" id="buyTokensModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content text-center p-4">
      <h5 class="modal-title mb-3">{% trans "Comprar Fichas" %}</h5>
      <p class="text-white">{% trans "Escolha a quantidade de fichas que deseja comprar. Valor: R$0,10 por ficha." %}</p>
      <input type="number" id="buyQuantity" class="form-control mb-3" min="1" value="1">
      <button class="btn btn-success" onclick="buyFichas()">{% trans "Confirmar Compra" %}</button>
    </div>
  </div>
</div>

<!-- Modal de Itens da Caixa -->
<div class="modal fade" id="itemsModal" tabindex="-1" aria-labelledby="itemsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content bg-dark text-white p-4">
      <h5 class="modal-title" id="itemsModalLabel">{% trans "Itens da Caixa, que podem vir!" %}</h5>
      <p class="text-muted mb-3" id="boxNameTitle"></p>
      <div id="itemsList" class="row row-cols-1 row-cols-md-3 g-3"></div>
      <div class="mt-4 text-end">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Fechar" %}</button>
      </div>
    </div>
  </div>
</div>

<meta name="csrf-token" content="{{ csrf_token }}">

<script>
  const FICHAS_URL = "{% url 'games:comprar_fichas' %}";

  // Helper function to get CSRF token from cookie
  function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== "") {
      const cookies = document.cookie.split(";");
      for (let cookie of cookies) {
        cookie = cookie.trim();
        if (cookie.startsWith(name + "=")) {
          cookieValue = decodeURIComponent(cookie.slice(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  // Function to open box via AJAX and redirect to result page
  function openBoxAjax(boxId) {
    const btn = document.getElementById(`openBoxBtn${boxId}`);
    const originalText = btn.innerHTML;
    
    // Desabilita o botão e mostra loading
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>{% trans "Abrindo..." %}';
    
    const csrfToken = getCookie('csrftoken');
    const url = `/app/game/box/open-ajax/${boxId}/`;
    
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken,
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        // Redireciona para a página de resultado visual
        window.location.href = data.redirect_url || '/app/game/box/result/';
      } else {
        alert(data.error || 'Erro ao abrir a caixa.');
        btn.innerHTML = originalText;
        btn.disabled = false;
      }
    })
    .catch(error => {
      console.error('Erro:', error);
      alert('Erro de conexão com o servidor.');
      btn.innerHTML = originalText;
      btn.disabled = false;
    });
  }

  // Function to buy fichas
  function buyFichas() {
    const quantity = parseInt(document.getElementById("buyQuantity").value);
    const csrfToken = getCookie('csrftoken');

    fetch(FICHAS_URL, {
      method: "POST",
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRFToken': csrfToken
      },
      body: `quantidade=${quantity}`
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        alert(`Compra realizada! Você agora tem ${data.fichas} ficha(s).`);
        location.reload(); // Atualiza para refletir no contador de fichas
      } else {
        alert(data.error || "Erro ao processar a compra.");
      }
    })
    .catch(error => {
      alert("Erro de conexão com o servidor.");
      console.error(error);
    });
  }

  // Modal de confirmação da compra da box
  const confirmBoxModal = document.getElementById('confirmBoxModal');
  confirmBoxModal.addEventListener('show.bs.modal', function (event) {
    const button = event.relatedTarget;
    const boxId = button.getAttribute('data-box-id');
    const hasFichas = button.getAttribute('data-has-fichas') === 'true';

    // Busca o preço da box no texto do card
    const boxPriceElement = button.closest('.card-body').querySelector('.card-text strong');
    const boxPrice = boxPriceElement ? boxPriceElement.textContent.trim() : "";

    // Atualiza o texto e o link no modal baseado na quantidade de fichas
    if (hasFichas) {
      document.getElementById('boxModalMessage').textContent = "{% trans 'Você tem certeza de que deseja comprar e abrir esta caixa?' %}";
      const purchaseUrl = "{% url 'games:box_buy_and_open' 0 %}".replace('0', boxId);
      document.getElementById('confirmPurchaseButton').setAttribute('href', purchaseUrl);
    } else {
      document.getElementById('boxModalMessage').textContent = "{% trans 'Você tem certeza de que deseja comprar esta caixa? (Você precisará de fichas para abrir os boosters depois)' %}";
      const purchaseUrl = "{% url 'games:box_buy' 0 %}".replace('0', boxId);
      document.getElementById('confirmPurchaseButton').setAttribute('href', purchaseUrl);
    }
    
    document.getElementById('boxPrice').textContent = "Preço: " + boxPrice;
  });

  // Modal de confirmação do reset da box
  const confirmResetModal = document.getElementById('confirmResetModal');
  confirmResetModal.addEventListener('show.bs.modal', function (event) {
    const button = event.relatedTarget;
    const boxId = button.getAttribute('data-box-id');
    const boxPrice = button.getAttribute('data-box-price');
    const boxName = button.getAttribute('data-box-name');

    // Atualiza o texto e o link no modal
    document.getElementById('resetBoxPrice').textContent = "Preço: R$ " + boxPrice;
    const resetUrl = "{% url 'games:box_reset' 0 %}".replace('0', boxId);
    document.getElementById('confirmResetButton').setAttribute('href', resetUrl);
  });
</script>

<script>
  const itemsModal = document.getElementById('itemsModal');
  itemsModal.addEventListener('show.bs.modal', function (event) {
    const button = event.relatedTarget;
    const boxName = button.getAttribute('data-box-name');
    const boxTypeId = button.getAttribute('data-box-type-id');
    
    // Busca o JSON do script tag correspondente
    const scriptTag = document.getElementById('box-items-' + boxTypeId);
    if (!scriptTag) {
      console.error('Script tag não encontrado para box type:', boxTypeId);
      return;
    }
    
    let itemsData;
    try {
      itemsData = JSON.parse(scriptTag.textContent);
    } catch (e) {
      console.error('Erro ao fazer parse do JSON:', e);
      console.error('Conteúdo do script tag:', scriptTag.textContent);
      return;
    }
    
    // Atualiza título do modal
    document.getElementById('boxNameTitle').textContent = "Caixa: " + boxName;

    // Container de itens
    const itemsList = document.getElementById('itemsList');
    itemsList.innerHTML = "";

    // Renderiza os itens
    itemsData.forEach(item => {
      const col = document.createElement("div");
      col.className = "col";

      const card = document.createElement("div");
      card.className = "card bg-secondary text-white h-100";

      const body = document.createElement("div");
      body.className = "card-body text-center";

      const itemImage = document.createElement("img");
      itemImage.className = "img-fluid mb-3 rounded-3";
      itemImage.src = item.image_url || "{% static 'roulette/images/default-item.png' %}"; // Fallback para imagem padrão
      itemImage.alt = item.name;

      const title = document.createElement("h6");
      title.className = "card-title";
      title.innerText = `${item.name} +${item.enchant}`;

      const rarity = document.createElement("p");
      rarity.className = "card-text text-muted small";
      rarity.innerText = `Raridade: ${item.rarity_display}`;

      body.appendChild(itemImage);  // Adiciona a imagem
      body.appendChild(title);
      body.appendChild(rarity);
      card.appendChild(body);
      col.appendChild(card);
      itemsList.appendChild(col);
    });
  });
</script>

{% endblock %}

{% block extrascripts %}
<script src="{% static 'roulette/script.js' %}"></script>
{% endblock %}