<?php $pageTitle = 'EL3AB - الملف الشخصي'; ?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<div class="space-y-6" id="profile-page">

  <!-- Profile Header -->
  <div class="card">
    <div class="card-body text-center" style="padding:24px;">
      <div class="avatar avatar-lg" style="margin:0 auto 12px;">
        <svg class="icon-lg"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
      </div>
      <h2 style="font-size:20px;font-weight:700;" id="profile-name">---</h2>
      <p class="text-muted text-sm" id="profile-username">@---</p>
      <div style="display:flex;gap:12px;justify-content:center;margin-top:12px;">
        <div class="badge badge-gold" id="profile-level">المستوى 1</div>
        <div class="badge" id="profile-title">لاعب</div>
      </div>
    </div>
  </div>

  <!-- Stats Grid -->
  <div class="stat-grid stat-grid-4">
    <div class="stat-card">
      <div class="stat-value" id="stat-games">0</div>
      <div class="stat-label">مباريات</div>
    </div>
    <div class="stat-card">
      <div class="stat-value text-success" id="stat-wins">0</div>
      <div class="stat-label">فوز</div>
    </div>
    <div class="stat-card">
      <div class="stat-value text-muted" id="stat-draws">0</div>
      <div class="stat-label">تعادل</div>
    </div>
    <div class="stat-card">
      <div class="stat-value text-error" id="stat-losses">0</div>
      <div class="stat-label">خسارة</div>
    </div>
  </div>

  <!-- Ratings -->
  <div class="card">
    <div class="card-body">
      <p class="section-title" style="margin-bottom:12px;">التصنيفات</p>
      <div class="space-y-3">
        <div style="display:flex;align-items:center;justify-content:space-between;">
          <div style="display:flex;align-items:center;gap:8px;">
            <svg class="icon" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-clock"></use></svg>
            <span>بليتز</span>
          </div>
          <span style="font-weight:700;font-family:var(--font-en);" id="rating-blitz">1200</span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;">
          <div style="display:flex;align-items:center;gap:8px;">
            <svg class="icon" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-clock"></use></svg>
            <span>رابيد</span>
          </div>
          <span style="font-weight:700;font-family:var(--font-en);" id="rating-rapid">1200</span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;">
          <div style="display:flex;align-items:center;gap:8px;">
            <svg class="icon" style="color:var(--purple)"><use href="/public/icons/sprite.svg#icon-clock"></use></svg>
            <span>بوليت</span>
          </div>
          <span style="font-weight:700;font-family:var(--font-en);" id="rating-bullet">1200</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Economy -->
  <div class="card">
    <div class="card-body">
      <p class="section-title" style="margin-bottom:12px;">الاقتصاد</p>
      <div class="stat-grid" style="grid-template-columns:1fr 1fr 1fr;">
        <div class="stat-item">
          <div class="stat-value" id="stat-coins">0</div>
          <div class="stat-label">عملات</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="stat-gems">0</div>
          <div class="stat-label">جواهر</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="stat-streak">0</div>
          <div class="stat-label">ايام متتالية</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Actions -->
  <div class="space-y-2">
    <a href="/settings" class="btn btn-ghost btn-block">
      <svg class="icon"><use href="/public/icons/sprite.svg#icon-settings"></use></svg>
      الاعدادات
    </a>
    <button class="btn btn-ghost btn-block" style="color:var(--error);" onclick="App.logout()">
      <svg class="icon"><use href="/public/icons/sprite.svg#icon-logout"></use></svg>
      تسجيل خروج
    </button>
  </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  if (!App.isLoggedIn()) {
    window.location.href = '/login';
    return;
  }

  const data = await App.fetch('/api/profile');
  if (data && data.profile) {
    const p = data.profile;
    document.getElementById('profile-name').textContent = p.display_name || p.username || '---';
    document.getElementById('profile-username').textContent = '@' + (p.username || '---');
    document.getElementById('profile-level').textContent = 'المستوى ' + (p.level || 1);
    document.getElementById('stat-games').textContent = p.games_played || 0;
    document.getElementById('stat-wins').textContent = p.wins || 0;
    document.getElementById('stat-draws').textContent = p.draws || 0;
    document.getElementById('stat-losses').textContent = p.losses || 0;
    document.getElementById('rating-blitz').textContent = p.elo_blitz || 1200;
    document.getElementById('rating-rapid').textContent = p.elo_rapid || 1200;
    document.getElementById('rating-bullet').textContent = p.elo_bullet || 1200;
    document.getElementById('stat-coins').textContent = (p.coins || 0).toLocaleString();
    document.getElementById('stat-gems').textContent = p.gems || 0;
    document.getElementById('stat-streak').textContent = p.daily_streak || 0;
  }
});
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>
