class IsometricGame {
    constructor() {
        this.canvas = document.getElementById('gameCanvas');
        this.ctx = this.canvas.getContext('2d');
        
        // Grid properties
        this.gridSize = 10;
        this.tileWidth = 50;
        this.tileHeight = 25;
        
        // Player properties
        this.player = {
            x: 0,
            y: 0,
            targetX: 0,
            targetY: 0,
            size: 20,
            path: [], // Array to store waypoints
            currentWaypoint: null
        };
        
        // Handle window resize
        this.resizeCanvas();
        window.addEventListener('resize', () => this.resizeCanvas());
        
        this.setupEventListeners();
        this.gameLoop();
    }
    
    resizeCanvas() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        
        // Recalculate grid offset to center it
        this.offsetX = this.canvas.width / 2;
        this.offsetY = this.canvas.height / 3;
        
        // Scale tile size based on screen size
        const minDimension = Math.min(this.canvas.width, this.canvas.height);
        const scaleFactor = minDimension / 800; // 800 is our reference size
        this.tileWidth = 50 * scaleFactor;
        this.tileHeight = 25 * scaleFactor;
        this.player.size = 20 * scaleFactor;
    }
    
    toIsometric(x, y) {
        return {
            x: (x - y) * this.tileWidth / 2,
            y: (x + y) * this.tileHeight / 2
        };
    }
    
    fromIsometric(screenX, screenY) {
        // Convert screen coordinates back to grid coordinates
        screenX -= this.offsetX;
        screenY -= this.offsetY;
        
        const x = (screenX / this.tileWidth + screenY / this.tileHeight) / 1;
        const y = (screenY / this.tileHeight - screenX / this.tileWidth) / 1;
        
        return { x: Math.round(x), y: Math.round(y) };
    }
    
    drawGrid() {
        for (let x = 0; x < this.gridSize; x++) {
            for (let y = 0; y < this.gridSize; y++) {
                const iso = this.toIsometric(x, y);
                
                // Draw tile
                this.ctx.beginPath();
                this.ctx.moveTo(iso.x + this.offsetX, iso.y + this.offsetY - this.tileHeight/2);
                this.ctx.lineTo(iso.x + this.offsetX + this.tileWidth/2, iso.y + this.offsetY);
                this.ctx.lineTo(iso.x + this.offsetX, iso.y + this.offsetY + this.tileHeight/2);
                this.ctx.lineTo(iso.x + this.offsetX - this.tileWidth/2, iso.y + this.offsetY);
                this.ctx.closePath();
                
                this.ctx.strokeStyle = '#666';
                this.ctx.stroke();
                this.ctx.fillStyle = '#fff';
                this.ctx.fill();
            }
        }
    }
    
    drawPlayer() {
        // Convert player grid position to isometric coordinates
        const iso = this.toIsometric(this.player.x, this.player.y);
        
        // Draw player shadow (slightly offset and darker)
        this.ctx.beginPath();
        this.ctx.ellipse(
            iso.x + this.offsetX,
            iso.y + this.offsetY + 2,
            this.player.size * 0.8,
            this.player.size * 0.3,
            0,
            0,
            Math.PI * 2
        );
        this.ctx.fillStyle = 'rgba(0,0,0,0.2)';
        this.ctx.fill();

        // Draw player "body" (rectangle)
        this.ctx.beginPath();
        this.ctx.fillStyle = '#ff4444';
        this.ctx.strokeStyle = '#aa0000';
        
        // Draw a thin rectangle for the body
        const bodyHeight = this.player.size * 2;
        const bodyWidth = this.player.size * 0.8;
        
        this.ctx.save();
        this.ctx.translate(iso.x + this.offsetX, iso.y + this.offsetY);
        this.ctx.scale(1, 0.5); // Apply isometric perspective
        this.ctx.fillRect(-bodyWidth/2, -bodyHeight, bodyWidth, bodyHeight);
        this.ctx.strokeRect(-bodyWidth/2, -bodyHeight, bodyWidth, bodyHeight);
        this.ctx.restore();

        // Draw player head (circle)
        this.ctx.beginPath();
        this.ctx.ellipse(
            iso.x + this.offsetX,
            iso.y + this.offsetY - this.player.size,
            this.player.size,
            this.player.size * 0.5,
            0,
            0,
            Math.PI * 2
        );
        this.ctx.fillStyle = '#ff4444';
        this.ctx.fill();
        this.ctx.strokeStyle = '#aa0000';
        this.ctx.stroke();
    }
    
    findPath(startX, startY, endX, endY) {
        // Simple pathfinding that follows grid edges
        const path = [];
        
        // First move along X axis
        if (startX !== endX) {
            const stepX = startX < endX ? 1 : -1;
            for (let x = startX + stepX; stepX > 0 ? x <= endX : x >= endX; x += stepX) {
                path.push({ x: x, y: startY });
            }
        }
        
        // Then move along Y axis
        if (startY !== endY) {
            const stepY = startY < endY ? 1 : -1;
            for (let y = startY + stepY; stepY > 0 ? y <= endY : y >= endY; y += stepY) {
                path.push({ x: endX, y: y });
            }
        }

        return path;
    }
    
    updatePlayer() {
        const speed = 0.1;

        // If we don't have a current waypoint but have a path, get next waypoint
        if (!this.player.currentWaypoint && this.player.path.length > 0) {
            this.player.currentWaypoint = this.player.path.shift();
        }

        // Move towards current waypoint
        if (this.player.currentWaypoint) {
            const dx = this.player.currentWaypoint.x - this.player.x;
            const dy = this.player.currentWaypoint.y - this.player.y;
            
            // Move towards waypoint
            this.player.x += dx * speed;
            this.player.y += dy * speed;

            // Check if we're close enough to waypoint to consider it reached
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < 0.1) {
                this.player.x = this.player.currentWaypoint.x;
                this.player.y = this.player.currentWaypoint.y;
                this.player.currentWaypoint = null;
            }
        }
    }
    
    setupEventListeners() {
        this.canvas.addEventListener('click', (e) => {
            const rect = this.canvas.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const clickY = e.clientY - rect.top;
            
            const gridPos = this.fromIsometric(clickX, clickY);
            
            // Only move if within grid bounds
            if (gridPos.x >= 0 && gridPos.x < this.gridSize &&
                gridPos.y >= 0 && gridPos.y < this.gridSize) {
                
                // Set target and calculate path
                this.player.targetX = Math.round(gridPos.x);
                this.player.targetY = Math.round(gridPos.y);
                
                // Calculate new path
                this.player.path = this.findPath(
                    Math.round(this.player.x),
                    Math.round(this.player.y),
                    this.player.targetX,
                    this.player.targetY
                );
                
                // Clear current waypoint to start new path
                this.player.currentWaypoint = null;
            }
        });
    }
    
    gameLoop() {
        // Clear canvas
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        
        // Draw game elements
        this.drawGrid();
        this.updatePlayer();
        this.drawPlayer();
        
        // Continue game loop
        requestAnimationFrame(() => this.gameLoop());
    }
}

// Start the game when the page loads
window.onload = () => {
    new IsometricGame();
};