{% extends "bitcaster/console/base.html" %}
{% load feature_flags i18n static user %}
{% block bodyclass %}
    pwa
{% endblock %}
{% block extrahead %}
    <link rel="manifest" href="{% url 'pwa:manifest' %}" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Bitcaster" />
    <link rel="apple-touch-icon" href="{% static 'bitcaster/images/logos/logo128.png' %}" />
    {#    <link href="{% static "css/console.css" %}" rel="stylesheet" />#}
    <meta name="theme-color" content="{{ PWA_APP_THEME_COLOR|default:"#dc2626" }}" />
    <script>
        let deferredPrompt;

        function checkInstallBanner() {
            const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;

            // If we are IN the app, mark it as installed in localStorage for later browser visits
            if (isStandalone) {
                localStorage.setItem('pwa_is_installed', 'true');
                return;
            }

            // If we are in the browser but we know it's installed, show "Open in App" banner
            if (localStorage.getItem('pwa_is_installed') === 'true') {
                document.getElementById('pwa-open-app-banner').classList.remove('hidden');
                return;
            }

            const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
            const hasDismissed = localStorage.getItem('pwa_install_dismissed');

            if (hasDismissed) return;

            const banner = document.getElementById('pwa-install-banner');

            // On iOS we show it immediately because there is no beforeinstallprompt
            if (isiOS) {
                banner.style.display = 'block';
                const installBtn = banner.querySelector('button[onclick="installPwa()"]');
                installBtn.innerText = '{% trans "How to Install" %}';
                installBtn.onclick = () => alert('{% trans "On iOS, tap the Share icon and then Add to Home Screen" %}');
            } else if (deferredPrompt) {
                // For other platforms, show if we already have the prompt
                banner.style.display = 'block';
            }
        }

        window.addEventListener('beforeinstallprompt', (e) => {
            console.log('beforeinstallprompt event fired');
            // If this event fires, it means the app is NOT installed (or browser thinks so)
            // So we clear our manual flag
            localStorage.removeItem('pwa_is_installed');

            // Prevent the mini-infobar from appearing on mobile
            e.preventDefault();
            // Stash the event so it can be triggered later.
            deferredPrompt = e;

            checkInstallBanner();
        });

        window.addEventListener('appinstalled', (evt) => {
            console.log('PWA was installed');
            localStorage.setItem('pwa_is_installed', 'true');
            document.getElementById('pwa-install-banner').classList.add('hidden');
        });

        // Check on load
        window.addEventListener('load', checkInstallBanner);

        function installPwa() {
            if (!deferredPrompt) {
                console.log('No deferredPrompt available');
                return;
            }
            // Show the install prompt
            deferredPrompt.prompt();
            // Wait for the user to respond to the prompt
            deferredPrompt.userChoice.then((choiceResult) => {
                if (choiceResult.outcome === 'accepted') {
                    console.log('User accepted the install prompt');
                    // Redirect to the success page
                    window.location.href = '{% url "pwa:installed" %}';
                }
                deferredPrompt = null;
                document.getElementById('pwa-install-banner').classList.add('hidden');
            });
        }

        function dismissInstallBanner() {
            sessionStorage.setItem('pwa_install_dismissed', 'true');
            document.getElementById('pwa-install-banner').classList.add('hidden');
        }

        function dismissOpenAppBanner() {
            localStorage.removeItem('pwa_is_installed');
            document.getElementById('pwa-open-app-banner').classList.add('hidden');
        }

        function openInApp() {
            // Try to open the PWA index. In many browsers, if the PWA is installed,
            // this will trigger a prompt or automatically open the standalone app.
            const pwaUrl = '{% url "pwa:index" %}';

            // Method 1: Try to open in a new window, which often triggers the PWA shell
            window.open(pwaUrl, '_blank');

            // Method 2: Also reload current page just in case
            setTimeout(() => {
                window.location.href = pwaUrl;
            }, 500);
        }

        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('{% url "pwa:serviceworker" %}', { scope: '/pwa/' })
                    .then(reg => console.log('SW Registered', reg))
                    .catch(err => console.log('SW Failed', err));
            });
        }
    </script>
{% endblock %}
{% block header %}
    <script>
        function checkPwaMode() {
            const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
        }
    </script>
    <!-- PWA Open App Banner (shown in browser if app is installed) -->
    <div id="pwa-open-app-banner" style="display: none;" class="pwa-banner pwa-open-app">
        <div class="pwa-banner-inner">
            <img src="{% static "bitcaster/images/logos/logo48.png" %}" class="pwa-banner-icon" />
            <div class="pwa-banner-text">
                <h4>
                    Bitcaster
                </h4>
                <p>
                    {% trans "You have the app installed" %}
                </p>
            </div>
            <div class="pwa-banner-actions">
                <button onclick="dismissOpenAppBanner()" class="pwa-btn pwa-btn-secondary">
                    {% trans "Stay here" %}
                </button>
                <button onclick="openInApp()" class="pwa-btn pwa-btn-primary">
                    {% trans "Open App" %}
                </button>
            </div>
        </div>
    </div>
    <!-- PWA Install Banner -->
    <div id="pwa-install-banner" style="display: none;" class="pwa-banner">
        <div class="pwa-banner-inner">
            <img src="{% static "bitcaster/images/logos/logo48.png" %}" class="pwa-banner-icon" />
            <div class="pwa-banner-text">
                <h4>
                    Bitcaster
                </h4>
                <p>
                    {% trans "Install app for a better experience" %}
                </p>
            </div>
            <div class="pwa-banner-actions">
                <button onclick="dismissInstallBanner()" class="pwa-btn pwa-btn-secondary">
                    {% trans "Maybe later" %}
                </button>
                <button onclick="installPwa()" class="pwa-btn pwa-btn-primary">
                    {% trans "Install" %}
                </button>
            </div>
        </div>
    </div>
    {% include "pwa/_header.html" %}
    {#    {% block header %}#}
    {#        <div class="pwa-header">#}
    {#            <h1 class="text-xl font-bold flex items-center gap-2">#}
    {#                <img src="{% static "bitcaster/images/logos/logo48.png" %}" class="h-8 w-8" />#}
    {#                {% block pwa_title %}#}
    {#                    Bitcaster#}
    {#                {% endblock %}#}
    {#            </h1>#}
    {#            <div class="flex items-center gap-2">#}
    {#                <button type="button" x-on:click="adminTheme = (adminTheme === 'dark' ? 'light' : 'dark')" class="pwa-header-btn text-white">#}
    {#                    <span class="material-symbols-outlined text-[24px]" x-show="adminTheme !== 'dark'">light_mode</span>#}
    {#                    <span class="material-symbols-outlined text-[24px]" x-show="adminTheme === 'dark'">dark_mode</span>#}
    {#                </button>#}
    {#            </div>#}
    {#        </div>#}
    {#    {% endblock %}#}
    {#    {% if request.user.is_authenticated %}#}
    {#        {% block bottom_nav %}#}
    {#            <nav class="bottom-nav">#}
    {#                <a href="{% url 'pwa:index' %}" class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}">#}
    {#                    <span class="material-symbols-outlined">mail</span>#}
    {#                    <span>{% trans "Messages" %}</span>#}
    {#                </a>#}
    {#                <a href="{% url 'pwa:prefs' %}" class="{% if request.resolver_match.url_name == 'prefs' %}active{% endif %}">#}
    {#                    <span class="material-symbols-outlined">settings</span>#}
    {#                    <span>{% trans "Settings" %}</span>#}
    {#                </a>#}
    {#                <a href="{% url 'pwa:about' %}" class="{% if request.resolver_match.url_name == 'about' %}active{% endif %}">#}
    {#                    <span class="material-symbols-outlined">info</span>#}
    {#                    <span>{% trans "About" %}</span>#}
    {#                </a>#}
    {#                <a href="{% url 'pwa:logout' %}" class="{% if request.resolver_match.url_name == 'logout' %}active{% endif %}">#}
    {#                    <span class="material-symbols-outlined">logout</span>#}
    {#                    <span>{% trans "Logout" %}</span>#}
    {#                </a>#}
    {#            </nav>#}
    {#        {% endblock %}#}
    {#    {% endif %}#}
{% endblock %}
{% block bc-footer %}
    {% include "pwa/_footer.html" %}
{% endblock %}