<?php
declare(strict_types=1);

require __DIR__ . '/config.php';
date_default_timezone_set('America/Sao_Paulo');

if (session_status() === PHP_SESSION_NONE) { session_start(); }

header('X-Content-Type-Options: nosniff');
header('X-Frame-Options: DENY');
header('Referrer-Policy: strict-origin-when-cross-origin');
header('Permissions-Policy: camera=(), microphone=(), geolocation=()');

if (!isset($_SESSION['user'])) {
    header('Location: login.php');
    exit;
}

$userId = (int)$_SESSION['user'];

function e(string $v): string {
    return htmlspecialchars($v, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}

/*
 * Pokédex dinâmica
 * - music_tasks = catálogo já cadastrado no ADM.
 * - music_task_completions = histórico de capturas do usuário.
 * - Cada task_id ocupa uma vaga.
 * - A mesma espécie capturada várias vezes continua ocupando uma única vaga,
 *   mas mostra a quantidade de capturas.
 *
 * Não é necessário criar uma tabela nova.
 */
$sql = "
    SELECT
        mt.id,
        mt.nome_musica AS nome,
        mt.artista AS regiao,
        mt.imagem,
        mt.plan_id,
        p.nome AS plano,
        COUNT(c.id) AS capturas,
        MAX(c.concluido_em) AS ultima_captura
    FROM music_tasks mt
    LEFT JOIN plans p
        ON p.id = mt.plan_id
    LEFT JOIN music_task_completions c
        ON c.task_id = mt.id
       AND c.user_id = ?
    WHERE mt.ativo = 1
    GROUP BY
        mt.id, mt.nome_musica, mt.artista, mt.imagem, mt.plan_id, p.nome
    ORDER BY mt.ordem ASC, mt.id ASC
";
$stmt = $conn->prepare($sql);
$stmt->execute([$userId]);
$pokemon = $stmt->fetchAll(PDO::FETCH_ASSOC);

$total = count($pokemon);
$descobertos = 0;
$totalCapturas = 0;

foreach ($pokemon as $p) {
    $qtd = (int)$p['capturas'];
    if ($qtd > 0) { $descobertos++; }
    $totalCapturas += $qtd;
}

$percent = $total > 0 ? (int)round(($descobertos / $total) * 100) : 0;
?>
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#061c2d">
<title>Pokédex | Pokémon Hunt</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
*{box-sizing:border-box}
:root{
 --navy:#061c2d;--navy2:#073653;--blue:#0b5275;
 --yellow:#ffd431;--red:#e73943;--green:#42d879;
 --text:#fff;--muted:#9eb5c5;
}
html,body{margin:0;min-height:100%;background:#04131f;font-family:Inter,Arial,sans-serif;color:#fff}
body{padding-bottom:88px}
.app{width:min(540px,100%);min-height:100vh;margin:auto;background:
radial-gradient(circle at 90% 8%,rgba(35,134,188,.23),transparent 25%),
linear-gradient(180deg,#07273d,#041724 42%,#061b28)}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #ffffff12;background:#061c2deb;backdrop-filter:blur(12px)}
.back,.scan{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#fff;text-decoration:none;background:#ffffff0a}
.brand{display:flex;align-items:center;gap:9px;font:900 18px Montserrat;color:#ffd431;text-shadow:0 2px 0 #164a75}
.dexball{position:relative;width:30px;height:30px;border:2px solid #fff;border-radius:50%;background:linear-gradient(#e93b45 0 44%,#222 44% 55%,#fafafa 55%)}
.dexball:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border:4px solid #222;border-radius:50%;background:#fff}
.hero{padding:24px 16px 18px}
.eyebrow{color:#ffd431;font-size:10px;font-weight:900;letter-spacing:1.5px}
.hero h1{margin:5px 0 6px;font:900 31px Montserrat}
.hero p{margin:0;color:#9eb5c5;font-size:12px;line-height:1.5}
.progress-card{margin:0 14px 17px;padding:15px;border:1px solid #ffffff18;border-radius:20px;background:linear-gradient(145deg,#0b3c59dd,#06273ddd);box-shadow:0 15px 32px #0005}
.progress-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.progress-head span{color:#a9c0cf;font-size:10px;font-weight:800}
.progress-head strong{font:900 23px Montserrat;color:#fff}
.progress-head strong b{color:#ffd431}
.bar{height:11px;margin-top:12px;padding:2px;border-radius:99px;background:#03131e;border:1px solid #ffffff15;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#42d879,#b9ed50,#ffd431);box-shadow:0 0 15px #64e68180}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.stat{padding:10px 11px;border-radius:13px;background:#ffffff0b}
.stat small{display:block;color:#90aabb;font-size:9px;font-weight:800}.stat b{display:block;margin-top:4px;font-size:15px}
.toolbar{display:flex;align-items:center;gap:9px;padding:0 14px 14px}
.search{position:relative;flex:1}.search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#7fa0b4;font-size:12px}
.search input{width:100%;height:44px;padding:0 13px 0 36px;border:1px solid #ffffff18;border-radius:13px;outline:0;background:#08283d;color:#fff;font:600 12px Inter}
.search input::placeholder{color:#7895a8}
.filter{height:44px;padding:0 13px;border:1px solid #ffffff18;border-radius:13px;background:#08283d;color:#fff;font-weight:800}
.section-title{display:flex;align-items:center;justify-content:space-between;padding:0 15px 11px}.section-title strong{font:900 14px Montserrat}.section-title span{color:#7996a9;font-size:9px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 12px 25px}
.mon{position:relative;min-width:0;overflow:hidden;border:1px solid #ffffff18;border-radius:17px;background:linear-gradient(155deg,#0c3b56,#061f31);box-shadow:0 8px 20px #0003;cursor:pointer;transition:.18s}
.mon:active{transform:scale(.97)}
.mon.locked{background:linear-gradient(155deg,#142631,#091822);filter:saturate(.55)}
.number{position:absolute;z-index:4;left:8px;top:8px;padding:4px 6px;border-radius:7px;background:#031621b8;color:#a9bfcd;font-size:8px;font-weight:900}
.check{position:absolute;z-index:4;right:8px;top:8px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#42d879;color:#052117;font-size:9px;box-shadow:0 3px 9px #0004}
.picture{height:116px;display:flex;align-items:flex-end;justify-content:center;padding:12px 7px 5px;background:radial-gradient(circle at 50% 70%,#1b6785 0,transparent 55%)}
.picture img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 7px #0007)}
.locked .picture{align-items:center}
.silhouette{width:68px;height:76px;display:grid;place-items:center;border-radius:50%;background:#020c12;color:#203b4b;font-size:40px;box-shadow:0 0 0 10px #ffffff05}
.info{padding:9px 9px 11px;border-top:1px solid #ffffff0d}
.info h3{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap;font:900 11px Montserrat}
.info p{overflow:hidden;margin:4px 0 0;color:#819daf;text-overflow:ellipsis;white-space:nowrap;font-size:8px}
.captured{display:inline-flex;align-items:center;gap:4px;margin-top:7px;padding:4px 6px;border-radius:7px;background:#42d87918;color:#62e792;font-size:7px;font-weight:900}
.unknown{color:#5d7482!important}
.empty{margin:20px 14px;padding:38px 20px;border:1px solid #ffffff18;border-radius:20px;background:#08283d;text-align:center}.empty i{font-size:38px;color:#ffd431}.empty h2{font:900 18px Montserrat}.empty p{color:#9eb5c5;font-size:11px;line-height:1.6}
.modal{position:fixed;z-index:100;inset:0;display:none;align-items:flex-end;justify-content:center;padding:15px;background:#000b;backdrop-filter:blur(7px)}.modal.show{display:flex}
.sheet{position:relative;width:min(500px,100%);padding:18px;border:1px solid #ffffff25;border-radius:25px;background:linear-gradient(160deg,#0b3b57,#061b2b);box-shadow:0 25px 60px #000b;animation:up .25s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.close{position:absolute;right:13px;top:13px;width:35px;height:35px;border:0;border-radius:50%;background:#ffffff12;color:#fff;font-size:16px}
.detail-img{height:230px;display:flex;align-items:flex-end;justify-content:center}.detail-img img{max-width:80%;max-height:100%;object-fit:contain;filter:drop-shadow(0 16px 14px #0008)}
.detail-no{color:#ffd431;font-size:10px;font-weight:900}.sheet h2{margin:4px 0;font:900 26px Montserrat}.detail-region{color:#9eb5c5;font-size:11px}.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.detail-stat{padding:12px;border-radius:13px;background:#ffffff0b}.detail-stat small{display:block;color:#8fa9ba;font-size:8px}.detail-stat strong{display:block;margin-top:4px;font-size:12px}
.bottom{position:fixed;z-index:50;left:50%;bottom:0;transform:translateX(-50%);width:min(540px,100%);height:76px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #ffffff17;background:#05243bf5;backdrop-filter:blur(10px)}
.bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#90a9ba;text-decoration:none;font-size:9px}.bottom i{font-size:17px}.bottom .active{color:#ffd431}
@media(max-width:370px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:700px){.app{margin-top:15px;border-radius:24px 24px 0 0;overflow:hidden}}
</style>
</head>
<body>
<div class="app">
<header class="topbar">
  <a class="back" href="dashboard.php"><i class="fa-solid fa-chevron-left"></i></a>
  <div class="brand"><span class="dexball"></span> POKÉDEX</div>
  <div class="scan"><i class="fa-solid fa-qrcode"></i></div>
</header>

<section class="hero">
  <div class="eyebrow">POKÉMON HUNT • COLEÇÃO</div>
  <h1>Minha Pokédex</h1>
  <p>Explore os campos, capture novas espécies e complete sua coleção.</p>
</section>

<section class="progress-card">
  <div class="progress-head">
    <div><span>PROGRESSO DA COLEÇÃO</span><strong><b><?= $descobertos ?></b> / <?= $total ?></strong></div>
    <strong><?= $percent ?>%</strong>
  </div>
  <div class="bar"><i style="width:<?= $percent ?>%"></i></div>
  <div class="stats">
    <div class="stat"><small>ESPÉCIES DESCOBERTAS</small><b><?= $descobertos ?></b></div>
    <div class="stat"><small>CAPTURAS TOTAIS</small><b><?= $totalCapturas ?></b></div>
  </div>
</section>

<div class="toolbar">
  <label class="search"><i class="fa-solid fa-magnifying-glass"></i><input id="dexSearch" type="search" placeholder="Pesquisar Pokémon..."></label>
  <button class="filter" id="toggleFilter" type="button"><i class="fa-solid fa-eye"></i></button>
</div>

<div class="section-title"><strong>Pokémon registrados</strong><span><?= $total ?> VAGAS</span></div>

<?php if($total > 0): ?>
<section class="grid" id="dexGrid">
<?php foreach($pokemon as $index => $p):
    $capturas = (int)$p['capturas'];
    $unlocked = $capturas > 0;
    $numero = $index + 1;
?>
  <article
    class="mon <?= $unlocked ? 'unlocked' : 'locked' ?>"
    data-name="<?= e(mb_strtolower((string)$p['nome'], 'UTF-8')) ?>"
    data-unlocked="<?= $unlocked ? '1' : '0' ?>"
    <?php if($unlocked): ?>
    data-number="<?= $numero ?>"
    data-title="<?= e((string)$p['nome']) ?>"
    data-image="<?= e((string)$p['imagem']) ?>"
    data-region="<?= e(trim((string)$p['regiao']) !== '' ? (string)$p['regiao'] : ((string)$p['plano'] ?: 'Campo de caça')) ?>"
    data-captures="<?= $capturas ?>"
    data-last="<?= e($p['ultima_captura'] ? date('d/m/Y H:i', strtotime((string)$p['ultima_captura'])) : '-') ?>"
    <?php endif; ?>
  >
    <span class="number">#<?= str_pad((string)$numero, 3, '0', STR_PAD_LEFT) ?></span>
    <?php if($unlocked): ?><span class="check"><i class="fa-solid fa-check"></i></span><?php endif; ?>
    <div class="picture">
      <?php if($unlocked && trim((string)$p['imagem']) !== ''): ?>
        <img src="<?= e((string)$p['imagem']) ?>" alt="<?= e((string)$p['nome']) ?>" loading="lazy">
      <?php elseif($unlocked): ?>
        <div class="silhouette"><i class="fa-solid fa-circle-question"></i></div>
      <?php else: ?>
        <div class="silhouette"><i class="fa-solid fa-question"></i></div>
      <?php endif; ?>
    </div>
    <div class="info">
      <?php if($unlocked): ?>
        <h3><?= e((string)$p['nome']) ?></h3>
        <p><?= e(trim((string)$p['regiao']) !== '' ? (string)$p['regiao'] : ((string)$p['plano'] ?: 'Campo de caça')) ?></p>
        <span class="captured"><i class="fa-solid fa-circle-check"></i> CAPTURADO <?= $capturas ?>x</span>
      <?php else: ?>
        <h3>???</h3>
        <p class="unknown">Ainda não descoberto</p>
        <span class="captured" style="color:#7d929f;background:#ffffff08"><i class="fa-solid fa-lock"></i> BLOQUEADO</span>
      <?php endif; ?>
    </div>
  </article>
<?php endforeach; ?>
</section>
<?php else: ?>
<section class="empty">
  <i class="fa-solid fa-book-open"></i>
  <h2>Sua Pokédex está vazia</h2>
  <p>Quando Pokémon forem cadastrados nas tarefas, as vagas aparecerão aqui automaticamente.</p>
</section>
<?php endif; ?>
</div>

<div class="modal" id="detailModal">
  <div class="sheet">
    <button class="close" id="closeModal" type="button"><i class="fa-solid fa-xmark"></i></button>
    <div class="detail-img"><img id="detailImage" src="" alt=""></div>
    <div class="detail-no" id="detailNumber"></div>
    <h2 id="detailTitle"></h2>
    <div class="detail-region"><i class="fa-solid fa-location-dot"></i> <span id="detailRegion"></span></div>
    <div class="detail-stats">
      <div class="detail-stat"><small>CAPTURADO</small><strong id="detailCaptures"></strong></div>
      <div class="detail-stat"><small>ÚLTIMA CAPTURA</small><strong id="detailLast"></strong></div>
    </div>
  </div>
</div>

<nav class="bottom">
  <a href="dashboard.php"><i class="fa-solid fa-house"></i><span>Início</span></a>
  <a href="tarefas.php"><i class="fa-solid fa-circle-dot"></i><span>Caçar</span></a>
  <a class="active" href="pokedex.php"><i class="fa-solid fa-book-open"></i><span>Pokédex</span></a>
  <a href="plans.php"><i class="fa-solid fa-map"></i><span>Campos</span></a>
  <a href="profile.php"><i class="fa-regular fa-user"></i><span>Perfil</span></a>
</nav>

<script>
(function(){
  const cards=[...document.querySelectorAll('.mon')];
  const search=document.getElementById('dexSearch');
  const filter=document.getElementById('toggleFilter');
  const modal=document.getElementById('detailModal');
  const close=document.getElementById('closeModal');
  let onlyCaptured=false;

  function apply(){
    const q=(search?.value||'').trim().toLowerCase();
    cards.forEach(card=>{
      const captured=card.dataset.unlocked==='1';
      const matches=!q || (captured && (card.dataset.name||'').includes(q));
      card.style.display=(matches && (!onlyCaptured || captured))?'':'none';
    });
  }
  search?.addEventListener('input',apply);
  filter?.addEventListener('click',()=>{
    onlyCaptured=!onlyCaptured;
    filter.innerHTML=onlyCaptured?'<i class="fa-solid fa-lock-open"></i>':'<i class="fa-solid fa-eye"></i>';
    apply();
  });

  cards.forEach(card=>{
    if(card.dataset.unlocked!=='1') return;
    card.addEventListener('click',()=>{
      const img=document.getElementById('detailImage');
      img.src=card.dataset.image||'';
      img.style.display=card.dataset.image?'block':'none';
      document.getElementById('detailNumber').textContent='#'+String(card.dataset.number).padStart(3,'0')+' • DESCOBERTO';
      document.getElementById('detailTitle').textContent=card.dataset.title||'Pokémon';
      document.getElementById('detailRegion').textContent=card.dataset.region||'Campo de caça';
      document.getElementById('detailCaptures').textContent=(card.dataset.captures||'0')+'x';
      document.getElementById('detailLast').textContent=card.dataset.last||'-';
      modal.classList.add('show');
    });
  });
  close?.addEventListener('click',()=>modal.classList.remove('show'));
  modal?.addEventListener('click',e=>{if(e.target===modal) modal.classList.remove('show')});
})();
</script>
</body>
</html>
