document.addEventListener('DOMContentLoaded', async () => {
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    const floor = document.getElementById("floor");
    const divider = document.getElementById("divider");
    const wall = document.getElementById("wall");
    const wallHeight = canvas.height / 3;
    const dividerHeight = 7;

    const sprite = document.getElementById("sprite");
    const spriteHeight = 56;
    const spriteWidth = 32;
    let spriteX = (canvas.width - spriteWidth) / 2;
    let spriteY = canvas.height - spriteHeight;

    const deskImg = document.getElementById("deskImg");
    const deskWidth = 108;
    const deskHeight = 80;
    const deskDepth = 20;
    const deskX = (canvas.width - deskWidth) / 2;
    const deskY = (wallHeight - deskDepth);
    const deskX1 = ((canvas.width - deskWidth) / 2)
    const deskX2 = ((canvas.width - deskWidth) / 2) + deskWidth
    const deskY2 = wallHeight + deskHeight - deskDepth;

    let rightPressed = false;
    let leftPressed = false;
    let upPressed = false;
    let downPressed = false;

    function willCollide(newX, newY) {
        return (
            newY + spriteHeight < wallHeight + dividerHeight + 5 ||
            newX + spriteWidth > deskX1 &&
            newX < deskX2 &&
            newY + spriteHeight < deskY2
        )
    }

    let wallPattern = null;
    function setWallPattern() {
        if (wall.complete && wall.naturalWidth !== 0) {
            wallPattern = ctx.createPattern(wall, 'repeat');
        }
    }
    wall.addEventListener('load', setWallPattern);
    setWallPattern();

    let divPattern = null;
    function setDivPattern() {
        if (divider.complete && divider.naturalWidth !== 0) {
            divPattern = ctx.createPattern(divider, 'repeat');
        }
    }
    divider.addEventListener('load', setDivPattern);
    setDivPattern();

    let floorPattern = null;
    function setFloorPattern() {
        if (floor.complete && floor.naturalWidth !== 0) {
            floorPattern = ctx.createPattern(floor, 'repeat');
        }
    }
    floor.addEventListener('load', setFloorPattern);
    setFloorPattern();

    function isAdjacentToDesk() {
        const margin = 15;
        const nearLeft = Math.abs((spriteX + spriteWidth) - deskX) <= margin && spriteY + spriteHeight > deskY && spriteY < deskY + deskHeight;
        const nearRight = Math.abs(spriteX - (deskX + deskWidth)) <= margin && spriteY + spriteHeight > deskY && spriteY < deskY + deskHeight;
        const nearBottom = Math.abs(spriteY - (deskY + deskHeight - spriteHeight)) <= margin && spriteX + spriteWidth > deskX && spriteX < deskX + deskWidth;
        return nearLeft || nearRight || nearBottom;
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.imageSmoothingEnabled = false;
        if (wallPattern) {
            ctx.fillStyle = wallPattern;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        };

        if (divPattern) {
            ctx.fillStyle = divPattern;
            ctx.fillRect(0, wallHeight, canvas.width, dividerHeight)
        };

        if (floorPattern) {
            ctx.fillStyle = floorPattern;
            ctx.fillRect(0, wallHeight + dividerHeight, canvas.width, canvas.height - wallHeight + dividerHeight);
        }
        deskSelectable = isAdjacentToDesk();
        if (deskImg.complete && deskImg.naturalWidth !== 0) {
            ctx.drawImage(deskImg, deskX, deskY, deskWidth, deskHeight);
            if (deskSelectable) {
                    ctx.save();
                    ctx.strokeStyle = "white";
                    ctx.lineWidth = 4;
                    ctx.strokeRect(deskX - 2, deskY - 2, deskWidth + 4, deskHeight + 4);
                    ctx.restore();
                }
        }
        if (rightPressed) {
            let newX = Math.min(spriteX + 5, canvas.width - spriteWidth);
            if (!willCollide(newX, spriteY)) {
                spriteX = newX;
            }
        }
        if (leftPressed) {
            let newX = Math.max(spriteX - 5, 0);
            if (!willCollide(newX, spriteY)) {
                spriteX = newX;
            }
        }
        if (upPressed) {
            newY = Math.max(spriteY - 5, 0);
            if (!willCollide(spriteX, newY)) {
                spriteY = newY;
            }
        }
        if (downPressed) {
            newY = Math.min(spriteY + 5, canvas.height - spriteHeight);
            if (!willCollide(spriteX, newY)) {
                spriteY = newY;
            }
        }
        if (sprite.complete  && sprite.naturalWidth !== 0) {
            ctx.drawImage(sprite, spriteX, spriteY, spriteWidth, spriteHeight);
        }
        requestAnimationFrame(draw);
    };

    let deskOpen = false;

    function startGame() {
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);
        function keyDownHandler(e) {
            if (e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = true;
            } else if (e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = true;
            } else if (e.key === "Up" || e.key === "ArrowUp") {
                upPressed = true;
            } else if (e.key === "Down" || e.key === "ArrowDown") {
                downPressed = true;
            } else if (e.key === " " || e.key === "Spacebar") {
                if (deskSelectable) {
                    deskOpen = !deskOpen;
                    document.getElementById("desk").style.display = deskOpen ? "block" : "none";
                };
            }
        }
        function keyUpHandler(e) {
            if (e.key === "Right" || e.key === "ArrowRight") {
                rightPressed = false;
            } else if (e.key === "Left" || e.key === "ArrowLeft") {
                leftPressed = false;
            }  else if (e.key === "Up" || e.key === "ArrowUp") {
                upPressed = false;
            } else if (e.key === "Down" || e.key === "ArrowDown") {
                downPressed = false;
            }
        }
        draw();
    }

    const requiredImages = [sprite, floor, wall, divider];
    let loadedCount = 0;
    let started = false;
    function checkAllLoaded() {
        if (!started && loadedCount === requiredImages.length) {
            started = true;
            startGame();
        }
    }
    requiredImages.forEach(img => {
        if (img.complete && img.naturalWidth !== 0) {
            loadedCount++;
        } else {
            img.addEventListener("load", () => {
                loadedCount++;
                checkAllLoaded();
            });
            img.addEventListener("error", () => {
                loadedCount++;
                checkAllLoaded();
            });
        }
    });
    checkAllLoaded();
})