<?php
// memoria/index.php
session_start();
require_once __DIR__ . '/../admin/db.php'; // ajusta la ruta si tu db.php está en otro lugar

$juego_id = (int)($_GET['juego_id'] ?? 1);

// 1) Cargar config del juego (banners, fondo, reverso, icono FS y ruleta_id a la que enlaza)
$stmt = $conn->prepare("SELECT
  nombre, banner_1, banner_2, banner_3, banner_4,
  background_image, fullscreen_icon, reverso_default, ruleta_id
  FROM juegos_config
  WHERE juego_id = ? LIMIT 1");
$stmt->bind_param("i", $juego_id);
$stmt->execute();
$config = $stmt->get_result()->fetch_assoc();
$stmt->close();

if (!$config) {
  die("Config del juego no encontrada (juego_id=$juego_id).");
}

// 2) Cargar cartas activas (traseras a emparejar). Puedes manejar n pares desde la BD.
$cartas = [];
$res = $conn->prepare("SELECT id, nombre, imagen_trasera, COALESCE(imagen_frontal, '') AS imagen_frontal
                       FROM cartas
                       WHERE juego_id = ? AND activo = 1");
$res->bind_param("i", $juego_id);
$res->execute();
$q = $res->get_result();
while ($row = $q->fetch_assoc()) { $cartas[] = $row; }
$res->close();

if (!$cartas) {
  die("No hay cartas activas para este juego (juego_id=$juego_id).");
}

// Reverso por defecto (lado frontal que se ve al inicio)
$reverso = $config['reverso_default'] ?: '/memoria/images/back.png';

// Generar parejas: duplico la lista de cartas. Si tienes más de 12, puedes recortar.
$base = $cartas;
shuffle($base);
$max_pairs = 6; // cambia si quieres más o menos pares
$base = array_slice($base, 0, $max_pairs);

// Duplicar para formar pares y asignar una clave de pareja consistente
$deck = [];
$pair_idx = 1;
foreach ($base as $c) {
  $key = 'pair_' . $pair_idx++;
  $deck[] = ['key'=>$key, 'back'=>$c['imagen_trasera'], 'front'=>$c['imagen_frontal'] ?: $reverso];
  $deck[] = ['key'=>$key, 'back'=>$c['imagen_trasera'], 'front'=>$c['imagen_frontal'] ?: $reverso];
}
shuffle($deck);

// Pasar al front la config necesaria
$CONFIG_JS = [
  'juego_id' => $juego_id,
  'ruleta_id' => (int)$config['ruleta_id'],
  'banners' => [
    'banner_1' => $config['banner_1'] ?: null,
    'banner_2' => $config['banner_2'] ?: null,
    'banner_3' => $config['banner_3'] ?: null,
    'banner_4' => $config['banner_4'] ?: null,
  ],
  'background_image' => $config['background_image'] ?: null,
  'fullscreen_icon' => $config['fullscreen_icon'] ?: null,
];
?>
<!doctype html>
<html lang="es" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Juego de Memoria - ePromo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Banners dinámicos -->
  <div class="banner banner-1"></div>
  <div class="banner banner-2"></div>
  <div class="banner banner-3"></div>
  <div class="banner banner-4"></div>

  <div class="wrapper">
    <ul class="cards" id="cards">
      <?php foreach ($deck as $card): ?>
      <li class="card" data-key="<?= htmlspecialchars($card['key']) ?>">
        <div class="view front-view">
          <img src="<?= htmlspecialchars($card['front']) ?>" alt="front">
        </div>
        <div class="view back-view">
          <img src="<?= htmlspecialchars($card['back']) ?>" alt="back">
        </div>
      </li>
      <?php endforeach; ?>
    </ul>
  </div>

  <!-- Fullscreen -->
  <button id="fullscreen-btn"><img id="fullscreen-icon" src="" alt="Pantalla Completa"></button>

  <script>
    // Inyectar config al front
    window.MEMORIA_CONFIG = <?= json_encode($CONFIG_JS, JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE) ?>;
    // Aplicar banners/bg/icono
    (function(){
      const C = window.MEMORIA_CONFIG || {};
      if (C.background_image) {
        document.body.style.backgroundImage = `url("${C.background_image}")`;
        document.body.style.backgroundSize = 'cover';
        document.body.style.backgroundRepeat = 'no-repeat';
        document.body.style.backgroundPosition = 'center center';
      }
      const b1 = document.querySelector('.banner-1'), b2 = document.querySelector('.banner-2'),
            b3 = document.querySelector('.banner-3'), b4 = document.querySelector('.banner-4');
      if (b1 && C.banners.banner_1) b1.style.backgroundImage = `url("${C.banners.banner_1}")`;
      if (b2 && C.banners.banner_2) b2.style.backgroundImage = `url("${C.banners.banner_2}")`;
      if (b3 && C.banners.banner_3) b3.style.backgroundImage = `url("${C.banners.banner_3}")`;
      if (b4 && C.banners.banner_4) b4.style.backgroundImage = `url("${C.banners.banner_4}")`;
      if (C.fullscreen_icon) document.getElementById('fullscreen-icon').src = C.fullscreen_icon;
    })();
  </script>

  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
</body>
</html>
