<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Journey Simulation</title>
    <style>
        #output {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 20px;
            height: 200px;
            overflow-y: scroll;
            background-color: #f9f9f9;
        }
        #testCaseList {
            margin-top: 20px;
        }
        .test-case {
            margin-bottom: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            background-color: #eef;
        }
        input, select {
            margin: 5px 0;
            display: block;
        }
    </style>
</head>
<body>
    <h1>User Journey Simulation</h1>

    <button id="startTestCases">Starte alle Testfälle</button>

    <div id="testCaseList"></div>
    <div id="output"></div>

    <script>
        const testCases = [
            {
                "userId": "familieSchmidt",
                "name": "Familie Schmidt",
                "email": "schmidt@web.de",
                "action": "arHike",
                "location": "Alpenblick Wanderweg",
                "digitalIdentity": true,
                "payment": true,
                "co2Check": true,
                "groundwaterCheck": true,
                "accommodationPrice": 120,
                "co2CheckPrice": 5,
                "groundwaterCheckPrice": 8,
                "review": "Großartiges Wandererlebnis mit Fokus auf Nachhaltigkeit!",
                "paymentMethod": "MasterCard"
            }
        ];

        let currentTestCaseIndex = 0;

        function logToOutput(message) {
            const outputDiv = document.getElementById('output');
            outputDiv.innerHTML += message + '<br>';
            outputDiv.scrollTop = outputDiv.scrollHeight;
        }

        document.getElementById('startTestCases').addEventListener('click', startAllTestCases);

        function displayTestCases() {
            const listDiv = document.getElementById('testCaseList');
            listDiv.innerHTML = '<h2>Testfälle</h2>';
            testCases.forEach((testCase, index) => {
                listDiv.innerHTML += 
                    `<div class="test-case">
                        <h3>Testfall ${index + 1}</h3>
                        <p><strong>User ID:</strong> ${testCase.userId}</p>
                        <p><strong>Name:</strong> ${testCase.name}</p>
                        <p><strong>E-Mail:</strong> ${testCase.email}</p>
                        <p><strong>Aktion:</strong> ${testCase.action}</p>
                        <p><strong>Standort:</strong> ${testCase.location}</p>
                        <p><strong>Zahlungsmethode:</strong> ${testCase.paymentMethod}</p>
                       
                    </div>`;
            });
        }

        async function startSingleTestCase(index) {
            const testCase = testCases[index];
            logToOutput(`Starte User Journey für Testfall ${index + 1}: ${JSON.stringify(testCase)}`);
            await userJourney(testCase);
        }

        async function startAllTestCases() {
            currentTestCaseIndex = 0;
            logToOutput('Starte alle Testfälle...');
            while (currentTestCaseIndex < testCases.length) {
                await startSingleTestCase(currentTestCaseIndex);
                currentTestCaseIndex++;
            }
            logToOutput('Alle Testfälle wurden erfolgreich abgeschlossen.');
        }

        async function userJourney(data) {
            logToOutput("Sichere Datenverteilung über X-Road initialisiert...");
            logToOutput("Überprüfe digitale Identität...");

            // Digitale Identität prüfen
            if (checkForDuplicateEntries(data.userId)) {
                logToOutput(`Warnung: Digitale Identität für ${data.name} existiert bereits.`);
                return;
            } else {
                storeUserId(data.userId);
            }

            // Buchungsprozess
            await bookingProcess(data);

            // Zahlungsprozess
            const paymentDetails = await paymentProcess(data);

            // Aktionen
            switch (data.action) {
                case "arHike":
                    logToOutput(`${data.name} nimmt an einer AR-Wanderung in ${data.location} teil.`);
                    break;
                default:
                    logToOutput(`Aktion ${data.action} wird nicht unterstützt.`);
            }

            logToOutput(`Testfall für ${data.name} abgeschlossen.`);
        }

        async function bookingProcess(data) {
            logToOutput("Buchungsprozess wird verarbeitet...");
            await new Promise(resolve => setTimeout(resolve, 2000));
            logToOutput("Buchung erfolgreich abgeschlossen.");
        }

        async function paymentProcess(data) {
            logToOutput("Zahlungsprozess wird verarbeitet...");
            await new Promise(resolve => setTimeout(resolve, 2000));
            logToOutput(`Zahlung erfolgreich über ${data.paymentMethod} durchgeführt.`);
        }

        function checkForDuplicateEntries(userId) {
            const existingUserId = sessionStorage.getItem('userId');
            return existingUserId === userId;
        }

        function storeUserId(userId) {
            sessionStorage.setItem('userId', userId);
            logToOutput(`Benutzer-ID ${userId} gespeichert.`);
        }

        // Anzeigen der Testfälle beim Laden der Seite
        displayTestCases();
    </script>
</body>
</html>
