@php
    $locale = app()->getLocale();
@endphp

<div class="bottom-nav-root">
    {{-- Bouton "Plus d'information" optionnel --}}
    @isset($bottomInfo)
        <button
            type="button"
            id="more-info-btn"
            class="bottom-nav-info-btn bottom-nav-info-btn--floating"
            style="background: #8d1eff !important;"
            data-scroll-target="{{ $bottomInfo['target'] ?? '#top' }}"
        >
            <div class="bottom-nav-info-arrow">⌃</div>
            <span class="bottom-nav-info-label">
                {{ $bottomInfo['label'] ?? __('More informations') }}
            </span>
        </button>

    @endisset

    {{-- Barre de navigation --}}
    <div class="bottom-nav">
        @foreach($bottomTabs ?? [] as $tab)
            @php
                $isPrimary = ($tab['primary'] ?? false);
                $openDrawer = $tab['drawer'] ?? null; // ex: 'maps' ou 'share'
                $isShareButton = ($openDrawer === 'share');
            @endphp

            <button
                @if(!empty($openDrawer))
                    type="button"
                    data-open-drawer="{{ $openDrawer }}"
                    @if($isShareButton)
                        class="bottom-nav-item js-share-btn {{ $isPrimary ? 'bottom-nav-item--primary' : '' }}"
                    @else
                        class="bottom-nav-item {{ $isPrimary ? 'bottom-nav-item--primary' : '' }}"
                    @endif
                @else
                    type="button"
                    data-nav-link="{{ $tab['href'] ?? '#' }}"
                    class="bottom-nav-item {{ $isPrimary ? 'bottom-nav-item--primary' : '' }}"
                @endif
            >
                @if(!empty($tab['icon']))
                    <img src="{{ asset("assets/icons/$locale/".$tab['icon']) }}"
                         alt=""
                         class="bottom-nav-icon">
                @endif
                <span class="bottom-nav-label">{{ $tab['label'] ?? '' }}</span>
            </button>
        @endforeach
    </div>
</div>

{{-- Backdrop global pour les tiroirs --}}
<div class="nav-backdrop" data-nav-backdrop></div>

{{-- Tiroir "maps" --}}
<div class="nav-drawer" data-nav-drawer="maps">
    <div class="nav-drawer-header">
        <span class="nav-drawer-title">
            {{ __('Rejoindre') }} <span id="join-point-name" class="drawer-subtitle"></span>
        </span>
        <button type="button" class="nav-drawer-close" data-drawer-close>✕</button>
    </div>
    <div class="nav-drawer-body">
        <button type="button" class="nav-drawer-app" data-map-target="apple" data-map-action="apple">
            <img src="{{ asset("assets/icons/$locale/apple-maps.svg") }}" alt="Apple Maps">
            <span>Apple Maps</span>
        </button>
        <button type="button" class="nav-drawer-app" data-map-target="google" data-map-action="google">
            <img src="{{ asset("assets/icons/$locale/google-maps.svg") }}" alt="Google Maps">
            <span>Google Maps</span>
        </button>
        <button type="button" class="nav-drawer-app" data-map-target="uber" data-map-action="uber">
            <img src="{{ asset("assets/icons/$locale/uber.svg") }}" alt="Uber">
            <span>Uber</span>
        </button>
    </div>
</div>



<script>
    document.addEventListener('DOMContentLoaded', () => {

    const backdrop = document.querySelector('[data-nav-backdrop]');
    const drawers  = document.querySelectorAll('[data-nav-drawer]');

    function closeAllDrawers() {
        drawers.forEach(d => d.classList.remove('is-open'));
        backdrop?.classList.remove('is-open');
        document.body.style.overflow = '';
    }

    function openDrawer(name) {
        const drawer = document.querySelector(`[data-nav-drawer="${name}"]`);
        if (!drawer) {
        console.warn('[drawer] not found:', name);
        return;
        }

        // Update point name in drawer titles if ACTIVE_POINT is set
        if (window.ACTIVE_POINT?.name) {
            if (name === 'maps') {
                const joinNameEl = document.getElementById('join-point-name');
                if (joinNameEl) joinNameEl.textContent = '— ' + window.ACTIVE_POINT.name;
            }
        }

        drawer.classList.add('is-open');
        backdrop?.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    }

    // CLICK GLOBAL
    document.addEventListener('click', async (e) => {

        // ----- SHARE BUTTON (native share) -----
        const shareBtn = e.target.closest('.js-share-btn[data-open-drawer="share"]');
        if (shareBtn) {
            e.preventDefault();
            e.stopPropagation();

            if (!window.ACTIVE_POINT) {
                console.warn('[share] No ACTIVE_POINT defined');
                return;
            }

            const p = window.ACTIVE_POINT;
            const shareUrl = p.shareUrl || (window.location.origin + '/{{ app()->getLocale() }}/wp/' + p.token);

            // Use native share if available
            if (navigator.share) {
                const shareData = {
                    title: p.name || '{{ __("Waypoint") }}',
                    text: '{{ __("Voici mon VereeGo, je t\'invite à suivre ce lien...") }}\n' + shareUrl,
                    url: shareUrl,
                };

                try {
                    await navigator.share(shareData);
                    console.log('[share] native share success');
                } catch (err) {
                    if (err.name !== 'AbortError') {
                        console.warn('[share] native share error', err);
                    }
                }
            } else {
                // Fallback: copy to clipboard
                try {
                    await navigator.clipboard.writeText(shareUrl);
                    alert('{{ __("Link copied to clipboard") }}');
                } catch (err) {
                    // Last resort: show the URL
                    prompt('{{ __("Copy this link:") }}', shareUrl);
                }
            }
            return;
        }

        // ----- OPEN DRAWER -----
        const openBtn = e.target.closest('[data-open-drawer]');
        if (openBtn) {
        e.preventDefault();
        openDrawer(openBtn.dataset.openDrawer);
        return;
        }

        // ----- CLOSE DRAWER -----
        if (
        e.target.closest('[data-drawer-close]') ||
        e.target === backdrop
        ) {
        e.preventDefault();
        closeAllDrawers();
        return;
        }

        // ----- NAV LINK -----
        const navBtn = e.target.closest('[data-nav-link]');
        if (navBtn) {
        const href = navBtn.dataset.navLink;
        if (href && href !== '#') {
            window.location.href = href;
        }
        return;
        }

        // ----- MAP APPS -----
        const mapBtn = e.target.closest('[data-map-action]');
        if (mapBtn) {
        e.preventDefault();

        const p = window.ACTIVE_POINT;
        if (!p || !p.lat || !p.lng) {
            alert('Coordonnées manquantes pour ce point.');
            return;
        }

        const lat = p.lat;
        const lng = p.lng;
        const name = encodeURIComponent(p.name || '');

        let url = null;

        switch (mapBtn.dataset.mapAction) {
            case 'apple':
            url = `https://maps.apple.com/?daddr=${lat},${lng}`;
            break;
            case 'google':
            url = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
            break;
            case 'uber':
            url = `https://m.uber.com/ul/?action=setPickup&pickup=my_location&dropoff[latitude]=${lat}&dropoff[longitude]=${lng}&dropoff[nickname]=${name}`;
            break;
        }

        if (url) window.open(url, '_blank', 'noopener');
        }
    });

    // ESC closes
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeAllDrawers();
    });

    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const btn = document.getElementById('more-info-btn');
        if (!btn) return;

        btn.addEventListener('click', () => {
            // Scroll de la moitié de la hauteur de la fenêtre
            const offset = Math.round(window.innerHeight / 2);

            window.scrollBy({
                top: offset,
                behavior: 'smooth'
            });
        });
    });

    // document.addEventListener('click', (e) => {

    //     /* ===========================
    //        OUVERTURE DES TIROIRS
    //     =========================== */
    //     const drawerBtn = e.target.closest('[data-open-drawer]');
    //     if (drawerBtn) {
    //         const name = drawerBtn.dataset.openDrawer;
    //         if (!name) return;

    //         e.preventDefault();

    //         document.querySelector(`[data-nav-drawer="${name}"]`)
    //             ?.classList.add('is-open');

    //         document.querySelector('[data-nav-backdrop]')
    //             ?.classList.add('is-open');

    //         return;
    //     }

    //     /* ===========================
    //        FERMETURE DES TIROIRS
    //     =========================== */
    //     if (
    //         e.target.closest('[data-drawer-close]') ||
    //         e.target.closest('.nav-backdrop')
    //     ) {
    //         document.querySelectorAll('.nav-drawer.is-open')
    //             .forEach(d => d.classList.remove('is-open'));

    //         document.querySelector('[data-nav-backdrop]')
    //             ?.classList.remove('is-open');

    //         return;
    //     }

    //     /* ===========================
    //        SÉLECTION DU POINT ACTIF
    //     =========================== */
    //     const pointBtn = e.target.closest('[data-point]');
    //     if (pointBtn) {
    //         window.ACTIVE_POINT = {
    //             token: pointBtn.dataset.token,
    //             name:  pointBtn.dataset.name || '',
    //             lat:   pointBtn.dataset.lat ? parseFloat(pointBtn.dataset.lat) : null,
    //             lng:   pointBtn.dataset.lng ? parseFloat(pointBtn.dataset.lng) : null,
    //         };

    //         // Nom du point dans Sharing
    //         const nameEl = document.getElementById('share-point-name');
    //         if (nameEl) nameEl.textContent = window.ACTIVE_POINT.name
    //             ? '— ' + window.ACTIVE_POINT.name
    //             : '';

    //         // Token pour le formulaire
    //         const tokenInp = document.getElementById('share-point-token');
    //         if (tokenInp) tokenInp.value = window.ACTIVE_POINT.token;

    //         // URL dynamique du partage
    //         const form = document.getElementById('share-form');
    //         if (form && form.dataset.actionTemplate) {
    //             form.dataset.action =
    //                 form.dataset.actionTemplate.replace('__TOKEN__', window.ACTIVE_POINT.token);
    //         }

    //         console.log('[drawer] Active point:', window.ACTIVE_POINT);
    //         return;
    //     }

    //     /* ===========================
    //        JOIN : MAPS / UBER
    //     =========================== */
    //     const mapBtn = e.target.closest('[data-map-action]');
    //     if (mapBtn) {
    //         e.preventDefault();

    //         const p = window.ACTIVE_POINT;
    //         if (!p || !Number.isFinite(p.lat) || !Number.isFinite(p.lng)) {
    //             alert('Coordonnées manquantes pour ce point.');
    //             return;
    //         }

    //         let url = null;
    //         switch (mapBtn.dataset.mapAction) {
    //             case 'apple':
    //                 url = `https://maps.apple.com/?daddr=${p.lat},${p.lng}`;
    //                 break;
    //             case 'google':
    //                 url = `https://www.google.com/maps/dir/?api=1&destination=${p.lat},${p.lng}`;
    //                 break;
    //             case 'uber':
    //                 url = `https://m.uber.com/ul/?action=setPickup&pickup=my_location&dropoff[latitude]=${p.lat}&dropoff[longitude]=${p.lng}&dropoff[nickname=${encodeURIComponent(p.name)}`;
    //                 break;
    //         }

    //         if (url) window.open(url, '_blank', 'noopener');
    //         return;
    //     }

    // });

    // document.addEventListener('click', (e) => {
    //     const btn = e.target.closest('.bottom-nav-item');
    //     if (!btn) return;

    //     console.log('[bottom-nav] click', btn);
    // });
</script>