{# Floating navigation for PWA standalone mode #}
<div id="pwa-nav-wrapper" class="pwa-nav-wrapper hidden">
    {# Collapsed toggle button #}
    <button id="pwa-nav-toggle" class="pwa-nav-toggle" onclick="pwaNav.toggleNav()" title="Tap to expand, hold to drag" aria-label="Toggle navigation">
        <i class="bi bi-grip-horizontal"></i>
    </button>

    {# Expanded nav bar #}
    <div id="pwa-nav" class="pwa-nav">
        <button id="pwa-drag-handle" class="pwa-drag-handle" title="Drag to reposition" aria-label="Drag to reposition">
            <i class="bi bi-grip-vertical"></i>
        </button>
        <button id="pwa-back" onclick="pwaNav.goBack()" title="Go to previous page" aria-label="Go to previous page" disabled>
            <i class="bi bi-chevron-left"></i>
        </button>
        <button id="pwa-forward" onclick="pwaNav.goForward()" title="Go to next page" aria-label="Go to next page" disabled>
            <i class="bi bi-chevron-right"></i>
        </button>
        <button onclick="location.reload()" title="Reload this page" aria-label="Reload this page">
            <i class="bi bi-arrow-clockwise"></i>
        </button>
        <button onclick="pwaNav.toggleUrlBar()" title="Show page URL" aria-label="Show page URL">
            <i class="bi bi-link-45deg"></i>
        </button>
        <button onclick="pwaNav.toggleNav()" title="Minimize navigation" aria-label="Minimize navigation" class="pwa-nav-collapse">
            <i class="bi bi-arrows-angle-contract"></i>
        </button>
    </div>
</div>

{# Expandable URL bar #}
<div id="pwa-url-bar" class="pwa-url-bar hidden">
    <div class="pwa-url-bar-content">
        <span id="pwa-url-text" class="pwa-url-text"></span>
        <div class="pwa-url-actions">
            <button onclick="pwaNav.copyUrl()" title="Copy URL to clipboard" aria-label="Copy URL to clipboard">
                <i class="bi bi-copy" id="copy-icon"></i>
            </button>
            <button id="pwa-share-btn" onclick="pwaNav.shareUrl()" title="Share this page" aria-label="Share this page" class="hidden">
                <i class="bi bi-share"></i>
            </button>
        </div>
    </div>
    <button class="pwa-url-close" onclick="pwaNav.toggleUrlBar()" title="Close" aria-label="Close URL bar">
        <i class="bi bi-x"></i>
    </button>
</div>

<style>
    .pwa-nav-wrapper {
        position: fixed;
        z-index: 9999;
        transition: opacity 0.2s;
    }
    .pwa-nav-wrapper.hidden {
        display: none !important;
    }
    /* Only show in standalone mode */
    @media (display-mode: standalone) {
        .pwa-nav-wrapper.hidden {
            display: block !important;
        }
    }

    /* Collapsed toggle button */
    .pwa-nav-toggle {
        width: 50px;
        height: 50px;
        border: none;
        background: rgba(26, 26, 46, 0.95);
        backdrop-filter: blur(10px);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        cursor: grab;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s, background 0.2s;
    }
    .pwa-nav-toggle:hover {
        background: rgba(26, 26, 46, 1);
        transform: scale(1.05);
    }
    .pwa-nav-toggle:active {
        cursor: grabbing;
    }
    .pwa-nav-toggle.hidden {
        display: none;
    }

    /* Expanded nav bar */
    .pwa-nav {
        background: rgba(26, 26, 46, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 50px;
        padding: 8px 12px;
        display: flex;
        gap: 4px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        animation: navExpand 0.2s ease-out;
    }
    @keyframes navExpand {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }
    .pwa-nav.hidden {
        display: none;
    }
    .pwa-nav button {
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        cursor: pointer;
        transition: background 0.2s, opacity 0.2s;
    }
    .pwa-nav button:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.15);
    }
    .pwa-nav button:active:not(:disabled) {
        background: rgba(255, 255, 255, 0.25);
    }
    .pwa-nav button:disabled {
        opacity: 0.3;
        cursor: default;
    }
    .pwa-nav-collapse {
        border-left: 1px solid rgba(255,255,255,0.2) !important;
        margin-left: 4px;
        padding-left: 4px;
    }
    .pwa-drag-handle {
        cursor: grab;
        border-right: 1px solid rgba(255,255,255,0.2) !important;
        margin-right: 4px;
        padding-right: 4px;
    }
    .pwa-drag-handle:active {
        cursor: grabbing;
    }
    .pwa-nav-wrapper.dragging {
        transition: none !important;
    }
    .pwa-nav-wrapper.dragging .pwa-drag-handle {
        background: rgba(255, 255, 255, 0.2);
    }

    /* URL Bar styles */
    .pwa-url-bar {
        position: fixed;
        background: rgba(26, 26, 46, 0.98);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        padding: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        z-index: 9998;
        max-width: calc(100vw - 32px);
        width: 400px;
        animation: fadeIn 0.2s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .pwa-url-bar.hidden {
        display: none !important;
    }
    @media (display-mode: standalone) {
        .pwa-url-bar.visible {
            display: block !important;
        }
    }
    .pwa-url-bar-content {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 8px 12px;
    }
    .pwa-url-text {
        flex: 1;
        color: #e0e0e0;
        font-size: 0.85rem;
        font-family: monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        user-select: all;
    }
    .pwa-url-actions {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
    }
    .pwa-url-actions button {
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.2s;
    }
    .pwa-url-actions button:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    .pwa-url-actions button:active {
        background: rgba(255, 255, 255, 0.3);
    }
    .pwa-url-actions button.hidden {
        display: none;
    }
    .pwa-url-close {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 28px;
        height: 28px;
        border: none;
        background: #374151;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .pwa-url-close:hover {
        background: #4b5563;
    }

    /* Hide PWA nav when printing */
    @media print {
        .pwa-nav-wrapper,
        .pwa-url-bar {
            display: none !important;
        }
    }
</style>

<script>
    const pwaNav = {
        historyStack: [],
        currentIndex: -1,
        isNavigating: false,
        isExpanded: false,
        isDragging: false,
        dragOffset: { x: 0, y: 0 },

        init() {
            // Initialize with current page
            this.historyStack.push(location.href);
            this.currentIndex = 0;

            // Load saved navigation state from sessionStorage
            const saved = sessionStorage.getItem('pwaNavState');
            if (saved) {
                const state = JSON.parse(saved);
                this.historyStack = state.stack;
                this.currentIndex = state.index;
            }

            // Load expanded/collapsed state from localStorage
            this.isExpanded = localStorage.getItem('pwaNavExpanded') === 'true';
            this.applyNavState();

            // Load saved position
            this.loadPosition();

            // Initialize drag functionality
            this.initDrag();

            // Listen for navigation
            window.addEventListener('popstate', () => this.onPopState());

            // Track link clicks and form submissions
            document.addEventListener('click', (e) => {
                const link = e.target.closest('a[href]');
                if (link && link.href && !link.href.startsWith('javascript:') && link.target !== '_blank') {
                    this.onNavigate(link.href);
                }
            });

            this.updateButtons();
            this.showIfStandalone();
        },

        showIfStandalone() {
            const wrapper = document.getElementById('pwa-nav-wrapper');
            if (window.navigator.standalone === true) {
                wrapper.classList.remove('hidden');
            }
        },

        loadPosition() {
            const wrapper = document.getElementById('pwa-nav-wrapper');
            const saved = localStorage.getItem('pwaNavPosition');

            if (saved) {
                const pos = JSON.parse(saved);
                // Validate position is still on screen
                const maxX = window.innerWidth - 60;
                const maxY = window.innerHeight - 60;
                wrapper.style.left = Math.min(Math.max(10, pos.x), maxX) + 'px';
                wrapper.style.top = Math.min(Math.max(10, pos.y), maxY) + 'px';
            } else {
                // Default position: bottom center
                wrapper.style.left = '50%';
                wrapper.style.bottom = '20px';
                wrapper.style.transform = 'translateX(-50%)';
            }
        },

        savePosition() {
            const wrapper = document.getElementById('pwa-nav-wrapper');
            const rect = wrapper.getBoundingClientRect();
            localStorage.setItem('pwaNavPosition', JSON.stringify({
                x: rect.left,
                y: rect.top
            }));
        },

        initDrag() {
            const handle = document.getElementById('pwa-drag-handle');
            const toggle = document.getElementById('pwa-nav-toggle');
            const wrapper = document.getElementById('pwa-nav-wrapper');

            // Drag from handle (expanded state)
            handle.addEventListener('mousedown', (e) => this.startDrag(e));
            handle.addEventListener('touchstart', (e) => this.startDrag(e), { passive: false });

            // Drag from toggle button (collapsed state) - long press
            let longPressTimer;
            const startLongPress = (e) => {
                longPressTimer = setTimeout(() => {
                    this.startDrag(e);
                }, 300);
            };
            const cancelLongPress = () => {
                clearTimeout(longPressTimer);
            };

            toggle.addEventListener('mousedown', startLongPress);
            toggle.addEventListener('touchstart', startLongPress, { passive: true });
            toggle.addEventListener('mouseup', cancelLongPress);
            toggle.addEventListener('mouseleave', cancelLongPress);
            toggle.addEventListener('touchend', cancelLongPress);
            toggle.addEventListener('touchcancel', cancelLongPress);

            // Global move and end handlers
            document.addEventListener('mousemove', (e) => this.onDrag(e));
            document.addEventListener('touchmove', (e) => this.onDrag(e), { passive: false });
            document.addEventListener('mouseup', () => this.endDrag());
            document.addEventListener('touchend', () => this.endDrag());

            // Reposition on window resize
            window.addEventListener('resize', () => this.constrainPosition());
        },

        startDrag(e) {
            e.preventDefault();
            const wrapper = document.getElementById('pwa-nav-wrapper');
            const rect = wrapper.getBoundingClientRect();

            // Clear any transform for proper positioning
            wrapper.style.transform = '';
            wrapper.style.bottom = '';
            wrapper.style.left = rect.left + 'px';
            wrapper.style.top = rect.top + 'px';

            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            const clientY = e.touches ? e.touches[0].clientY : e.clientY;

            this.dragOffset.x = clientX - rect.left;
            this.dragOffset.y = clientY - rect.top;
            this.isDragging = true;
            wrapper.classList.add('dragging');
        },

        onDrag(e) {
            if (!this.isDragging) return;
            e.preventDefault();

            const wrapper = document.getElementById('pwa-nav-wrapper');
            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            const clientY = e.touches ? e.touches[0].clientY : e.clientY;

            let newX = clientX - this.dragOffset.x;
            let newY = clientY - this.dragOffset.y;

            // Constrain to viewport
            const rect = wrapper.getBoundingClientRect();
            const maxX = window.innerWidth - rect.width;
            const maxY = window.innerHeight - rect.height;

            newX = Math.max(0, Math.min(newX, maxX));
            newY = Math.max(0, Math.min(newY, maxY));

            wrapper.style.left = newX + 'px';
            wrapper.style.top = newY + 'px';
        },

        endDrag() {
            if (!this.isDragging) return;
            this.isDragging = false;

            const wrapper = document.getElementById('pwa-nav-wrapper');
            wrapper.classList.remove('dragging');
            this.savePosition();
        },

        constrainPosition() {
            const wrapper = document.getElementById('pwa-nav-wrapper');
            const rect = wrapper.getBoundingClientRect();
            const maxX = window.innerWidth - rect.width;
            const maxY = window.innerHeight - rect.height;

            if (rect.left > maxX) wrapper.style.left = maxX + 'px';
            if (rect.top > maxY) wrapper.style.top = maxY + 'px';
        },

        applyNavState() {
            const toggle = document.getElementById('pwa-nav-toggle');
            const nav = document.getElementById('pwa-nav');

            if (this.isExpanded) {
                toggle.classList.add('hidden');
                nav.classList.remove('hidden');
            } else {
                toggle.classList.remove('hidden');
                nav.classList.add('hidden');
            }
        },

        toggleNav() {
            this.isExpanded = !this.isExpanded;
            localStorage.setItem('pwaNavExpanded', this.isExpanded);
            this.applyNavState();

            // Close URL bar when collapsing
            if (!this.isExpanded) {
                const urlBar = document.getElementById('pwa-url-bar');
                if (urlBar.classList.contains('visible')) {
                    urlBar.classList.remove('visible');
                    urlBar.classList.add('hidden');
                }
            }

            // Constrain after toggle in case size changed
            setTimeout(() => this.constrainPosition(), 50);
        },

        saveState() {
            sessionStorage.setItem('pwaNavState', JSON.stringify({
                stack: this.historyStack,
                index: this.currentIndex
            }));
        },

        onNavigate(url) {
            if (this.isNavigating) return;

            // Remove any forward history
            this.historyStack = this.historyStack.slice(0, this.currentIndex + 1);
            this.historyStack.push(url);
            this.currentIndex = this.historyStack.length - 1;
            this.saveState();
        },

        onPopState() {
            if (this.isNavigating) {
                this.isNavigating = false;
                this.updateButtons();
                return;
            }

            // Try to find current URL in stack
            const currentUrl = location.href;
            const idx = this.historyStack.indexOf(currentUrl);
            if (idx !== -1) {
                this.currentIndex = idx;
            }
            this.saveState();
            this.updateButtons();
        },

        updateButtons() {
            const backBtn = document.getElementById('pwa-back');
            const fwdBtn = document.getElementById('pwa-forward');

            backBtn.disabled = this.currentIndex <= 0;
            fwdBtn.disabled = this.currentIndex >= this.historyStack.length - 1;
        },

        goBack() {
            if (this.currentIndex > 0) {
                this.isNavigating = true;
                this.currentIndex--;
                this.saveState();
                history.back();
            }
        },

        goForward() {
            if (this.currentIndex < this.historyStack.length - 1) {
                this.isNavigating = true;
                this.currentIndex++;
                this.saveState();
                history.forward();
            }
        },

        copyUrl() {
            const icon = document.getElementById('copy-icon');
            navigator.clipboard.writeText(window.location.href).then(() => {
                icon.className = 'bi bi-check-lg';
                setTimeout(() => {
                    icon.className = 'bi bi-copy';
                }, 1500);
            });
        },

        toggleUrlBar() {
            const urlBar = document.getElementById('pwa-url-bar');
            const urlText = document.getElementById('pwa-url-text');
            const shareBtn = document.getElementById('pwa-share-btn');
            const wrapper = document.getElementById('pwa-nav-wrapper');

            if (urlBar.classList.contains('visible')) {
                urlBar.classList.remove('visible');
                urlBar.classList.add('hidden');
            } else {
                // Update URL text
                urlText.textContent = window.location.href;

                // Show share button only if Web Share API is available
                if (navigator.share) {
                    shareBtn.classList.remove('hidden');
                }

                // Position URL bar near the nav
                const wrapperRect = wrapper.getBoundingClientRect();
                const urlBarWidth = 400;
                const padding = 16;

                // Position above or below nav depending on space
                const spaceAbove = wrapperRect.top;
                const spaceBelow = window.innerHeight - wrapperRect.bottom;

                if (spaceAbove > 80 || spaceAbove > spaceBelow) {
                    // Position above
                    urlBar.style.bottom = (window.innerHeight - wrapperRect.top + 10) + 'px';
                    urlBar.style.top = '';
                } else {
                    // Position below
                    urlBar.style.top = (wrapperRect.bottom + 10) + 'px';
                    urlBar.style.bottom = '';
                }

                // Horizontal centering with bounds
                let leftPos = wrapperRect.left + (wrapperRect.width / 2) - (urlBarWidth / 2);
                leftPos = Math.max(padding, Math.min(leftPos, window.innerWidth - urlBarWidth - padding));
                urlBar.style.left = leftPos + 'px';

                urlBar.classList.remove('hidden');
                urlBar.classList.add('visible');
            }
        },

        shareUrl() {
            if (navigator.share) {
                navigator.share({
                    title: document.title,
                    url: window.location.href
                }).catch(() => {
                    // User cancelled or share failed silently
                });
            }
        }
    };

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => pwaNav.init());
    } else {
        pwaNav.init();
    }

    // Close URL bar when clicking outside
    document.addEventListener('click', (e) => {
        const urlBar = document.getElementById('pwa-url-bar');
        const nav = document.getElementById('pwa-nav');
        if (urlBar && urlBar.classList.contains('visible')) {
            if (!urlBar.contains(e.target) && !nav.contains(e.target)) {
                pwaNav.toggleUrlBar();
            }
        }
    });
</script>