<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazing Snake AI</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
            max-width: 800px;
            width: 100%;
        }

        header {
            text-align: center;
            margin-bottom: 10px;
        }

        h1 {
            font-size: 2.8rem;
            margin-bottom: 8px;
            background: linear-gradient(90deg, #00dbde, #fc00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .subtitle {
            font-size: 1.1rem;
            color: #a9c1ff;
            margin-bottom: 5px;
        }

        .game-area {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            width: 100%;
        }

        .game-board {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 3px solid #2a3a5f;
        }

        canvas {
            display: block;
            background-color: #0f1525;
        }

        .stats-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: 200px;
        }

        .stat-box {
            background: rgba(30, 40, 70, 0.8);
            border-radius: 10px;
            padding: 18px;
            border: 1px solid #3a4a6f;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .stat-title {
            font-size: 0.9rem;
            color: #8ab4f8;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #fff;
        }

        .controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 10px;
        }

        button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .primary-btn {
            background: linear-gradient(90deg, #4a6afa, #6a4afa);
            color: white;
            box-shadow: 0 4px 12px rgba(74, 106, 250, 0.3);
        }

        .primary-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(74, 106, 250, 0.4);
        }

        .secondary-btn {
            background: rgba(60, 80, 130, 0.8);
            color: #d0e1ff;
            border: 1px solid #4a5a8a;
        }

        .secondary-btn:hover {
            background: rgba(70, 90, 140, 0.9);
        }

        .mode-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            background: rgba(30, 40, 70, 0.8);
            border-radius: 8px;
            border: 1px solid #3a4a6f;
        }

        .mode-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #4CAF50;
            box-shadow: 0 0 8px #4CAF50;
        }

        .mode-dot.manual {
            background-color: #FF9800;
            box-shadow: 0 0 8px #FF9800;
        }

        .instructions {
            max-width: 600px;
            background: rgba(30, 40, 70, 0.6);
            border-radius: 10px;
            padding: 20px;
            margin-top: 10px;
            border: 1px solid #3a4a6f;
        }

        .instructions h3 {
            color: #8ab4f8;
            margin-bottom: 12px;
            font-size: 1.2rem;
        }

        .instructions ul {
            padding-left: 20px;
            color: #b0c4ff;
            line-height: 1.6;
        }

        .instructions li {
            margin-bottom: 8px;
        }

        .key {
            display: inline-block;
            background: rgba(0, 0, 0, 0.3);
            padding: 2px 8px;
            border-radius: 4px;
            font-family: monospace;
            margin: 0 4px;
            border: 1px solid #5a6a9a;
        }

        .ai-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px;
            font-size: 0.9rem;
            color: #a9c1ff;
        }

        .ai-info span {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #4CAF50;
        }

        @media (max-width: 700px) {
            .game-area {
                flex-direction: column;
                align-items: center;
            }
            
            .stats-panel {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .stat-box {
                min-width: 140px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Amazing Snake AI</h1>
            <div class="subtitle">AI automatically plays when no controls are touched</div>
        </header>
        
        <div class="game-area">
            <div class="game-board">
                <canvas id="gameCanvas" width="500" height="500"></canvas>
            </div>
            
            <div class="stats-panel">
                <div class="stat-box">
                    <div class="stat-title">Score</div>
                    <div class="stat-value" id="score">0</div>
                </div>
                
                <div class="stat-box">
                    <div class="stat-title">Length</div>
                    <div class="stat-value" id="length">3</div>
                </div>
                
                <div class="stat-box">
                    <div class="stat-title">Foods Eaten</div>
                    <div class="stat-value" id="foodsEaten">0</div>
                </div>
                
                <div class="mode-indicator">
                    <div class="mode-dot" id="modeDot"></div>
                    <div id="modeText">AI Mode</div>
                </div>
                
                <div class="controls">
                    <button class="primary-btn" id="restartBtn">
                        <span>🔄</span> Restart Game
                    </button>
                    <button class="secondary-btn" id="toggleModeBtn">
                        <span>⌨️</span> Toggle Manual/AI
                    </button>
                </div>
                
                <div class="ai-info">
                    <span><div class="status-dot"></div> AI is solving the board</span>
                    <span>No simple mistakes</span>
                    <span>Optimizes path to food & tail</span>
                </div>
            </div>
        </div>
        
        <div class="instructions">
            <h3>How to Play</h3>
            <ul>
                <li>Use <span class="key">↑</span> <span class="key">↓</span> <span class="key">←</span> <span class="key">→</span> arrow keys to control the snake manually</li>
                <li>When no keys are pressed for 1 second, AI automatically takes over</li>
                <li>AI uses advanced pathfinding to avoid trapping itself</li>
                <li>Collect food (red) to grow and earn points</li>
                <li>Avoid hitting walls or the snake's own body</li>
                <li>The AI can solve the entire board without getting stuck</li>
            </ul>
        </div>
    </div>

    <script>
        // Game constants
        const GRID_SIZE = 20;
        const CELL_SIZE = 25;
        const CANVAS_SIZE = GRID_SIZE * CELL_SIZE;
        const GAME_SPEED = 100; // ms between updates
        const AI_TIMEOUT = 1000; // ms before AI takes over

        // Game state
        let snake = [];
        let food = { x: 0, y: 0 };
        let direction = { x: 1, y: 0 };
        let nextDirection = { x: 1, y: 0 };
        let score = 0;
        let foodsEaten = 0;
        let gameRunning = false;
        let gameLoopId = null;
        let lastKeyPressTime = 0;
        let aiMode = true;
        let lastManualDirection = { x: 1, y: 0 };

        // DOM elements
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const lengthElement = document.getElementById('length');
        const foodsEatenElement = document.getElementById('foodsEaten');
        const modeDot = document.getElementById('modeDot');
        const modeText = document.getElementById('modeText');
        const restartBtn = document.getElementById('restartBtn');
        const toggleModeBtn = document.getElementById('toggleModeBtn');

        // Initialize canvas size
        canvas.width = CANVAS_SIZE;
        canvas.height = CANVAS_SIZE;

        // Initialize game
        function initGame() {
            // Initialize snake in the middle of the grid
            const startX = Math.floor(GRID_SIZE / 2);
            const startY = Math.floor(GRID_SIZE / 2);
            snake = [
                { x: startX, y: startY },
                { x: startX - 1, y: startY },
                { x: startX - 2, y: startY }
            ];
            
            direction = { x: 1, y: 0 };
            nextDirection = { x: 1, y: 0 };
            score = 0;
            foodsEaten = 0;
            generateFood();
            updateStats();
            gameRunning = true;
            
            if (gameLoopId) clearInterval(gameLoopId);
            gameLoopId = setInterval(update, GAME_SPEED);
        }

        // Generate food at random position not on snake
        function generateFood() {
            let newFood;
            let onSnake;
            
            do {
                newFood = {
                    x: Math.floor(Math.random() * GRID_SIZE),
                    y: Math.floor(Math.random() * GRID_SIZE)
                };
                
                onSnake = snake.some(segment => 
                    segment.x === newFood.x && segment.y === newFood.y
                );
            } while (onSnake);
            
            food = newFood;
        }

        // Update game state
        function update() {
            // Check if we should switch to AI mode
            const currentTime = Date.now();
            if (!aiMode && currentTime - lastKeyPressTime > AI_TIMEOUT) {
                aiMode = true;
                updateModeIndicator();
            }
            
            // Get next direction (from AI or manual control)
            if (aiMode) {
                nextDirection = getAIMove();
            }
            
            // Update direction (prevent 180-degree turns)
            if (nextDirection.x !== -direction.x || nextDirection.y !== -direction.y) {
                direction = { ...nextDirection };
            }
            
            // Calculate new head position
            const head = snake[0];
            const newHead = {
                x: head.x + direction.x,
                y: head.y + direction.y
            };
            
            // Check for collisions
            if (
                newHead.x < 0 || newHead.x >= GRID_SIZE ||
                newHead.y < 0 || newHead.y >= GRID_SIZE ||
                snake.some((segment, index) => index > 0 && segment.x === newHead.x && segment.y === newHead.y)
            ) {
                gameOver();
                return;
            }
            
            // Add new head
            snake.unshift(newHead);
            
            // Check if food eaten
            if (newHead.x === food.x && newHead.y === food.y) {
                score += 10;
                foodsEaten++;
                generateFood();
                updateStats();
            } else {
                // Remove tail if no food eaten
                snake.pop();
            }
            
            // Draw everything
            draw();
        }

        // Advanced AI that finds optimal path
        function getAIMove() {
            const head = snake[0];
            const tail = snake[snake.length - 1];
            
            // 1. First try to find shortest path to food
            const pathToFood = findPath(head, food, snake, tail, false);
            if (pathToFood && pathToFood.length > 1) {
                const nextCell = pathToFood[1];
                return {
                    x: nextCell.x - head.x,
                    y: nextCell.y - head.y
                };
            }
            
            // 2. If no path to food, try to follow tail to avoid getting trapped
            const pathToTail = findPath(head, tail, snake, tail, true);
            if (pathToTail && pathToTail.length > 1) {
                const nextCell = pathToTail[1];
                return {
                    x: nextCell.x - head.x,
                    y: nextCell.y - head.y
                };
            }
            
            // 3. If no path to tail, find safest move (maximum distance from body)
            return findSafestMove(head, snake, tail);
        }

        // Find path using BFS (Breadth-First Search)
        function findPath(start, end, snake, tail, isChasingTail) {
            const queue = [{ cell: start, path: [start] }];
            const visited = new Set();
            visited.add(`${start.x},${start.y}`);
            
            while (queue.length > 0) {
                const { cell, path } = queue.shift();
                
                // Check if we reached the destination
                if (cell.x === end.x && cell.y === end.y) {
                    return path;
                }
                
                // Explore neighbors
                const neighbors = [
                    { x: cell.x, y: cell.y - 1 }, // Up
                    { x: cell.x, y: cell.y + 1 }, // Down
                    { x: cell.x - 1, y: cell.y }, // Left
                    { x: cell.x + 1, y: cell.y }  // Right
                ];
                
                for (const neighbor of neighbors) {
                    // Check bounds
                    if (
                        neighbor.x < 0 || neighbor.x >= GRID_SIZE ||
                        neighbor.y < 0 || neighbor.y >= GRID_SIZE
                    ) {
                        continue;
                    }
                    
                    const key = `${neighbor.x},${neighbor.y}`;
                    if (visited.has(key)) {
                        continue;
                    }
                    
                    // Check if neighbor is occupied by snake body
                    // When chasing tail, we can step on tail (it will move)
                    const isOnSnake = snake.some((segment, index) => {
                        // Don't count the tail if we're chasing it (it will move)
                        if (isChasingTail && index === snake.length - 1) {
                            return false;
                        }
                        return segment.x === neighbor.x && segment.y === neighbor.y;
                    });
                    
                    if (isOnSnake) {
                        continue;
                    }
                    
                    visited.add(key);
                    queue.push({
                        cell: neighbor,
                        path: [...path, neighbor]
                    });
                }
            }
            
            return null;
        }

        // Find safest move when no path exists
        function findSafestMove(head, snake, tail) {
            const directions = [
                { x: 0, y: -1 }, // Up
                { x: 0, y: 1 },  // Down
                { x: -1, y: 0 }, // Left
                { x: 1, y: 0 }   // Right
            ];
            
            let safestMove = null;
            let maxDistance = -1;
            
            for (const dir of directions) {
                const newHead = {
                    x: head.x + dir.x,
                    y: head.y + dir.y
                };
                
                // Check if move is valid
                if (
                    newHead.x < 0 || newHead.x >= GRID_SIZE ||
                    newHead.y < 0 || newHead.y >= GRID_SIZE
                ) {
                    continue;
                }
                
                // Check collision with snake body (except tail)
                const collision = snake.some((segment, index) => {
                    if (index === snake.length - 1) return false; // Tail is safe
                    return segment.x === newHead.x && segment.y === newHead.y;
                });
                
                if (collision) {
                    continue;
                }
                
                // Calculate distance to tail (the farther, the safer)
                const distanceToTail = Math.abs(newHead.x - tail.x) + Math.abs(newHead.y - tail.y);
                
                if (distanceToTail > maxDistance) {
                    maxDistance = distanceToTail;
                    safestMove = dir;
                }
            }
            
            return safestMove || { x: 1, y: 0 }; // Default to right if no safe move
        }

        // Draw game
        function draw() {
            // Clear canvas
            ctx.fillStyle = '#0f1525';
            ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
            
            // Draw grid (subtle)
            ctx.strokeStyle = 'rgba(100, 120, 180, 0.1)';
            ctx.lineWidth = 0.5;
            for (let i = 0; i <= GRID_SIZE; i++) {
                ctx.beginPath();
                ctx.moveTo(i * CELL_SIZE, 0);
                ctx.lineTo(i * CELL_SIZE, CANVAS_SIZE);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(0, i * CELL_SIZE);
                ctx.lineTo(CANVAS_SIZE, i * CELL_SIZE);
                ctx.stroke();
            }
            
            // Draw snake
            snake.forEach((segment, index) => {
                const x = segment.x * CELL_SIZE;
                const y = segment.y * CELL_SIZE;
                
                // Snake gradient from head to tail
                const intensity = Math.max(50, 255 - index * 8);
                ctx.fillStyle = `rgb(0, ${intensity}, ${Math.min(255, 100 + index * 5)})`;
                
                // Draw rounded rectangle for each segment
                const radius = 4;
                ctx.beginPath();
                ctx.roundRect(x + 1, y + 1, CELL_SIZE - 2, CELL_SIZE - 2, radius);
                ctx.fill();
                
                // Draw eyes on head
                if (index === 0) {
                    ctx.fillStyle = '#fff';
                    const eyeSize = 4;
                    const offset = 6;
                    
                    // Position eyes based on direction
                    let leftEyeX, leftEyeY, rightEyeX, rightEyeY;
                    
                    if (direction.x === 1) { // Right
                        leftEyeX = x + CELL_SIZE - offset - eyeSize;
                        leftEyeY = y + offset;
                        rightEyeX = x + CELL_SIZE - offset - eyeSize;
                        rightEyeY = y + CELL_SIZE - offset - eyeSize;
                    } else if (direction.x === -1) { // Left
                        leftEyeX = x + offset;
                        leftEyeY = y + offset;
                        rightEyeX = x + offset;
                        rightEyeY = y + CELL_SIZE - offset - eyeSize;
                    } else if (direction.y === -1) { // Up
                        leftEyeX = x + offset;
                        leftEyeY = y + offset;
                        rightEyeX = x + CELL_SIZE - offset - eyeSize;
                        rightEyeY = y + offset;
                    } else { // Down
                        leftEyeX = x + offset;
                        leftEyeY = y + CELL_SIZE - offset - eyeSize;
                        rightEyeX = x + CELL_SIZE - offset - eyeSize;
                        rightEyeY = y + CELL_SIZE - offset - eyeSize;
                    }
                    
                    ctx.beginPath();
                    ctx.arc(leftEyeX + eyeSize/2, leftEyeY + eyeSize/2, eyeSize/2, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(rightEyeX + eyeSize/2, rightEyeY + eyeSize/2, eyeSize/2, 0, Math.PI * 2);
                    ctx.fill();
                }
            });
            
            // Draw food with pulsing effect
            const pulse = 1 + 0.1 * Math.sin(Date.now() / 200);
            const foodSize = (CELL_SIZE - 4) * pulse;
            const foodX = food.x * CELL_SIZE + (CELL_SIZE - foodSize) / 2;
            const foodY = food.y * CELL_SIZE + (CELL_SIZE - foodSize) / 2;
            
            ctx.fillStyle = '#ff4444';
            ctx.beginPath();
            ctx.arc(
                food.x * CELL_SIZE + CELL_SIZE/2,
                food.y * CELL_SIZE + CELL_SIZE/2,
                foodSize/2,
                0,
                Math.PI * 2
            );
            ctx.fill();
            
            // Add shine to food
            ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
            ctx.beginPath();
            ctx.arc(
                food.x * CELL_SIZE + CELL_SIZE/2 - foodSize/4,
                food.y * CELL_SIZE + CELL_SIZE/2 - foodSize/4,
                foodSize/6,
                0,
                Math.PI * 2
            );
            ctx.fill();
        }

        // Update stats display
        function updateStats() {
            scoreElement.textContent = score;
            lengthElement.textContent = snake.length;
            foodsEatenElement.textContent = foodsEaten;
        }

        // Update mode indicator
        function updateModeIndicator() {
            if (aiMode) {
                modeDot.classList.remove('manual');
                modeText.textContent = 'AI Mode';
            } else {
                modeDot.classList.add('manual');
                modeText.textContent = 'Manual Mode';
            }
        }

        // Game over
        function gameOver() {
            gameRunning = false;
            clearInterval(gameLoopId);
            
            // Show game over message
            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
            ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
            
            ctx.font = 'bold 36px Arial';
            ctx.fillStyle = '#ff4444';
            ctx.textAlign = 'center';
            ctx.fillText('GAME OVER', CANVAS_SIZE / 2, CANVAS_SIZE / 2 - 30);
            
            ctx.font = '24px Arial';
            ctx.fillStyle = '#fff';
            ctx.fillText(`Score: ${score}`, CANVAS_SIZE / 2, CANVAS_SIZE / 2 + 20);
            ctx.fillText(`Length: ${snake.length}`, CANVAS_SIZE / 2, CANVAS_SIZE / 2 + 50);
            ctx.fillText('Click Restart to play again', CANVAS_SIZE / 2, CANVAS_SIZE / 2 + 90);
        }

        // Handle keyboard input
        document.addEventListener('keydown', (e) => {
            lastKeyPressTime = Date.now();
            
            // Switch to manual mode when any arrow key is pressed
            if (aiMode && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
                aiMode = false;
                updateModeIndicator();
            }
            
            switch (e.key) {
                case 'ArrowUp':
                    if (direction.y === 0) {
                        nextDirection = { x: 0, y: -1 };
                        lastManualDirection = { x: 0, y: -1 };
                    }
                    e.preventDefault();
                    break;
                case 'ArrowDown':
                    if (direction.y === 0) {
                        nextDirection = { x: 0, y: 1 };
                        lastManualDirection = { x: 0, y: 1 };
                    }
                    e.preventDefault();
                    break;
                case 'ArrowLeft':
                    if (direction.x === 0) {
                        nextDirection = { x: -1, y: 0 };
                        lastManualDirection = { x: -1, y: 0 };
                    }
                    e.preventDefault();
                    break;
                case 'ArrowRight':
                    if (direction.x === 0) {
                        nextDirection = { x: 1, y: 0 };
                        lastManualDirection = { x: 1, y: 0 };
                    }
                    e.preventDefault();
                    break;
                case ' ': // Spacebar to toggle mode
                    aiMode = !aiMode;
                    updateModeIndicator();
                    e.preventDefault();
                    break;
            }
        });

        // Button event listeners
        restartBtn.addEventListener('click', () => {
            initGame();
        });

        toggleModeBtn.addEventListener('click', () => {
            aiMode = !aiMode;
            updateModeIndicator();
            lastKeyPressTime = Date.now() - AI_TIMEOUT - 1; // Force AI to stay in new mode
        });

        // Initialize game on load
        window.addEventListener('load', () => {
            initGame();
            updateModeIndicator();
        });

        // Handle window resize to keep canvas sharp
        window.addEventListener('resize', () => {
            draw();
        });
    </script>
</body>
</html>