/**
 * AURA FARMING — App JS Global
 * Etapa 1
 */

// ── Partículas de fundo ────────────────────────────────────────
(function initParticles() {
  const container = document.querySelector('.particles');
  if (!container) return;

  const count = window.innerWidth < 480 ? 18 : 28;

  for (let i = 0; i < count; i++) {
    const p = document.createElement('div');
    p.className = 'particle';

    const size = Math.random() * 3 + 1;
    p.style.width  = size + 'px';
    p.style.height = size + 'px';
    p.style.left   = Math.random() * 100 + '%';
    p.style.top    = Math.random() * 100 + '%';
    p.style.animationDuration  = (Math.random() * 12 + 8) + 's';
    p.style.animationDelay     = (Math.random() * 10) + 's';
    p.style.opacity = Math.random() * 0.6 + 0.2;

    container.appendChild(p);
  }
})();

// ── Tabs (Login / Cadastro) ───────────────────────────────────
document.querySelectorAll('.auth-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    const target = tab.dataset.tab;

    document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

    tab.classList.add('active');
    const el = document.getElementById('tab-' + target);
    if (el) el.classList.add('active');
  });
});

// ── Mostrar/ocultar senha ─────────────────────────────────────
document.querySelectorAll('.btn-eye').forEach(btn => {
  btn.addEventListener('click', () => {
    const input = btn.previousElementSibling || btn.parentElement.querySelector('input');
    if (!input) return;
    const isPass = input.type === 'password';
    input.type = isPass ? 'text' : 'password';
    btn.textContent = isPass ? '🙈' : '👁️';
  });
});

// ── Copiar Aura-ID ────────────────────────────────────────────
document.querySelectorAll('.aura-player-id').forEach(el => {
  el.addEventListener('click', () => {
    const id = el.dataset.id;
    if (!id) return;
    navigator.clipboard.writeText(id).then(() => {
      const copy = el.querySelector('.copy-icon');
      if (copy) {
        copy.textContent = '✅';
        setTimeout(() => { copy.textContent = '📋'; }, 1500);
      }
    });
  });
});

// ── Modal (editar perfil) ─────────────────────────────────────
const overlay = document.querySelector('.modal-overlay');
const openBtns = document.querySelectorAll('[data-modal-open]');
const closeBtns = document.querySelectorAll('[data-modal-close]');

openBtns.forEach(btn => {
  btn.addEventListener('click', () => overlay?.classList.add('open'));
});
closeBtns.forEach(btn => {
  btn.addEventListener('click', () => overlay?.classList.remove('open'));
});
overlay?.addEventListener('click', e => {
  if (e.target === overlay) overlay.classList.remove('open');
});

// ── Preview avatar antes do upload ───────────────────────────
const avatarInput  = document.querySelector('#avatar-input');
const avatarPreview = document.querySelector('#avatar-modal-preview');

if (avatarInput && avatarPreview) {
  avatarInput.addEventListener('change', () => {
    const file = avatarInput.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = e => { avatarPreview.src = e.target.result; };
    reader.readAsDataURL(file);
  });
}


// ── Cadastro: ajuda visual, normalização e erros por campo ─────
(function initRegisterFormUX() {
  const form = document.querySelector('.js-register-form');
  if (!form) return;

  const username = form.querySelector('[name="username"]');
  const email = form.querySelector('[name="email"]');
  const senha = form.querySelector('[name="senha"]');
  const confirmar = form.querySelector('[name="confirmar"]');
  const nascimento = form.querySelector('[name="data_nascimento"]');
  const confirmarIdade = form.querySelector('[name="confirmar_idade"]');
  const aceitarTermos = form.querySelector('[name="aceitar_termos_privacidade"]');

  function normalizeUsername(value) {
    let output = String(value || '');
    try { output = output.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); } catch (e) {}
    return output
      .toLowerCase()
      .replace(/\s+/g, '_')
      .replace(/[^a-z0-9_]/g, '')
      .replace(/_+/g, '_')
      .replace(/^_+|_+$/g, '')
      .slice(0, 30);
  }

  function getGroup(input) {
    return input?.closest('.form-group') || null;
  }

  function clearError(input) {
    const group = getGroup(input);
    if (!group) return;
    group.classList.remove('has-error');
    input.removeAttribute('aria-invalid');
    const err = group.querySelector('.js-field-client-error');
    if (err) err.remove();
  }

  function setError(input, message) {
    const group = getGroup(input);
    if (!group) return false;
    group.classList.add('has-error');
    input.setAttribute('aria-invalid', 'true');
    let err = group.querySelector('.js-field-client-error');
    if (!err) {
      err = document.createElement('small');
      err.className = 'form-error js-field-client-error';
      group.appendChild(err);
    }
    err.textContent = '⚠️ ' + message;
    return true;
  }

  function showRegisterAlert() {
    let alert = form.querySelector('.js-register-alert');
    if (!alert) {
      alert = document.createElement('div');
      alert.className = 'register-inline-alert js-register-alert';
      alert.setAttribute('role', 'alert');
      form.insertBefore(alert, form.firstElementChild);
    }
    alert.textContent = 'Corrija os campos destacados antes de criar a conta.';
  }

  function clearRegisterAlert() {
    form.querySelector('.js-register-alert')?.remove();
  }

  function validateUsername(showError) {
    if (!username) return true;
    const normalized = normalizeUsername(username.value);
    if (username.value !== normalized) username.value = normalized;
    const ok = /^[a-z0-9_]{3,30}$/.test(username.value);
    if (!ok && showError) {
      setError(username, 'Use 3 a 30 caracteres: letras minúsculas, números e underline. Exemplo: marcelino_123.');
    } else if (ok) {
      clearError(username);
    }
    return ok;
  }

  username?.addEventListener('input', () => {
    validateUsername(false);
    if (username.value.length >= 3) clearError(username);
  });

  confirmar?.addEventListener('input', () => {
    if (!confirmar.value || !senha?.value) return clearError(confirmar);
    if (senha.value !== confirmar.value) setError(confirmar, 'As duas senhas precisam ser iguais.');
    else clearError(confirmar);
  });

  senha?.addEventListener('input', () => {
    if (senha.value.length >= 8) clearError(senha);
    if (confirmar?.value) confirmar.dispatchEvent(new Event('input'));
  });

  form.addEventListener('submit', (event) => {
    clearRegisterAlert();
    [username, email, senha, confirmar, nascimento, confirmarIdade, aceitarTermos].forEach(input => input && clearError(input));

    let hasError = false;
    let firstInvalid = null;
    const mark = (input, message) => {
      if (!firstInvalid) firstInvalid = input;
      hasError = setError(input, message) || hasError;
    };

    if (!validateUsername(false)) mark(username, 'Use 3 a 30 caracteres: letras minúsculas, números e underline. Exemplo: marcelino_123.');
    if (email && !/^\S+@\S+\.\S+$/.test(email.value.trim())) mark(email, 'Digite um e-mail válido. Exemplo: nome@email.com.');
    if (nascimento && !nascimento.value) mark(nascimento, 'Informe sua data de nascimento.');
    if (senha && senha.value.length < 8) mark(senha, 'A senha precisa ter pelo menos 8 caracteres.');
    if (confirmar && senha && confirmar.value !== senha.value) mark(confirmar, 'Digite a mesma senha nos dois campos.');
    if (confirmarIdade && !confirmarIdade.checked) mark(confirmarIdade, 'Confirme que a data de nascimento informada é verdadeira.');
    if (aceitarTermos && !aceitarTermos.checked) mark(aceitarTermos, 'Você precisa aceitar os Termos de Uso e o Aviso de Privacidade.');

    if (hasError) {
      event.preventDefault();
      event.stopImmediatePropagation();
      showRegisterAlert();
      firstInvalid?.focus?.({ preventScroll: true });
      firstInvalid?.scrollIntoView?.({ behavior: 'smooth', block: 'center' });
    }
  });
})();

// ── Desabilitar duplo-submit ──────────────────────────────────
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', function () {
    const btn = this.querySelector('button[type="submit"]');
    if (btn) {
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner">⏳</span> Aguarde...';
    }
  });
});

// ── Auto-uppercase em campo AURA-ID ──────────────────────────
const idInput = document.querySelector('#buscar-id');
if (idInput) {
  idInput.addEventListener('input', () => {
    idInput.value = idInput.value.toUpperCase();
  });
}

// ── Fechar flash automático ───────────────────────────────────
const flash = document.querySelector('.flash');
if (flash) {
  setTimeout(() => {
    flash.style.transition = 'opacity .5s';
    flash.style.opacity = '0';
    setTimeout(() => flash.remove(), 500);
  }, 4000);
}


// ── Preview avatar no cadastro ───────────────────────────────
const registerAvatarInput = document.querySelector('#register-avatar-input');
const registerAvatarPreview = document.querySelector('#register-avatar-preview');
if (registerAvatarInput && registerAvatarPreview) {
  registerAvatarInput.addEventListener('change', () => {
    const file = registerAvatarInput.files?.[0];
    if (!file) return;
    if (file.size > 5 * 1024 * 1024) { alert('A imagem deve ter no máximo 5 MB.'); registerAvatarInput.value=''; return; }
    const reader = new FileReader(); reader.onload = e => registerAvatarPreview.src = e.target.result; reader.readAsDataURL(file);
  });
}
