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

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/wallet.css' %}">
<style>
  /* Estilos específicos para a tela de transferência */
  .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(--primary-gradient);
  }

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

  .transfer-card-header {
    background: var(--primary-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(102, 126, 234, 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(102, 126, 234, 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: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    background: rgba(255, 255, 255, 1);
  }

  .input-group-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    color: white;
    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: #667eea;
    background: rgba(102, 126, 234, 0.1);
  }

  .password-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  }

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

  .btn-transfer {
    background: var(--primary-gradient);
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    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: white;
  }

  .btn-transfer:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 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;
  }

  /* 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-server me-3"></i>{% trans "Transferir para o Servidor" %}
      </h1>
      <p class="transfer-subtitle">
        {% trans "Envie suas moedas diretamente para o servidor do jogo de forma segura" %}
      </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 Servidor" %}</li>
        </ol>
      </nav>
    </div>

    <!-- Card Principal -->
    <div class="transfer-card">
      <div class="transfer-card-header">
        <i class="fas fa-upload transfer-card-icon"></i>
        <h2 class="transfer-card-title">{% trans "Transferência para Servidor" %}</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 "Conta do jogo:" %}</span>
            <span class="user-info-value text-warning">{{ active_account_login }}</span>
          </div>
          <div class="user-info-item">
            <span class="user-info-label">{% trans "Saldo atual:" %}</span>
            <span class="user-info-value balance">R$ {{ wallet.saldo|floatformat:2 }}</span>
          </div>
          {% if show_bonus_option %}
          <div class="user-info-item">
            <span class="user-info-label">{% trans "Saldo bônus:" %}</span>
            <span class="user-info-value" style="color:#0ea5e9; font-weight:700;">R$ {{ wallet.saldo_bonus|floatformat:2 }}</span>
          </div>
          {% endif %}
        </div>
        
        <!-- Formulário -->
        <form method="post" novalidate>
          {% csrf_token %}
          
          {% if show_bonus_option %}
          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-exchange-alt me-2"></i>{% trans "Origem do Saldo" %}
            </label>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="origem_saldo" id="origem_normal" value="normal" checked>
              <label class="form-check-label" for="origem_normal">
                {% trans "Saldo normal" %}
              </label>
            </div>
            {% if bonus_enabled %}
            <div class="form-check">
              <input class="form-check-input" type="radio" name="origem_saldo" id="origem_bonus" value="bonus">
              <label class="form-check-label" for="origem_bonus">
                {% trans "Saldo bônus" %}
              </label>
            </div>
            {% else %}
            <div class="form-text text-muted" style="margin-top: .25rem;">
              {% trans "Transferência usando saldo bônus está desabilitada pelo administrador." %}
            </div>
            {% endif %}
          </div>
          {% endif %}

          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-user me-2"></i>{% trans "Selecione o Personagem" %}
            </label>
            <select name="personagem" class="form-select" required>
              <option value="" disabled selected>{% trans "Escolha um personagem" %}</option>
              {% for p in personagens %}
                <option value="{{ p.char_name }}">{{ p.char_name }} (Lv.{{ p.base_level }})</option>
              {% endfor %}
            </select>
          </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 id="valor-feedback" class="form-text" style="margin-top:.25rem;"></div>
          </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" id="btn-transfer" disabled>
            <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');
  }
}

function showSuccessMessage(message) {
  // Remove overlay de loading se existir
  const loadingOverlay = document.getElementById('transfer-loading-overlay');
  if (loadingOverlay) loadingOverlay.remove();
  
  // Cria overlay de sucesso
  const successOverlay = document.createElement('div');
  successOverlay.id = 'transfer-success-overlay';
  successOverlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease-in;';
  
  successOverlay.innerHTML = `
    <div style="background: white; padding: 3rem; border-radius: 16px; text-align: center; max-width: 500px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: slideUp 0.4s ease-out;">
      <div style="width: 80px; height: 80px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, #10B981 0%, #059669 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: scaleIn 0.5s ease-out;">
        <i class="fas fa-check" style="font-size: 2.5rem; color: white;"></i>
      </div>
      <h3 style="color: #10B981; font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; font-family: 'Orbitron', sans-serif;">
        {% trans "Transferência Concluída!" %}
      </h3>
      <p style="color: #333; font-size: 1.1rem; margin-bottom: 2rem; line-height: 1.6;">
        ${message}
      </p>
      <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #6B7280; font-size: 0.9rem;">
        <i class="fas fa-spinner fa-spin"></i>
        <span>{% trans "Redirecionando..." %}</span>
      </div>
    </div>
  `;
  
  // Adiciona animações CSS se não existirem
  if (!document.getElementById('transfer-success-styles')) {
    const style = document.createElement('style');
    style.id = 'transfer-success-styles';
    style.textContent = `
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes scaleIn {
        from {
          opacity: 0;
          transform: scale(0);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
    `;
    document.head.appendChild(style);
  }
  
  document.body.appendChild(successOverlay);
  
  // Remove após 2 segundos (antes do redirect)
  setTimeout(function() {
    if (successOverlay && successOverlay.parentNode) {
      successOverlay.style.animation = 'fadeIn 0.3s ease-in reverse';
      setTimeout(function() {
        if (successOverlay && successOverlay.parentNode) {
          successOverlay.remove();
        }
      }, 300);
    }
  }, 1700);
}

// Validação do formulário
document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form');
  const valorInput = document.querySelector('input[name="valor"]');
  const origemNormal = document.getElementById('origem_normal');
  const origemBonus = document.getElementById('origem_bonus');
  const btnTransfer = document.getElementById('btn-transfer');
  const feedback = document.getElementById('valor-feedback');

  const SALDO_NORMAL = parseFloat('{{ wallet.saldo|unlocalize|default:"0.00"|escapejs }}') || 0;
  const SALDO_BONUS = parseFloat('{{ wallet.saldo_bonus|unlocalize|default:"0.00"|escapejs }}') || 0;

  function saldoDisponivelAtual() {
    {% if show_bonus_option %}
    if (origemBonus && origemBonus.checked) return SALDO_BONUS;
    {% endif %}
    return SALDO_NORMAL;
  }

  function updateSubmitState() {
    const raw = (valorInput.value || '').toString().replace(',', '.');
    const valor = parseFloat(raw);
    const saldo = saldoDisponivelAtual();

    let msg = '';
    let canSubmit = true;

    if (isNaN(valor)) {
      canSubmit = false;
    } else {
      if (valor < 1.00) { canSubmit = false; msg = '{% trans "O valor mínimo é R$ 1,00" %}'; }
      if (valor > 1000.00) { canSubmit = false; msg = '{% trans "O valor máximo é R$ 1.000,00" %}'; }
      if (valor > saldo) { canSubmit = false; msg = '{% trans "Saldo insuficiente para esta transferência" %}'; }
    }

    if (btnTransfer) btnTransfer.disabled = !canSubmit;
    if (feedback) {
      feedback.textContent = msg || '';
      feedback.style.color = msg ? '#dc2626' : '#6c757d';
    }
  }
  
  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 personagem = form.querySelector('select[name="personagem"]').value;
    const senha = form.querySelector('input[name="senha"]').value;
    const origemSaldo = form.querySelector('input[name="origem_saldo"]:checked') ? form.querySelector('input[name="origem_saldo"]:checked').value : 'normal';
    
    // Validações básicas
    if (!personagem) {
      alert('{% trans "Selecione um personagem" %}');
      return false;
    }
    
    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 show_bonus_option %}
    let saldoDisponivel = SALDO_NORMAL;
    if (origemBonus && origemBonus.checked) {
      saldoDisponivel = SALDO_BONUS;
    }
    if (valor > saldoDisponivel) {
      alert('{% trans "Saldo insuficiente para realizar esta transferência" %}');
      valorInput.focus();
      return false;
    }
    {% else %}
    if (valor > SALDO_NORMAL) {
      alert('{% trans "Saldo insuficiente para realizar esta transferência" %}');
      valorInput.focus();
      return false;
    }
    {% endif %}
    
    if (!senha) {
      alert('{% trans "Digite sua senha para confirmar" %}');
      form.querySelector('input[name="senha"]').focus();
      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, select, 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 = {
      personagem: personagem,
      valor: valor.toString(),
      origem_saldo: origemSaldo,
      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_server" %}', {
      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';
      }
    });
  });

  valorInput.addEventListener('input', updateSubmitState);
  valorInput.addEventListener('change', updateSubmitState);
  {% if show_bonus_option %}
  if (origemNormal) origemNormal.addEventListener('change', updateSubmitState);
  if (origemBonus) origemBonus.addEventListener('change', updateSubmitState);
  {% endif %}

  // Inicializa estado do botão ao carregar
  updateSubmitState();
  
  // 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;
  });
});
</script>
{% endblock %}