const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const mapNameInput = document.getElementById("mapName");
const mapSelect = document.getElementById("mapSelect");
const newMapBtn = document.getElementById("newMapBtn");
const saveMapBtn = document.getElementById("saveMapBtn");
const modeSelect = document.getElementById("modeSelect");

const doorTargetMap = document.getElementById("doorTargetMap");
const doorTargetX = document.getElementById("doorTargetX");
const doorTargetY = document.getElementById("doorTargetY");

const mapWidthInput = document.getElementById("mapWidth");
const mapHeightInput = document.getElementById("mapHeight");
const resizeMapBtn = document.getElementById("resizeMapBtn");

const tilePalette = document.getElementById("tilePalette");
const objectPalette = document.getElementById("objectPalette");

let objectConfig = {};
let selectedObjectType = null;
let objects = [];

let tileConfig = {};
let selectedTile = 1;

let tileSize = 32;
let tiles = [];
let doors = [];
let spawn = { x: 32, y: 32 };

let cols = 20;
let rows = 20;

let shops = [];   // SHOP SYSTEM
let atms = [];

let currentShop = null;


// -------------------------------------------------------------
// Tiles laden
// -------------------------------------------------------------
fetch("/tiles.json")
    .then(res => res.json())
    .then(data => {
        tileConfig = data;
        buildTilePalette();
        loadMapList();
        newMap();
    });

fetch("/objectConfig.json")
    .then(res => res.json())
    .then(data => {
        objectConfig = data;
        buildObjectPalette();
    });

// -------------------------------------------------------------
// Tile-Palette bauen
// -------------------------------------------------------------
function buildTilePalette() {
    tilePalette.innerHTML = "";

    Object.entries(tileConfig).forEach(([id, tile]) => {
        const div = document.createElement("div");
        div.style.background = tile.color;
        div.title = `${id}: ${tile.name} (collision: ${tile.collision})`;
        div.dataset.id = id;

        div.onclick = () => {
            selectedTile = parseInt(id);
        };

        tilePalette.appendChild(div);
    });
}

// -------------------------------------------------------------
// Object-Palette bauen
// -------------------------------------------------------------
function buildObjectPalette() {
    objectPalette.innerHTML = "";

    Object.entries(objectConfig).forEach(([type, obj]) => {
        const div = document.createElement("div");
        div.style.width = "32px";
        div.style.height = "32px";
        div.style.background = obj.color;
        div.style.border = "2px solid #000";
        div.style.display = "inline-block";
        div.style.margin = "4px";
        div.style.cursor = "pointer";
        div.title = `${type}: ${obj.name}`;

        div.onclick = () => {
            selectedObjectType = type;
        };

        objectPalette.appendChild(div);
    });
}

// -------------------------------------------------------------
// Neue Map
// -------------------------------------------------------------
function newMap() {
    tiles = [];
    for (let y = 0; y < rows; y++) {
        tiles[y] = [];
        for (let x = 0; x < cols; x++) {
            tiles[y][x] = 1;
        }
    }

    doors = [];
    objects = [];
    shops = [];
    spawn = { x: 32, y: 32 };

    render();
}

// -------------------------------------------------------------
// Map-Liste laden
// -------------------------------------------------------------
function loadMapList() {
    fetch("/api/get_maps")
        .then(res => res.json())
        .then(data => {
            mapSelect.innerHTML = `<option value="">Map laden...</option>`;
            Object.keys(data.maps).forEach(name => {
                const opt = document.createElement("option");
                opt.value = name;
                opt.textContent = name;
                mapSelect.appendChild(opt);
            });
        });
}

// -------------------------------------------------------------
// Map laden
// -------------------------------------------------------------
mapSelect.onchange = () => {
    const name = mapSelect.value;
    if (!name) return;

    fetch("/api/get_maps")
        .then(res => res.json())
        .then(data => {
            const map = data.maps[name];

            mapNameInput.value = map.name;
            tiles = map.tiles;
            doors = map.doors || [];
            objects = map.objects || [];
            shops = map.shops || [];
            atms = map.atms || [];
            atms  = atms  || [];

            spawn = map.spawn;

            rows = tiles.length;
            cols = tiles[0].length;

            render();
        });
};

// -------------------------------------------------------------
// Map speichern
// -------------------------------------------------------------
saveMapBtn.onclick = () => {
    const name = mapNameInput.value.trim();
    if (!name) return alert("Map-Name fehlt!");

    const mapData = {
        name,
        spawn,
        tiles,
        doors,
        objects,
        shops,
        atms
    };

    fetch("/api/save_map", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, data: mapData })
    })
        .then(res => res.json())
        .then(data => {
            if (data.ok) {
                alert("Map gespeichert!");
                loadMapList();
            } else {
                alert("Fehler: " + data.error);
            }
        });
};


function saveMap() {
    const name = mapNameInput.value.trim();
    if (!name) return alert("Map-Name fehlt!");

    const mapData = {
        name,
        spawn,
        tiles,
        doors,
        objects,
        shops,
        atms
    };

    fetch("/api/save_map", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, data: mapData })
    })
        .then(res => res.json())
        .then(data => {
            if (data.ok) {
                alert("Map gespeichert!");
                loadMapList();
            } else {
                alert("Fehler: " + data.error);
            }
        });
}




// -------------------------------------------------------------
// Map-Größe ändern
// -------------------------------------------------------------
resizeMapBtn.onclick = () => {
    const newW = parseInt(mapWidthInput.value);
    const newH = parseInt(mapHeightInput.value);

    if (!newW || !newH) return;

    const newTiles = [];

    for (let y = 0; y < newH; y++) {
        newTiles[y] = [];
        for (let x = 0; x < newW; x++) {
            newTiles[y][x] = tiles[y]?.[x] ?? 1;
        }
    }

    tiles = newTiles;
    cols = newW;
    rows = newH;

    render();
};

// -------------------------------------------------------------
// Canvas Click
// -------------------------------------------------------------
canvas.addEventListener("contextmenu", e => e.preventDefault());

/*
canvas.addEventListener("mousedown", e => {
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;

    const x = Math.floor(mx / tileSize);
    const y = Math.floor(my / tileSize);

    if (x < 0 || y < 0 || x >= cols || y >= rows) return;

    const mode = modeSelect.value;

    // TILES
    if (mode === "tile") {
        if (e.button === 0) tiles[y][x] = selectedTile;
        if (e.button === 2) tiles[y][x] = 0;
    }
    if (mode === "shop") {
        map.objects.push({ type: "shop", x: tx, y: ty });
        saveMap();
    }


    // SPAWN
    if (mode === "spawn") {
        spawn.x = x * tileSize;
        spawn.y = y * tileSize;
    }

    // DOORS
    if (mode === "door") {
        if (e.button === 0) {
            doors.push({
                x: x * tileSize,
                y: y * tileSize,
                targetMap: doorTargetMap.value,
                targetX: parseInt(doorTargetX.value),
                targetY: parseInt(doorTargetY.value)
            });
        }
        if (e.button === 2) {
            doors = doors.filter(d => !(d.x === x * tileSize && d.y === y * tileSize));
        }
    }

    // OBJECTS
    if (mode === "object") {
        const ox = x * tileSize;
        const oy = y * tileSize;

        if (e.button === 0) {
            if (!selectedObjectType) return;
            objects.push({
                type: selectedObjectType,
                x: ox,
                y: oy
            });
        }

        if (e.button === 2) {
            objects = objects.filter(o => !(o.x === ox && o.y === oy));
        }
    }

    // SHOPS
    if (mode === "shop") {
        const tileX = Math.floor(mx / tileSize);
        const tileY = Math.floor(my / tileSize);

        // Wenn Linksklick auf existierenden Shop → Editor öffnen
        if (e.button === 0) {
            const existing = shops.find(s => s.x === tileX && s.y === tileY);
            if (existing) {
                openShopEditor(existing);
                return;
            }

            // neuen Shop setzen
            shops.push({
                id: "shop_" + Date.now(),
                x: tileX,
                y: tileY,
                items: []
            });
        }

        // Shop löschen
        if (e.button === 2) {
            shops = shops.filter(s => !(s.x === tileX && s.y === tileY));

            if (currentShop && currentShop.x === tileX && currentShop.y === tileY) {
                currentShop = null;
                document.getElementById("shopEditor").style.display = "none";
            }
        }


    if (mode === "atm") {
        map.atms.push({
            id: "atm_" + Date.now(),
            x: tileX,
            y: tileY
        });
        saveMap();
        }

    }




    render();
});
*/

canvas.addEventListener("mousedown", e => {
    e.preventDefault();

    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;

    const tileX = Math.floor(mx / tileSize);
    const tileY = Math.floor(my / tileSize);

    if (tileX < 0 || tileY < 0 || tileX >= cols || tileY >= rows) return;

    const mode = modeSelect.value;

    // TILES
    if (mode === "tile") {
        if (e.button === 0) tiles[tileY][tileX] = selectedTile;
        if (e.button === 2) tiles[tileY][tileX] = 0;
        render();
        return;
    }

    // SPAWN
    if (mode === "spawn") {
        if (e.button === 0) {
            spawn.x = tileX * tileSize;
            spawn.y = tileY * tileSize;
            //saveMap();
            render();
        }
        return;
    }

    // DOORS
    if (mode === "door") {
        if (e.button === 0) {
            doors.push({
                x: tileX * tileSize,
                y: tileY * tileSize,
                targetMap: doorTargetMap.value,
                targetX: parseInt(doorTargetX.value),
                targetY: parseInt(doorTargetY.value)
            });
            //saveMap();
            render();
        }
        if (e.button === 2) {
            doors = doors.filter(d => !(d.x === tileX * tileSize && d.y === tileY * tileSize));
            //saveMap();
            render();
        }
        return;
    }

    // OBJECTS
    if (mode === "object") {
        const ox = tileX * tileSize;
        const oy = tileY * tileSize;

        if (e.button === 0) {
            if (!selectedObjectType) return;
            objects.push({ type: selectedObjectType, x: ox, y: oy });
            //saveMap();
            render();
        }

        if (e.button === 2) {
            objects = objects.filter(o => !(o.x === ox && o.y === oy));
            //saveMap();
            render();
        }
        return;
    }

    // SHOPS
    if (mode === "shop") {
        if (e.button === 0) {
            const name = prompt("Shop-Name:");
            if (!name) return;

            fetch("/api/admin/shops", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name, world: mapNameInput.value, x: tileX, y: tileY })
            }).then(() => alert("Shop angelegt – Items im Admin-Panel zuweisen"));
        }
        return;
    }
    /*if (mode === "shop") {
        if (e.button === 0) {
            const existing = shops.find(s => s.x === tileX && s.y === tileY);
            if (existing) {
                openShopEditor(existing);
                return;
            }
            shops.push({
                id: "shop_" + Date.now(),
                x: tileX,
                y: tileY,
                items: []
            });
            //saveMap();
            render();
        }

        if (e.button === 2) {
            shops = shops.filter(s => !(s.x === tileX && s.y === tileY));
            //saveMap();
            render();
        }
        return;
    }*/

    // ATMS (wie Shops)
    if (mode === "atm") {
        if (e.button === 0) {
            const existing = atms.find(a => a.x === tileX && a.y === tileY);
            if (existing) return;

            atms.push({
                id: "atm_" + Date.now(),
                x: tileX,
                y: tileY
            });

            //saveMap();
            render();
        }

        if (e.button === 2) {
            atms = atms.filter(a => !(a.x === tileX && a.y === tileY));
            //saveMap();
            render();
        }
        return;
    }
});



// -------------------------------------------------------------
// Render Shops
// -------------------------------------------------------------
function renderShops() {
    shops.forEach(s => {
        ctx.fillStyle = "yellow";
        ctx.fillRect(s.x * tileSize, s.y * tileSize, tileSize, tileSize);
        ctx.strokeStyle = "black";
        ctx.strokeRect(s.x * tileSize, s.y * tileSize, tileSize, tileSize);
    });
}

function renderATMs() {
    atms.forEach(a => {
        const px = a.x * tileSize;
        const py = a.y * tileSize;

        ctx.fillStyle = "blue";
        ctx.fillRect(px, py, tileSize, tileSize);
    });
}





// -------------------------------------------------------------
// shop 
// -------------------------------------------------------------
function openShopEditor(shop) {
    currentShop = shop;

    const editor = document.getElementById("shopEditor");
    const info = document.getElementById("shopInfo");

    editor.style.display = "block";
    info.innerHTML = `ID: ${shop.id}<br>Position: (${shop.x}, ${shop.y})`;

    renderShopItemList();
}

function renderShopItemList() {
    const list = document.getElementById("shopItemList");
    list.innerHTML = "";

    if (!currentShop) return;

    currentShop.items.forEach(item => {
        const div = document.createElement("div");
        div.innerHTML = `
            ${item.name} (${item.price}$)
            <button onclick="removeShopItem('${item.id}')">X</button>
        `;
        list.appendChild(div);
    });
}

function addShopItem() {
    if (!currentShop) return;

    const id = prompt("Item ID:");
    if (!id) return;

    const name = prompt("Item Name:");
    if (!name) return;

    const priceStr = prompt("Preis:");
    const price = parseInt(priceStr, 10);
    if (isNaN(price)) return;

    currentShop.items.push({ id, name, price });
    renderShopItemList();
}

function removeShopItem(id) {
    if (!currentShop) return;

    currentShop.items = currentShop.items.filter(i => i.id !== id);
    renderShopItemList();
}

// -------------------------------------------------------------
// Render
// -------------------------------------------------------------
function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Tiles
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            const id = tiles[y][x];
            const tile = tileConfig[id];

            ctx.fillStyle = tile ? tile.color : "#000";
            ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);

            ctx.strokeStyle = "#333";
            ctx.strokeRect(x * tileSize, y * tileSize, tileSize, tileSize);
        }
    }

    // Spawn
    ctx.fillStyle = "yellow";
    ctx.fillRect(spawn.x, spawn.y, tileSize, tileSize);

    // Doors
    ctx.fillStyle = "orange";
    doors.forEach(d => {
        ctx.fillRect(d.x, d.y, tileSize, tileSize);
    });

    // Objects
    objects.forEach(o => {
        const cfg = objectConfig[o.type];
        if (!cfg) return;

        ctx.fillStyle = cfg.color;
        ctx.fillRect(
            o.x,
            o.y - (cfg.height - tileSize),
            cfg.width,
            cfg.height
        );
    });

    // Shops
    renderShops();
    renderATMs();
}