@php
    $previewDeviceKey = request('device', 'iphone-16');
    $deviceDefinitions = [
        'iphone-se'         => ['name' => 'iPhone SE', 'width' => 320],
        'iphone-15'         => ['name' => 'iPhone 15', 'width' => 393],
        'iphone-15-pro-max' => ['name' => 'iPhone 15 Pro Max', 'width' => 430],
        'iphone-16'         => ['name' => 'iPhone 16', 'width' => 393],
        'samsung-s23-ultra' => ['name' => 'S23 Ultra', 'width' => 412],
        'pixel-7'           => ['name' => 'Pixel 7', 'width' => 412],
        'tablet-ipad'       => ['name' => 'Tablette', 'width' => 768],
        'desktop-full'      => ['name' => 'Desktop', 'width' => 720],
    ];

    // Le mobile actif est celui qui provient de l'éditeur
    $activeMobileConfig = $deviceDefinitions[$previewDeviceKey] ?? $deviceDefinitions['iphone-16'];
    // Si l'utilisateur avait sélectionné tablette ou desktop dans l'éditeur, on garde cette valeur
    $isTabletOrDesktop = in_array($previewDeviceKey, ['tablet-ipad', 'desktop-full']);
    $mobileWidth = $isTabletOrDesktop ? 393 : $activeMobileConfig['width'];
    $mobileName  = $isTabletOrDesktop ? 'Mobile (393px)' : $activeMobileConfig['name'] . ' (' . $activeMobileConfig['width'] . 'px)';
@endphp

<div id="wp-preview-bar" class="wp-preview-bar">
    <div class="wp-preview-bar-inner">
        {{-- Badge gauche --}}
        <div class="wp-preview-badge">
            <span class="wp-preview-dot"></span>
            <span>Aperçu</span>
        </div>

        {{-- Groupe segmenté des 3 boutons rapides --}}
        <div class="wp-preview-modes" role="group" aria-label="Tailles d'écran">
            <button type="button"
                    class="wp-preview-btn @if(!$isTabletOrDesktop) active @endif"
                    data-width="{{ $mobileWidth }}"
                    id="wp-btn-mobile"
                    title="Vue mobile venant de l'éditeur">
                <i class="fas fa-mobile-alt"></i>
                <span>{{ $mobileName }}</span>
            </button>
            <button type="button"
                    class="wp-preview-btn @if($previewDeviceKey === 'tablet-ipad') active @endif"
                    data-width="768"
                    id="wp-btn-tablet"
                    title="Vue tablette intermédiaire (768px)">
                <i class="fas fa-tablet-alt"></i>
                <span>Tablette (768px)</span>
            </button>
            <button type="button"
                    class="wp-preview-btn @if($previewDeviceKey === 'desktop-full') active @endif"
                    data-width="720"
                    id="wp-btn-desktop"
                    title="Vue desktop standard (720px)">
                <i class="fas fa-desktop"></i>
                <span>Desktop (720px)</span>
            </button>
        </div>

        {{-- Actions droite : Masquer la barre --}}
        <div class="wp-preview-actions">
            <button type="button"
                    class="wp-preview-link wp-preview-hide-btn"
                    id="wp-btn-hide-bar"
                    title="Masquer la barre d'outils">
                <i class="fas fa-eye-slash"></i>
                <span style="font-size: 11px;">Masquer</span>
            </button>
        </div>
    </div>
</div>

{{-- Bouton flottant pour ré-afficher la barre si elle a été masquée --}}
<button type="button"
        id="wp-btn-restore-bar"
        class="wp-preview-restore-pill"
        style="display: none;"
        title="Ré-afficher la barre d'aperçu">
    <i class="fas fa-sliders-h"></i>
    <span>Aperçu</span>
</button>

<style>
/* Style épuré et autonome pour la barre d'aperçu */
.wp-preview-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 6px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.wp-preview-bar.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.wp-preview-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wp-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fb923c;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.3);
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
}

.wp-preview-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 6px #f97316;
}

.wp-preview-modes {
    display: inline-flex;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.wp-preview-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.wp-preview-btn:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.06);
}

.wp-preview-btn.active {
    background: #f97316;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.wp-preview-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.wp-preview-link {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wp-preview-link:hover {
    background: rgba(51, 65, 85, 0.9);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.wp-preview-restore-pill {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999999;
    background: rgba(15, 23, 42, 0.9);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wp-preview-restore-pill:hover {
    background: #0f172a;
    border-color: #f97316;
    transform: translateY(-1px);
}
</style>

<script>
(function() {
    function initPreviewBar() {
        const bar = document.getElementById('wp-preview-bar');
        const restoreBtn = document.getElementById('wp-btn-restore-bar');
        const hideBtn = document.getElementById('wp-btn-hide-bar');
        const modeButtons = document.querySelectorAll('.wp-preview-btn');

        modeButtons.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const targetWidth = this.getAttribute('data-width');
                const gjsContent = document.getElementById('gjs-content');
                if (!targetWidth || !gjsContent) return;

                modeButtons.forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                // Applique la largeur dynamiquement avec transition fluide
                gjsContent.style.setProperty('max-width', targetWidth + 'px', 'important');
                gjsContent.style.setProperty('width', '100%', 'important');
                gjsContent.style.setProperty('margin-left', 'auto', 'important');
                gjsContent.style.setProperty('margin-right', 'auto', 'important');
            });
        });

        // Masquer la barre
        hideBtn?.addEventListener('click', function(e) {
            e.preventDefault();
            bar?.classList.add('is-hidden');
            if (restoreBtn) restoreBtn.style.display = 'inline-flex';
        });

        // Restaurer la barre
        restoreBtn?.addEventListener('click', function(e) {
            e.preventDefault();
            bar?.classList.remove('is-hidden');
            this.style.display = 'none';
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initPreviewBar);
    } else {
        initPreviewBar();
    }
})();
</script>