<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ app_name }}{% endblock %}</title>

    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Alpine.js pour l'interactivité -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Styles personnalisés -->
    <style>
        [x-cloak] { display: none !important; }

        /* Animation de chargement */
        .loading {
            position: relative;
            pointer-events: none;
        }
        .loading::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Raccourcis clavier */
        kbd {
            display: inline-block;
            padding: 0.2em 0.4em;
            font-size: 0.85em;
            font-weight: 500;
            line-height: 1;
            color: #1f2937;
            background-color: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            box-shadow: inset 0 -1px 0 #d1d5db;
        }

        /* Scrollbar personnalisée */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
    </style>

    {% block head %}{% endblock %}
</head>
<body class="bg-gray-100 min-h-screen">

    {% if is_authenticated %}
    <!-- Navigation principale -->
    <nav class="bg-indigo-600 text-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <!-- Logo et navigation -->
                <div class="flex items-center space-x-8">
                    <a href="/" class="flex items-center space-x-2">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                        <span class="font-bold text-xl">{{ app_name }}</span>
                    </a>

                    <div class="hidden md:flex items-center space-x-4">
                        <a href="/pos" class="px-3 py-2 rounded-md hover:bg-indigo-500 transition
                            {% if app.request.path == '/pos' %}bg-indigo-700{% endif %}">
                            Caisse
                        </a>
                        <a href="/products" class="px-3 py-2 rounded-md hover:bg-indigo-500 transition
                            {% if app.request.path == '/products' %}bg-indigo-700{% endif %}">
                            Produits
                        </a>
                        <a href="/invoices" class="px-3 py-2 rounded-md hover:bg-indigo-500 transition
                            {% if app.request.path == '/invoices' %}bg-indigo-700{% endif %}">
                            Factures
                        </a>
                        <a href="/reports" class="px-3 py-2 rounded-md hover:bg-indigo-500 transition
                            {% if app.request.path == '/reports' %}bg-indigo-700{% endif %}">
                            Rapports
                        </a>
                        {% if user.role in ['super_admin', 'manager'] %}
                        <a href="/settings" class="px-3 py-2 rounded-md hover:bg-indigo-500 transition
                            {% if app.request.path == '/settings' %}bg-indigo-700{% endif %}">
                            Paramètres
                        </a>
                        {% endif %}
                    </div>
                </div>

                <!-- Utilisateur -->
                <div class="flex items-center space-x-4">
                    <span class="text-sm">
                        {{ user.first_name }} {{ user.last_name }}
                    </span>
                    <a href="/logout" class="p-2 rounded-md hover:bg-indigo-500 transition" title="Déconnexion">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    {% endif %}

    <!-- Contenu principal -->
    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    {% if is_authenticated %}
    <footer class="bg-white border-t mt-auto py-4">
        <div class="max-w-7xl mx-auto px-4 text-center text-sm text-gray-500">
            {{ app_name }} v{{ app_version }} - Conforme NF525
        </div>
    </footer>
    {% endif %}

    <!-- Scripts -->
    {% block scripts %}{% endblock %}

    <!-- Gestion des raccourcis clavier globaux -->
    <script>
        document.addEventListener('keydown', function(e) {
            // F2 = Recherche produit
            if (e.key === 'F2') {
                e.preventDefault();
                const searchInput = document.querySelector('[data-search-input]');
                if (searchInput) searchInput.focus();
            }

            // Échap = Fermer les modales
            if (e.key === 'Escape') {
                document.querySelectorAll('[data-modal]').forEach(m => m.classList.add('hidden'));
            }
        });
    </script>
</body>
</html>
