<?php
declare(strict_types=1);

/**
 * /functional/games/tetris/index.php
 * Тетріс:
 * - ПК: поле + правий блок
 * - Телефон: поле зверху, правий блок нижче, керування sticky знизу
 * - Next над полем
 */

require_once __DIR__ . '/../../../includes/start.php';
$pdo = db();
$me  = current_user();

if (!function_exists('h')) {
  function h(?string $s): string { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }
}

/* ===== SEO ===== */
$title = h(t('Тетріс', 'Тетрис', 'Tetris')) . ' — ' . h(t('Ігри', 'Игры', 'Games')) . ' — ' . h(t('VMEREGI', 'VMEREGI', 'VMEREGI'));
$meta_desc = t(
  'Грайте в Тетріс у VMEREGI: керування з клавіатури та на телефоні, рівні, очки та рекорд.',
  'Играйте в Тетрис в VMEREGI: управление с клавиатуры и на телефоне, уровни, очки и рекорд.',
  'Play Tetris in VMEREGI: keyboard and mobile controls, levels, score and best record.'
);
$canonical = abs_url('/functional/games/tetris/');

$cssPath = __DIR__ . '/../../../css/tetris.css';
$jsPath  = __DIR__ . '/tetris.js';
$cssV = is_file($cssPath) ? (string)filemtime($cssPath) : (string)time();
$jsV  = is_file($jsPath)  ? (string)filemtime($jsPath)  : (string)time();

require_once __DIR__ . '/../../../includes/header.php';
?>

<div class="container my-3">
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
    <div>
      <div class="small text-muted">
        <a href="/functional/games/" class="text-decoration-none"><?= h(t('Ігри', 'Игры', 'Games')) ?></a>
        <span class="mx-1">/</span>
        <span><?= h(t('Тетріс', 'Тетрис', 'Tetris')) ?></span>
      </div>
      <h1 class="h4 mb-0"><?= h(t('Тетріс', 'Тетрис', 'Tetris')) ?></h1>
    </div>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary btn-sm" href="/functional/games/"><?= h(t('До ігор', 'К играм', 'Back to games')) ?></a>
    </div>
  </div>

  <div class="tetris-wrap mt-3">
    <div class="tetris-card">
      <div class="tetris-topbar">
        <div class="tetris-title">
          <span class="badge rounded-pill text-bg-dark"><?= h(t('Класика', 'Классика', 'Classic')) ?></span>
          <span class="tetris-sub"><?= h(t('10×20 • мобайл-режим зручний ✅', '10×20 • мобайл-режим удобный ✅', '10×20 • mobile-friendly ✅')) ?></span>
        </div>

        <div class="tetris-actions">
          <button id="tStart" class="btn btn-primary btn-sm"><?= h(t('Старт', 'Старт', 'Start')) ?></button>
          <button id="tPause" class="btn btn-outline-primary btn-sm" disabled><?= h(t('Пауза', 'Пауза', 'Pause')) ?></button>
          <button id="tReset" class="btn btn-outline-danger btn-sm"><?= h(t('Заново', 'Заново', 'Reset')) ?></button>
        </div>
      </div>

      <div class="tetris-layout">
        <div class="tetris-left">
          <div class="tetris-next-top">
            <div class="tetris-next-label"><?= h(t('Наступна', 'Следующая', 'Next')) ?></div>
            <canvas id="tNext" width="120" height="120" aria-label="Next piece"></canvas>
          </div>

          <div class="tetris-stage">
            <canvas id="tCanvas" width="300" height="600" aria-label="Tetris canvas"></canvas>

            <div id="tOverlay" class="tetris-overlay d-none">
              <div class="tetris-overlay-inner">
                <div class="tetris-overlay-title" id="tOverlayTitle"><?= h(t('Пауза', 'Пауза', 'Paused')) ?></div>
                <div class="tetris-overlay-sub" id="tOverlaySub"><?= h(t('Натисни P або "Продовжити"', 'Нажми P или "Продолжить"', 'Press P or "Resume"')) ?></div>
              </div>
            </div>
          </div>
        </div>

        <aside class="tetris-right">
          <div class="tetris-panel tetris-panel-accent">
            <div class="tetris-panel-head">
              <div class="tetris-panel-title"><?= h(t('Статистика', 'Статистика', 'Stats')) ?></div>
              <div class="tetris-best">
                <span class="text-muted small"><?= h(t('Рекорд:', 'Рекорд:', 'Best:')) ?></span>
                <span class="fw-semibold" id="tBest">0</span>
              </div>
            </div>

            <div class="tetris-stats">
              <div class="tetris-stat">
                <div class="k"><?= h(t('Очки', 'Очки', 'Score')) ?></div>
                <div class="v" id="tScore">0</div>
              </div>
              <div class="tetris-stat">
                <div class="k"><?= h(t('Лінії', 'Линии', 'Lines')) ?></div>
                <div class="v" id="tLines">0</div>
              </div>
              <div class="tetris-stat">
                <div class="k"><?= h(t('Рівень', 'Уровень', 'Level')) ?></div>
                <div class="v" id="tLevel">1</div>
              </div>
            </div>
          </div>

          <div class="tetris-panel tetris-controls-desktop">
            <div class="tetris-panel-title"><?= h(t('Керування', 'Управление', 'Controls')) ?></div>

            <div class="tetris-ctrl-grid">
              <div class="tetris-ctrl-row"><span class="key">← / →</span><span class="desc"><?= h(t('рух', 'движение', 'move')) ?></span></div>
              <div class="tetris-ctrl-row"><span class="key">↓</span><span class="desc"><?= h(t('швидше вниз', 'быстрее вниз', 'soft drop')) ?></span></div>
              <div class="tetris-ctrl-row"><span class="key">Space</span><span class="desc"><?= h(t('миттєво вниз', 'мгновенно вниз', 'hard drop')) ?></span></div>
              <div class="tetris-ctrl-row"><span class="key">↑ / X</span><span class="desc"><?= h(t('поворот ↻', 'поворот ↻', 'rotate ↻')) ?></span></div>
              <div class="tetris-ctrl-row"><span class="key">Z</span><span class="desc"><?= h(t('поворот ↺', 'поворот ↺', 'rotate ↺')) ?></span></div>
              <div class="tetris-ctrl-row"><span class="key">P</span><span class="desc"><?= h(t('пауза', 'пауза', 'pause')) ?></span></div>
            </div>

            <div class="small text-muted mt-2">
              <?= h(t(
                'Порада: на ПК можна тримати клавішу ←/→/↓ для повтору.',
                'Совет: на ПК можно удерживать ←/→/↓ для повтора.',
                'Tip: on desktop you can hold ←/→/↓ for repeat.'
              )) ?>
            </div>
          </div>

          <div class="tetris-panel">
            <div class="d-flex align-items-center justify-content-between">
              <div class="fw-semibold"><?= h(t('Про гру', 'Про игру', 'About')) ?></div>
              <span class="badge text-bg-light"><?= h(t('офлайн', 'офлайн', 'offline')) ?></span>
            </div>
            <div class="text-muted small mt-2">
              <?= h(t(
                'Класичний Тетріс: збирай лінії, піднімай рівень, бий рекорд. Результат зберігається у браузері (localStorage).',
                'Классический Тетрис: собирай линии, повышай уровень, бей рекорд. Результат хранится в браузере (localStorage).',
                'Classic Tetris: clear lines, level up, beat your best. Result is stored in your browser (localStorage).'
              )) ?>
            </div>
          </div>
        </aside>
      </div>

      <!-- ✅ Sticky mobile controls (always visible) -->
      <div class="tetris-mobile-controls" aria-label="Mobile controls">
        <div class="tetris-mobile-bar">
          <button class="tbtn tbtn-lg" data-act="left" aria-label="Left">◀</button>
          <button class="tbtn tbtn-lg" data-act="right" aria-label="Right">▶</button>
          <button class="tbtn tbtn-lg" data-act="rot" aria-label="Rotate">⟳</button>
          <button class="tbtn tbtn-lg" data-act="down" aria-label="Down">▼</button>
          <button class="tbtn tbtn-lg" data-act="drop" aria-label="Drop">⤓</button>

          <button id="tMStart" class="btn btn-primary btn-sm ms-2"><?= h(t('Старт', 'Старт', 'Start')) ?></button>
          <button id="tMPause" class="btn btn-outline-primary btn-sm" disabled><?= h(t('Пауза', 'Пауза', 'Pause')) ?></button>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
  window.VM_TETRIS = {
    lang: <?= json_encode((string)($_SESSION['lang'] ?? ($me['lang'] ?? 'uk')), JSON_UNESCAPED_UNICODE) ?>,
    bestKey: 'vm_tetris_best_v1'
  };
</script>
<script src="/functional/games/tetris/tetris.js?v=<?= h($jsV) ?>"></script>
<link rel="stylesheet" href="/css/tetris.css?v=<?= h($cssV) ?>">

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