class PaintProg {
    /** @type {string} */
    currentColor = "#000";
    /** @type {string} */
    currentTool = "draw";
    /** @type {boolean} */
    isDrawing = false;
    /** @type {boolean} */
    drawingMode = false;

    /**@param {string[]} pal */
    constructor(dim, pal, gridElement, paletteElement, currentColorElement, colorPickerElement, previewElement) {
        /** @type {number} */
        this.dim = dim;
        /** @type {string[]} Default color palette */
        this.palette = pal;
        /** @type {string[]} */
        this.samplePixels = new Array(dim ** 2).fill(pal[pal.length - 1]);
        /** @type {HTMLElement} */
        this.gridElement = gridElement;
        /** @type {HTMLElement} */
        this.previewElement = previewElement;
        /** @type {HTMLElement} */
        this.paletteElement = paletteElement;
        /** @type {HTMLElement} */
        this.currentColorElement = currentColorElement;
        /** @type {HTMLInputElement} */
        this.colorPickerElement = colorPickerElement;

        this.subImages = Array.from({ length: this.samplePixels.length }, () => [...this.samplePixels]);

        this.createGrid();
        this.createColorPalette();
        this.updatePreview();
        this.setCurrentColor(pal[0]);
        this.updateAllSubimages();
    }

    createGrid() {
        this.gridElement.innerHTML = "";

        for (let i = 0; i < this.dim ** 2; i++) {
            const pixel = document.createElement("div");
            pixel.className = "pixel";
            pixel.setAttribute("data-index", i);
            pixel.style.backgroundColor = this.samplePixels[i];

            pixel.addEventListener("mousedown", (e) => this.startDrawing(e, i));
            pixel.addEventListener("mouseenter", (e) => this.continueDrawing(e, i));
            pixel.addEventListener("mouseup", () => this.stopDrawing());

            this.gridElement.appendChild(pixel);
        }

        // Prevent context menu and handle mouse events
        this.gridElement.addEventListener("contextmenu", (e) => e.preventDefault());
        document.addEventListener("mouseup", () => this.stopDrawing());
    }

    createColorPalette() {
        this.paletteElement.innerHTML = "";

        this.palette.forEach((color) => {
            const swatch = document.createElement("div");
            swatch.className = "color-swatch";
            swatch.style.backgroundColor = color;
            swatch.onclick = () => this.setCurrentColor(color);
            this.paletteElement.appendChild(swatch);
        });
    }

    setCurrentColor(color) {
        this.currentColor = color;
        this.currentColorElement.style.backgroundColor = color;
        this.colorPickerElement.value = color;

        // Update active swatch
        // NOTE: this was "document.querySelectorAll "
        this.paletteElement.querySelectorAll(".color-swatch").forEach((swatch) => {
            swatch.classList.toggle("active", swatch.style.backgroundColor === this.colorToRgb(color));
        });
    }

    colorToRgb(hex) {
        const r = parseInt(hex.substr(1, 2), 16);
        const g = parseInt(hex.substr(3, 2), 16);
        const b = parseInt(hex.substr(5, 2), 16);
        return `rgb(${r}, ${g}, ${b})`;
    }

    openColorPicker() {
        this.colorPickerElement.click();
    }

    setTool(tool) {
        this.currentTool = tool;
        document.querySelectorAll(".tools button").forEach((btn) => btn.classList.remove("active"));
        document.getElementById(tool + "Btn").classList.add("active");

        const status = document.getElementById("status");
        switch (tool) {
            case "draw":
                status.textContent = "Drawing mode - Click to paint pixels";
                break;
            case "fill":
                status.textContent = "Fill mode - Click to fill area";
                break;
        }
    }

    toggleDrawingMode() {
        this.drawingMode = !this.drawingMode;
        const btn = document.getElementById("drawModeBtn");
        if (this.drawingMode) {
            btn.textContent = "Drawing Mode: ON";
            btn.classList.add("drawing-mode");
            document.getElementById("status").textContent = "Drawing mode ON - Click and drag to paint";
        } else {
            btn.textContent = "Drawing Mode: OFF";
            btn.classList.remove("drawing-mode");
            document.getElementById("status").textContent = "Drawing mode OFF - Click individual pixels";
        }
    }

    startDrawing(e, index) {
        e.preventDefault();
        this.isDrawing = true;
        this.applyTool(index);
    }

    /** @param {MouseEvent} e */
    continueDrawing(e, index) {
        if (this.isDrawing && this.drawingMode) {
            this.applyTool(index);
            return;
        }

        this.updateSingleSubImage(index);
        this.updatePreview(index);
    }

    stopDrawing() {
        this.isDrawing = false;
    }

    applyTool(index) {
        switch (this.currentTool) {
            case "draw":
                this.setPixel(index, this.currentColor);
                break;
            case "fill":
                this.floodFill(index, this.samplePixels[index], this.currentColor);
                break;
        }
    }

    setPixel(index, color) {
        this.samplePixels[index] = color;
        const pixel = document.querySelector(`[data-index="${index}"]`);
        pixel.style.backgroundColor = color;
        this.updatePreview();
    }

    floodFill(startIndex, targetColor, fillColor) {
        if (targetColor === fillColor) return;

        const stack = [startIndex];
        const visited = new Set();

        while (stack.length > 0) {
            const index = stack.pop();
            if (visited.has(index) || this.samplePixels[index] !== targetColor) continue;

            visited.add(index);
            this.setPixel(index, fillColor);

            // Add neighbors
            const row = Math.floor(index / this.dim);
            const col = index % this.dim;

            if (row > 0) stack.push(index - this.dim); // up
            if (row < 8) stack.push(index + this.dim); // down
            if (col > 0) stack.push(index - 1); // left
            if (col < 8) stack.push(index + 1); // right
        }
    }

    clearCanvas() {
        this.samplePixels.fill("#fff");
        this.createGrid();
        this.updatePreview();
    }

    randomFill() {
        for (let i = 0; i < this.dim ** 2; i++) {
            const randomColor = this.palette[Math.floor(Math.random() * this.palette.length)];
            this.setPixel(i, randomColor);
        }
    }

    invertColors() {
        for (let i = 0; i < this.dim ** 2; i++) {
            const color = this.samplePixels[i];
            const r = 15 - parseInt(color.substr(1, 1), 16);
            const g = 15 - parseInt(color.substr(2, 1), 16);
            const b = 15 - parseInt(color.substr(3, 1), 16);
            const inverted =
                "#" +
                r.toString(16) + // red
                g.toString(16) + // green
                b.toString(16); // blue

            this.setPixel(i, inverted);

            if (i % 10 === 0) {
                console.log("invertion", {
                    color,
                    r,
                    g,
                    b,
                    inverted,
                });
            }
        }
    }

    updatePreview(subImageIdx = undefined) {
        const canvas = document.createElement("canvas");
        if (subImageIdx === undefined) {
            canvas.width = this.dim;
            canvas.height = this.dim;
            const ctx = canvas.getContext("2d");

            for (let i = 0; i < this.dim ** 2; i++) {
                const x = i % this.dim;
                const y = Math.floor(i / this.dim);
                ctx.fillStyle = this.samplePixels[i];
                ctx.fillRect(x, y, 1, 1);
            }
        } else {
            canvas.width = 3;
            canvas.height = 3;
            const ctx = canvas.getContext("2d");

            for (let i = 0; i < 3 * 3; i++) {
                //
                const x = i % 3;
                const y = Math.floor(i / 3);
                ctx.fillStyle = this.subImages[subImageIdx][i];
                ctx.fillRect(x, y, 1, 1);
            }
        }

        this.previewElement.style.backgroundImage = `url(${canvas.toDataURL()})`;
        this.previewElement.style.backgroundSize = "100%";
    }

    updateAllSubimages() {
        for (let i = 0; i < this.samplePixels.length; i++) {
            this.updateSingleSubImage(i);
        }
    }

    updateSingleSubImage(i) {
        const dim = this.dim;
        const len = dim ** 2;
        const x = i % dim;
        const y = Math.floor(i / dim);

        const colorAt = (dX, dY) => {
            const _x = (x + dim + dX) % dim; // add dim before modulo because JS modulo allows negative results
            const _y = (y + dim + dY) % dim;
            if (y == 0 && dY < 0) {
                console.log(_x, _y);
            }
            return this.samplePixels[_y * dim + _x];
        };

        this.subImages[i] = [
            //                      | neighbour
            // ---------------------|-----------
            colorAt(-1, -1), //     | northwest
            colorAt(0, -1), //      | north
            colorAt(1, -1), //      | northeast

            colorAt(-1, 0), //      | east
            this.samplePixels[i], //| -- self --
            colorAt(1, 0), //       | west

            colorAt(-1, 1), //      | southwest
            colorAt(0, 1), //       | south
            colorAt(1, 1), //       | southeast
        ];
    }

    exportAsImage() {
        const canvas = document.createElement("canvas");
        canvas.width = 90; // 9x upscale
        canvas.height = 90;
        const ctx = canvas.getContext("2d");
        ctx.imageSmoothingEnabled = false;

        for (let i = 0; i < this.dim ** 2; i++) {
            const x = (i % this.dim) * 10;
            const y = Math.floor(i / this.dim) * 10;
            ctx.fillStyle = this.samplePixels[i];
            ctx.fillRect(x, y, 10, 10);
        }

        const link = document.createElement("a");
        link.download = `pixel-art-${this.dim}x${this.dim}.png`;
        link.href = canvas.toDataURL();
        link.click();
    }

    exportAsData() {
        const data = JSON.stringify(this.samplePixels);
        const blob = new Blob([data], { type: "application/json" });
        const link = document.createElement("a");
        link.download = "pixel-art-data.json";
        link.href = URL.createObjectURL(blob);
        link.click();
    }

    importData() {
        const input = document.createElement("input");
        input.type = "file";
        input.accept = ".json";
        input.onchange = (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    try {
                        const data = JSON.parse(event.target.result);
                        if (Array.isArray(data) && data.length === this.dim ** 2) {
                            this.samplePixels = data;
                            this.createGrid();
                            this.updatePreview();
                        } else {
                            alert("Invalid data format!");
                        }
                    } catch (error) {
                        alert("Error reading file!");
                    }
                };
                reader.readAsText(file);
            }
        };
        input.click();
    }

    // Initialize the editor
}
const palette = [
    "#000",
    "#008",
    "#00f",
    "#080",
    "#088",
    "#0f0",
    "#0ff",
    "#800",
    "#808",
    "#80f",
    "#880",
    "#888",
    "#88f",
    "#8f8",
    "#8ff",
    "#ccc",
    "#f00",
    "#f0f",
    "#f80",
    "#f88",
    "#f8f",
    "#ff0",
    "#ff8",
    "#fff",
];

window.painter = new PaintProg(
    9,
    palette,
    document.getElementById("gridContainer"), //
    document.getElementById("colorPalette"), //
    document.getElementById("currentColor"), //
    document.getElementById("colorPicker"), //
    document.getElementById("preview"), //
);

// share window.dim with the HTML and CSS
document.getElementsByTagName("body")[0].style.setProperty("--dim", window.painter.dim);