const app = Vue.createApp({
    data() {
        return {
            isOn: true, // UI ist beim Start nicht aktiv
            coins: 0,
            activeCategory: "",
            items: [],
            categories: [],
            isAdmin: false, // Admin-Status
            showSettings: false, // Modal für Einstellungen
            selectedVehicle: null
        };
    },
    computed: {
        filteredItems() {
            return this.items.filter(item => item.category === this.activeCategory);
        }
    },
    methods: {
        setActive(category) {
            this.activeCategory = category;
        },
        openSettings() {
            this.showSettings = true;
        },
        closeSettings() {
            this.showSettings = false;
        },
        openVehicleDetails(vehicle) {
            this.selectedVehicle = vehicle;
        },
        closeVehicleDetails() {
            this.selectedVehicle = null;
        },
        buyItem(item) {
            if (item.limit === 0) {
                alert("Dieses Fahrzeug ist ausverkauft!");
                return;
            }

            fetch(`https://${GetParentResourceName()}/buyVehicle`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ model: item.model })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    this.coins -= item.price;
                    if (item.limit !== null) {
                        item.limit -= 1;
                    }
                    alert(`${item.name} gekauft!`);
                } else {
                    alert("Nicht genug Coins oder Fehler!");
                }
            })
        },
        checkImage(model) {
            let basePath = "./img/";
            let pngPath = basePath + model + ".png";
            let jpgPath = basePath + model + ".jpg";
            let placeholder = basePath + "placeholder.png";

            return new Promise((resolve) => {
                fetch(pngPath, { method: "HEAD" })
                    .then(res => {
                        if (res.ok) resolve(pngPath);
                        else return fetch(jpgPath, { method: "HEAD" });
                    })
                    .then(res => {
                        if (res && res.ok) resolve(jpgPath);
                        else resolve(placeholder);
                    })
                    .catch(() => resolve(placeholder));
            });
        }
    }
}).mount("#app");

window.addEventListener("message", function(event) {
    if (event.data.action === "open") {
        document.getElementById("tablet").style.display = "flex";
        app.isOn = true;

        fetch(`https://${GetParentResourceName()}/getAdminStatus`, {
            method: "POST",
            headers: { "Content-Type": "application/json" }
        })
        .then(res => res.json())
        .then(data => {
            app.isAdmin = data.isAdmin;
        })
    }


    if (event.data.action === "updateVehicles") {

    
        let promises = event.data.vehicles.map(car =>
            app.checkImage(car.model).then(imagePath => {
                let limit = (car.limit !== undefined && car.limit !== null) ? parseInt(car.limit) : null;
                let stockStatus = "";
    
                if (limit === null) {
                    stockStatus = "Auf Lager";
                } else if (limit === 0) {
                    stockStatus = "Nicht auf Lager";
                } else {
                    stockStatus = `${limit} auf Lager`;
                }
    
                return {
                    id: car.id,
                    category: car.category_label,
                    name: car.label,
                    price: car.price,
                    model: car.model,
                    image: imagePath,
                    limit: limit,
                    stockStatus: stockStatus
                };
            })
        );
    
        Promise.all(promises).then(items => {
    
            app.items = items;
            app.categories = [...new Set(items.map(car => car.category))];
    
            if (app.categories.length > 0) {
                app.activeCategory = app.categories[0];
            }
        })
    }

    if (event.data.action === "updateCoins") {
        app.coins = event.data.coins;
    }

    if (event.data.action === "close") {
        document.getElementById("tablet").style.display = "none";
        app.isOn = false;
    }
});

// Entfernt Power-Button Funktionalität
document.addEventListener("DOMContentLoaded", () => {
    const powerButton = document.querySelector(".power-button");
    powerButton.addEventListener("click", (event) => {
        event.preventDefault();
        event.stopPropagation();
    });

    // ESC zum Schließen
    document.addEventListener("keydown", (event) => {
        if (event.key === "Escape") {
            fetch(`https://${GetParentResourceName()}/closeShop`, {
                method: "POST"
            });
        }
    });
});