<?php $pageTitle = 'EL3AB - دومينو اونلاين'; $hideNav = true; ?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<link rel="stylesheet" href="/public/css/domino.css">

<!-- Waiting Room -->
<div id="domino-waiting" class="space-y-6" style="padding:24px;text-align:center;">
  <h2 style="font-size:22px;font-weight:700;">غرفة دومينو</h2>

  <div class="card">
    <div class="card-body space-y-4">
      <div id="room-code-display">
        <p class="text-muted text-sm">كود الغرفة</p>
        <p id="room-code-value" style="font-size:32px;font-weight:700;letter-spacing:6px;color:var(--gold);"></p>
        <button class="btn btn-ghost btn-sm" onclick="copyCode()" style="margin-top:8px;">نسخ الكود</button>
      </div>

      <div id="waiting-players" class="space-y-3"></div>

      <button class="btn btn-gold btn-block btn-lg" id="start-game-btn" style="display:none;" onclick="DominoLive.startGame()">
        ابدأ اللعب
      </button>

      <button class="btn btn-ghost btn-sm" onclick="window.location.href='/domino'">مغادرة</button>
    </div>
  </div>
</div>

<!-- Game Area -->
<div id="domino-game-area" class="domino-game" style="display:none;">
  <div class="domino-top-area">
    <div id="domino-opponent-top" class="domino-opponent-top"></div>
    <div id="domino-scores"></div>
  </div>

  <div id="domino-opponent-left" class="domino-opponent-left"></div>
  <div id="domino-opponent-right" class="domino-opponent-right"></div>

  <div class="domino-board-area">
    <div id="domino-board"></div>
    <div id="domino-boneyard"></div>
  </div>

  <div id="domino-status" class="domino-status"></div>
  <div id="domino-actions"></div>
  <div id="domino-end-buttons"></div>

  <div class="domino-hand-area">
    <div id="domino-hand"></div>
  </div>
</div>

<!-- Round overlay -->
<div id="domino-round-overlay"></div>

<style>
.domino-waiting-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-2);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}
.domino-waiting-player--empty {
  border-style: dashed;
  opacity: 0.6;
}
</style>

<script src="/public/js/domino-constants.js"></script>
<script src="/public/js/domino-ui.js"></script>
<script src="/public/js/domino-live.js"></script>
<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var action = params.get('action');
  var matchId = params.get('match_id');
  var code = params.get('code');

  var token = localStorage.getItem('sb_access_token') || '';
  var userId = '';
  try {
    var payload = JSON.parse(atob(token.split('.')[1]));
    userId = payload.sub || '';
  } catch(e) {}

  if (!token || !userId) {
    window.location.href = '/login';
    return;
  }

  if (action === 'create') {
    App.fetch('/api/domino.php', {
      method: 'POST',
      body: JSON.stringify({ action: 'create', mode: params.get('mode') || '2p' })
    }).then(function(res) {
      if (res && res.ok) {
        var newMatchId = res.match.id;
        history.replaceState(null, '', '/domino-live?match_id=' + newMatchId);
        DominoLive.init({ matchId: newMatchId, userId: userId, token: token });
      } else {
        App.toast('فشل إنشاء الغرفة', 'error');
      }
    });
  } else if (action === 'join' && code) {
    App.fetch('/api/domino.php', {
      method: 'POST',
      body: JSON.stringify({ action: 'join', room_code: code })
    }).then(function(res) {
      if (res && res.ok) {
        var joinMatchId = res.match.id;
        history.replaceState(null, '', '/domino-live?match_id=' + joinMatchId);
        DominoLive.init({ matchId: joinMatchId, userId: userId, token: token });
      } else {
        App.toast(res.error || 'فشل الانضمام', 'error');
        setTimeout(function() { window.location.href = '/domino'; }, 1500);
      }
    });
  } else if (matchId) {
    DominoLive.init({ matchId: matchId, userId: userId, token: token });
  } else {
    window.location.href = '/domino';
  }
})();

function copyCode() {
  var code = document.getElementById('room-code-value').textContent;
  if (navigator.clipboard) {
    navigator.clipboard.writeText(code);
    App.toast('تم نسخ الكود', 'success');
  }
}
</script>

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