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

{% block extrastyle %}
<style>
  .reports-container {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    padding: 2rem 0;
    color: #ffffff;
  }

  .fancy-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 2rem;
    margin-bottom: 2rem;
    animation: fadeInUp 0.6s ease-out;
  }

  .fancy-header {
    background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
  }

  .fancy-header h2 {
    color: #ffffff;
    margin: 0;
    font-weight: 700;
    font-size: 1.8rem;
  }

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

  .form-label {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
  }

  .form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #ffffff;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
  }

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

  .form-control:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    cursor: not-allowed;
  }

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

  .btn-primary {
    background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
    border: none;
    border-radius: 15px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
    background: linear-gradient(135deg, #5a32a3 0%, #d63384 100%);
  }

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

  .password-field {
    position: relative;
  }

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

  .password-toggle:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }

  .password-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
  }

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

  .info-text {
    background: rgba(111, 66, 193, 0.1);
    border: 1px solid rgba(111, 66, 193, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: center;
    color: #ffffff;
  }

  .info-text small {
    color: #f8fafc;
    display: block;
    margin-bottom: 0.5rem;
  }

  .info-text a {
    color: #0dcaf0;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
  }

  .info-text a:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  /* Estilos para mensagens de alerta */
  .alert {
    color: #ffffff;
  }

  .alert strong {
    color: #ffffff;
  }

  .alert p {
    color: #ffffff;
  }

  .alert small {
    color: #f8fafc;
  }

  .btn-email-code {
    background: linear-gradient(135deg, #0dcaf0 0%, #17a2b8 100%);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 2rem;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(13, 202, 240, 0.3);
  }

  .btn-email-code:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 202, 240, 0.4);
    background: linear-gradient(135deg, #0aa2c0 0%, #138496 100%);
    color: #ffffff;
  }

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

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

  @media (max-width: 768px) {
    .reports-container {
      padding: 1rem 0;
    }
    
    .fancy-card {
      padding: 1.5rem;
      margin: 1rem;
    }
    
    .fancy-header {
      padding: 1rem;
    }
    
    .fancy-header h2 {
      font-size: 1.5rem;
    }
  }
</style>
{% endblock extrastyle %}

{% block content %}
<div class="reports-container">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-8">
        <div class="fancy-card">
          <div class="fancy-header">
            <h2>
              <i class="fas fa-link me-2"></i>
              {% trans "Vincular Conta do Jogo" %}
            </h2>
          </div>

          {% if has_pending_code %}
          <div class="alert alert-info" style="background: rgba(13, 202, 240, 0.2); border: 1px solid rgba(13, 202, 240, 0.5); border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem;">
            <i class="fas fa-envelope me-2" style="color: #ffffff;"></i>
            <strong style="color: #ffffff;">{% trans "Código enviado!" %}</strong>
            <p class="mb-0 mt-2" style="font-size: 0.9rem; color: #ffffff;">
              {% blocktrans with email=code_email %}Um código de verificação foi enviado para <strong style="color: #ffffff;">{{ email }}</strong>.{% endblocktrans %}
              <br>
              <small style="color: #f8fafc;">{% trans "O código é válido por 10 minutos." %}</small>
            </p>
          </div>
          {% endif %}

          <form method="post" id="linkForm">
            {% csrf_token %}
            <input type="hidden" name="action" value="link">

            <div class="form-group">
              <label class="form-label">
                <i class="fas fa-user me-2"></i>
                {% trans "Login da Conta Lineage" %}
              </label>
              <input type="text" class="form-control" value="{{ request.user.username }}" readonly disabled>
            </div>

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

            {% if has_pending_code %}
            <div class="form-group">
              <label class="form-label">
                <i class="fas fa-key me-2"></i>
                {% trans "Código de Verificação" %}
              </label>
              <input type="text" name="verification_code" class="form-control" id="verification_code" placeholder="{% trans 'Digite o código de 6 dígitos' %}" maxlength="6" pattern="[0-9]{6}" required>
              <small class="mt-1 d-block" style="color: #f8fafc;">
                {% trans "Digite o código de 6 dígitos enviado para seu e-mail." %}
              </small>
            </div>
            {% endif %}

            <div class="d-grid">
              <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-link me-2"></i>
                {% trans "Vincular Conta" %}
              </button>
            </div>
          </form>

          <div class="text-center mt-4">
            <form method="post" class="d-inline">
              {% csrf_token %}
              <input type="hidden" name="action" value="request_code">
              <button type="submit" class="btn btn-email-code">
                <i class="fas fa-envelope me-2"></i>
                {% trans "Enviar código por e-mail" %}
              </button>
            </form>
          </div>

          <div class="info-text">
            <small>
              <i class="fas fa-info-circle me-1"></i>
              {% trans "Certifique-se de que a conta ainda não está vinculada a outro usuário." %}
            </small>
            <a href="{% url 'server:request_link_by_email' %}">
              <i class="fas fa-envelope me-1"></i>
              {% trans "Esqueceu sua senha? Vincular conta via e-mail." %}
            </a>
          </div>
        </div>
      </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 antes de enviar
document.addEventListener('DOMContentLoaded', function() {
  const linkForm = document.getElementById('linkForm');
  const passwordInput = document.getElementById('senha');
  {% if has_pending_code %}
  const codeInput = document.getElementById('verification_code');
  {% endif %}

  linkForm.addEventListener('submit', function(e) {
    if (!passwordInput.value.trim()) {
      e.preventDefault();
      alert('{% trans "Por favor, digite a senha da conta." %}');
      return false;
    }
    {% if has_pending_code %}
    if (!codeInput.value.trim()) {
      e.preventDefault();
      alert('{% trans "Por favor, digite o código de verificação." %}');
      return false;
    }
    if (codeInput.value.length !== 6) {
      e.preventDefault();
      alert('{% trans "O código deve ter 6 dígitos." %}');
      return false;
    }
    {% endif %}
  });
});
</script>
{% endblock %}