<?php $pageTitle = 'EL3AB - حساب جديد'; ?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="theme-color" content="#050D17">
  <title><?= $pageTitle ?></title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/public/css/app.css">
</head>
<body>
<div class="app" style="justify-content:center;align-items:center;padding:20px;">

  <div style="width:100%;max-width:380px;">
    <div class="text-center mb-6">
      <h1 style="font-family:var(--font-en);font-size:36px;font-weight:800;color:var(--gold);margin-bottom:8px;">EL3AB</h1>
      <p style="color:var(--text-2);font-size:14px;">انشئ حسابك وابدا اللعب</p>
    </div>

    <form id="register-form" class="space-y-4">
      <div class="input-group">
        <label class="input-label">اسم المستخدم</label>
        <input type="text" class="input" id="reg-username" placeholder="player123" required dir="ltr">
      </div>
      <div class="input-group">
        <label class="input-label">البريد الالكتروني</label>
        <input type="email" class="input" id="reg-email" placeholder="email@example.com" required dir="ltr">
      </div>
      <div class="input-group">
        <label class="input-label">كلمة المرور</label>
        <input type="password" class="input" id="reg-password" placeholder="6 احرف على الاقل" required dir="ltr" minlength="6">
      </div>
      <button type="submit" class="btn btn-gold btn-block btn-lg" id="reg-btn">
        انشاء حساب
      </button>
    </form>

    <p class="text-center mt-4" style="font-size:13px;color:var(--text-3);">
      عندك حساب؟ <a href="/login" style="color:var(--cyan);">سجل دخول</a>
    </p>

    <div id="reg-error" style="display:none;margin-top:16px;padding:12px;background:var(--overlay-error-bg);border:1px solid var(--overlay-error-border);border-radius:var(--radius-md);color:var(--error);font-size:13px;text-align:center;"></div>
  </div>

</div>

<script src="/public/js/app.js"></script>
<script>
document.getElementById('register-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const btn = document.getElementById('reg-btn');
  const errEl = document.getElementById('reg-error');
  errEl.style.display = 'none';
  btn.disabled = true;
  btn.textContent = 'جاري التسجيل...';

  const username = document.getElementById('reg-username').value;
  const email = document.getElementById('reg-email').value;
  const password = document.getElementById('reg-password').value;

  try {
    const res = await fetch('/api/auth', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'register', email, password, username })
    });
    const data = await res.json();

    if (data.error) {
      errEl.textContent = data.error;
      errEl.style.display = 'block';
    } else {
      App.setAuth(data.access_token, data.user);
      window.location.href = '/';
    }
  } catch (err) {
    errEl.textContent = 'حدث خطا في الاتصال';
    errEl.style.display = 'block';
  }

  btn.disabled = false;
  btn.textContent = 'انشاء حساب';
});

if (App.isLoggedIn()) window.location.href = '/';
</script>
</body>
</html>
