Sindbad~EG File Manager

// PWA Install Prompt Handler
let deferredPrompt;
let installButton;

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    // Check if already installed
    if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
        console.log('PWA is already installed');
        hideInstallPromotion();
        return;
    }
    
    // Listen for install prompt
    window.addEventListener('beforeinstallprompt', (e) => {
        console.log('Install prompt ready');
        
        // Prevent the mini-infobar from appearing on mobile
        e.preventDefault();
        
        // Save the event for later use
        deferredPrompt = e;
        
        // Show install button/banner
        showInstallPromotion();
    });
    
    // Listen for successful installation
    window.addEventListener('appinstalled', (e) => {
        console.log('PWA installed successfully');
        
        // Hide install promotion
        hideInstallPromotion();
        
        // Show thank you message
        showInstallSuccess();
        
        // Clear the deferredPrompt
        deferredPrompt = null;
        
        // Track installation (optional - add your analytics here)
        trackInstallation();
    });
});

// Show install promotion
function showInstallPromotion() {
    // Show floating install button
    const installBtn = document.getElementById('pwa-install-btn');
    if (installBtn) {
        installBtn.style.display = 'flex';
        installBtn.classList.add('animate-bounce');
        
        // Remove bounce after 3 seconds
        setTimeout(() => {
            installBtn.classList.remove('animate-bounce');
        }, 3000);
    }
    
    // Show install banner (if exists)
    const installBanner = document.getElementById('pwa-install-banner');
    if (installBanner) {
        installBanner.style.display = 'block';
    }
}

// Hide install promotion
function hideInstallPromotion() {
    const installBtn = document.getElementById('pwa-install-btn');
    if (installBtn) {
        installBtn.style.display = 'none';
    }
    
    const installBanner = document.getElementById('pwa-install-banner');
    if (installBanner) {
        installBanner.style.display = 'none';
    }
}

// Handle install button click
async function installPWA() {
    if (!deferredPrompt) {
        console.log('Install prompt not available');
        return;
    }
    
    // Show the install prompt
    deferredPrompt.prompt();
    
    // Wait for the user to respond to the prompt
    const { outcome } = await deferredPrompt.userChoice;
    
    console.log(`User response to install prompt: ${outcome}`);
    
    if (outcome === 'accepted') {
        console.log('User accepted the install prompt');
    } else {
        console.log('User dismissed the install prompt');
        
        // Track dismissal (optional)
        trackInstallDismissal();
    }
    
    // Clear the deferredPrompt for next time
    deferredPrompt = null;
}

// Dismiss install banner
function dismissInstallBanner() {
    const installBanner = document.getElementById('pwa-install-banner');
    if (installBanner) {
        installBanner.style.display = 'none';
        
        // Set cookie to remember dismissal for 7 days
        document.cookie = "pwa_install_dismissed=true; max-age=" + (7 * 24 * 60 * 60) + "; path=/";
    }
}

// Show success message after installation
function showInstallSuccess() {
    // Create success notification
    const successDiv = document.createElement('div');
    successDiv.className = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-4 rounded-lg shadow-lg z-50 animate-slide-in';
    successDiv.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-check-circle text-2xl mr-3"></i>
            <div>
                <p class="font-bold">App Installed!</p>
                <p class="text-sm">You can now use the app from your home screen</p>
            </div>
        </div>
    `;
    
    document.body.appendChild(successDiv);
    
    // Remove after 5 seconds
    setTimeout(() => {
        successDiv.remove();
    }, 5000);
}

// Check if user dismissed banner
function isInstallBannerDismissed() {
    return document.cookie.includes('pwa_install_dismissed=true');
}

// Track installation (add your analytics code here)
function trackInstallation() {
    console.log('PWA Installation tracked');
    
    // Example: Send to analytics
    // if (typeof gtag !== 'undefined') {
    //     gtag('event', 'pwa_install', {
    //         'event_category': 'PWA',
    //         'event_label': 'Installation'
    //     });
    // }
}

// Track install dismissal
function trackInstallDismissal() {
    console.log('PWA Installation dismissed');
    
    // Example: Send to analytics
    // if (typeof gtag !== 'undefined') {
    //     gtag('event', 'pwa_install_dismissed', {
    //         'event_category': 'PWA',
    //         'event_label': 'Dismissal'
    //     });
    // }
}

// Check for PWA update
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.addEventListener('controllerchange', () => {
        // Service worker updated
        showUpdateNotification();
    });
}

// Show update notification
function showUpdateNotification() {
    const updateDiv = document.createElement('div');
    updateDiv.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white px-6 py-4 rounded-lg shadow-lg z-50';
    updateDiv.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-sync-alt text-xl mr-3"></i>
            <div class="mr-4">
                <p class="font-bold">Update Available!</p>
                <p class="text-sm">A new version is ready</p>
            </div>
            <button onclick="window.location.reload()" class="bg-white text-blue-500 px-4 py-2 rounded font-semibold hover:bg-gray-100">
                Reload
            </button>
        </div>
    `;
    
    document.body.appendChild(updateDiv);
}

// iOS Install Instructions
function showIOSInstructions() {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const isInStandaloneMode = ('standalone' in window.navigator) && (window.navigator.standalone);
    
    if (isIOS && !isInStandaloneMode) {
        const iosDiv = document.createElement('div');
        iosDiv.id = 'ios-install-instructions';
        iosDiv.className = 'fixed bottom-0 left-0 right-0 bg-white border-t-2 border-blue-500 p-6 shadow-2xl z-50';
        iosDiv.innerHTML = `
            <div class="max-w-md mx-auto">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-bold text-gray-800">Install App</h3>
                    <button onclick="document.getElementById('ios-install-instructions').remove()" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                <div class="space-y-3 text-sm text-gray-700">
                    <p>To install this app on your iPhone/iPad:</p>
                    <ol class="list-decimal ml-5 space-y-2">
                        <li>Tap the <i class="fas fa-share text-blue-500"></i> Share button in Safari</li>
                        <li>Scroll down and tap "Add to Home Screen" <i class="fas fa-plus-square text-green-500"></i></li>
                        <li>Tap "Add" to confirm</li>
                    </ol>
                </div>
            </div>
        `;
        
        document.body.appendChild(iosDiv);
        
        // Auto-dismiss after 30 seconds
        setTimeout(() => {
            const elem = document.getElementById('ios-install-instructions');
            if (elem) elem.remove();
        }, 30000);
    }
}

// Show iOS instructions on page load for iOS users
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    // Wait a bit before showing instructions
    setTimeout(showIOSInstructions, 2000);
}