let deferredPrompt;

/* -----------------------------
   ANDROID / CHROME INSTALL FLOW
------------------------------*/
window.addEventListener("beforeinstallprompt", (e) => {
    e.preventDefault();
    deferredPrompt = e;

    // Prevent duplicate banner
    if (document.getElementById("install-banner")) return;

    showInstallBanner({
        message: '📱 Install <b>Quality</b> App?',
        buttonText: 'Install',
        onClick: async () => {
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            console.log("User install choice:", outcome);
            deferredPrompt = null;
        }
    });
});

/* -----------------------------
   IOS SAFARI MANUAL INSTALL
------------------------------*/
function isIosSafari() {
    return (
        /iP(ad|hone|od)/.test(navigator.userAgent) &&
        /Safari/.test(navigator.userAgent) &&
        !/CriOS|FxiOS|OPiOS/.test(navigator.userAgent)
    );
}

function isInStandaloneMode() {
    return window.navigator.standalone === true;
}

document.addEventListener("DOMContentLoaded", () => {
    if (
        isIosSafari() &&
        !isInStandaloneMode() &&
        !localStorage.getItem("iosInstallShown")
    ) {
        showInstallBanner({
            message: '📱 Install <b>Quality</b> App<br><small>Tap Share ⬆️ → Add to Home Screen</small>',
            buttonText: 'Got it',
            onClick: () => {
                localStorage.setItem("iosInstallShown", "1");
            }
        });
    }
});

/* -----------------------------
   COMMON INSTALL BANNER UI
------------------------------*/
function showInstallBanner({ message, buttonText, onClick }) {
    if (document.getElementById("install-banner")) return;

    const banner = document.createElement("div");
    banner.id = "install-banner";
    banner.innerHTML = `
        <div style="
            position: fixed;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: var(--fi-color-primary, #007bff);
            color: white;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            font-family: system-ui, sans-serif;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            z-index: 99999;
        ">
            <span style="font-size: 16px;">${message}</span><br>
            <button id="installBtn" style="
                margin-top: 10px;
                background: white;
                color: var(--fi-color-primary, #007bff);
                border: none;
                padding: 8px 16px;
                border-radius: 6px;
                font-weight: 600;
                cursor: pointer;
            ">${buttonText}</button>
        </div>
    `;
    document.body.appendChild(banner);

    document.getElementById("installBtn").addEventListener("click", () => {
        banner.remove();
        onClick();
    });
}

/* -----------------------------
   APP INSTALLED EVENT
------------------------------*/
window.addEventListener("appinstalled", () => {
    console.log("🎉 App installed successfully!");
    const banner = document.getElementById("install-banner");
    if (banner) banner.remove();
});