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

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/wallet.css' %}">
<style>
  /* Estilos específicos para a tela de transferência para jogador */
  .transfer-container {
    background: var(--dark-bg);
    min-height: 100vh;
    padding: 1rem 0;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
  }

  .transfer-header {
    text-align: center;
    margin-bottom: 1.5rem;
    animation: fadeInDown 0.8s ease-out;
  }

  .transfer-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
  }

  .transfer-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.4;
    font-weight: 400;
  }

  .transfer-breadcrumb {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-light);
  }

  .transfer-breadcrumb .breadcrumb {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
  }

  .transfer-breadcrumb .breadcrumb-item a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
  }

  .transfer-breadcrumb .breadcrumb-item a:hover {
    color: #764ba2;
  }

  .transfer-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    max-width: 600px;
    margin: 0 auto;
  }

  .transfer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--secondary-gradient);
  }

  .transfer-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-heavy);
  }

  .transfer-card-header {
    background: var(--secondary-gradient);
    color: white;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

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

  .transfer-card-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    animation: pulse 2s infinite;
  }

  .transfer-card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .transfer-card-description {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.3;
    font-weight: 400;
  }

  .transfer-card-body {
    padding: 2rem;
  }

  .user-info {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(240, 188, 116, 0.1);
  }

  .user-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .user-info-item:last-child {
    margin-bottom: 0;
  }

  .user-info-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
  }

  .user-info-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    color: #000000;
  }

  .user-info-value.balance {
    color: #10B981;
    font-size: 1.2rem;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  }

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

  .form-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.95rem;
  }

  .form-control, .form-select {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(240, 188, 116, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .form-control:focus, .form-select:focus {
    border-color: #f0bc74;
    box-shadow: 0 0 0 0.2rem rgba(240, 188, 116, 0.25);
    background: rgba(255, 255, 255, 1);
  }

  .input-group-text {
    background: var(--secondary-gradient);
    border: 1px solid rgba(240, 188, 116, 0.2);
    color: #1F2937;
    font-weight: 600;
    border-radius: 12px 0 0 12px;
  }

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

  .password-field {
    position: relative;
  }

  .password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    z-index: 10;
  }

  .password-toggle:hover {
    color: #f0bc74;
    background: rgba(240, 188, 116, 0.1);
  }

  .password-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(240, 188, 116, 0.25);
  }

  .password-field .form-control {
    padding-right: 50px;
  }

  .btn-transfer {
    background: var(--secondary-gradient);
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    color: #1F2937;
    transition: all 0.3s ease;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-medium);
  }

  .btn-transfer:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy);
    color: #1F2937;
  }

  .btn-transfer:focus {
    box-shadow: 0 0 0 0.2rem rgba(240, 188, 116, 0.25);
  }

  .btn-transfer:active {
    transform: translateY(0);
  }

  .alert {
    border-radius: 12px;
    border: none;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
  }

  .alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    border-left: 4px solid #10B981;
  }

  .alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
    border-left: 4px solid #EF4444;
  }

  .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border-left: 4px solid #F59E0B;
  }

  .alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
    border-left: 4px solid #3B82F6;
  }

  .info-box {
    background: linear-gradient(135deg, rgba(240, 188, 116, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid rgba(240, 188, 116, 0.2);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .info-box-title {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .info-box-content {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
  }

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

  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  /* Responsividade */
  @media (max-width: 768px) {
    .transfer-card-body {
      padding: 1.5rem;
    }
    
    .user-info {
      padding: 1rem;
    }
    
    .user-info-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
  }

  @media (max-width: 480px) {
    .transfer-card-body {
      padding: 1rem;
    }
    
    .transfer-card-header {
      padding: 1rem;
    }
    
    .transfer-card-icon {
      font-size: 2rem;
    }
    
    .transfer-card-title {
      font-size: 1.3rem;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="transfer-container">
  <div class="container">
    <!-- Header -->
    <div class="transfer-header">
      <h1 class="transfer-title">
        <i class="fas fa-users me-3"></i>{% trans "Transferir para Jogador" %}
      </h1>
      <p class="transfer-subtitle">
        {% trans "Envie suas moedas para outro jogador de forma segura e instantânea" %}
      </p>
    </div>

    <!-- Breadcrumbs -->
    <div class="transfer-breadcrumb">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a>
          </li>
          <li class="breadcrumb-item">
            <a href="{% url 'wallet:dashboard' %}">{% trans "Carteira" %}</a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">{% trans "Transferir para Jogador" %}</li>
        </ol>
      </nav>
    </div>

    <!-- Card Principal -->
    <div class="transfer-card">
      <div class="transfer-card-header">
        <i class="fas fa-user-friends transfer-card-icon"></i>
        <h2 class="transfer-card-title">{% trans "Transferência para Jogador" %}</h2>
        <p class="transfer-card-description">{% trans "Preencha os dados para realizar a transferência" %}</p>
      </div>

      <div class="transfer-card-body">
        <!-- Mensagens -->
        {% if messages %}
          {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
              <i class="fas fa-info-circle me-2"></i>
              {{ message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% trans 'Fechar' %}"></button>
            </div>
          {% endfor %}
        {% endif %}

        <!-- Informações do Usuário -->
        <div class="user-info">
          <div class="user-info-item">
            <span class="user-info-label">{% trans "Usuário:" %}</span>
            <span class="user-info-value">{{ request.user.username }}</span>
          </div>
          <div class="user-info-item">
            <span class="user-info-label">{% trans "Saldo atual:" %}</span>
            <span class="user-info-value balance">
              {% if wallet %}
                R$ {{ wallet.saldo|floatformat:2 }}
              {% else %}
                R$ 0,00
              {% endif %}
            </span>
          </div>
        </div>

        <!-- Caixa de Informações -->
        <div class="info-box">
          <div class="info-box-title">
            <i class="fas fa-info-circle"></i>
            {% trans "Informações Importantes" %}
          </div>
          <div class="info-box-content">
            <ul class="mb-0">
              <li>{% trans "A transferência é instantânea e irreversível" %}</li>
              <li>{% trans "Verifique cuidadosamente o nome do jogador destinatário" %}</li>
              <li>{% trans "Valor mínimo: R$ 1,00 | Valor máximo: R$ 1.000,00" %}</li>
            </ul>
          </div>
        </div>
        
        <!-- Formulário -->
        <form method="post" novalidate>
          {% csrf_token %}
          
          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-user me-2"></i>{% trans "Nome do Jogador Destinatário" %}
            </label>
            <input type="text" name="jogador" class="form-control" placeholder="{% trans 'Ex: Fulano123' %}" required>
            <small class="form-text text-muted">{% trans "Digite o nome exato do jogador que receberá a transferência" %}</small>
          </div>

          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-coins me-2"></i>{% trans "Valor da Transferência" %}
            </label>
            <div class="input-group">
              <span class="input-group-text">R$</span>
              <input type="number" step="0.01" name="valor" class="form-control" min="1.00" max="1000.00" placeholder="0.00" required>
            </div>
            <small class="form-text text-muted">{% trans "Valor mínimo: R$ 1,00 | Valor máximo: R$ 1.000,00" %}</small>
          </div>

          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-lock me-2"></i>{% trans "Confirme sua senha" %}
            </label>
            <div class="password-field">
              <input type="password" name="senha" class="form-control" id="senha" placeholder="Digite sua senha" required>
              <button type="button" class="password-toggle" onclick="togglePassword('senha')">
                <i class="fas fa-eye" id="eye-icon-senha"></i>
              </button>
            </div>
          </div>

          <button type="submit" class="btn-transfer">
            <i class="fas fa-check-circle me-2"></i> {% trans "Confirmar Transferência" %}
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
function togglePassword(inputId) {
  const input = document.getElementById(inputId);
  const icon = document.getElementById('eye-icon-' + inputId);
  
  if (input.type === 'password') {
    input.type = 'text';
    icon.classList.remove('fa-eye');
    icon.classList.add('fa-eye-slash');
  } else {
    input.type = 'password';
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
  }
}

// Validação do formulário
document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form');
  const valorInput = document.querySelector('input[name="valor"]');
  const jogadorInput = document.querySelector('input[name="jogador"]');
  const senhaInput = document.querySelector('input[name="senha"]');
  const btnTransfer = form.querySelector('button[type="submit"]');
  
  const SALDO_NORMAL = parseFloat('{{ wallet.saldo|unlocalize|default:"0.00"|escapejs }}') || 0;
  
  form.addEventListener('submit', function(e) {
    e.preventDefault(); // Previne submit tradicional
    
    // Previne múltiplos submits
    if (btnTransfer && btnTransfer.disabled) {
      return false;
    }
    
    // Verifica se já está processando
    if (form.dataset.processing === 'true') {
      return false;
    }
    
    const valor = parseFloat(valorInput.value);
    const jogador = jogadorInput.value.trim();
    const senha = senhaInput.value;
    
    // Validação do jogador
    if (jogador.length < 3) {
      alert('{% trans "O nome do jogador deve ter pelo menos 3 caracteres" %}');
      jogadorInput.focus();
      return false;
    }
    
    if (jogador === '{{ request.user.username }}') {
      alert('{% trans "Você não pode transferir para si mesmo" %}');
      jogadorInput.focus();
      return false;
    }
    
    // Validação do valor
    if (valor < 1.00) {
      alert('{% trans "O valor mínimo para transferência é R$ 1,00" %}');
      valorInput.focus();
      return false;
    }
    
    if (valor > 1000.00) {
      alert('{% trans "O valor máximo para transferência é R$ 1.000,00" %}');
      valorInput.focus();
      return false;
    }
    
    if (valor > SALDO_NORMAL) {
      alert('{% trans "Saldo insuficiente para realizar esta transferência" %}');
      valorInput.focus();
      return false;
    }
    
    if (!senha) {
      alert('{% trans "Digite sua senha para confirmar" %}');
      senhaInput.focus();
      return false;
    }
    
    // Confirmação final
    if (!confirm('{% trans "Tem certeza que deseja transferir R$ " %}' + valor.toFixed(2) + ' {% trans "para " %}' + jogador + '?')) {
      return false;
    }
    
    // Marca como processando
    form.dataset.processing = 'true';
    
    // Desabilita o botão e campos do formulário
    if (btnTransfer) {
      btnTransfer.disabled = true;
      btnTransfer.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> {% trans "Processando transferência..." %}';
      btnTransfer.style.opacity = '0.6';
      btnTransfer.style.cursor = 'not-allowed';
    }
    
    const formInputs = form.querySelectorAll('input, button');
    formInputs.forEach(function(input) {
      if (input !== btnTransfer) {
        input.disabled = true;
      }
    });
    
    // Adiciona overlay de loading
    const loadingOverlay = document.createElement('div');
    loadingOverlay.id = 'transfer-loading-overlay';
    loadingOverlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;';
    loadingOverlay.innerHTML = '<div style="background: white; padding: 2rem; border-radius: 12px; text-align: center;"><i class="fas fa-spinner fa-spin fa-3x mb-3" style="color: #667eea;"></i><p style="margin: 0; font-size: 1.1rem; color: #333;">{% trans "Processando transferência..." %}</p></div>';
    document.body.appendChild(loadingOverlay);
    
    // Prepara dados para a API
    const apiData = {
      jogador: jogador,
      valor: valor.toString(),
      senha: senha
    };
    
    // Obtém CSRF token
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    
    // Faz chamada AJAX para a API
    fetch('{% url "wallet:api_internal_transfer_player" %}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken,
      },
      credentials: 'same-origin',
      body: JSON.stringify(apiData)
    })
    .then(response => response.json())
    .then(data => {
      // Remove overlay
      const overlay = document.getElementById('transfer-loading-overlay');
      if (overlay) overlay.remove();
      
      // Reabilita formulário
      form.dataset.processing = 'false';
      formInputs.forEach(function(input) {
        input.disabled = false;
      });
      
      if (data.success) {
        // Sucesso - mostra notificação flutuante de sucesso
        const successMessage = data.message || '{% trans "Transferência realizada com sucesso!" %}';
        
        // Usa o sistema de notificações flutuantes se disponível
        if (window.floatingNotifications) {
          window.floatingNotifications.success(successMessage, {
            autoClose: true,
            autoCloseDelay: 4000  // 4 segundos
          });
        } else {
          // Fallback: mostra mensagem simples
          alert(successMessage);
        }
        
        // Redireciona após 2 segundos para dar tempo de ver a notificação
        setTimeout(function() {
          // Passa mensagem via query string para o dashboard mostrar também
          const message = encodeURIComponent(successMessage);
          window.location.href = '{% url "wallet:dashboard" %}?transfer_success=' + message;
        }, 2000);
      } else {
        // Erro - mostra notificação de erro
        const errorMessage = data.error || '{% trans "Erro ao processar transferência" %}';
        
        if (window.floatingNotifications) {
          window.floatingNotifications.error(errorMessage, {
            autoClose: true,
            autoCloseDelay: 6000  // 6 segundos para erros
          });
        } else {
          // Fallback: mostra alert
          alert(errorMessage);
        }
        if (btnTransfer) {
          btnTransfer.disabled = false;
          btnTransfer.innerHTML = '<i class="fas fa-check-circle me-2"></i> {% trans "Confirmar Transferência" %}';
          btnTransfer.style.opacity = '1';
          btnTransfer.style.cursor = 'pointer';
        }
      }
    })
    .catch(error => {
      // Remove overlay
      const overlay = document.getElementById('transfer-loading-overlay');
      if (overlay) overlay.remove();
      
      // Reabilita formulário
      form.dataset.processing = 'false';
      formInputs.forEach(function(input) {
        input.disabled = false;
      });
      
      console.error('Erro:', error);
      const errorMessage = '{% trans "Erro ao processar transferência. Tente novamente." %}';
      
      if (window.floatingNotifications) {
        window.floatingNotifications.error(errorMessage, {
          autoClose: true,
          autoCloseDelay: 6000
        });
      } else {
        alert(errorMessage);
      }
      
      if (btnTransfer) {
        btnTransfer.disabled = false;
        btnTransfer.innerHTML = '<i class="fas fa-check-circle me-2"></i> {% trans "Confirmar Transferência" %}';
        btnTransfer.style.opacity = '1';
        btnTransfer.style.cursor = 'pointer';
      }
    });
  });
  
  // Formatação do valor
  valorInput.addEventListener('input', function() {
    let value = this.value.replace(/[^\d.,]/g, '');
    value = value.replace(',', '.');
    
    if (value.includes('.')) {
      const parts = value.split('.');
      if (parts[1].length > 2) {
        parts[1] = parts[1].substring(0, 2);
        value = parts.join('.');
      }
    }
    
    this.value = value;
  });
  
  // Formatação do nome do jogador
  jogadorInput.addEventListener('input', function() {
    this.value = this.value.replace(/[^a-zA-Z0-9_]/g, '');
  });
});
</script>
{% endblock %}