const Debug = {
    isEnabled: false,
    lastFrameTime: performance.now(),
    frameCount: 0,
    fps: 0,
    fpsUpdateInterval: 500, // Update FPS display every 500ms
    lastFpsUpdate: 0,
    
    init() {
        // Add keyboard listener for debug toggle
        window.addEventListener('keydown', (e) => {
            if (e.key.toLowerCase() === 'd') {
                this.isEnabled = !this.isEnabled;
            }
        });
    },
    
    update(currentTime) {
        if (!this.isEnabled) return;
        
        this.frameCount++;
        
        // Update FPS counter every 500ms
        if (currentTime - this.lastFpsUpdate >= this.fpsUpdateInterval) {
            this.fps = Math.round((this.frameCount * 1000) / (currentTime - this.lastFpsUpdate));
            this.frameCount = 0;
            this.lastFpsUpdate = currentTime;
        }
        
        this.lastFrameTime = currentTime;
    },
    
    draw(ctx) {
        if (!this.isEnabled) return;
        
        const padding = 30;
        const lineHeight = 20;
        let y = padding;
        
        // Save context state
        ctx.save();
        
        // Set up debug text style
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, 0, 300, 200);
        ctx.font = '14px monospace';
        ctx.fillStyle = '#00FF00';
        
        // Display debug information
        const debugInfo = [
            `FPS: ${this.fps}`,
            `Camera: (${Math.round(Camera.x)}, ${Math.round(Camera.y)})`,
            `Player Hex: (${player.position.q}, ${player.position.r})`,
            `Screen: ${state.canvas.width}x${state.canvas.height}`,
            `Inventory Items: ${player.inventory.length}`,
            `Revealed Hexes: ${FogOfWar.revealed.size}`,
            `Moving: ${player.target ? 'Yes' : 'No'}`,
            `Narrow Screen: ${state.canvas.width <= Config.camera.NARROW_SCREEN_THRESHOLD}`
        ];
        
        debugInfo.forEach(info => {
            ctx.fillText(info, padding, y);
            y += lineHeight;
        });
        
        // Draw deadzone visualization
        if (player.target) {
            const isNarrowScreen = state.canvas.width <= Config.camera.NARROW_SCREEN_THRESHOLD;
            const deadzoneX = Math.min(
                Math.max(
                    state.canvas.width * (
                        isNarrowScreen ? 
                        Config.camera.DEADZONE_RATIO_X.NARROW : 
                        Config.camera.DEADZONE_RATIO_X.WIDE
                    ),
                    Config.camera.MIN_DEADZONE
                ),
                Config.camera.MAX_DEADZONE
            );
            const deadzoneY = Math.min(
                Math.max(state.canvas.height * Config.camera.DEADZONE_RATIO_Y, 
                    Config.camera.MIN_DEADZONE
                ),
                Config.camera.MAX_DEADZONE
            );
            
            // Draw camera deadzone
            ctx.strokeStyle = 'rgba(255, 162, 0, 1)';
            ctx.lineWidth = 2;
            ctx.strokeRect(
                state.canvas.width/2 - deadzoneX,
                state.canvas.height/2 - deadzoneY,
                deadzoneX * 2,
                deadzoneY * 2
            );

            // Draw a small cross at the center of the camera deadzone
            const centerX = state.canvas.width / 2;
            const centerY = state.canvas.height / 2;
            const crossSize = 10; // Size of the cross arms

            ctx.beginPath();
            ctx.moveTo(centerX - crossSize, centerY);
            ctx.lineTo(centerX + crossSize, centerY);
            ctx.moveTo(centerX, centerY - crossSize);
            ctx.lineTo(centerX, centerY + crossSize);
            ctx.stroke();
        }
        
        // Restore context state
        ctx.restore();
    }
};