function readStorageJson(key, fallbackValue) {
    const raw = localStorage.getItem(key);

    if (!raw || raw === "undefined" || raw === "null") {
        return fallbackValue;
    }

    try {
        return JSON.parse(raw);
    } catch (error) {
        console.warn(`Konnte LocalStorage-Wert fuer ${key} nicht lesen.`, error);
        return fallbackValue;
    }
}

function normalizeUser(user) {
    if (!user || typeof user !== "object") {
        return null;
    }

    return {
        salutation: user.salutation || "",
        firstName: user.firstName || "",
        lastName: user.lastName || "",
        birthday: user.birthday || "",
        street: user.street || "",
        houseNumber: user.houseNumber || "",
        zip: user.zip || "",
        city: user.city || "",
        country: user.country || "Deutschland",
        email: user.email || "",
        passwordHash: user.passwordHash || (user.password ? hashPassword(user.password) : ""),
        orders: Array.isArray(user.orders) ? user.orders : [],
        paymentMethods: Array.isArray(user.paymentMethods) ? user.paymentMethods : []
    };
}

function hashPassword(password) {
    let hashA = 0xdeadbeef;
    let hashB = 0x41c6ce57;
    const text = String(password || "");

    for (let index = 0; index < text.length; index += 1) {
        const charCode = text.charCodeAt(index);
        hashA = Math.imul(hashA ^ charCode, 2654435761);
        hashB = Math.imul(hashB ^ charCode, 1597334677);
    }

    hashA = Math.imul(hashA ^ (hashA >>> 16), 2246822507) ^ Math.imul(hashB ^ (hashB >>> 13), 3266489909);
    hashB = Math.imul(hashB ^ (hashB >>> 16), 2246822507) ^ Math.imul(hashA ^ (hashA >>> 13), 3266489909);

    return `hash$${(hashB >>> 0).toString(16).padStart(8, "0")}${(hashA >>> 0).toString(16).padStart(8, "0")}`;
}

function escapeHtml(value) {
    return String(value || "")
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#39;");
}

function formatEuro(value) {
    return `${Number(value || 0).toFixed(2).replace(".", ",")} EUR`;
}

function persistUsers() {
    localStorage.setItem("eagleUsers", JSON.stringify(users));
}

function persistCurrentUser() {
    if (currentUser) {
        localStorage.setItem("currentUser", JSON.stringify(currentUser));
    } else {
        localStorage.removeItem("currentUser");
    }
}

let users = readStorageJson("eagleUsers", []);
if (!Array.isArray(users)) {
    users = [];
}
users = users.map(normalizeUser).filter(Boolean);
persistUsers();

let currentUser = normalizeUser(readStorageJson("currentUser", null));
if (currentUser && currentUser.email) {
    const storedMatch = users.find((user) => user.email === currentUser.email);
    if (storedMatch) {
        currentUser = storedMatch;
        persistCurrentUser();
    } else {
        users.push(currentUser);
        persistUsers();
        persistCurrentUser();
    }
}

function registerUser() {
    if (!validateRegisterForm()) {
        return;
    }

    const salutation = document.getElementById("reg-salutation")?.value.trim() || "";
    const firstName = document.getElementById("reg-firstname")?.value.trim() || "";
    const lastName = document.getElementById("reg-lastname")?.value.trim() || "";
    const birthday = document.getElementById("reg-birthday")?.value.trim() || "";
    const street = document.getElementById("reg-street")?.value.trim() || "";
    const houseNumber = document.getElementById("reg-house-number")?.value.trim() || "";
    const zip = document.getElementById("reg-zip")?.value.trim() || "";
    const city = document.getElementById("reg-city")?.value.trim() || "";
    const country = document.getElementById("reg-country")?.value.trim() || "";
    const email = (document.getElementById("reg-email")?.value.trim() || "").toLowerCase();
    const password = document.getElementById("reg-password")?.value || "";

    const existingUser = users.find((user) => user.email.toLowerCase() === email);
    if (existingUser) {
        setFieldError(document.getElementById("reg-email"), "Diese E-Mail ist bereits registriert.");
        return;
    }

    const newUser = {
        salutation,
        firstName,
        lastName,
        birthday,
        street,
        houseNumber,
        zip,
        city,
        country,
        email,
        passwordHash: hashPassword(password),
        orders: [],
        paymentMethods: []
    };

    users.push(newUser);
    currentUser = newUser;

    persistUsers();
    persistCurrentUser();

    document.getElementById("register-modal")?.classList.add("hidden");

    openAccountDashboard();
}

function loginUser() {
    if (!validateLoginForm()) {
        return;
    }

    const email = (document.getElementById("login-email")?.value.trim() || "").toLowerCase();
    const password = document.getElementById("login-password")?.value || "";
    const passwordHash = hashPassword(password);

    const user = users.find(
        (entry) => entry.email.toLowerCase() === email && entry.passwordHash === passwordHash
    );

    if (!user) {
        document.getElementById("login-error")?.classList.remove("hidden");
        setFieldError(document.getElementById("login-email"), "E-Mail oder Passwort stimmen nicht.");
        setFieldError(document.getElementById("login-password"), "E-Mail oder Passwort stimmen nicht.");
        return;
    }

    currentUser = user;
    persistCurrentUser();
    openAccountDashboard();
}

function openAccountDashboard() {
    const accountView = document.getElementById("account-view");
    if (!accountView) {
        return;
    }

    if (!currentUser) {
        accountView.innerHTML = "<div class='account-login-box'><h2>Mein Konto</h2><p>Bitte melde dich an oder registriere dich.</p></div>";
        return;
    }

    accountView.innerHTML = `
        <div class="account-panel">
            <div class="account-panel-header">
                <h2>Mein Konto</h2>
                <div class="account-header-actions">
                    <button class="account-edit-btn" type="button" onclick="renderPersonalInfo(true)" aria-label="Persönliche Daten bearbeiten" title="Daten bearbeiten">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M12 20h9"></path>
                            <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
                        </svg>
                    </button>
                    <button class="account-logout-btn" onclick="logoutUser()">Abmelden</button>
                </div>
            </div>

            <div class="account-tabs">
                <button class="account-tab-btn" onclick="renderPersonalInfo()">Persönliche Daten</button>
                <button class="account-tab-btn" onclick="renderOrders()">Meine Bestellungen</button>
                <button class="account-tab-btn" onclick="renderPayments()">Zahlungsmethoden</button>
            </div>

            <div id="account-tab-content"></div>
        </div>
    `;

    renderPersonalInfo();
}

function renderPersonalInfo(isEditing = false) {
    const target = document.getElementById("account-tab-content");
    if (!target || !currentUser) {
        return;
    }

    if (isEditing) {
        target.innerHTML = `
            <div class="account-card account-personal-card">
                <div class="account-card-title-row">
                    <h3>Persönliche Daten bearbeiten</h3>
                    <span>E-Mail bleibt unverändert</span>
                </div>
                <div class="account-edit-form">
                    <label class="auth-field">
                        <span>Anrede</span>
                        <select id="account-edit-salutation">
                            <option value="">Bitte wählen</option>
                            <option value="Frau" ${currentUser.salutation === "Frau" ? "selected" : ""}>Frau</option>
                            <option value="Herr" ${currentUser.salutation === "Herr" ? "selected" : ""}>Herr</option>
                            <option value="Divers" ${currentUser.salutation === "Divers" ? "selected" : ""}>Divers</option>
                        </select>
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field">
                        <span>Vorname</span>
                        <input type="text" id="account-edit-firstname" value="${escapeHtml(currentUser.firstName)}" required data-required-message="Vorname ist ein Pflichtfeld.">
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field">
                        <span>Nachname</span>
                        <input type="text" id="account-edit-lastname" value="${escapeHtml(currentUser.lastName)}" required data-required-message="Nachname ist ein Pflichtfeld.">
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field">
                        <span>Geburtstag</span>
                        <input type="date" id="account-edit-birthday" value="${escapeHtml(currentUser.birthday)}">
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field">
                        <span>Straße</span>
                        <input type="text" id="account-edit-street" value="${escapeHtml(currentUser.street)}">
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field">
                        <span>Nr.</span>
                        <input type="text" id="account-edit-house-number" value="${escapeHtml(currentUser.houseNumber)}">
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field">
                        <span>PLZ</span>
                        <input type="text" id="account-edit-zip" value="${escapeHtml(currentUser.zip)}">
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field">
                        <span>Ort</span>
                        <input type="text" id="account-edit-city" value="${escapeHtml(currentUser.city)}">
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field">
                        <span>Land</span>
                        <select id="account-edit-country">
                            <option value="Deutschland" ${currentUser.country === "Deutschland" ? "selected" : ""}>Deutschland</option>
                            <option value="Österreich" ${currentUser.country === "Österreich" ? "selected" : ""}>Österreich</option>
                            <option value="Schweiz" ${currentUser.country === "Schweiz" ? "selected" : ""}>Schweiz</option>
                            <option value="Luxemburg" ${currentUser.country === "Luxemburg" ? "selected" : ""}>Luxemburg</option>
                        </select>
                        <span class="field-error"></span>
                    </label>
                    <label class="auth-field account-email-locked">
                        <span>E-Mail</span>
                        <input type="email" value="${escapeHtml(currentUser.email)}" disabled>
                        <small>Die E-Mail-Adresse ist fest mit deinem Konto verbunden.</small>
                    </label>
                </div>
                <div class="account-edit-actions">
                    <button type="button" class="account-secondary-btn" onclick="renderPersonalInfo()">Abbrechen</button>
                    <button type="button" class="account-save-btn" onclick="savePersonalInfo()">Speichern</button>
                </div>
            </div>
        `;
        return;
    }

    target.innerHTML = `
        <div class="account-card account-personal-card">
            <h3>Persönliche Daten</h3>
            <div class="account-personal-grid">
                <p><span>Anrede</span><strong>${escapeHtml(currentUser.salutation || "-")}</strong></p>
                <p><span>Vorname</span><strong>${escapeHtml(currentUser.firstName || "-")}</strong></p>
                <p><span>Nachname</span><strong>${escapeHtml(currentUser.lastName || "-")}</strong></p>
                <p><span>Geburtstag</span><strong>${escapeHtml(currentUser.birthday || "-")}</strong></p>
                <p><span>Straße</span><strong>${escapeHtml(currentUser.street || "-")}</strong></p>
                <p><span>Nr.</span><strong>${escapeHtml(currentUser.houseNumber || "-")}</strong></p>
                <p><span>PLZ</span><strong>${escapeHtml(currentUser.zip || "-")}</strong></p>
                <p><span>Ort</span><strong>${escapeHtml(currentUser.city || "-")}</strong></p>
                <p><span>Land</span><strong>${escapeHtml(currentUser.country || "-")}</strong></p>
                <p><span>E-Mail</span><strong>${escapeHtml(currentUser.email || "-")}</strong></p>
            </div>
        </div>
    `;
}

function savePersonalInfo() {
    if (!currentUser) {
        return;
    }

    const requiredFields = ["account-edit-firstname", "account-edit-lastname"];
    const isValid = requiredFields
        .map((id) => validateAccountField(document.getElementById(id)))
        .every(Boolean);

    if (!isValid) {
        return;
    }

    currentUser.salutation = document.getElementById("account-edit-salutation")?.value || "";
    currentUser.firstName = document.getElementById("account-edit-firstname")?.value.trim() || "";
    currentUser.lastName = document.getElementById("account-edit-lastname")?.value.trim() || "";
    currentUser.birthday = document.getElementById("account-edit-birthday")?.value || "";
    currentUser.street = document.getElementById("account-edit-street")?.value.trim() || "";
    currentUser.houseNumber = document.getElementById("account-edit-house-number")?.value.trim() || "";
    currentUser.zip = document.getElementById("account-edit-zip")?.value.trim() || "";
    currentUser.city = document.getElementById("account-edit-city")?.value.trim() || "";
    currentUser.country = document.getElementById("account-edit-country")?.value || "Deutschland";

    const userIndex = users.findIndex((user) => user.email === currentUser.email);
    if (userIndex >= 0) {
        users[userIndex] = currentUser;
    }

    persistUsers();
    persistCurrentUser();
    renderPersonalInfo();
}

function getFieldWrapper(input) {
    if (!input) {
        return null;
    }

    return input.closest(".auth-field") || document.querySelector(`[data-field-for="${input.id}"]`);
}

function setFieldError(input, message) {
    const wrapper = getFieldWrapper(input);
    if (!wrapper) {
        return;
    }

    input.dataset.touched = "true";
    wrapper.classList.add("is-invalid");
    const error = wrapper.querySelector(".field-error");
    if (error) {
        error.textContent = message;
    }
}

function clearFieldError(input) {
    const wrapper = getFieldWrapper(input);
    if (!wrapper) {
        return;
    }

    wrapper.classList.remove("is-invalid");
    const error = wrapper.querySelector(".field-error");
    if (error) {
        error.textContent = "";
    }
}

function validateAccountField(input) {
    if (!input) {
        return true;
    }

    const value = (input.value || "").trim();
    if (input.required && !value) {
        setFieldError(input, input.dataset.requiredMessage || "Dieses Feld ist ein Pflichtfeld.");
        return false;
    }

    if (input.type === "email" && value && !value.includes("@")) {
        setFieldError(input, input.dataset.emailMessage || "Bitte gib eine gültige E-Mail-Adresse ein.");
        return false;
    }

    if (input.type === "password" && value && (value.length < 8 || value.length > 32)) {
        setFieldError(input, input.dataset.passwordMessage || "Passwort muss 8 bis 32 Zeichen haben.");
        return false;
    }

    clearFieldError(input);
    return true;
}

function validateRegisterForm() {
    const fieldIds = [
        "reg-salutation",
        "reg-firstname",
        "reg-lastname",
        "reg-birthday",
        "reg-street",
        "reg-house-number",
        "reg-zip",
        "reg-city",
        "reg-country",
        "reg-email",
        "reg-password"
    ];

    return fieldIds
        .map((id) => validateAccountField(document.getElementById(id)))
        .every(Boolean);
}

function validateLoginForm() {
    return ["login-email", "login-password"]
        .map((id) => validateAccountField(document.getElementById(id)))
        .every(Boolean);
}

function initAccountFieldValidation() {
    const fieldSelector = [
        "#login-email",
        "#login-password",
        "#reg-salutation",
        "#reg-firstname",
        "#reg-lastname",
        "#reg-birthday",
        "#reg-street",
        "#reg-house-number",
        "#reg-zip",
        "#reg-city",
        "#reg-country",
        "#reg-email",
        "#reg-password"
    ].join(",");

    document.querySelectorAll(fieldSelector).forEach((input) => {
        input.addEventListener("blur", () => {
            input.dataset.touched = "true";
            validateAccountField(input);
        });

        input.addEventListener("input", () => {
            input.dataset.touched = "true";
            if (input.type !== "hidden") {
                validateAccountField(input);
            }
        });

        input.addEventListener("change", () => {
            input.dataset.touched = "true";
            validateAccountField(input);
        });
    });

    document.querySelectorAll(".gender-selector button").forEach((button) => {
        button.addEventListener("click", () => {
            const salutationInput = document.getElementById("reg-salutation");
            if (!salutationInput) {
                return;
            }

            salutationInput.value = button.dataset.gender || "";
            salutationInput.dataset.touched = "true";
            button.closest(".gender-selector")?.querySelectorAll("button").forEach((item) => {
                item.classList.toggle("active", item === button);
            });
            validateAccountField(salutationInput);
        });
    });
}

function renderOrders() {
    const target = document.getElementById("account-tab-content");
    if (!target || !currentUser) {
        return;
    }

    const orders = Array.isArray(currentUser.orders) ? currentUser.orders : [];

    if (!orders.length) {
        target.innerHTML = `
            <div class="account-card">
                <h3>Meine Bestellungen</h3>
                <p>Noch keine Bestellungen vorhanden.</p>
            </div>
        `;
        return;
    }

    const orderHtml = orders
        .map((order, index) => {
            const movieItems = Array.isArray(order.items)
                ? order.items.filter((item) => item.category === "movie")
                : [];
            const previewItem = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
            const previewTitle = previewItem?.title || "Bestellung";
            const ticketsCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0);

            return `
                <button type="button" class="order-box order-item-btn" data-order-index="${index}">
                    <div class="order-item-head">
                        <h4>${escapeHtml(previewTitle)}</h4>
                        <span>${formatEuro(order.total || 0)}</span>
                    </div>
                    <p><strong>Datum:</strong> ${escapeHtml(order.date || "-")}</p>
                    <p><strong>Anzahl:</strong> ${ticketsCount}x</p>
                </button>
            `;
        })
        .join("");

    target.innerHTML = `
        <div class="account-orders-shell">
            <h3>Meine Bestellungen</h3>
            <p class="account-payments-note">Klicke auf eine Bestellung, um genauere Informationen zu sehen.</p>
            <div class="account-orders-grid">${orderHtml}</div>
            <div id="order-ticket-details" class="order-ticket-details hidden"></div>
        </div>
    `;

    const detailTarget = document.getElementById("order-ticket-details");
    const orderButtons = Array.from(target.querySelectorAll(".order-item-btn"));

    const renderOrderTicket = (orderIndex) => {
        const order = orders[orderIndex];
        if (!order || !detailTarget) {
            return;
        }

        const movieItems = Array.isArray(order.items)
            ? order.items.filter((item) => item.category === "movie")
            : [];
        const primaryMovie = movieItems[0] || (Array.isArray(order.items) ? order.items[0] : null);
        const poster = primaryMovie?.img || "";
        const seats = movieItems.map((item) => item.seatId).filter(Boolean).join(", ") || "-";
        const ticketCount = movieItems.length || (Array.isArray(order.items) ? order.items.length : 0);
        const hall = primaryMovie?.hall || "-";
        const time = primaryMovie?.time ? `${primaryMovie.time} Uhr` : "-";

        detailTarget.innerHTML = `
            <article class="order-ticket-card">
                <div class="order-ticket-poster">
                    ${poster
                        ? `<img src="${escapeHtml(poster)}" alt="${escapeHtml(primaryMovie?.title || "Film")}">`
                        : `<div class="order-ticket-poster-fallback">Kein Poster</div>`}
                </div>
                <div class="order-ticket-content">
                    <div class="order-ticket-brand">EAGLE'S IMAX | Bestell-Details</div>
                    <h4>${escapeHtml(primaryMovie?.title || "Bestellung")}</h4>
                    <div class="order-ticket-grid">
                        <p><span>Datum</span><strong>${escapeHtml(order.date || "-")}</strong></p>
                        <p><span>Saal</span><strong>${escapeHtml(hall)}</strong></p>
                        <p><span>Uhrzeit</span><strong>${escapeHtml(time)}</strong></p>
                        <p><span>Tickets</span><strong>${ticketCount}x</strong></p>
                        <p><span>Sitze</span><strong>${escapeHtml(seats)}</strong></p>
                        <p><span>Gesamt</span><strong>${formatEuro(order.total || 0)}</strong></p>
                    </div>
                </div>
            </article>
        `;

        detailTarget.classList.remove("hidden");
        orderButtons.forEach((button) => {
            button.classList.toggle("active", Number(button.dataset.orderIndex) === orderIndex);
        });
    };

    orderButtons.forEach((button) => {
        button.addEventListener("click", () => {
            const orderIndex = Number(button.dataset.orderIndex || -1);
            if (orderIndex >= 0) {
                renderOrderTicket(orderIndex);
            }
        });
    });

}

function renderPayments() {
    const target = document.getElementById("account-tab-content");
    if (!target || !currentUser) {
        return;
    }

    target.innerHTML = `
        <div class="account-card">
            <h3>Zahlungsmethoden</h3>
            <p class="account-payments-note">Hier kannst du deine bevorzugten Zahlungsmethoden verwalten.</p>
            <div class="account-payment-grid">
                <button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-card">
                    <div class="payment-logo-slot">
                        <img src="img/mastercard.png" alt="Mastercard">
                    </div>
                    <h4>Visa / Mastercard</h4>
                    <p>Karteninformationen hinterlegen</p>
                </button>
                <button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-paypal">
                    <div class="payment-logo-slot">
                        <img src="img/paypal.png" alt="PayPal">
                    </div>
                    <h4>PayPal</h4>
                    <p>Konto verbinden</p>
                </button>
                <button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-apple">
                    <div class="payment-logo-slot">
                        <img src="img/applepay.png" alt="Apple Pay">
                    </div>
                    <h4>Apple Pay</h4>
                    <p>Gerät freischalten</p>
                </button>
                <button type="button" class="account-payment-card account-pay-trigger" data-pay-modal="pay-modal-google">
                    <div class="payment-logo-slot">
                        <img src="img/googlepay.png" alt="Google Pay">
                    </div>
                    <h4>Google Pay</h4>
                    <p>Wallet verknüpfen</p>
                </button>
            </div>
        </div>

        <div id="pay-modal-card" class="pay-modal-overlay hidden">
            <div class="pay-modal-panel pay-modal-card-style">
                <button type="button" class="pay-close-btn" data-pay-close>&times;</button>
                <div class="pay-modal-head">
                    <img src="img/mastercard.png" alt="Kreditkarte">
                    <h4>Kreditkarte hinterlegen</h4>
                </div>
                <div class="pay-form-grid">
                    <label>Kartennummer
                        <input type="text" placeholder="1234 5678 9012 3456">
                    </label>
                    <div class="pay-form-row">
                        <label>Exp. Datum
                            <input type="text" placeholder="MM/JJ">
                        </label>
                        <label>CVV
                            <input type="text" placeholder="123">
                        </label>
                    </div>
                    <label>Name auf Karte
                        <input type="text" placeholder="Max Mustermann">
                    </label>
                </div>
                <button type="button" class="pay-submit-btn">Karte speichern</button>
            </div>
        </div>

        <div id="pay-modal-paypal" class="pay-modal-overlay hidden">
            <div class="pay-modal-panel pay-modal-paypal-style">
                <button type="button" class="pay-close-btn" data-pay-close>&times;</button>
                <div class="pay-modal-head">
                    <img src="img/paypal.png" alt="PayPal">
                    <h4>PayPal verbinden</h4>
                </div>
                <p>Einloggen und dein PayPal-Konto mit deinem Kino-Account verbinden.</p>
                <label>E-Mail
                    <input type="email" placeholder="name@beispiel.de">
                </label>
                <label>Passwort
                    <input type="password" placeholder="Passwort">
                </label>
                <button type="button" class="pay-submit-btn paypal-btn">Mit PayPal fortfahren</button>
            </div>
        </div>

        <div id="pay-modal-apple" class="pay-modal-overlay hidden">
            <div class="pay-modal-panel pay-modal-apple-style">
                <button type="button" class="pay-close-btn" data-pay-close>&times;</button>
                <div class="pay-modal-head">
                    <img src="img/applepay.png" alt="Apple Pay">
                    <h4>Apple Pay einrichten</h4>
                </div>
                <p>Apple Pay wirkt schlicht, klar und fokussiert. Hinterlege hier die bevorzugte Karte für schnelle Zahlungen.</p>
                <label>Apple-ID E-Mail
                    <input type="email" placeholder="appleid@beispiel.de">
                </label>
                <label>Bevorzugte Karte
                    <input type="text" placeholder="Visa, Mastercard, ...">
                </label>
                <button type="button" class="pay-submit-btn apple-btn">Zu Wallet hinzufügen</button>
            </div>
        </div>

        <div id="pay-modal-google" class="pay-modal-overlay hidden">
            <div class="pay-modal-panel pay-modal-google-style">
                <button type="button" class="pay-close-btn" data-pay-close>&times;</button>
                <div class="pay-modal-head">
                    <img src="img/googlepay.png" alt="Google Pay">
                    <h4>Google Pay einrichten</h4>
                </div>
                <p>Verbinde deine Wallet, damit zukünftige Bestellungen in wenigen Klicks abgeschlossen werden.</p>
                <label>Google-Konto
                    <input type="email" placeholder="konto@gmail.com">
                </label>
                <label>Standard-Zahlungsquelle
                    <input type="text" placeholder="z. B. Visa 1234">
                </label>
                <button type="button" class="pay-submit-btn google-btn">Wallet verbinden</button>
            </div>
        </div>
    `;

    const modals = Array.from(target.querySelectorAll(".pay-modal-overlay"));
    const triggers = Array.from(target.querySelectorAll(".account-pay-trigger"));
    const closeButtons = Array.from(target.querySelectorAll("[data-pay-close]"));

    const closeAllPaymentModals = () => {
        modals.forEach((modal) => modal.classList.add("hidden"));
        document.body.style.overflow = "auto";
    };

    triggers.forEach((trigger) => {
        trigger.addEventListener("click", () => {
            closeAllPaymentModals();
            const targetId = trigger.getAttribute("data-pay-modal");
            const modal = targetId ? target.querySelector(`#${targetId}`) : null;

            if (modal) {
                modal.classList.remove("hidden");
                document.body.style.overflow = "hidden";
            }
        });
    });

    closeButtons.forEach((button) => {
        button.addEventListener("click", closeAllPaymentModals);
    });

    modals.forEach((modal) => {
        modal.addEventListener("click", (event) => {
            if (event.target === modal) {
                closeAllPaymentModals();
            }
        });
    });
}

function logoutUser() {
    currentUser = null;
    persistCurrentUser();
    window.location.reload();
}