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

{% block extrahead %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

  .coin-config-container {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
    min-height: 100vh;
    padding: 2rem 0;
    color: #f8f9fa;
    position: relative;
    overflow-x: hidden;
  }

  /* Particle effect background */
  .coin-config-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.1), transparent),
      radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.1), transparent),
      radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.1), transparent),
      radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.1), transparent),
      radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.1), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 20s linear infinite;
    z-index: -1;
  }

  @keyframes sparkle {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-100px); }
  }

  .coin-config-content {
    position: relative;
    z-index: 1;
  }

  .coin-config-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 25px;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
    animation: headerGlow 3s ease-in-out infinite alternate;
  }

  .coin-config-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
  }

  @keyframes headerGlow {
    0% { box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4); }
    100% { box-shadow: 0 15px 50px rgba(102, 126, 234, 0.6); }
  }

  @keyframes shimmer {
    0% { transform: rotate(45deg) translateX(-100%); }
    100% { transform: rotate(45deg) translateX(100%); }
  }

  .coin-config-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
  }

  .coin-config-subtitle {
    font-size: 1.1rem;
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
    position: relative;
    z-index: 1;
  }

  .coin-config-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5), 0 0 25px rgba(13, 202, 240, 0.3);
    border: 2px solid #6f42c1;
    overflow: hidden;
    margin-bottom: 2rem;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .coin-config-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(111, 66, 193, 0.7), 0 15px 40px rgba(13, 202, 240, 0.5);
  }

  .coin-config-card-header {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    color: white;
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
  }

  .coin-config-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }

  .coin-config-card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .coin-config-card-body {
    padding: 2rem;
  }

  .coin-table {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .coin-table thead th {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    color: white;
    border: none;
    padding: 1rem;
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
  }

  .coin-table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(111, 66, 193, 0.1);
  }

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

  .coin-table tbody tr.active {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
    border-left: 4px solid #28a745;
  }

  .coin-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border: none;
  }

  .coin-name {
    font-weight: 600;
    color: #6f42c1;
  }

  .coin-id {
    font-family: 'Courier New', monospace;
    background: rgba(111, 66, 193, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    color: #6f42c1;
  }

  .coin-multiplier {
    font-weight: 600;
    color: #e83e8c;
  }

  .status-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .status-active {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
  }

  .status-inactive {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    box-shadow: 0 2px 10px rgba(108, 117, 125, 0.3);
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-action {
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
  }

  .btn-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }

  .btn-action:hover::before {
    left: 100%;
  }

  .btn-activate {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border-color: #007bff;
  }

  .btn-activate:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
  }

  .btn-delete {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border-color: #dc3545;
  }

  .btn-delete:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
  }

  .btn-current {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    border-color: #6c757d;
    cursor: not-allowed;
  }

  .new-coin-section {
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.05), rgba(232, 62, 140, 0.05));
    border-radius: 15px;
    padding: 2rem;
    border: 2px dashed rgba(111, 66, 193, 0.3);
    margin-top: 2rem;
  }

  .new-coin-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #6f42c1;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-label {
    font-weight: 600;
    color: #6f42c1;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .form-control {
    border: 2px solid rgba(111, 66, 193, 0.2);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
  }

  .form-control:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
    background: white;
  }

  .btn-submit {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }

  .btn-submit:hover::before {
    left: 100%;
  }

  .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
  }

  .empty-state {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
    font-style: italic;
  }

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

  /* Responsividade */
  @media (max-width: 768px) {
    .coin-config-title {
      font-size: 2rem;
    }
    
    .coin-config-header {
      padding: 1.5rem;
    }
    
    .coin-config-card-body {
      padding: 1rem;
    }
    
    .coin-table {
      font-size: 0.9rem;
    }
    
    .action-buttons {
      flex-direction: row;
      gap: 0.25rem;
    }
    
    .btn-action {
      font-size: 0.7rem;
      padding: 0.4rem 0.8rem;
    }
  }

  /* Animações de entrada */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .coin-config-header {
    animation: fadeInUp 0.8s ease-out;
  }

  .coin-config-card {
    animation: fadeInUp 0.8s ease-out;
    animation-delay: calc(var(--animation-order) * 0.1s);
  }

  .coin-config-card:nth-child(1) { --animation-order: 1; }
  .coin-config-card:nth-child(2) { --animation-order: 2; }

  .input-group-sm .form-control {
    border-radius: 5px 0 0 5px;
  }

  .input-group-sm .input-group-text {
    border-radius: 0 5px 5px 0;
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    color: white;
    border: 1px solid rgba(111, 66, 193, 0.3);
  }
</style>
<script>
{% trans "A taxa deve estar entre 0 e 100%" as trans_taxa_range %}
{% trans "Taxa atualizada com sucesso!" as trans_taxa_success %}

function updateTaxa(event, form) {
  if (event) {
    event.preventDefault();
  }
  
  const formData = new FormData(form);
  const taxa = parseFloat(formData.get('taxa_retirada'));
  
  if (isNaN(taxa) || taxa < 0 || taxa > 100) {
    alert('{{ trans_taxa_range|escapejs }}');
    return false;
  }
  
  form.submit();
  return false;
}

// Auto-submit ao perder o foco (blur)
document.addEventListener('DOMContentLoaded', function() {
  const taxaInputs = document.querySelectorAll('.taxa-input');
  taxaInputs.forEach(input => {
    input.addEventListener('blur', function() {
      const form = this.closest('form');
      if (form) {
        updateTaxa(null, form);
      }
    });
  });
});
</script>
{% endblock %}

{% block content %}
<div class="coin-config-container">
  <div class="container coin-config-content">
    <!-- Header -->
    <div class="coin-config-header">
      <h1 class="coin-config-title">
        <i class="fas fa-coins"></i>
        {% trans "Configuração de Moedas In-game" %}
      </h1>
      <p class="coin-config-subtitle">
        {% trans "Gerencie as moedas disponíveis para transferência entre carteira e servidor" %}
      </p>
    </div>

    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-4">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="{% url 'dashboard' %}" class="text-light">{% trans "Dashboard" %}</a>
        </li>
        <li class="breadcrumb-item">
          <a href="{% url 'wallet:dashboard' %}" class="text-light">{% trans "Carteira" %}</a>
        </li>
        <li class="breadcrumb-item active text-light" aria-current="page">{% trans "Configuração de Moedas" %}</li>
      </ol>
    </nav>

    <!-- Card Principal -->
    <div class="coin-config-card">
      <div class="coin-config-card-header">
        <h2 class="coin-config-card-title">
          <i class="fas fa-list"></i>
          {% trans "Moedas Configuradas" %}
        </h2>
      </div>
      <div class="coin-config-card-body">
        <form method="post">
          {% csrf_token %}
          <div class="table-responsive">
            <table class="table coin-table">
              <thead>
                <tr>
                  <th><i class="fas fa-tag me-2"></i>{% trans "Nome" %}</th>
                  <th><i class="fas fa-hashtag me-2"></i>{% trans "ID" %}</th>
                  <th><i class="fas fa-times me-2"></i>{% trans "Multiplicador" %}</th>
                  <th><i class="fas fa-percent me-2"></i>{% trans "Taxa Retirada" %}</th>
                  <th><i class="fas fa-toggle-on me-2"></i>{% trans "Status" %}</th>
                  <th><i class="fas fa-cogs me-2"></i>{% trans "Ações" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for moeda in moedas %}
                <tr class="{% if moeda.ativa %}active{% endif %}">
                  <td>
                    <span class="coin-name">{{ moeda.nome }}</span>
                  </td>
                  <td>
                    <span class="coin-id">{{ moeda.coin_id }}</span>
                  </td>
                  <td>
                    <span class="coin-multiplier">x{{ moeda.multiplicador }}</span>
                  </td>
                  <td>
                    <form method="post" class="d-inline taxa-form" data-coin-id="{{ moeda.id }}" onsubmit="return updateTaxa(event, this)">
                      {% csrf_token %}
                      <input type="hidden" name="update_taxa" value="1">
                      <input type="hidden" name="coin_id" value="{{ moeda.id }}">
                      <div class="input-group" style="max-width: 150px;">
                        <input type="number" 
                               step="0.01" 
                               min="0" 
                               max="100" 
                               name="taxa_retirada" 
                               value="{% if moeda.taxa_retirada is not None %}{{ moeda.taxa_retirada|unlocalize }}{% else %}0.00{% endif %}" 
                               class="form-control form-control-sm taxa-input" 
                               style="font-size: 0.85rem; padding: 0.25rem 0.5rem;"
                               onblur="this.form.submit()">
                        <span class="input-group-text" style="font-size: 0.85rem; padding: 0.25rem 0.5rem;">%</span>
                      </div>
                    </form>
                  </td>
                  <td>
                    {% if moeda.ativa %}
                      <span class="status-badge status-active">
                        <i class="fas fa-check-circle me-1"></i>{% trans "Ativa" %}
                      </span>
                    {% else %}
                      <span class="status-badge status-inactive">
                        <i class="fas fa-pause-circle me-1"></i>{% trans "Inativa" %}
                      </span>
                    {% endif %}
                  </td>
                  <td>
                    <div class="action-buttons">
                      <!-- Debug: Status da moeda -->
                      <!-- Moeda ID: {{ moeda.id }} | Nome: {{ moeda.nome }} | Ativa: {{ moeda.ativa }} -->
                      
                      {% if not moeda.ativa %}
                      <form method="post" class="w-100">
                        {% csrf_token %}
                        <input type="hidden" name="activate_coin_id" value="{{ moeda.id }}">
                        <button type="submit" class="btn btn-action btn-activate w-100">
                          <i class="fas fa-play me-1"></i>{% trans "Ativar" %}
                        </button>
                      </form>
                      {% else %}
                      <button class="btn btn-action btn-current w-100" disabled>
                        <i class="fas fa-check me-1"></i>{% trans "Atual" %}
                      </button>
                      {% endif %}

                      <form method="post" class="w-100" onsubmit="return confirm('{% trans "Tem certeza que deseja excluir esta moeda?" %}')">
                        {% csrf_token %}
                        <input type="hidden" name="delete_coin_id" value="{{ moeda.id }}">
                        <button type="submit" class="btn btn-action btn-delete w-100">
                          <i class="fas fa-trash me-1"></i>{% trans "Excluir" %}
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="6">
                    <div class="empty-state">
                      <i class="fas fa-coins"></i>
                      <p>{% trans "Nenhuma moeda configurada ainda." %}</p>
                      <small>{% trans "Adicione sua primeira moeda usando o formulário abaixo." %}</small>
                    </div>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </form>
      </div>
    </div>

    <!-- Seção Nova Moeda -->
    <div class="coin-config-card">
      <div class="coin-config-card-header">
        <h2 class="coin-config-card-title">
          <i class="fas fa-plus-circle"></i>
          {% trans "Adicionar Nova Moeda" %}
        </h2>
      </div>
      <div class="coin-config-card-body">
        <div class="new-coin-section">
          <h3 class="new-coin-title">
            <i class="fas fa-plus"></i>
            {% trans "Nova Moeda" %}
          </h3>
          <form method="post" class="row g-3">
            {% csrf_token %}
            <input type="hidden" name="create_coin" value="1">
            
            <div class="col-md-4">
              <div class="form-group">
                <label class="form-label">
                  <i class="fas fa-tag"></i>{% trans "Nome da Moeda" %}
                </label>
                <input type="text" name="nome" class="form-control" 
                       placeholder="{% trans 'Ex: Gold Coin' %}" required>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="form-group">
                <label class="form-label">
                  <i class="fas fa-hashtag"></i>{% trans "ID no Servidor" %}
                </label>
                <input type="number" name="coin_id" class="form-control" 
                       placeholder="{% trans 'Ex: 4037' %}" required>
              </div>
            </div>
            
            <div class="col-md-3">
              <div class="form-group">
                <label class="form-label">
                  <i class="fas fa-times"></i>{% trans "Multiplicador" %}
                </label>
                <input type="number" step="0.01" name="multiplicador" class="form-control" 
                       placeholder="{% trans 'Ex: 1.0' %}" required>
              </div>
            </div>
            
            <div class="col-md-3">
              <div class="form-group">
                <label class="form-label">
                  <i class="fas fa-percent"></i>{% trans "Taxa de Retirada (%)" %}
                </label>
                <input type="number" step="0.01" min="0" max="100" name="taxa_retirada" class="form-control" 
                       placeholder="{% trans 'Ex: 5.00' %}" value="0.00">
                <small class="form-text text-muted">{% trans "Percentual de taxa ao retirar moedas do servidor" %}</small>
              </div>
            </div>
            
            <div class="col-12 text-end">
              <button type="submit" class="btn btn-submit">
                <i class="fas fa-save me-2"></i>{% trans "Cadastrar Moeda" %}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}