<?php $pageTitle = 'EL3AB - المنظمة'; ?>
<?php require __DIR__ . '/../includes/header.php'; ?>

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

  <!-- Header -->
  <div class="card">
    <div class="card-body text-center" style="padding:24px;">
      <div class="avatar avatar-lg" style="margin:0 auto 12px;background:var(--bg-3);">
        <svg class="icon-xl" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-org"></use></svg>
      </div>
      <h2 style="font-size:20px;font-weight:700;" id="org-name">---</h2>
      <p class="text-muted text-sm" id="org-desc">---</p>
      <div style="display:flex;gap:12px;justify-content:center;margin-top:12px;">
        <div class="badge" id="org-members-count">0 عضو</div>
        <div class="badge" id="org-created">---</div>
      </div>
    </div>
  </div>

  <!-- Join/Leave -->
  <button class="btn btn-cyan btn-block" id="org-join-btn" style="display:none;" onclick="joinOrg()">
    <svg class="icon"><use href="/public/icons/sprite.svg#icon-plus"></use></svg>
    انضم
  </button>
  <button class="btn btn-ghost btn-block" id="org-leave-btn" style="display:none;" onclick="leaveOrg()">
    تسجيل خروج من المنظمة
  </button>

  <!-- Stats -->
  <div class="stat-grid">
    <div class="stat-item">
      <div class="stat-value" id="org-total-games">0</div>
      <div class="stat-label">مباريات</div>
    </div>
    <div class="stat-item">
      <div class="stat-value" id="org-avg-elo">0</div>
      <div class="stat-label">متوسط ELO</div>
    </div>
    <div class="stat-item">
      <div class="stat-value" id="org-wins">0</div>
      <div class="stat-label">انتصارات</div>
    </div>
  </div>

  <!-- Members -->
  <div class="card">
    <div class="card-body">
      <p class="section-title" style="margin-bottom:12px;">الاعضاء</p>
      <div id="org-members">
        <div class="empty-state text-sm">جاري التحميل...</div>
      </div>
    </div>
  </div>

</div>

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

  const params = new URLSearchParams(window.location.search);
  const id = params.get('id');
  if (!id) {
    window.location.href = '/orgs';
    return;
  }

  const data = await App.fetch('/api/orgs?action=detail&id=' + id);
  if (!data || !data.org) {
    App.toast('المنظمة غير موجودة', 'error');
    return;
  }

  const org = data.org;
  document.getElementById('org-name').textContent = org.name;
  document.getElementById('org-desc').textContent = org.description || '';
  document.getElementById('org-members-count').textContent = (org.members_count || 0) + ' عضو';

  if (data.is_member) {
    document.getElementById('org-leave-btn').style.display = 'flex';
  } else {
    document.getElementById('org-join-btn').style.display = 'flex';
  }

  if (data.members && data.members.length > 0) {
    document.getElementById('org-members').innerHTML = data.members.map(m => `
      <div style="display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);">
        <div class="avatar avatar-sm" style="background:var(--bg-3);">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-profile"></use></svg>
        </div>
        <div style="flex:1;">
          <p style="font-size:14px;font-weight:600;">${m.display_name || m.username}</p>
          <p class="text-muted text-xs">${m.role || 'عضو'}</p>
        </div>
        <span style="font-family:var(--font-en);font-size:12px;color:var(--text-3);">${m.elo_blitz || 1200}</span>
      </div>
    `).join('');
  }
});

async function joinOrg() {
  const params = new URLSearchParams(window.location.search);
  const res = await App.fetch('/api/orgs', {
    method: 'POST',
    body: JSON.stringify({ action: 'join', org_id: params.get('id') })
  });
  if (res && res.ok) {
    App.toast('تم الانضمام', 'success');
    location.reload();
  }
}

async function leaveOrg() {
  if (!confirm('هل تريد مغادرة المنظمة؟')) return;
  const params = new URLSearchParams(window.location.search);
  const res = await App.fetch('/api/orgs', {
    method: 'POST',
    body: JSON.stringify({ action: 'leave', org_id: params.get('id') })
  });
  if (res && res.ok) {
    window.location.href = '/orgs';
  }
}
</script>

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