<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/session_bootstrap.php';
require_once __DIR__ . '/../../../api/matches/ping-pong/1v1/internal/env.php';
if (!isset($_SESSION['logged_in']) || !$_SESSION['logged_in']) {
    header('Location: /login/index.php');
    exit();
}

// Configure WS URL from env if present (recommended behind reverse proxy).
$wsUrl = og_env('PINGPONG_1V1_WS_URL');
if (!$wsUrl) {
  $wsUrl = og_env('PUBLIC_WS_URL');
}
if (!$wsUrl) {
    // Fallback for local dev: ws://host:8088
    $host = $_SERVER['HTTP_HOST'] ?? 'localhost';
    $wsUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on')
        ? ('wss://' . $host . '/ping-pong-1v1')
        : ('ws://' . $host . ':8088');
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Ping-Pong 1v1 Online</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/header.css" type="text/css" media="all"/>
  <link rel="stylesheet" href="/css/footer.css" type="text/css" media="all"/>
  <link href="/css/style.css" rel="stylesheet" type="text/css" media="all"/>
  <link href="//fonts.googleapis.com/css?family=Lato:400,500,600,700,800,900" rel="stylesheet">
  <link rel="stylesheet" href="/disciplines/ping-pong/1v1/css/online.css">
  <script>
    window.PP1V1_WS_URL = <?php echo json_encode($wsUrl, JSON_UNESCAPED_SLASHES); ?>;
  </script>
</head>
<body>
  <div id="wrap">
    <div id="hud">
      <div class="hud-group hud-meta">
        <div class="badge" id="badge">userId: —</div>
        <div class="badge" id="score">0:0</div>
        <div class="badge" id="status">—</div>
      </div>
      <div class="hud-group hud-actions btnrow">
        <button class="btn" id="btnFind">Szukaj meczu</button>
        <button class="btn secondary" id="btnLeave">Wyjście</button>
      </div>
    </div>
      <div class="arena-shell">
        <div class="arena-decor" aria-hidden="true">
          <span class="arena-decor-item item-1">🌑</span>
          <span class="arena-decor-item item-2">🕶️</span>
          <span class="arena-decor-item item-3">🖤</span>
          <span class="arena-decor-item item-4">🎮</span>
          <span class="arena-decor-item item-5">♠️</span>
          <span class="arena-decor-item item-6">🌘</span>
          <span class="arena-decor-item item-7">🎱</span>
          <span class="arena-decor-item item-8">🕹️</span>
        </div>
        <canvas id="canvas"></canvas>
      </div>
  </div>

  <div id="overlay">
    <div class="panel">
      <div class="overlay-badge" id="overlayBadge" hidden></div>
      <div class="overlay-stage" id="overlayStage" hidden></div>
      <div class="h1" id="overlayTitle">—</div>
      <div class="overlay-hero" id="overlayHero" hidden>
        <div class="overlay-hero-number" id="overlayHeroNumber">10</div>
        <div class="overlay-hero-label" id="overlayHeroLabel">sekund do startu</div>
      </div>
      <div class="overlay-progress" id="overlayProgress" hidden>
        <div class="overlay-progress-bar" id="overlayProgressBar"></div>
      </div>
      <div class="p" id="overlayText">—</div>
      <div class="overlay-grid" id="overlayGrid" hidden></div>
      <div class="btnrow" id="overlayButtons"></div>
      <div class="small" id="overlayHint" style="margin-top:10px; opacity:.75;">
        Sterowanie: W/S lub strzałki lub myszka.
      </div>
    </div>
  </div>

  <script src="/disciplines/ping-pong/1v1/js/online.js"></script>
</body>
</html>
