<?php
require __DIR__.'/config.php';

// ----- Catégories -----
$cats = [];
$cr = $mysqli->query("SELECT id, nom FROM categories ORDER BY nom ASC");
if ($cr) { while ($row = $cr->fetch_assoc()) $cats[] = $row; }

// ----- Filtre catégorie -----
$currentCatLabel = "Toutes les catégories";
$where = "";
$currentCatId = 0;

if (isset($_GET['cat']) && ctype_digit($_GET['cat'])) {
    $currentCatId = (int)$_GET['cat'];
    $where = "WHERE p.categorie_id = {$currentCatId}";
    foreach ($cats as $c) {
        if ((int)$c['id'] === $currentCatId) {
            $currentCatLabel = $c['nom'];
            break;
        }
    }
}

// ----- Produits + première image -----
$q = $mysqli->query("
  SELECT p.id, p.nom, p.description,
         (SELECT CONCAT('uploads/', pm.file)
          FROM product_media pm
          WHERE pm.product_id = p.id
          LIMIT 1) AS cover
  FROM produits p
  {$where}
  ORDER BY p.id DESC
");
$products = [];
if ($q) { while ($row = $q->fetch_assoc()) $products[] = $row; }

$channelUrl = $CHANNEL_URL ?: 'https://t.me/';
$contactUrl = tg_user_url($CONTACT_BOT_USERNAME ?: '');
$instagramUrl = $INSTAGRAM_URL ?: '';
?>
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="color-scheme" content="dark light">
  <meta name="theme-color" content="#0f1115">
  <meta name="app-placeholder" content="assets/placeholder.svg">
  <title><?= h($APP_NAME) ?> – Menu</title>
  <link rel="stylesheet" href="<?= asset('assets/app.min.css') ?>">
  <script defer src="<?= asset('assets/app.min.js') ?>"></script>
</head>
<body>

<header class="appbar">
  <div class="appbar-row">
    <div class="brand">
      <img class="brand-logo" src="logo.png" alt="<?= h($APP_NAME) ?>">
      <div>
        <div class="brand-title"><?= h($APP_NAME) ?></div>
        <div class="brand-sub"><?= h($currentCatLabel) ?></div>
      </div>
    </div>
    <button class="icon-btn" type="button" data-sheet-open="sheetInfos" aria-label="Infos">ℹ️</button>
  </div>
  <div class="hero" aria-hidden="true"></div>
</header>

<main class="page">
  <section class="filters">
    <div class="filter-row">
      <button class="chip-btn" type="button" data-sheet-open="sheetCats" aria-label="Choisir une catégorie">
        <div>
          <small>Catégorie</small>
          <div><?= h($currentCatLabel) ?></div>
        </div>
        <div aria-hidden="true">▾</div>
      </button>

      <div class="search" role="search">
        <span class="k" aria-hidden="true">🔎</span>
        <input data-search type="search" placeholder="Rechercher un produit…" autocomplete="off" spellcheck="false">
      </div>
    </div>
  </section>

  <section class="grid" aria-label="Produits">
    <?php foreach ($products as $p):
      $cover = $p['cover'] ?: 'assets/placeholder.svg';
    ?>
      <a
        class="card"
        href="detail.php?id=<?= (int)$p['id'] ?>"
        data-card
        data-name="<?= h($p['nom']) ?>"
      >
        <img
          class="card-media"
          src="<?= h($cover) ?>"
          alt="<?= h($p['nom']) ?>"
          loading="lazy"
          decoding="async"
          data-fallback
        >
        <div class="card-body">
          <div class="card-title"><?= h($p['nom']) ?></div>
          <?php if (!empty($p['description'])): ?>
            <div class="card-sub"><?= h($p['description']) ?></div>
          <?php endif; ?>
        </div>
      </a>
    <?php endforeach; ?>
  </section>
</main>

<nav class="tabs" aria-label="Navigation">
  <a class="tab active" href="index.php" aria-current="page"><div class="icon">🏠</div><span>Menu</span></a>
  <a class="tab" href="#" data-sheet-open="sheetCats"><div class="icon">🗂️</div><span>Catégories</span></a>
  <a class="tab" href="<?= h($channelUrl) ?>" target="_blank" rel="noopener" data-tg-link><div class="icon">📢</div><span>Canal</span></a>
  <a class="tab" href="<?= h($contactUrl) ?>" target="_blank" rel="noopener" data-tg-link><div class="icon">✉️</div><span>Contact</span></a>
</nav>

<!-- Sheet: Infos -->
<div id="sheetInfos" class="sheet" role="dialog" aria-modal="true" aria-label="Infos">
  <div class="scrim" data-sheet-scrim="sheetInfos"></div>
  <div class="panel">
    <button class="close" type="button" data-sheet-close="sheetInfos">Fermer ✖</button>
    <h3>ℹ️ Informations</h3>

    <div class="sheet-links">
      <a href="<?= h($channelUrl) ?>" target="_blank" rel="noopener" data-tg-link>
        <span>📢 Canal Telegram</span><span aria-hidden="true">↗</span>
      </a>
      <?php if ($instagramUrl): ?>
        <a href="<?= h($instagramUrl) ?>" target="_blank" rel="noopener" data-tg-link>
          <span>🔗 Instagram</span><span aria-hidden="true">↗</span>
        </a>
      <?php endif; ?>
      <a href="<?= h($contactUrl) ?>" target="_blank" rel="noopener" data-tg-link>
        <span>✉️ Contact</span><span aria-hidden="true">↗</span>
      </a>
    </div>
  </div>
</div>

<!-- Sheet: Catégories -->
<div id="sheetCats" class="sheet" role="dialog" aria-modal="true" aria-label="Catégories">
  <div class="scrim" data-sheet-scrim="sheetCats"></div>
  <div class="panel">
    <button class="close" type="button" data-sheet-close="sheetCats">Fermer ✖</button>
    <h3>🗂️ Catégories</h3>

    <div class="sheet-links">
      <a class="<?= $currentCatId === 0 ? 'active' : '' ?>" href="index.php">
        <span>Toutes les catégories</span><span aria-hidden="true">›</span>
      </a>
      <?php foreach ($cats as $c): ?>
        <a class="<?= ((int)$c['id'] === $currentCatId) ? 'active' : '' ?>" href="?cat=<?= (int)$c['id'] ?>">
          <span><?= h($c['nom']) ?></span><span aria-hidden="true">›</span>
        </a>
      <?php endforeach; ?>
    </div>
  </div>
</div>

</body>
</html>
