{% extends "customer/base.html" %}
{% block title %}Xác nhận email — {{ brand.ten_hien_thi }}{% endblock %}
{% block header %}
<div class="header">
  <div class="header-logo">📧</div>
  <div>
    <div class="header-title">Xác nhận email</div>
    <div class="header-sub">Nhập mã OTP được gửi về email</div>
  </div>
</div>
{% endblock %}

{% block content %}
<div style="max-width:360px;margin:20px auto;text-align:center">
  <div style="font-size:64px;margin-bottom:16px">📬</div>
  <h2 style="color:var(--gold-dark);margin-bottom:8px">Kiểm tra email!</h2>
  <p class="text-sm" style="color:#6b7280;margin-bottom:24px">
    Chúng tôi đã gửi mã xác nhận 6 chữ số đến<br>
    <strong id="emailDisplay">{{ email }}</strong>
  </p>

  <div id="alert" class="alert alert-error hidden" style="text-align:left"></div>

  <div class="form-group" style="text-align:left">
    <label class="form-label">Mã OTP (6 chữ số)</label>
    <input id="otp" type="text" class="form-input" placeholder="000000"
           maxlength="6" inputmode="numeric" style="font-size:24px;letter-spacing:8px;text-align:center">
  </div>

  <button class="btn btn-gold" id="btnVerify" onclick="doVerify()">Xác nhận</button>

  <div class="mt-16">
    <span class="text-sm" style="color:#6b7280">Không nhận được mã? </span>
    <button onclick="resendOtp()" class="text-sm text-gold font-bold"
            style="background:none;border:none;cursor:pointer">Gửi lại</button>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const email = new URLSearchParams(window.location.search).get('email') || '{{ email }}';
document.getElementById('emailDisplay').textContent = email;

// Auto-focus OTP input
document.getElementById('otp').focus();

async function doVerify() {
  const code = document.getElementById('otp').value.trim();
  const btn  = document.getElementById('btnVerify');

  if (code.length !== 6) {
    showAlert('Mã OTP gồm 6 chữ số', 'error'); return;
  }

  btn.innerHTML = '<span class="spinner"></span>';
  btn.disabled  = true;

  try {
    const r = await fetch('/khach/api/xac-nhan-otp', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({email, code}),
    });
    const d = await r.json();

    if (d.ok) {
      showAlert('Xác nhận thành công! Đang chuyển hướng...', 'success');
      setTimeout(() => window.location.href = d.redirect, 1000);
    } else {
      showAlert(d.msg || 'Mã OTP không đúng', 'error');
    }
  } catch(e) {
    showAlert('Lỗi kết nối. Thử lại.', 'error');
  }

  btn.innerHTML = 'Xác nhận';
  btn.disabled  = false;
}

async function resendOtp() {
  showAlert('Đang gửi lại mã...', 'info');
  // Reload trang để trigger gửi lại OTP
  setTimeout(() => showAlert('Vui lòng kiểm tra email trong vài phút.', 'info'), 500);
}

function showAlert(msg, type) {
  const el = document.getElementById('alert');
  el.textContent = msg;
  el.className = `alert alert-${type}`;
}

// Auto-submit khi nhập đủ 6 số
document.getElementById('otp').addEventListener('input', function() {
  if (this.value.length === 6) doVerify();
});

document.addEventListener('keydown', e => { if (e.key === 'Enter') doVerify(); });
</script>
{% endblock %}