<?php
declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');

$phpVersion = PHP_VERSION;
$now = date('Y-m-d H:i:s');

// SEO Meta Tags
$title = "Auto-Snake: The Infinite Loop";
$description = "Watch an AI-powered snake navigate mazes and eat apples in an infinite, perfect loop. A mesmerizing demonstration of pathfinding.";
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <title><?= htmlspecialchars($title) ?></title>
  <meta name="description" content="<?= htmlspecialchars($description) ?>" />
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="<?= htmlspecialchars($title) ?>" />
  <meta property="og:description" content="<?= htmlspecialchars($description) ?>" />
  <?php if ($projectImageUrl): ?>
    <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
  <?php endif; ?>

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:title" content="<?= htmlspecialchars($title) ?>" />
  <meta property="twitter:description" content="<?= htmlspecialchars($description) ?>" />
  <?php if ($projectImageUrl): ?>
    <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
  <?php endif; ?>

  <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@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  
  <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
</head>
<body>
  <div class="background-mesh"></div>
  
  <header class="main-header">
    <div class="container">
      <h1>Auto-Snake <span class="badge">AI Bot</span></h1>
      <p class="subtitle">Smart, smooth, and never-ending.</p>
    </div>
  </header>

  <main class="container main-layout">
    <div class="game-column">
      <div class="canvas-wrapper">
        <canvas id="gameCanvas"></canvas>
        <div id="gameOverlay" class="overlay hidden">
          <div class="overlay-content">
            <h2 id="overlayTitle">VICTORY!</h2>
            <p id="overlayMessage">The grid is full. Restarting...</p>
          </div>
        </div>
      </div>
    </div>

    <aside class="sidebar">
      <div class="stats-card card">
        <h3>Live Stats</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <span class="label">Wins</span>
            <span id="winCount" class="value">0</span>
          </div>
          <div class="stat-item">
            <span class="label">Time Since Win</span>
            <span id="timer" class="value">00:00</span>
          </div>
          <div class="stat-item">
            <span class="label">Score</span>
            <span id="currentScore" class="value">0</span>
          </div>
          <div class="stat-item">
            <span class="label">Best Score</span>
            <span id="bestScore" class="value">0</span>
          </div>
        </div>
      </div>

      <div class="controls-card card">
        <h3>Simulation Controls</h3>
        <div class="control-group">
          <label for="speedRange">Simulation Speed</label>
          <input type="range" id="speedRange" min="1" max="60" value="45">
          <div class="range-labels">
            <span>Slow</span>
            <span>Fast</span>
          </div>
        </div>
        
        <div class="button-group">
          <button id="resetBtn" class="btn btn-secondary">Reset Data</button>
          <button id="toggleMazeBtn" class="btn btn-primary">Toggle Maze</button>
        </div>
      </div>

      <div class="info-card card">
        <h3>How it works</h3>
        <p>This AI uses <strong>Breadth-First Search (BFS)</strong> for pathfinding. To avoid loops, it employs a <strong>Longest Path approximation</strong> when following its tail, ensuring it consumes the most space possible to wait for a safe opening to the apple.</p>
      </div>
    </aside>
  </main>

  <footer class="main-footer">
    <div class="container">
      <p>&copy; <?= date('Y') ?> Auto-Snake AI. Built with PHP <?= $phpVersion ?>.</p>
    </div>
  </footer>

  <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>