#set($layout = "layouts/platform.html")

## SERVER SIDE OPTIONAL FALLBACKS (safe)
#set($SERVER_ASSETS = {
  "dino": $!asset_dino,
  "cactus": $!asset_cactus,
  "ground": $!asset_ground,
  "cloud": $!asset_cloud,
  "ptero": $!asset_ptero
})

#set($SERVER_COLORS = {
  "dino": $!color_dino,
  "cactus": $!color_cactus,
  "ground": $!color_ground,
  "cloud": $!color_cloud,
  "ptero": $!color_ptero
})

<style>
body {
    background: #0b0b0d;
    margin: 0;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #dino-game-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
  }

  .content-wrapper {
    position: relative;
    z-index: 10;
    pointer-events: none;
  }

  .content-wrapper > * {
    pointer-events: auto;
  }

  /* Popup de manutenção - Ajustado para ser menor e mais elegante */
  .maintenance-popup {
    position: relative;
    max-width: 400px; /* Reduzido de 500px para 400px */
    width: 90vw;
    background: rgba(15, 15, 18, 0.95); /* Tom mais escuro e premium */
    border-radius: 20px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.7);
    overflow: hidden;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
  }

  /* Botão de fechar dentro do popup */
  .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.05);
    border: none;
    color: rgba(255,255,255,0.6);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
    z-index: 20;
  }

  .close-btn:hover {
    background: rgba(255,255,255,0.15);
    color: white;
    transform: scale(1.05);
  }

  /* Aviso sobre o jogo - Cores integradas ao tema Dark */
  .game-notice {
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e7;
    padding: 12px;
    border-radius: 12px;
    margin: 14px 0;
    font-size: 13px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
  }

  #dino-gameover {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    text-align: center;
    display: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    font-family: system-ui, -apple-system, sans-serif;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    min-width: 280px;
    max-width: 90vw;
  }

  #dino-gameover strong {
    display: block;
    font-size: 1.3em;
    margin-bottom: 12px;
    font-weight: 600;
  }

  #dino-gameover kbd {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9em;
  }

  /* Responsividade mantida e refinada */
  @media (max-width: 768px) {
    .maintenance-popup {
      border-radius: 16px;
    }
    .game-notice {
      padding: 10px;
      font-size: 12px;
    }
  }

  .tap-indicator {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    z-index: 5;
    background: rgba(0,0,0,0.5);
    padding: 8px 16px;
    border-radius: 20px;
    display: none;
    pointer-events: none;
  }

  @media (max-width: 768px) and (orientation: portrait) {
    .tap-indicator {
      display: block;
      font-size: 12px;
      padding: 6px 12px;
      bottom: 20px;
    }
  }
</style>

<canvas id="dino-game-canvas" aria-hidden="true"></canvas>
<div id="dino-gameover" role="status" aria-hidden="true">
  <strong>Fim de Jogo</strong>
  <span>Pressione <kbd>Espaço</kbd> ou toque na tela para reiniciar</span>
</div>

<div class="tap-indicator">Toque na tela para pular</div>

<div class="min-h-screen flex items-center justify-center p-4 content-wrapper" style="display: flex; min-height: 100vh; align-items: center; justify-content: center; font-family: system-ui, -apple-system, sans-serif;">
  <div class="maintenance-popup">
    <button class="close-btn" onclick="fecharPopup()" aria-label="Fechar aviso de manutenção">×</button>
    
    <div style="padding: 32px 24px 16px 24px; text-align: center;">
      <div style="display: inline-flex; background: rgba(52, 211, 153, 0.1); padding: 12px; border-radius: 50%; margin-bottom: 16px;">
        <svg xmlns="http://www.w3.org/2000/svg" style="height: 32px; width: 32px; color: #34d399;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
      </div>
      <h1 style="font-size: 20px; font-weight: 700; color: #ffffff; margin: 0 0 8px 0;">Estamos em manutenção!</h1>
      <p style="font-size: 14px; color: #9ca3af; margin: 0; line-height: 1.5;">No momento, estamos realizando uma manutenção programada em nosso sistema.</p>
    </div>
    
    <div style="padding: 0 24px 24px 24px;">
      <div style="background: rgba(255, 255, 255, 0.03); border-radius: 12px; padding: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.05);">
        <svg xmlns="http://www.w3.org/2000/svg" style="height: 18px; width: 18px; color: #9ca3af; margin-right: 8px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <p style="font-size: 13px; color: #9ca3af; font-weight: 500; margin: 0;">Estaremos online novamente em breve!</p>
      </div>

      <div class="game-notice">
        <span>Enquanto aguarda, jogue o jogo do nicosauro no background!</span>
      </div>

      <div style="text-align: center; color: #6b7280; font-size: 12px;">
        <p style="margin: 0;">💡 <strong>Dica:</strong> Pressione Espaço ou toque fora para pular.</p>
      </div>
    </div>
    
    <div style="background: rgba(0, 0, 0, 0.2); padding: 14px 24px; border-top: 1px solid rgba(255,255,255,0.03);">
      <p style="font-size: 11px; text-align: center; color: #4b5563; margin: 0;">
        Se precisar de assistência, entre em contato conosco.
      </p>
    </div>
  </div>
</div>

<script>
(function() {
  const canvas = document.getElementById('dino-game-canvas');
  const ctx = canvas.getContext('2d');
  const gameOverEl = document.getElementById('dino-gameover');
  const contentWrapper = document.querySelector('.content-wrapper');

  // --- Sistema de Som Dinâmico (Web Audio API) ---
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

  function playSound(type) {
    // Evita erro se o navegador bloquear o áudio antes do primeiro clique
    if (audioCtx.state === 'suspended') {
      audioCtx.resume();
    }

    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.connect(gain);
    gain.connect(audioCtx.destination);

    const now = audioCtx.currentTime;

    if (type === 'jump') {
      // Som de pulo: frequência que sobe rápido (bip agudo curto)
      osc.type = 'square';
      osc.frequency.setValueAtTime(150, now);
      osc.frequency.exponentialRampToValueAtTime(400, now + 0.12);
      
      gain.gain.setValueAtTime(0.08, now); // Volume baixo/agradável
      gain.gain.linearRampToValueAtTime(0, now + 0.12);
      
      osc.start(now);
      osc.stop(now + 0.12);
    } 
    else if (type === 'score') {
      // Som de ponto: dois bips rápidos estilo moedinha do Mario
      osc.type = 'sine';
      osc.frequency.setValueAtTime(587.33, now); // Nota D5
      osc.frequency.setValueAtTime(880, now + 0.08); // Nota A5
      
      gain.gain.setValueAtTime(0.06, now);
      gain.gain.setValueAtTime(0.06, now + 0.08);
      gain.gain.linearRampToValueAtTime(0, now + 0.25);
      
      osc.start(now);
      osc.stop(now + 0.25);
    }
  }

  // --- Game State ---
  let running = false;
  let score = 0;
  let obstacles = [];
  let clouds = [];
  let groundOffset = 0;
  let lastTime = 0;
  let spawnTimer = 0;
  let baseSpeed = 5;
  let gameTime = 0;
  let currentJumpForce = 0;
  let currentGravity = 0;

  // --- Assets Links ---
  const ASSETS_LINKS = {
    dino: "https://i.ibb.co/6YjSSx9/nico.png",
    cactus: "https://i.ibb.co/4w1P7CfK/cacto.png",
    ground: "https://i.ibb.co/W48V8hdN/chao.png",
    cloud: "https://i.ibb.co/rGtLyHzF/nuvens.png",
    ptero: "https://i.ibb.co/6YjSSx9/nico.png"
  };

  // Função para fechar o popup
  window.fecharPopup = function() {
    contentWrapper.style.display = 'none';
    
    const gameActiveIndicator = document.createElement('div');
    gameActiveIndicator.innerHTML = '🎮 Jogo ativo - Toque na tela para jogar!';
    gameActiveIndicator.style.cssText = `
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 14px;
      z-index: 50;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.2);
    `;
    document.body.appendChild(gameActiveIndicator);
    
    setTimeout(() => {
      if (gameActiveIndicator.parentNode) {
        gameActiveIndicator.parentNode.removeChild(gameActiveIndicator);
      }
    }, 3000);
  };

  // Carrega as imagens
  let sprites = {};
  async function loadSprites() {
    const loadImage = (url) => new Promise(resolve => {
      if (!url) { resolve(null); return; }
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = () => resolve(null);
      img.src = url;
    });

    const [dinoImg, cactusImg, groundImg, cloudImg, pteroImg] = await Promise.all([
      loadImage(ASSETS_LINKS.dino),
      loadImage(ASSETS_LINKS.cactus),
      loadImage(ASSETS_LINKS.ground),
      loadImage(ASSETS_LINKS.cloud),
      loadImage(ASSETS_LINKS.ptero)
    ]);
    sprites.dino = dinoImg;
    sprites.cactus = cactusImg;
    sprites.ground = groundImg;
    sprites.cloud = cloudImg;
    sprites.ptero = pteroImg;
  }

  // --- Player ---
  const dino = { x: 80, y: 0, w: 50, h: 50, vy: 0, jumping: false };

  function calculatePhysicsBasedOnScreen() {
    const H = canvas.clientHeight;
    const W = canvas.clientWidth;
    
    const isPortrait = H > W;
    
    const baseJumpForce = isPortrait ? -18 : -22;
    currentJumpForce = baseJumpForce * (H / 600);
    
    currentGravity = isPortrait ? 1.0 : 1.4;
    
    const baseDimension = Math.min(W, H); 
    const scaleFactor = isPortrait ? 0.08 : 0.1;
    const baseSize = Math.max(35, Math.min(90, Math.round(baseDimension * scaleFactor)));

    dino.w = baseSize;
    dino.h = baseSize;
    dino.x = W * 0.15;
  }

  function fitCanvas() {
    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    ctx.scale(dpr, dpr);

    calculatePhysicsBasedOnScreen();
  }

  function createClouds() {
    const W = canvas.clientWidth;
    const H = canvas.clientHeight;
    clouds = [];
    
    const cloudCount = window.innerWidth < 768 ? 3 : 4;
    
    for (let i = 0; i < cloudCount; i++) {
      clouds.push({
        x: Math.random() * W,
        y: Math.random() * H * 0.4,
        width: 60 + Math.random() * 40,
        height: 25 + Math.random() * 20,
        speed: 0.3 + Math.random() * 0.5
      });
    }
  }

  function resetGame() {
    running = false;
    score = 0;
    obstacles = [];
    groundOffset = 0;
    gameTime = 0;
    dino.y = 0;
    dino.vy = 0;
    dino.jumping = false;
    spawnTimer = 1500;
    baseSpeed = 5;
    calculatePhysicsBasedOnScreen();
    createClouds();
    gameOverEl.style.display = 'none';
  }

  function gameOver() {
    running = false;
    gameOverEl.style.display = 'block';
  }

  function handleInput() {
    if (!running) {
      resetGame();
      running = true;
    }
    if (!dino.jumping) {
      dino.vy = currentJumpForce;
      dino.jumping = true;
      playSound('jump'); // Toca o som de pulo
    }
  }

  function update(dt) {
    if (!running) return;

    gameTime += dt;
    baseSpeed = 5 + Math.floor(gameTime / 10000); 
    
    const groundHeight = canvas.clientHeight * 0.1;
    const groundY = canvas.clientHeight - groundHeight;

    // Física do Pulo
    dino.vy += currentGravity;
    dino.y += dino.vy;
    if (dino.y > 0) {
      dino.y = 0;
      dino.vy = 0;
      dino.jumping = false;
    }

    // Movimento do chão
    groundOffset = (groundOffset + baseSpeed) % canvas.clientWidth;

    // Atualiza nuvens
    const W = canvas.clientWidth;
    clouds.forEach(cloud => {
      cloud.x -= cloud.speed;
      if (cloud.x + cloud.width < 0) {
        cloud.x = W;
        cloud.y = Math.random() * canvas.clientHeight * 0.4;
      }
    });

    // Geração de Obstáculos
    spawnTimer -= dt;
    if (spawnTimer <= 0) {
      const isPtero = Math.random() < 0.3;
      
      if (isPtero) {
        const pteroHeight = dino.h * 0.8;
        const pteroWidth = dino.w * 1.2;
        const flightHeight = Math.random() * (canvas.clientHeight * 0.4) + (canvas.clientHeight * 0.2);
        
        obstacles.push({
          x: W,
          w: pteroWidth,
          h: pteroHeight,
          y: flightHeight,
          type: 'ptero',
          passed: false
        });
      } else {
        const cactusHeight = dino.h * 1.2;
        const cactusWidth = dino.w * 0.8;
        
        obstacles.push({
          x: W,
          w: cactusWidth,
          h: cactusHeight,
          y: groundY - cactusHeight,
          type: 'cactus',
          passed: false
        });
      }
      
      const isPortrait = canvas.clientHeight > canvas.clientWidth;
      const spawnReduction = isPortrait ? 30 : 50;
      spawnTimer = 1200 + Math.random() * 1200 - (baseSpeed * spawnReduction);
    }
    
    // Atualiza obstáculos e verifica colisão
    const dinoHitbox = { 
      x: dino.x + dino.w * 0.15, 
      y: groundY - dino.h + dino.y + dino.h * 0.15, 
      w: dino.w * 0.7, 
      h: dino.h * 0.7 
    };

    for (let i = obstacles.length - 1; i >= 0; i--) {
      const ob = obstacles[i];
      ob.x -= baseSpeed;

if (!ob.passed && ob.x + ob.w < dino.x) {
  ob.passed = true;
  // Só ganha ponto e toca o som se o obstáculo for um cacto
  if (ob.type === 'cactus') {
    score++;
    playSound('score');
  }
}

      if (ob.x + ob.w < 0) {
        obstacles.splice(i, 1);
      }

      let obHitbox;
      if (ob.type === 'ptero') {
        obHitbox = { 
          x: ob.x + ob.w * 0.3, 
          y: ob.y + ob.h * 0.2, 
          w: ob.w * 0.4, 
          h: ob.h * 0.6 
        };
      } else {
        obHitbox = { 
          x: ob.x + ob.w * 0.2, 
          y: ob.y + ob.h * 0.1, 
          w: ob.w * 0.6, 
          h: ob.h * 0.9 
        };
      }
      
      if (dinoHitbox.x < obHitbox.x + obHitbox.w &&
          dinoHitbox.x + dinoHitbox.w > obHitbox.x &&
          dinoHitbox.y < obHitbox.y + obHitbox.h &&
          dinoHitbox.y + dinoHitbox.h > obHitbox.y) {
        gameOver();
        return;
      }
    }
  }

  function draw() {
    const W = canvas.clientWidth;
    const H = canvas.clientHeight;
    const groundHeight = H * 0.1;
    const groundY = H - groundHeight;

    ctx.fillStyle = '#0b0b0d';
    ctx.fillRect(0, 0, W, H);
    
    if (sprites.cloud) {
      ctx.globalAlpha = 0.4;
      clouds.forEach(cloud => {
        ctx.drawImage(sprites.cloud, cloud.x, cloud.y, cloud.width, cloud.height);
      });
      ctx.globalAlpha = 1;
    }

    if (sprites.ground) {
      const tileWidth = 100;
      const numTiles = Math.ceil(W / tileWidth) + 1;
      const startX = - (groundOffset % tileWidth);
      for (let i = 0; i < numTiles; i++) {
        ctx.drawImage(sprites.ground, startX + i * tileWidth, groundY, tileWidth, groundHeight);
      }
    } else {
      ctx.fillStyle = '#9CA3AF';
      ctx.fillRect(0, groundY, W, groundHeight);
    }

    const dinoDrawY = groundY - dino.h + dino.y;
    if (sprites.dino) {
      ctx.drawImage(sprites.dino, dino.x, dinoDrawY, dino.w, dino.h);
    } else {
      ctx.fillStyle = '#FFFFFF';
      ctx.fillRect(dino.x, dinoDrawY, dino.w, dino.h);
    }

    obstacles.forEach(ob => {
      if (ob.type === 'ptero') {
        if (sprites.ptero) {
          ctx.drawImage(sprites.ptero, ob.x, ob.y, ob.w, ob.h);
        } else {
          ctx.fillStyle = '#FF6B6B';
          ctx.fillRect(ob.x, ob.y, ob.w, ob.h);
        }
      } else {
        if (sprites.cactus) {
          ctx.drawImage(sprites.cactus, ob.x, ob.y, ob.w, ob.h);
        } else {
          ctx.fillStyle = '#34D399';
          ctx.fillRect(ob.x, ob.y, ob.w, ob.h);
        }
      }
    });

    ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
    ctx.font = 'bold 24px system-ui, sans-serif';
    ctx.textAlign = 'left';
    ctx.fillText(`Pontos: ${score}`, 20, 35);
  }

  let lastFrameTime = 0;
  function gameLoop(timestamp) {
    const dt = timestamp - lastFrameTime || 0;
    lastFrameTime = timestamp;
    
    fitCanvas();
    update(dt);
    draw();
    
    requestAnimationFrame(gameLoop);
  }
  
  window.addEventListener('resize', fitCanvas);
  window.addEventListener('orientationchange', () => {
    setTimeout(fitCanvas, 100);
  });
  
  document.addEventListener('keydown', (e) => {
    if (e.code === 'Space') {
      e.preventDefault();
      handleInput();
    }
  });

  canvas.addEventListener('pointerdown', (e) => {
    e.preventDefault();
    handleInput();
  });

  gameOverEl.addEventListener('pointerdown', (e) => {
    e.preventDefault();
    handleInput();
  });

  document.addEventListener('pointerdown', (e) => {
    if (!e.target.closest('.content-wrapper')) {
      e.preventDefault();
      handleInput();
    }
  });

  (async function init(){
    await loadSprites();
    fitCanvas();
    createClouds();
    resetGame();
    requestAnimationFrame(gameLoop);
  })();

})();
</script>