<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digitale Produktpass-Simulation</title>
</head>
<body>
    <h1>Digitale Produktpass-Simulation für Autobatterie</h1>

    <!-- Anzeige des aktuellen Simulation-Schritts -->
    <div>
        <h3 id="currentStepTitle">Aktueller Schritt im Ende-zu-Ende-Geschäftsprozess: </h3>
        <p id="currentStep">Prozess nicht gestartet.</p>
    </div>

    <!-- Buttons für jeden Schritt -->
    <div>
        <h3>Prozesssteuerung</h3>
        <button id="btnRohstoffproduktion">Rohstoffproduktion</button>
        <button id="btnHerstellung">Herstellung</button>
        <button id="btnHandel">Handel</button>
        <button id="btnNutzung">Nutzung</button>
        <button id="btnReparatur">Reparatur</button>
        <button id="btnRecycling">Recycling</button>
    </div>

    <!-- Log-Ausgabe -->
    <div>
        <h3>Log-Ausgabe</h3>
        <textarea id="log" rows="10" cols="50" readonly></textarea>
    </div>

    <script>
        // Initialisierte Testdaten
        let currentData = {
            productPass: {
                id: "12345",
                name: "Autobatterie",
                rawMaterials: null,
                manufacturingDetails: null,
                saleDetails: null,
                usagePatterns: null,
                repairHistory: [],
                endOfLife: null
            }
        };

        // Funktion zum Hinzufügen von Logs im Textfeld
        function logMessage(message) {
            const logField = document.getElementById("log");
            logField.value += message + "\n\n";
            logField.scrollTop = logField.scrollHeight;
        }

        // Funktion zum Aktualisieren des aktuellen Schritts
        function updateCurrentStep(stepDescription) {
            const currentStepElement = document.getElementById("currentStep");
            const currentStepTitle = document.getElementById("currentStepTitle");
            currentStepTitle.textContent = `Aktueller Schritt im Ende-zu-Ende-Geschäftsprozess: ${stepDescription}`;
            currentStepElement.textContent = stepDescription;
        }

        // Funktion zur Verzögerung
        function delay(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        // Komponenten für jeden Schritt
        const Komponenten = {
            rohstoffproduktion: {
                name: "Rohstoffproduktion",
                async processRawMaterials(data) {
                    await delay(1000);
                    updateCurrentStep("Schritt 1: Rohstoffe werden registriert und Herkunft überprüft.");
                    logMessage("Rohstoffproduktion: Rohstoffe registriert und Herkunft überprüft.");
                    data.productPass.rawMaterials = "Ethisch abgebaut";
                    return data;
                }
            },
            herstellung: {
                name: "Herstellung",
                async manufactureProduct(data) {
                    await delay(1000);
                    updateCurrentStep("Schritt 2: Produkt wird aus nachhaltigen Materialien hergestellt.");
                    logMessage("Herstellung: Produkt aus nachhaltigen Materialien gebaut.");
                    data.productPass.manufacturingDetails = "Nachhaltige Materialien verwendet";
                    return data;
                }
            },
            handel: {
                name: "Handel",
                async sellProduct(data) {
                    await delay(1000);
                    updateCurrentStep("Schritt 3: Produkt wird verkauft und Produktpass wird aktualisiert.");
                    logMessage("Handel: Produkt verkauft, Produktpass aktualisiert.");
                    data.productPass.saleDetails = "Verkauft im Handel";
                    return data;
                }
            },
            nutzung: {
                name: "Nutzung",
                async useProduct(data) {
                    await delay(1000);
                    updateCurrentStep("Schritt 4: Produkt wird genutzt und Nutzungsmuster werden gespeichert.");
                    logMessage("Nutzung: Produkt wird genutzt, Nutzungsmuster gespeichert.");
                    data.productPass.usagePatterns = "Verwendet in alltäglichen Anwendungen";
                    return data;
                }
            },
            reparatur: {
                name: "Reparatur",
                async repairProduct(data) {
                    await delay(1000);
                    updateCurrentStep("Schritt 5: Reparaturservice wird protokolliert.");
                    logMessage("Reparatur: Reparaturservice protokolliert.");
                    data.productPass.repairHistory.push("Reparatur durchgeführt");
                    return data;
                }
            },
            recycling: {
                name: "Recycling",
                async recycleProduct(data) {
                    await delay(1000);
                    updateCurrentStep("Schritt 6: Produkt wird zerlegt und Materialien wiederverwendet.");
                    logMessage("Recycling: Produkt zerlegt, Materialien wiederverwendet.");
                    data.productPass.endOfLife = "Ende des Lebenszyklus";
                    return data;
                }
            }
        };

        // Funktionen für die Buttons
        document.getElementById('btnRohstoffproduktion').addEventListener('click', async () => {
            currentData = await Komponenten.rohstoffproduktion.processRawMaterials(currentData);
        });

        document.getElementById('btnHerstellung').addEventListener('click', async () => {
            currentData = await Komponenten.herstellung.manufactureProduct(currentData);
        });

        document.getElementById('btnHandel').addEventListener('click', async () => {
            currentData = await Komponenten.handel.sellProduct(currentData);
        });

        document.getElementById('btnNutzung').addEventListener('click', async () => {
            currentData = await Komponenten.nutzung.useProduct(currentData);
        });

        document.getElementById('btnReparatur').addEventListener('click', async () => {
            currentData = await Komponenten.reparatur.repairProduct(currentData);
        });

        document.getElementById('btnRecycling').addEventListener('click', async () => {
            currentData = await Komponenten.recycling.recycleProduct(currentData);
        });
    </script>
</body>
</html>