/**
 * Renderer.js
 * Helper for rendering all game elements (Mario, enemies, platforms, effects, etc.)
 * Handles canvas drawing with proper layering and camera translation
 */

export class Renderer {
    constructor() {
        // No internal state - all rendering is stateless based on game data
    }

    /**
     * Main render method - orchestrates all rendering
     * @param {CanvasRenderingContext2D} ctx - Canvas 2D context
     * @param {Object} gameState - Current game state with all entities
     * @param {Object} config - Game configuration
     */
    render(ctx, gameState, config) {
        // Clear canvas
        ctx.clearRect(0, 0, config.canvasWidth, config.canvasHeight);

        // Render background (no camera translation)
        this.renderBackground(ctx, gameState.camera, config);

        // Save context for camera translation
        ctx.save();
        ctx.translate(-gameState.camera.x, -gameState.camera.y);

        // Render world elements (with camera translation)
        this.renderPlatforms(ctx, gameState.platforms);
        this.renderQuestionBlocks(ctx, gameState.questionBlocks);
        this.renderEnemies(ctx, gameState.enemies);
        this.renderWalls(ctx, gameState.walls);

        // Advanced level elements
        if (gameState.piranhaPlants) this.renderPiranhaPlants(ctx, gameState.piranhaPlants);
        if (gameState.projectiles) this.renderProjectiles(ctx, gameState.projectiles);

        // Level 4+ elements
        if (gameState.catapults) this.renderCatapults(ctx, gameState.catapults);
        if (gameState.boulders) this.renderBoulders(ctx, gameState.boulders);
        if (gameState.stones) this.renderStones(ctx, gameState.stones);

        // Level 5+ elements
        if (gameState.flyingEyes) this.renderFlyingEyes(ctx, gameState.flyingEyes);

        // Level 6 boss elements
        if (gameState.boss) this.renderBoss(ctx, gameState.boss);

        // Castle structure (emoji-based)
        if (gameState.castleStructure) this.renderCastleStructure(ctx, gameState.castleStructure);

        // Finish line
        if (gameState.finishLine) this.renderFinishLine(ctx, gameState.finishLine, gameState.currentLevel);

        // Mario
        this.renderMario(ctx, gameState.mario);

        // Particles
        if (gameState.particles) this.renderParticles(ctx, gameState.particles);

        // Debug hitboxes
        if (gameState.debugMode) {
            this.renderDebugHitboxes(ctx, gameState);
        }

        // Restore context
        ctx.restore();

        // Render UI (no camera translation)
        this.renderUI(ctx, gameState, config);
    }

    /**
     * Render background with sky gradient and clouds
     */
    renderBackground(ctx, camera, config) {
        // Sky gradient
        const gradient = ctx.createLinearGradient(0, 0, 0, config.canvasHeight);
        gradient.addColorStop(0, '#87CEEB');
        gradient.addColorStop(1, '#98FB98');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, config.canvasWidth, config.canvasHeight);

        // Clouds (parallax scrolling - slower than camera)
        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
        for (let i = 0; i < 5; i++) {
            const x = (i * 300 + 100 - camera.x * 0.3) % (config.canvasWidth + 200);
            const y = 80 + i * 30;
            this.renderCloud(ctx, x, y);
        }
    }

    /**
     * Render a single cloud
     */
    renderCloud(ctx, x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 30, 0, Math.PI * 2);
        ctx.arc(x + 30, y, 40, 0, Math.PI * 2);
        ctx.arc(x + 60, y, 30, 0, Math.PI * 2);
        ctx.fill();
    }

    /**
     * Render platforms
     */
    renderPlatforms(ctx, platforms) {
        platforms.forEach(platform => {
            ctx.fillStyle = platform.color;
            ctx.fillRect(platform.x, platform.y, platform.width, platform.height);

            // Add outline
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.strokeRect(platform.x, platform.y, platform.width, platform.height);
        });
    }

    /**
     * Render question blocks
     */
    renderQuestionBlocks(ctx, questionBlocks) {
        questionBlocks.forEach(block => {
            // Block body
            ctx.fillStyle = block.hit ? '#666' : '#FFD700';
            ctx.fillRect(block.x, block.y, block.width, block.height);

            // Border
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.strokeRect(block.x, block.y, block.width, block.height);

            // Question mark (if not hit)
            if (!block.hit) {
                ctx.fillStyle = '#000';
                ctx.font = 'bold 24px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('?', block.x + block.width / 2, block.y + block.height / 2);
            }
        });
    }

    /**
     * Render enemies
     */
    renderEnemies(ctx, enemies) {
        enemies.forEach(enemy => {
            // Enemy body
            ctx.fillStyle = enemy.color || '#FF6B6B';
            ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);

            // Eyes
            ctx.fillStyle = '#FFF';
            ctx.fillRect(enemy.x + 5, enemy.y + 5, 8, 8);
            ctx.fillRect(enemy.x + enemy.width - 13, enemy.y + 5, 8, 8);

            // Pupils
            ctx.fillStyle = '#000';
            ctx.fillRect(enemy.x + 7, enemy.y + 7, 4, 4);
            ctx.fillRect(enemy.x + enemy.width - 11, enemy.y + 7, 4, 4);

            // Helmet (for koopa type)
            if (enemy.hasHelmet) {
                ctx.fillStyle = '#FFD700'; // Gold helmet
                ctx.fillRect(enemy.x + 2, enemy.y - 4, enemy.width - 4, 6);
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 1;
                ctx.strokeRect(enemy.x + 2, enemy.y - 4, enemy.width - 4, 6);
            }

            // Border
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.strokeRect(enemy.x, enemy.y, enemy.width, enemy.height);
        });
    }

    /**
     * Render walls
     */
    renderWalls(ctx, walls) {
        walls.forEach(wall => {
            // Main wall color
            ctx.fillStyle = wall.color || '#8B4513';
            ctx.fillRect(wall.x, wall.y, wall.width, wall.height);

            // Brick pattern
            ctx.strokeStyle = '#654321';
            ctx.lineWidth = 2;

            const brickWidth = 40;
            const brickHeight = 20;

            for (let y = wall.y; y < wall.y + wall.height; y += brickHeight) {
                const offset = Math.floor((y - wall.y) / brickHeight) % 2 === 0 ? 0 : brickWidth / 2;
                for (let x = wall.x + offset; x < wall.x + wall.width; x += brickWidth) {
                    ctx.strokeRect(x, y, Math.min(brickWidth, wall.x + wall.width - x), brickHeight);
                }
            }

            // Outer border
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 3;
            ctx.strokeRect(wall.x, wall.y, wall.width, wall.height);
        });
    }

    /**
     * Render piranha plants
     */
    renderPiranhaPlants(ctx, plants) {
        plants.forEach(plant => {
            if (!plant.visible) return;

            // If flattened, render as flat green patch (platform)
            if (plant.flattened) {
                ctx.fillStyle = '#228B22';
                ctx.fillRect(plant.x, plant.y + plant.height - 5, plant.width, 5);
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 1;
                ctx.strokeRect(plant.x, plant.y + plant.height - 5, plant.width, 5);
                return;
            }

            const pipeHeight = 25; // Much smaller pipe
            const pipeY = plant.y + plant.height - pipeHeight;

            // Pipe
            ctx.fillStyle = '#2D882D';
            ctx.fillRect(plant.x, pipeY, plant.width, pipeHeight);

            // Pipe rim
            ctx.fillStyle = '#3A9F3A';
            ctx.fillRect(plant.x - 2, pipeY, plant.width + 4, 5);

            // Pipe border
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;
            ctx.strokeRect(plant.x, pipeY, plant.width, pipeHeight);
            ctx.strokeRect(plant.x - 2, pipeY, plant.width + 4, 5);

            // Plant head (if extended)
            if (plant.extended > 0) {
                const headY = pipeY - plant.extended;
                const headSize = 10; // Much smaller head (radius, so diameter = 20px)

                // Head
                ctx.fillStyle = '#FF0000';
                ctx.beginPath();
                ctx.arc(plant.x + plant.width / 2, headY, headSize, 0, Math.PI * 2);
                ctx.fill();
                ctx.stroke();

                // Spots
                ctx.fillStyle = '#FFF';
                ctx.beginPath();
                ctx.arc(plant.x + plant.width / 2 - 4, headY - 2, 2, 0, Math.PI * 2);
                ctx.arc(plant.x + plant.width / 2 + 4, headY - 2, 2, 0, Math.PI * 2);
                ctx.fill();

                // Mouth (open/close animation)
                const mouthOpen = Math.sin(Date.now() / 200) > 0;
                if (mouthOpen) {
                    ctx.fillStyle = '#000';
                    ctx.fillRect(plant.x + plant.width / 2 - 5, headY + 3, 10, 3);
                }

                // Stem
                ctx.fillStyle = '#2D882D';
                ctx.fillRect(plant.x + plant.width / 2 - 2, headY, 4, plant.extended);
            }
        });
    }

    /**
     * Render projectiles
     */
    renderProjectiles(ctx, projectiles) {
        projectiles.forEach(proj => {
            ctx.fillStyle = proj.color || '#FF4444';
            ctx.beginPath();
            ctx.arc(proj.x, proj.y, proj.radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.stroke();
        });
    }

    /**
     * Render catapults
     */
    renderCatapults(ctx, catapults) {
        catapults.forEach(catapult => {
            // Base
            ctx.fillStyle = '#654321';
            ctx.fillRect(catapult.x, catapult.y + 20, catapult.width, 20);

            // Arm
            ctx.save();
            ctx.translate(catapult.x + catapult.width / 2, catapult.y + 30);
            ctx.rotate(catapult.armAngle);
            ctx.fillStyle = '#8B4513';
            ctx.fillRect(-5, -40, 10, 40);
            ctx.restore();

            // Border
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.strokeRect(catapult.x, catapult.y + 20, catapult.width, 20);
        });
    }

    /**
     * Render boulders
     */
    renderBoulders(ctx, boulders) {
        boulders.forEach(boulder => {
            // Support both circle (radius) and rectangle (width/height) boulders
            if (boulder.radius) {
                // Circle boulder
                ctx.fillStyle = boulder.color || '#808080';
                ctx.beginPath();
                ctx.arc(boulder.x, boulder.y, boulder.radius, 0, Math.PI * 2);
                ctx.fill();

                // Cracks/texture
                ctx.strokeStyle = '#606060';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(boulder.x - boulder.radius * 0.5, boulder.y - boulder.radius * 0.3);
                ctx.lineTo(boulder.x + boulder.radius * 0.5, boulder.y + boulder.radius * 0.3);
                ctx.stroke();

                // Border
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.arc(boulder.x, boulder.y, boulder.radius, 0, Math.PI * 2);
                ctx.stroke();
            } else {
                // Rectangle boulder (parabolic arc style)
                ctx.fillStyle = boulder.color || '#696969';
                ctx.fillRect(boulder.x, boulder.y, boulder.width, boulder.height);

                // Cracks/texture
                ctx.strokeStyle = '#505050';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(boulder.x + boulder.width * 0.2, boulder.y + boulder.height * 0.3);
                ctx.lineTo(boulder.x + boulder.width * 0.8, boulder.y + boulder.height * 0.7);
                ctx.stroke();

                // Border
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 2;
                ctx.strokeRect(boulder.x, boulder.y, boulder.width, boulder.height);
            }
        });
    }

    /**
     * Render stones (stone rain)
     */
    renderStones(ctx, stones) {
        stones.forEach(stone => {
            ctx.fillStyle = '#A9A9A9';
            ctx.fillRect(stone.x, stone.y, stone.width, stone.height);

            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;
            ctx.strokeRect(stone.x, stone.y, stone.width, stone.height);
        });
    }

    /**
     * Render flying eyes
     */
    renderFlyingEyes(ctx, eyes) {
        eyes.forEach(eye => {
            // Outer eye shape
            ctx.fillStyle = '#FFE6E6';
            ctx.beginPath();
            ctx.ellipse(eye.x, eye.y, eye.width / 2, eye.height / 2, 0, 0, Math.PI * 2);
            ctx.fill();
            ctx.strokeStyle = '#FF0000';
            ctx.lineWidth = 2;
            ctx.stroke();

            // Iris
            ctx.fillStyle = '#8B0000';
            ctx.beginPath();
            ctx.arc(eye.x, eye.y, eye.width / 4, 0, Math.PI * 2);
            ctx.fill();

            // Pupil
            ctx.fillStyle = '#000';
            ctx.beginPath();
            ctx.arc(eye.x, eye.y, eye.width / 8, 0, Math.PI * 2);
            ctx.fill();

            // Health bar
            if (eye.health < eye.maxHealth) {
                const barWidth = eye.width;
                const barHeight = 4;
                const barX = eye.x - barWidth / 2;
                const barY = eye.y - eye.height / 2 - 10;

                // Background
                ctx.fillStyle = '#FF0000';
                ctx.fillRect(barX, barY, barWidth, barHeight);

                // Health
                ctx.fillStyle = '#00FF00';
                const healthWidth = (eye.health / eye.maxHealth) * barWidth;
                ctx.fillRect(barX, barY, healthWidth, barHeight);

                // Border
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 1;
                ctx.strokeRect(barX, barY, barWidth, barHeight);
            }
        });
    }

    /**
     * Render boss
     */
    renderBoss(ctx, boss) {
        if (!boss || !boss.active) return;

        // Boss body (large imposing figure)
        ctx.fillStyle = boss.enraged ? '#8B0000' : '#FF4444';
        ctx.fillRect(boss.x, boss.y, boss.width, boss.height);

        // Armor plates
        ctx.fillStyle = '#2F4F4F';
        ctx.fillRect(boss.x + 10, boss.y + 20, boss.width - 20, 20);
        ctx.fillRect(boss.x + 10, boss.y + 60, boss.width - 20, 20);

        // Eyes (angry)
        ctx.fillStyle = boss.enraged ? '#FFFF00' : '#FFF';
        ctx.fillRect(boss.x + 20, boss.y + 40, 30, 20);
        ctx.fillRect(boss.x + boss.width - 50, boss.y + 40, 30, 20);

        // Pupils (follow player)
        ctx.fillStyle = '#000';
        ctx.fillRect(boss.x + 35, boss.y + 45, 10, 10);
        ctx.fillRect(boss.x + boss.width - 35, boss.y + 45, 10, 10);

        // Boss border
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 4;
        ctx.strokeRect(boss.x, boss.y, boss.width, boss.height);

        // Health bar (prominent)
        const barWidth = boss.width;
        const barHeight = 10;
        const barX = boss.x;
        const barY = boss.y - 20;

        // Background
        ctx.fillStyle = '#400000';
        ctx.fillRect(barX, barY, barWidth, barHeight);

        // Health
        const healthPercent = boss.health / boss.maxHealth;
        ctx.fillStyle = healthPercent > 0.5 ? '#00FF00' : healthPercent > 0.25 ? '#FFFF00' : '#FF0000';
        ctx.fillRect(barX, barY, barWidth * healthPercent, barHeight);

        // Border
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.strokeRect(barX, barY, barWidth, barHeight);

        // Boss name/title
        ctx.fillStyle = '#FFF';
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 3;
        ctx.font = 'bold 16px Arial';
        ctx.textAlign = 'center';
        ctx.strokeText('COLOSSAL BOSS', boss.x + boss.width / 2, barY - 5);
        ctx.fillText('COLOSSAL BOSS', boss.x + boss.width / 2, barY - 5);
    }

    /**
     * Render castle structure with emojis
     */
    renderCastleStructure(ctx, castleStructure) {
        if (!castleStructure) return;

        // Draw castle emoji
        ctx.font = `${castleStructure.size}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(
            castleStructure.emoji,
            castleStructure.x,
            castleStructure.y
        );

        // Draw princess emoji (if exists)
        if (castleStructure.princess) {
            ctx.font = `${castleStructure.princess.size}px Arial`;
            ctx.fillText(
                castleStructure.princess.emoji,
                castleStructure.princess.x,
                castleStructure.princess.y
            );
        }
    }

    /**
     * Render finish line
     */
    renderFinishLine(ctx, finishLine, currentLevel) {
        // Checkered flag pole
        ctx.fillStyle = '#000';
        ctx.fillRect(finishLine.x, finishLine.y, 5, finishLine.height);

        // Flag (checkered pattern)
        const flagWidth = 60;
        const flagHeight = 40;
        const squareSize = 10;

        for (let y = 0; y < flagHeight; y += squareSize) {
            for (let x = 0; x < flagWidth; x += squareSize) {
                const isBlack = ((x / squareSize) + (y / squareSize)) % 2 === 0;
                ctx.fillStyle = isBlack ? '#000' : '#FFF';
                ctx.fillRect(finishLine.x + 5 + x, finishLine.y + y, squareSize, squareSize);
            }
        }

        // Flag border
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.strokeRect(finishLine.x + 5, finishLine.y, flagWidth, flagHeight);

        // Level number on flag
        ctx.fillStyle = '#FFD700';
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.font = 'bold 16px Arial';
        ctx.textAlign = 'center';
        ctx.strokeText(`${currentLevel}`, finishLine.x + 35, finishLine.y + 25);
        ctx.fillText(`${currentLevel}`, finishLine.x + 35, finishLine.y + 25);
    }

    /**
     * Render Mario
     */
    renderMario(ctx, mario) {
        // Mario body
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(mario.x, mario.y, mario.width, mario.height);

        // Overalls
        ctx.fillStyle = '#0000FF';
        ctx.fillRect(mario.x + 5, mario.y + mario.height / 2, mario.width - 10, mario.height / 2);

        // Face
        ctx.fillStyle = '#FFD700';
        ctx.fillRect(mario.x + 8, mario.y + 5, mario.width - 16, 15);

        // Eyes
        ctx.fillStyle = '#000';
        ctx.fillRect(mario.x + 10, mario.y + 10, 4, 4);
        ctx.fillRect(mario.x + mario.width - 14, mario.y + 10, 4, 4);

        // Border
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.strokeRect(mario.x, mario.y, mario.width, mario.height);
    }

    /**
     * Render particles (explosions, dust, etc.)
     */
    renderParticles(ctx, particles) {
        particles.forEach(particle => {
            ctx.fillStyle = particle.color;
            ctx.globalAlpha = particle.life;
            ctx.fillRect(particle.x - 2, particle.y - 2, 4, 4);
        });
        ctx.globalAlpha = 1.0; // Reset alpha
    }

    /**
     * Render UI overlay (lives, score, level)
     */
    renderUI(ctx, gameState, config) {
        // Semi-transparent background
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, config.canvasWidth, 40);

        // Text style
        ctx.fillStyle = '#FFF';
        ctx.font = 'bold 16px Arial';

        // Score
        ctx.textAlign = 'center';
        ctx.fillText(`Score: ${gameState.score}`, config.canvasWidth / 2, 25);

        // Level
        ctx.textAlign = 'right';
        ctx.fillText(`Level: ${gameState.currentLevel}`, config.canvasWidth - 10, 25);
    }

    /**
     * Render debug hitboxes (for development)
     */
    renderDebugHitboxes(ctx, gameState) {
        ctx.lineWidth = 2;

        // Mario hitbox (GREEN)
        ctx.strokeStyle = '#00FF00';
        ctx.strokeRect(gameState.mario.x, gameState.mario.y, gameState.mario.width, gameState.mario.height);

        // Mario position info
        ctx.fillStyle = '#00FF00';
        ctx.font = 'bold 10px monospace';
        ctx.fillText(`M: ${Math.floor(gameState.mario.x)},${Math.floor(gameState.mario.y)}`,
            gameState.mario.x, gameState.mario.y - 5);

        // Enemy hitboxes (RED)
        if (gameState.enemies) {
            ctx.strokeStyle = '#FF0000';
            gameState.enemies.forEach((enemy, idx) => {
                ctx.strokeRect(enemy.x, enemy.y, enemy.width, enemy.height);
                ctx.fillStyle = '#FF0000';
                ctx.fillText(`E${idx}: ${enemy.type || 'goomba'}`, enemy.x, enemy.y - 5);
            });
        }

        // Platform hitboxes (CYAN)
        if (gameState.platforms) {
            ctx.strokeStyle = '#00FFFF';
            gameState.platforms.forEach((platform, idx) => {
                ctx.strokeRect(platform.x, platform.y, platform.width, platform.height);
                // Only show info for floating platforms (not ground)
                if (platform.type !== 'ground') {
                    ctx.fillStyle = '#00FFFF';
                    ctx.fillText(`P${idx}: ${platform.type}`, platform.x, platform.y - 5);
                }
            });
        }

        // Question block hitboxes (YELLOW)
        if (gameState.questionBlocks) {
            ctx.strokeStyle = '#FFFF00';
            gameState.questionBlocks.forEach((block, idx) => {
                ctx.strokeRect(block.x, block.y, block.width, block.height);
                ctx.fillStyle = '#FFFF00';
                ctx.fillText(`Q${idx}: ${block.hit ? 'HIT' : 'ACTIVE'}`, block.x, block.y - 5);
            });
        }

        // Wall hitboxes (ORANGE)
        if (gameState.walls) {
            ctx.strokeStyle = '#FF8800';
            gameState.walls.forEach((wall, idx) => {
                ctx.strokeRect(wall.x, wall.y, wall.width, wall.height);
                ctx.fillStyle = '#FF8800';
                ctx.fillText(`W${idx}: ${Math.floor(wall.height)}h`, wall.x, wall.y - 5);
            });
        }

        // Boss hitboxes (MAGENTA)
        if (gameState.boss) {
            ctx.strokeStyle = '#FF00FF';
            ctx.strokeRect(gameState.boss.x, gameState.boss.y, gameState.boss.width, gameState.boss.height);

            // Boss knee hitboxes (smaller boxes)
            if (gameState.boss.leftKnee) {
                ctx.strokeStyle = '#FF00FF';
                ctx.strokeRect(
                    gameState.boss.leftKnee.x,
                    gameState.boss.leftKnee.y,
                    gameState.boss.leftKnee.width,
                    gameState.boss.leftKnee.height
                );
                ctx.fillStyle = '#FF00FF';
                ctx.fillText('LEFT KNEE', gameState.boss.leftKnee.x, gameState.boss.leftKnee.y - 5);
            }

            if (gameState.boss.rightKnee) {
                ctx.strokeStyle = '#FF00FF';
                ctx.strokeRect(
                    gameState.boss.rightKnee.x,
                    gameState.boss.rightKnee.y,
                    gameState.boss.rightKnee.width,
                    gameState.boss.rightKnee.height
                );
                ctx.fillStyle = '#FF00FF';
                ctx.fillText('RIGHT KNEE', gameState.boss.rightKnee.x, gameState.boss.rightKnee.y - 5);
            }

            ctx.fillStyle = '#FF00FF';
            ctx.fillText(`BOSS HP: ${gameState.boss.health}/${gameState.boss.maxHealth}`,
                gameState.boss.x, gameState.boss.y - 5);
        }

        // Flying eyes hitboxes (PINK)
        if (gameState.flyingEyes) {
            ctx.strokeStyle = '#FF69B4';
            gameState.flyingEyes.forEach((eye, idx) => {
                // Eye position is CENTER - draw rectangle hitbox as it's used in collision
                const eyeLeft = eye.x - eye.width / 2;
                const eyeTop = eye.y - eye.height / 2;

                // Draw rectangle hitbox (actual collision box)
                ctx.strokeRect(eyeLeft, eyeTop, eye.width, eye.height);

                // Draw center point
                ctx.fillStyle = '#FF69B4';
                ctx.fillRect(eye.x - 2, eye.y - 2, 4, 4);

                ctx.fillText(`EYE${idx}: ${eye.isChasing ? 'CHASE' : 'IDLE'}`, eyeLeft, eyeTop - 5);
            });
        }

        // Projectiles hitboxes (RED)
        if (gameState.projectiles) {
            ctx.strokeStyle = '#FF4444';
            gameState.projectiles.forEach((proj, idx) => {
                ctx.beginPath();
                ctx.arc(proj.x, proj.y, proj.radius, 0, Math.PI * 2);
                ctx.stroke();
            });
        }

        // Boulders hitboxes (GRAY)
        if (gameState.boulders) {
            ctx.strokeStyle = '#888888';
            gameState.boulders.forEach((boulder, idx) => {
                ctx.beginPath();
                ctx.arc(boulder.x, boulder.y, boulder.radius, 0, Math.PI * 2);
                ctx.stroke();

                ctx.fillStyle = '#888888';
                ctx.fillText(`B${idx}: ${boulder.hasLanded ? 'LANDED' : 'FLYING'}`,
                    boulder.x - 20, boulder.y - boulder.radius - 5);
            });
        }

        // Debug info overlay
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(10, 50, 200, 80);

        ctx.fillStyle = '#00FF00';
        ctx.font = 'bold 12px monospace';
        ctx.fillText('DEBUG MODE (D to toggle)', 15, 65);
        ctx.fillText(`Mario: ${Math.floor(gameState.mario.x)}, ${Math.floor(gameState.mario.y)}`, 15, 80);
        ctx.fillText(`Velocity: ${gameState.mario.velocityX.toFixed(1)}, ${gameState.mario.velocityY.toFixed(1)}`, 15, 95);
        ctx.fillText(`Ground: ${gameState.mario.onGround ? 'YES' : 'NO'}`, 15, 110);
        ctx.fillText(`Facing: ${gameState.mario.facing}`, 15, 125);
    }
}

// Export singleton instance
export const renderer = new Renderer();
