{% extends 'base.html.twig' %}

{% block title %}Paramétrage - App Hub BI{% endblock %}

{% macro th(label, right) %}
    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider {{ right ? 'text-right' : 'text-left' }}">{{ label }}</th>
{% endmacro %}

{% block layout %}
{% import _self as t %}
<div class="min-h-screen bg-qlik-bg flex">
    {{ include('_sidebar.html.twig') }}
    <main class="flex-1 ml-64 min-h-screen overflow-y-auto">
        <div class="p-8">
            <div class="mb-8">
                <h1 class="text-2xl font-bold text-gray-900 mb-1">Paramétrage</h1>
                <p class="text-gray-500 text-sm">Administration de la plateforme</p>
            </div>

            {% for type in ['success', 'error'] %}
                {% for msg in app.flashes(type) %}
                    <div class="mb-4 flex items-center gap-3 px-4 py-3 rounded-xl border text-sm font-medium {{ type == 'success' ? 'bg-white border-green-200 text-green-700' : 'bg-white border-red-200 text-red-600' }}">{{ msg }}</div>
                {% endfor %}
            {% endfor %}

            {% set tabs = {'spaces': 'Espaces', 'apps': 'Applications', 'metiers': 'Métiers', 'users': 'Utilisateurs', 'access': 'Accès', 'audit': "Journaux d'audit", 'settings': 'Stockage'} %}
            <div class="flex flex-wrap gap-1 mb-6 bg-white rounded-xl p-1 border border-gray-100 shadow-sm w-fit">
                {% for key, label in tabs %}{% if key in allowedTabs %}
                    <a href="{{ path('app_admin', {tab: key}) }}"
                       class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all {{ tab == key ? 'bg-qlik-blue text-white shadow-sm' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50' }}">{{ label }}</a>
                {% endif %}{% endfor %}
            </div>

            {# ----------------------------------------------------------- Espaces #}
            {% if tab == 'spaces' %}
            <div class="space-y-6">
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">Créer un espace</h2>
                    <form id="space-create-form" method="post" action="{{ path('app_admin_space_create') }}" class="flex gap-3">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                        <input type="text" name="name" required placeholder="Nom de l'espace" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent">
                        <button type="submit" class="px-5 py-2.5 bg-qlik-blue text-white text-sm font-medium rounded-xl hover:bg-qlik-blue-dark transition-all">Créer</button>
                    </form>
                    <p class="mt-2 text-xs text-gray-400">À la création, le dossier de l'espace est créé dans le stockage.</p>
                </div>
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-50"><h2 class="text-base font-semibold text-gray-900">Espaces ({{ spaces|length }})</h2></div>
                    {% if spaces is empty %}
                        <div class="px-6 py-10 text-center text-sm text-gray-400">Aucun espace créé</div>
                    {% else %}
                        <table class="w-full">
                            <thead class="bg-gray-50 border-b border-gray-100"><tr>{{ t.th('Nom') }}{{ t.th('Créateurs assignés') }}{{ t.th('Créé le') }}{{ t.th('Actions', true) }}</tr></thead>
                            <tbody class="divide-y divide-gray-50">
                                {% for space in spaces %}
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4">
                                        <span class="text-sm font-medium text-gray-900">{{ space.name }}</span>
                                        <details class="mt-1">
                                            <summary class="text-xs text-gray-400 cursor-pointer hover:text-qlik-blue">renommer</summary>
                                            <form method="post" action="{{ path('app_admin_space_rename') }}" class="flex gap-2 mt-2">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                                                <input type="hidden" name="id" value="{{ space.id }}">
                                                <input type="text" name="name" value="{{ space.name }}" class="px-3 py-1.5 border border-qlik-blue rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue/20">
                                                <button class="px-3 py-1.5 bg-qlik-blue text-white text-xs rounded-lg hover:bg-qlik-blue-dark">OK</button>
                                            </form>
                                        </details>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex flex-wrap items-center gap-1.5 mb-2">
                                            {% for c in space.creators %}
                                                <span class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-blue-50 text-qlik-blue">
                                                    {{ c.email }}
                                                    <form method="post" action="{{ path('app_admin_space_unassign') }}" class="inline" onsubmit="return confirm('Retirer {{ c.email|e('js') }} de cet espace ?')">
                                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="id" value="{{ space.id }}"><input type="hidden" name="email" value="{{ c.email }}">
                                                        <button class="text-qlik-blue/60 hover:text-red-600" title="Retirer">&times;</button>
                                                    </form>
                                                </span>
                                            {% else %}
                                                <span class="text-xs text-gray-400">Aucun</span>
                                            {% endfor %}
                                        </div>
                                        <form method="post" action="{{ path('app_admin_space_assign') }}" class="flex gap-1.5">
                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="id" value="{{ space.id }}">
                                            <input type="email" name="email" required placeholder="prenom.nom@emilfrey.fr" class="flex-1 min-w-[180px] px-2.5 py-1 border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-qlik-blue">
                                            <button class="px-2.5 py-1 text-xs font-medium text-qlik-blue border border-qlik-blue rounded-lg hover:bg-blue-50">Assigner</button>
                                        </form>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500">{{ space.createdAt|date('d/m/Y') }}</td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center justify-end gap-2">
                                            <a href="{{ path('app_admin_space_export', {id: space.id}) }}" class="p-2 text-gray-400 hover:text-qlik-blue hover:bg-blue-50 rounded-lg transition-all" title="Exporter en ZIP">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                                            </a>
                                            <form method="post" action="{{ path('app_admin_space_delete') }}" onsubmit="return confirm('Supprimer l\'espace « {{ space.name|e('js') }} » et toutes ses applications ?')">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                                                <input type="hidden" name="id" value="{{ space.id }}">
                                                <button class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all" title="Supprimer">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {# ------------------------------------------------------- Applications #}
            {% if tab == 'apps' %}
            <div class="space-y-6">
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">Ajouter une application</h2>
                    {% if not s3.configured %}
                        <div class="rounded-lg bg-amber-50 border border-amber-100 px-3.5 py-2.5 text-xs text-amber-800 mb-4">⚠️ Stockage non configuré (onglet <strong>Stockage</strong>) — à renseigner avant d'ajouter une application.</div>
                    {% endif %}
                    <form method="post" action="{{ path('app_admin_app_s3') }}" enctype="multipart/form-data" class="space-y-4" id="s3-add-form">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Espace *</label>
                                <select name="spaceId" id="s3a-space" required class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent bg-white">
                                    <option value="">Sélectionner un espace</option>
                                    {% for s in spaces %}<option value="{{ s.id }}" data-name="{{ s.name }}">{{ s.name }}</option>{% endfor %}
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Nom de l'application *</label>
                                <input type="text" name="name" id="s3a-name" required placeholder="APP_TEST" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Fichier HTML</label>
                                <input type="file" id="s3a-upload" accept=".html,.htm" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-600 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-qlik-blue file:text-white hover:file:bg-qlik-blue-dark file:cursor-pointer">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Nom du fichier *</label>
                                <input type="text" name="filename" id="s3a-file" required placeholder="d.html" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Miniature (optionnel)</label>
                            <input type="file" name="thumbnailFile" accept="image/*" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-600 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-gray-100 file:text-gray-600 hover:file:bg-gray-200 file:cursor-pointer">
                        </div>
                        {% if metiers is not empty %}
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Métiers ayant accès (optionnel)</label>
                            <div class="flex flex-wrap gap-x-4 gap-y-1.5">
                                {% for m in metiers %}<label class="inline-flex items-center gap-1.5 text-sm text-gray-700"><input type="checkbox" name="metierIds[]" value="{{ m.id }}"> {{ m.name }}</label>{% endfor %}
                            </div>
                        </div>
                        {% endif %}
                        <p class="text-xs text-gray-500">Emplacement : <span id="s3a-preview" class="font-mono text-gray-700 break-all">—</span></p>
                        <p id="s3a-status" class="text-xs hidden"></p>
                        <button type="submit" id="s3a-submit" class="px-5 py-2.5 bg-qlik-blue text-white text-sm font-medium rounded-xl hover:bg-qlik-blue-dark transition-all disabled:opacity-50" {{ s3.configured ? '' : 'disabled' }}>Ajouter l'application</button>
                    </form>
                </div>
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm">
                    <div class="px-6 py-4 border-b border-gray-50"><h2 class="text-base font-semibold text-gray-900">Applications ({{ apps|length }})</h2></div>
                    {% if apps is empty %}
                        <div class="px-6 py-10 text-center text-sm text-gray-400">Aucune application</div>
                    {% else %}
                        <table class="w-full">
                            <thead class="bg-gray-50 border-b border-gray-100"><tr>{{ t.th('Nom') }}{{ t.th('Espace') }}{{ t.th('Source') }}{{ t.th('Miniature') }}{{ t.th('Actions', true) }}</tr></thead>
                            <tbody class="divide-y divide-gray-50">
                                {% for app in apps %}
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ app.name }}</td>
                                    <td class="px-6 py-4"><span class="inline-block text-xs px-2.5 py-0.5 rounded-full font-medium bg-blue-50 text-qlik-blue">{{ app.space.name }}</span></td>
                                    <td class="px-6 py-4 text-xs text-gray-500 font-mono max-w-xs truncate">
                                        {% if app.appType == 's3' %}
                                            {{ app.url }}
                                        {% elseif app.appType in ['url', 'iframe'] %}
                                            <span class="inline-block text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-50 text-purple-700 mr-1 align-middle">{{ app.appType == 'iframe' ? 'Intégré' : 'Lien' }}</span><a href="{{ app.url }}" target="_blank" rel="noopener noreferrer" class="hover:text-qlik-blue">{{ app.url }}</a>
                                        {% else %}
                                            {{ app.htmlFilename ?: '—' }}
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4">
                                        {% if app.thumbnailFilename %}<span class="inline-block text-xs px-2.5 py-0.5 rounded-full font-medium bg-green-50 text-green-700">Oui</span>{% else %}<span class="inline-block text-xs px-2.5 py-0.5 rounded-full font-medium bg-gray-100 text-gray-600">Non</span>{% endif %}
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center justify-end gap-2">
                                            <details class="relative">
                                                <summary class="list-none cursor-pointer p-2 text-gray-400 hover:text-qlik-blue hover:bg-blue-50 rounded-lg transition-all" title="Modifier (paramètres &amp; source)">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                                                </summary>
                                                <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4" onclick="if(event.target===this)this.closest('details').removeAttribute('open')">
                                                  <div class="w-96 max-w-[92vw] bg-white border border-gray-200 rounded-xl shadow-2xl p-4 text-left max-h-[85vh] overflow-y-auto">
                                                    <div class="flex items-center justify-between mb-3">
                                                        <p class="text-sm font-semibold text-gray-800">Modifier l'application</p>
                                                        <button type="button" class="text-gray-400 hover:text-gray-700 text-xl leading-none px-1" onclick="this.closest('details').removeAttribute('open')" title="Fermer">&times;</button>
                                                    </div>
                                                    <form method="post" action="{{ path('app_admin_app_edit') }}" enctype="multipart/form-data" class="space-y-2.5">
                                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                                                        <input type="hidden" name="id" value="{{ app.id }}">
                                                        <div>
                                                            <label class="block text-[11px] font-medium text-gray-500 mb-1">Nom</label>
                                                            <input type="text" name="name" required value="{{ app.name }}" class="w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:ring-2 focus:ring-qlik-blue">
                                                        </div>
                                                        <div>
                                                            <label class="block text-[11px] font-medium text-gray-500 mb-1">Espace</label>
                                                            <select name="spaceId" class="w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs bg-white focus:outline-none focus:ring-2 focus:ring-qlik-blue">
                                                                {% for s in spaces %}<option value="{{ s.id }}" {{ s.id == app.space.id ? 'selected' : '' }}>{{ s.name }}</option>{% endfor %}
                                                            </select>
                                                        </div>
                                                        <div>
                                                            <label class="block text-[11px] font-medium text-gray-500 mb-1">Nom du fichier HTML</label>
                                                            <input type="text" name="filename" required value="{{ app.appType == 's3' and app.url ? app.url|split('/')|last : '' }}" class="w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:ring-2 focus:ring-qlik-blue">
                                                        </div>
                                                        <div>
                                                            <label class="block text-[11px] font-medium text-gray-500 mb-1">Miniature</label>
                                                            <input type="file" name="thumbnailFile" accept="image/*" class="w-full text-[11px] text-gray-600">
                                                            {% if app.thumbnailFilename %}<label class="mt-1 flex items-center gap-1.5 text-[11px] text-gray-600"><input type="checkbox" name="removeThumbnail" value="1"> Supprimer la miniature actuelle</label>{% endif %}
                                                        </div>
                                                        {% if metiers is not empty %}
                                                        {% set appMetierIds = app.metiers|map(m => m.id) %}
                                                        <div>
                                                            <label class="block text-[11px] font-medium text-gray-500 mb-1">Métiers ayant accès</label>
                                                            <div class="flex flex-col gap-1 max-h-32 overflow-y-auto">
                                                                {% for m in metiers %}<label class="inline-flex items-center gap-1.5 text-xs text-gray-700"><input type="checkbox" name="metierIds[]" value="{{ m.id }}" {{ m.id in appMetierIds ? 'checked' : '' }}> {{ m.name }}</label>{% endfor %}
                                                            </div>
                                                        </div>
                                                        {% endif %}
                                                        <button type="submit" class="w-full px-3 py-1.5 bg-qlik-blue text-white text-xs font-medium rounded-lg hover:bg-qlik-blue-dark transition-all">Enregistrer</button>
                                                    </form>
                                                  </div>
                                                </div>
                                            </details>
                                            {% if app.appType == 'html' %}
                                            <details class="relative">
                                                <summary class="list-none cursor-pointer p-2 text-gray-400 hover:text-qlik-blue hover:bg-blue-50 rounded-lg transition-all" title="Remplacer le fichier">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
                                                </summary>
                                                <div class="absolute right-0 mt-1 z-20 w-72 bg-white border border-gray-200 rounded-xl shadow-lg p-3 text-left">
                                                    <form class="replace-form space-y-2" data-id="{{ app.id }}">
                                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                                                        <p class="text-xs font-medium text-gray-700">Remplacer le contenu HTML</p>
                                                        <div class="flex gap-1">
                                                            <button type="button" data-rmode="file" class="rmode px-2 py-1 text-xs rounded border bg-qlik-blue text-white border-qlik-blue">Fichier</button>
                                                            <button type="button" data-rmode="folder" class="rmode px-2 py-1 text-xs rounded border bg-white text-gray-600 border-gray-200">Dossier</button>
                                                        </div>
                                                        <input type="file" class="rfile w-full text-xs text-gray-600" accept=".html,.htm">
                                                        <input type="file" class="rfolder hidden w-full text-xs text-gray-600" webkitdirectory directory multiple>
                                                        <button type="submit" class="w-full px-3 py-1.5 bg-qlik-blue text-white text-xs font-medium rounded-lg hover:bg-qlik-blue-dark transition-all">Remplacer</button>
                                                    </form>
                                                </div>
                                            </details>
                                            {% endif %}
                                            <form method="post" action="{{ path('app_admin_app_delete') }}" onsubmit="return confirm('Supprimer l\'application « {{ app.name|e('js') }} » ?')">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="id" value="{{ app.id }}">
                                                <button class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all" title="Supprimer">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {# ------------------------------------------------------------ Métiers #}
            {% if tab == 'metiers' %}
            <div class="space-y-6">
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">Importer des métiers</h2>
                    <p class="text-sm text-gray-500 mb-3">Fichier <strong>CSV</strong> ou <strong>Excel (.xlsx)</strong> — une ligne = un métier et un email. Le métier est créé s'il n'existe pas, l'utilisateur (Lecteur) aussi, et le métier lui est affecté.</p>
                    <form method="post" action="{{ path('app_admin_metier_import') }}" enctype="multipart/form-data" class="flex flex-wrap gap-3 items-center">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                        <input type="file" name="importFile" accept=".csv,.txt,.xlsx" required class="px-4 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-600 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-qlik-blue file:text-white hover:file:bg-qlik-blue-dark file:cursor-pointer">
                        <button type="submit" class="px-5 py-2.5 bg-qlik-blue text-white text-sm font-medium rounded-xl hover:bg-qlik-blue-dark transition-all">Importer</button>
                    </form>
                </div>
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">Ajouter un métier</h2>
                    <form method="post" action="{{ path('app_admin_metier_create') }}" class="flex gap-3">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                        <input type="text" name="name" required placeholder="Nom du métier" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent">
                        <button type="submit" class="px-5 py-2.5 bg-qlik-blue text-white text-sm font-medium rounded-xl hover:bg-qlik-blue-dark transition-all">Ajouter</button>
                    </form>
                </div>
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-50"><h2 class="text-base font-semibold text-gray-900">Métiers ({{ metiers|length }})</h2></div>
                    {% if metiers is empty %}
                        <div class="px-6 py-10 text-center text-sm text-gray-400">Aucun métier</div>
                    {% else %}
                        <table class="w-full">
                            <thead class="bg-gray-50 border-b border-gray-100"><tr>{{ t.th('Nom') }}{{ t.th('Actions', true) }}</tr></thead>
                            <tbody class="divide-y divide-gray-50">
                                {% for m in metiers %}
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ m.name }}</td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center justify-end">
                                            <form method="post" action="{{ path('app_admin_metier_delete') }}" onsubmit="return confirm('Supprimer le métier « {{ m.name|e('js') }} » ? Les utilisateurs et applications ne seront plus rattachés à ce métier.')">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="id" value="{{ m.id }}">
                                                <button class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all" title="Supprimer">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {# ------------------------------------------------------- Utilisateurs #}
            {% if tab == 'users' %}
            <div class="space-y-6">
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">Créer un utilisateur</h2>
                    <form method="post" action="{{ path('app_admin_user_create') }}" class="flex flex-wrap gap-3 items-end">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                        <div class="flex-1 min-w-[240px]">
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Email</label>
                            <input type="email" name="email" required placeholder="prenom.nom@emilfrey.fr" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Licence</label>
                            <select name="role" class="px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue bg-white">
                                <option value="analyzer">Lecteur</option>
                                <option value="creator">Créateur</option>
                                <option value="professional">Administrateur</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Métier</label>
                            <select name="metierId" class="px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue bg-white">
                                <option value="0">— Aucun —</option>
                                {% for m in metiers %}<option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}
                            </select>
                        </div>
                        <button type="submit" class="px-5 py-2.5 bg-qlik-blue text-white text-sm font-medium rounded-xl hover:bg-qlik-blue-dark transition-all">Créer</button>
                    </form>
                </div>
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-50"><h2 class="text-base font-semibold text-gray-900">Utilisateurs ({{ users|length }})</h2></div>
                    {% if users is empty %}
                        <div class="px-6 py-10 text-center text-sm text-gray-400">Aucun utilisateur</div>
                    {% else %}
                        <table class="w-full">
                            <thead class="bg-gray-50 border-b border-gray-100"><tr>{{ t.th('Email') }}{{ t.th('Licence') }}{{ t.th('Métier') }}{{ t.th('Créé le') }}{{ t.th('Actions', true) }}</tr></thead>
                            <tbody class="divide-y divide-gray-50">
                                {% for u in users %}
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 text-sm text-gray-900">{{ u.email }}</td>
                                    <td class="px-6 py-4">
                                        <form method="post" action="{{ path('app_admin_user_role') }}">
                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="email" value="{{ u.email }}">
                                            <select name="role" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue bg-white">
                                                <option value="analyzer" {{ u.role == 'analyzer' ? 'selected' : '' }}>Lecteur</option>
                                                <option value="creator" {{ u.role == 'creator' ? 'selected' : '' }}>Créateur</option>
                                                <option value="professional" {{ u.role == 'professional' ? 'selected' : '' }}>Administrateur</option>
                                            </select>
                                        </form>
                                    </td>
                                    <td class="px-6 py-4">
                                        <form method="post" action="{{ path('app_admin_user_metier') }}">
                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="email" value="{{ u.email }}">
                                            <select name="metierId" onchange="this.form.submit()" class="px-3 py-1.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue bg-white">
                                                <option value="0">— Aucun —</option>
                                                {% for m in metiers %}<option value="{{ m.id }}" {{ u.metier and u.metier.id == m.id ? 'selected' : '' }}>{{ m.name }}</option>{% endfor %}
                                            </select>
                                        </form>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500">{{ u.createdAt|date('d/m/Y') }}</td>
                                    <td class="px-6 py-4">
                                        <div class="flex justify-end">
                                            <form method="post" action="{{ path('app_admin_user_delete') }}" onsubmit="return confirm('Supprimer l\'utilisateur « {{ u.email|e('js') }} » ?')">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="email" value="{{ u.email }}">
                                                <button class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all" title="Supprimer">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {# ------------------------------------------------------------- Accès #}
            {% if tab == 'access' %}
            <div class="space-y-6">
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">Accorder un accès</h2>
                    <form method="post" action="{{ path('app_admin_perm_create') }}" class="flex flex-wrap gap-3">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                        <input type="email" name="userEmail" required placeholder="prenom.nom@emilfrey.fr" class="flex-1 min-w-[240px] px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent">
                        <select name="appId" required class="flex-1 min-w-[240px] px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent bg-white">
                            <option value="">Sélectionner une application</option>
                            {% for a in apps %}<option value="{{ a.id }}">{{ a.name }} ({{ a.space.name }})</option>{% endfor %}
                        </select>
                        <button type="submit" class="px-5 py-2.5 bg-qlik-blue text-white text-sm font-medium rounded-xl hover:bg-qlik-blue-dark transition-all">Accorder</button>
                    </form>
                </div>
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-50"><h2 class="text-base font-semibold text-gray-900">Accès accordés ({{ permissions|length }})</h2></div>
                    {% if permissions is empty %}
                        <div class="px-6 py-10 text-center text-sm text-gray-400">Aucun accès accordé</div>
                    {% else %}
                        <table class="w-full">
                            <thead class="bg-gray-50 border-b border-gray-100"><tr>{{ t.th('Utilisateur') }}{{ t.th('Application') }}{{ t.th('Espace') }}{{ t.th('Accordé le') }}{{ t.th('Actions', true) }}</tr></thead>
                            <tbody class="divide-y divide-gray-50">
                                {% for p in permissions %}
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 text-sm text-gray-900">{{ p.userEmail }}</td>
                                    <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ p.app.name }}</td>
                                    <td class="px-6 py-4"><span class="inline-block text-xs px-2.5 py-0.5 rounded-full font-medium bg-blue-50 text-qlik-blue">{{ p.app.space.name }}</span></td>
                                    <td class="px-6 py-4 text-sm text-gray-500">{{ p.grantedAt|date('d/m/Y') }}</td>
                                    <td class="px-6 py-4">
                                        <div class="flex justify-end">
                                            <form method="post" action="{{ path('app_admin_perm_delete') }}" onsubmit="return confirm('Révoquer cet accès ?')">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="id" value="{{ p.id }}">
                                                <button class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all" title="Révoquer">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>

                {# --- Accès par métier --- #}
                {% if metiers is not empty %}
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-4">Accorder un accès par métier</h2>
                    <form method="post" action="{{ path('app_admin_access_metier_grant') }}" class="flex flex-wrap gap-3">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                        <select name="metierId" required class="flex-1 min-w-[200px] px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue bg-white">
                            <option value="">Sélectionner un métier</option>
                            {% for m in metiers %}<option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}
                        </select>
                        <select name="appId" required class="flex-1 min-w-[240px] px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-qlik-blue bg-white">
                            <option value="">Sélectionner une application</option>
                            {% for a in apps %}<option value="{{ a.id }}">{{ a.name }} ({{ a.space.name }})</option>{% endfor %}
                        </select>
                        <button type="submit" class="px-5 py-2.5 bg-qlik-blue text-white text-sm font-medium rounded-xl hover:bg-qlik-blue-dark transition-all">Accorder</button>
                    </form>
                </div>
                {% endif %}
                {% set metierAccessCount = apps|filter(a => a.metiers|length > 0)|length %}
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-50"><h2 class="text-base font-semibold text-gray-900">Accès par métier</h2></div>
                    {% if metierAccessCount == 0 %}
                        <div class="px-6 py-10 text-center text-sm text-gray-400">Aucun accès par métier</div>
                    {% else %}
                        <table class="w-full">
                            <thead class="bg-gray-50 border-b border-gray-100"><tr>{{ t.th('Métier') }}{{ t.th('Application') }}{{ t.th('Espace') }}{{ t.th('Actions', true) }}</tr></thead>
                            <tbody class="divide-y divide-gray-50">
                                {% for a in apps %}{% for m in a.metiers %}
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4"><span class="inline-block text-xs px-2.5 py-0.5 rounded-full font-medium bg-amber-50 text-amber-700">{{ m.name }}</span></td>
                                    <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ a.name }}</td>
                                    <td class="px-6 py-4"><span class="inline-block text-xs px-2.5 py-0.5 rounded-full font-medium bg-blue-50 text-qlik-blue">{{ a.space.name }}</span></td>
                                    <td class="px-6 py-4">
                                        <div class="flex justify-end">
                                            <form method="post" action="{{ path('app_admin_access_metier_revoke') }}" onsubmit="return confirm('Révoquer l\'accès du métier « {{ m.name|e('js') }} » à « {{ a.name|e('js') }} » ?')">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="appId" value="{{ a.id }}"><input type="hidden" name="metierId" value="{{ m.id }}">
                                                <button class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all" title="Révoquer">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}{% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {# ------------------------------------------------------------- Audit #}
            {% if tab == 'audit' %}
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-50"><h2 class="text-base font-semibold text-gray-900">Journaux d'audit ({{ auditLogs|length }})</h2></div>
                {% if auditLogs is empty %}
                    <div class="px-6 py-10 text-center text-sm text-gray-400">Aucun événement enregistré</div>
                {% else %}
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-gray-50 border-b border-gray-100"><tr>{{ t.th('Date & heure') }}{{ t.th('Utilisateur') }}{{ t.th('Action') }}{{ t.th('Application') }}{{ t.th('Espace') }}</tr></thead>
                            <tbody class="divide-y divide-gray-50">
                                {% for log in auditLogs %}
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-3 text-xs text-gray-500 whitespace-nowrap font-mono">{{ log.timestamp|date('d/m/Y H:i:s') }}</td>
                                    <td class="px-6 py-3 text-sm text-gray-700">{{ log.userEmail }}</td>
                                    <td class="px-6 py-3"><span class="inline-block text-xs px-2.5 py-0.5 rounded-full font-medium {{ log.action == 'login' ? 'bg-green-50 text-green-700' : 'bg-blue-50 text-qlik-blue' }}">{{ log.action == 'login' ? 'Connexion' : 'Ouverture app' }}</span></td>
                                    <td class="px-6 py-3 text-sm text-gray-600">{{ log.appName ?: '—' }}</td>
                                    <td class="px-6 py-3 text-sm text-gray-600">{{ log.spaceName ?: '—' }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
            {% endif %}

            {# ---------------------------------------------------------- Paramètres #}
            {% if tab == 'settings' %}
            <div class="space-y-6 max-w-3xl">
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <div class="flex items-center justify-between mb-1">
                        <h2 class="text-base font-semibold text-gray-900">Stockage des fichiers</h2>
                        {% if s3.configured %}
                            <span class="inline-flex items-center gap-1.5 text-xs px-2.5 py-0.5 rounded-full font-medium bg-green-50 text-green-700">Configuré</span>
                        {% else %}
                            <span class="inline-flex items-center gap-1.5 text-xs px-2.5 py-0.5 rounded-full font-medium bg-gray-100 text-gray-600">Non configuré</span>
                        {% endif %}
                    </div>
                    <p class="text-sm text-gray-500 mb-5">Stockage distant où sont déposés et lus les fichiers HTML des applications.</p>

                    <div class="rounded-lg bg-blue-50 border border-blue-100 px-3.5 py-2.5 text-xs text-blue-800 mb-5">
                        <span class="font-semibold">Configuration dans <span class="font-mono">.env.local</span> (sur le serveur).</span> Les accès au stockage — y compris la clé secrète — ne sont volontairement <strong>pas saisis dans l'interface</strong> ni stockés en base. Pour les modifier, éditez <span class="font-mono">.env.local</span> puis videz le cache. Variables : <span class="font-mono">S3_ACCESS_KEY</span>, <span class="font-mono">S3_SECRET_KEY</span>, <span class="font-mono">S3_REGION</span>, <span class="font-mono">S3_BUCKET</span>, <span class="font-mono">S3_ENDPOINT</span>, <span class="font-mono">S3_EXPIRY</span>. Conseil : une clé IAM <strong>dédiée, en lecture seule</strong> (<span class="font-mono">s3:GetObject</span> sur ce bucket).
                    </div>

                    <dl class="grid grid-cols-3 gap-x-4 gap-y-2.5 text-sm">
                        <dt class="text-gray-500">Région</dt><dd class="col-span-2 font-mono text-gray-800">{{ s3.region ?: '—' }}</dd>
                        <dt class="text-gray-500">Bucket</dt><dd class="col-span-2 font-mono text-gray-800">{{ s3.bucket ?: '—' }}</dd>
                        <dt class="text-gray-500">Endpoint</dt><dd class="col-span-2 font-mono text-gray-800">{{ s3.endpoint ?: 'AWS standard' }}</dd>
                        <dt class="text-gray-500">Validité des liens</dt><dd class="col-span-2 font-mono text-gray-800">{{ s3.expiry }} s</dd>
                        <dt class="text-gray-500">Identifiants</dt><dd class="col-span-2 text-gray-800">{{ s3.configured ? 'présents (.env.local)' : 'manquants' }}</dd>
                    </dl>
                </div>

                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-1">Tester la connexion</h2>
                    <p class="text-sm text-gray-500 mb-4">Génère un lien pré-signé pour une clé d'objet et l'ouvre dans un nouvel onglet (enregistrez d'abord la configuration ci-dessus). Le test s'exécute <strong>dans votre navigateur</strong> car le serveur n'a pas d'accès réseau sortant : si le fichier s'affiche, les accès sont bons ; une erreur <span class="font-mono">403 / SignatureDoesNotMatch</span> indique une clé erronée, et <span class="font-mono">NoSuchKey</span> un fichier inexistant.</p>
                    <form id="s3-test-form" class="flex flex-wrap gap-3 items-end">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                        <div class="flex-1 min-w-[260px]">
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Clé de l'objet</label>
                            <input id="s3-test-key" type="text" placeholder="dashboards/ventes.html" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-qlik-blue focus:border-transparent">
                        </div>
                        <button type="submit" class="px-5 py-2.5 bg-white border border-qlik-blue text-qlik-blue text-sm font-medium rounded-xl hover:bg-blue-50 transition-all">Tester la connexion</button>
                    </form>
                    <p id="s3-test-msg" class="mt-3 text-xs hidden"></p>
                </div>
            </div>
            {% endif %}
        </div>
    </main>
</div>
{% endblock %}

{% block javascripts %}
{% if tab in ['spaces', 'apps'] %}
<script>
// Dépôt navigateur -> S3 (POST policy signée, formulaire + iframe cachée, sans CORS).
(function () {
    var SIGN_URL = '{{ path('app_admin_s3_sign') }}';
    var CSRF = '{{ csrf_token('admin') }}';

    window.s3Deposit = function (params, file, cb) {
        var body = new URLSearchParams();
        body.set('_csrf_token', CSRF);
        body.set('spaceId', params.spaceId);
        body.set('kind', params.kind);
        if (params.appName) body.set('appName', params.appName);
        if (params.filename) body.set('filename', params.filename);
        fetch(SIGN_URL, { method: 'POST', body: body, headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.json(); })
            .then(function (sig) {
                if (!sig.ok) { cb(false, sig.message || 'Signature refusée.'); return; }
                // Dépôt direct vers S3 en mode no-cors : le fichier est attaché tel quel
                // (pas de DataTransfer), aucune contrainte CORS. Réponse opaque => succès optimiste.
                var fd = new FormData();
                Object.keys(sig.fields).forEach(function (k) { fd.append(k, sig.fields[k]); });
                fd.append('file', file, (file && file.name) ? file.name : 'file');
                fetch(sig.url, { method: 'POST', mode: 'no-cors', body: fd })
                    .then(function () { cb(true); })
                    .catch(function () { cb(false, 'Échec réseau du dépôt sur S3.'); });
            })
            .catch(function () { cb(false, 'Impossible de contacter le serveur (signature).'); });
    };

    function emptyFile() { return new Blob([''], { type: 'text/plain' }); }

    {% if tab == 'spaces' %}
    var sf = document.getElementById('space-create-form');
    if (sf) {
        sf.addEventListener('submit', function (e) {
            e.preventDefault();
            var btn = sf.querySelector('button[type=submit]');
            btn.disabled = true; btn.textContent = 'Création…';
            fetch(sf.action, { method: 'POST', body: new FormData(sf), headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (!d.ok) { alert(d.message || 'Erreur.'); btn.disabled = false; btn.textContent = 'Créer'; return; }
                    s3Deposit({ spaceId: d.spaceId, kind: 'space-marker' }, emptyFile(), function (ok, msg) {
                        if (!ok) { alert('Espace créé, mais le dossier S3 n\'a pas pu être créé (' + (msg || '') + '). Il apparaîtra dès qu\'un fichier y sera déposé.'); }
                        window.location = '{{ path('app_admin', {tab: 'spaces'}) }}';
                    });
                })
                .catch(function () { alert('Impossible de contacter le serveur.'); btn.disabled = false; btn.textContent = 'Créer'; });
        });
    }
    {% endif %}

    {% if tab == 'apps' %}
    var af = document.getElementById('s3-add-form');
    var upInput = document.getElementById('s3a-upload');
    var fileNameInput = document.getElementById('s3a-file');
    var spaceSel = document.getElementById('s3a-space');
    var nameIn = document.getElementById('s3a-name');
    var statusEl = document.getElementById('s3a-status');
    function setStatus(t, ok) { statusEl.textContent = t; statusEl.className = 'text-xs ' + (ok ? 'text-green-700' : 'text-red-600'); }
    if (upInput && fileNameInput) {
        upInput.addEventListener('change', function () {
            if (upInput.files[0] && !fileNameInput.value.trim()) fileNameInput.value = upInput.files[0].name;
        });
    }
    if (af) {
        af.addEventListener('submit', function (e) {
            var file = upInput && upInput.files[0];
            if (!file) return; // pas de fichier => POST classique (référence d'un fichier déjà sur S3)
            e.preventDefault();
            if (!spaceSel.value || !nameIn.value.trim() || !fileNameInput.value.trim()) { alert('Espace, nom et nom de fichier requis.'); return; }
            var btn = document.getElementById('s3a-submit');
            btn.disabled = true; btn.textContent = 'Téléversement…'; setStatus('Dépôt du fichier sur S3…', true);
            s3Deposit({ spaceId: spaceSel.value, kind: 'file', appName: nameIn.value.trim(), filename: fileNameInput.value.trim() }, file, function (ok, msg) {
                if (!ok) { setStatus(msg || 'Échec du dépôt.', false); btn.disabled = false; btn.textContent = "Ajouter l'application"; return; }
                setStatus('Fichier déposé. Création de l\'application…', true);
                af.submit(); // POST classique vers appS3 (crée la fiche), sans relancer ce handler
            });
        });
    }
    {% endif %}
})();
</script>
{% endif %}

{% if tab == 'apps' %}
<script>
// Aperçu en direct de la clé S3 calculée (formulaire d'ajout).
(function () {
    var form = document.getElementById('s3-add-form');
    if (!form) return;
    var PREFIX = {{ s3.prefix|json_encode|raw }};
    var spaceSel = document.getElementById('s3a-space');
    var nameIn = document.getElementById('s3a-name');
    var fileIn = document.getElementById('s3a-file');
    var preview = document.getElementById('s3a-preview');
    function clean(s) { return (s || '').replace(/^\/+|\/+$/g, ''); }
    function update() {
        var opt = spaceSel.options[spaceSel.selectedIndex];
        var space = opt ? (opt.getAttribute('data-name') || '') : '';
        var parts = [PREFIX, space, nameIn.value.trim(), fileIn.value.trim()].map(clean).filter(Boolean);
        preview.textContent = parts.length ? parts.join('/') : '—';
    }
    [spaceSel, nameIn, fileIn].forEach(function (el) { el.addEventListener('input', update); el.addEventListener('change', update); });
    update();
})();

(function () {
    var form = document.getElementById('upload-form');
    if (!form) return;
    var UPLOAD_ACTION = '{{ path('app_admin_app_upload') }}';
    var LINK_ACTION = '{{ path('app_admin_app_link') }}';
    var S3_ACTION = '{{ path('app_admin_app_s3') }}';
    var fileWrap = document.getElementById('file-input-wrap');
    var folderWrap = document.getElementById('folder-input-wrap');
    var urlWrap = document.getElementById('url-input-wrap');
    var s3Wrap = document.getElementById('s3-input-wrap');
    var fileInput = document.getElementById('file-input');
    var folderInput = document.getElementById('folder-input');
    var urlInput = document.getElementById('url-input');
    var s3Input = document.getElementById('s3-input');
    var thumbInput = document.getElementById('thumb-input');
    var folderHelp = document.getElementById('folder-help');
    var urlHelp = document.getElementById('url-help');
    var s3Help = document.getElementById('s3-help');
    var folderCount = document.getElementById('folder-count');
    var submitBtn = document.getElementById('upload-submit');
    var modeBtns = Array.prototype.slice.call(document.querySelectorAll('.mode-btn'));
    var mode = 'file';

    function setMode(m) {
        mode = m;
        fileWrap.classList.toggle('hidden', m !== 'file');
        folderWrap.classList.toggle('hidden', m !== 'folder');
        urlWrap.classList.toggle('hidden', m !== 'link');
        s3Wrap.classList.toggle('hidden', m !== 's3');
        folderHelp.classList.toggle('hidden', m !== 'folder');
        urlHelp.classList.toggle('hidden', m !== 'link');
        s3Help.classList.toggle('hidden', m !== 's3');
        fileInput.disabled = (m !== 'file');
        folderInput.disabled = (m !== 'folder');
        urlInput.disabled = (m !== 'link');
        s3Input.disabled = (m !== 's3');
        form.action = (m === 'link') ? LINK_ACTION : (m === 's3') ? S3_ACTION : UPLOAD_ACTION;
        modeBtns.forEach(function (b) {
            var active = b.getAttribute('data-mode') === m;
            b.className = 'mode-btn flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-all ' +
                (active ? 'bg-qlik-blue text-white border-qlik-blue' : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300');
        });
    }
    setMode('file');
    modeBtns.forEach(function (b) { b.addEventListener('click', function () { setMode(b.getAttribute('data-mode')); }); });
    folderInput.addEventListener('change', function () {
        var n = folderInput.files.length;
        folderCount.textContent = n ? (n + ' fichier' + (n > 1 ? 's' : '') + ' sélectionné' + (n > 1 ? 's' : '')) : '';
    });

    form.addEventListener('submit', function (e) {
        // Mode "lien web" : pas d'upload, soumission POST classique vers la route lien.
        if (mode === 'link') {
            if (!form.name.value.trim() || !form.spaceId.value || !urlInput.value.trim()) {
                e.preventDefault();
                alert('Nom, espace et lien web requis.');
                return;
            }
            if (!/^https?:\/\//i.test(urlInput.value.trim())) {
                e.preventDefault();
                alert('Le lien doit commencer par http:// ou https://');
                return;
            }
            submitBtn.disabled = true;
            submitBtn.textContent = 'Ajout en cours...';
            return; // laisse le navigateur poster le formulaire normalement
        }
        // Mode "Amazon S3" : pas d'upload, on stocke juste la cle d'objet (POST classique).
        if (mode === 's3') {
            if (!form.name.value.trim() || !form.spaceId.value || !s3Input.value.trim()) {
                e.preventDefault();
                alert('Nom, espace et clé d\'objet S3 requis.');
                return;
            }
            submitBtn.disabled = true;
            submitBtn.textContent = 'Ajout en cours...';
            return;
        }
        e.preventDefault();
        var files = (mode === 'file' ? fileInput.files : folderInput.files);
        if (!form.name.value.trim() || !form.spaceId.value || !files || files.length === 0) {
            alert('Nom, espace et fichier(s) requis.');
            return;
        }
        var fd = new FormData();
        fd.append('name', form.name.value);
        fd.append('spaceId', form.spaceId.value);
        fd.append('_csrf_token', form._csrf_token.value);
        for (var i = 0; i < files.length; i++) {
            fd.append('files[]', files[i]);
            fd.append('paths[]', files[i].webkitRelativePath || files[i].name);
        }
        if (thumbInput.files[0]) fd.append('thumbnailFile', thumbInput.files[0]);

        submitBtn.disabled = true;
        submitBtn.textContent = 'Ajout en cours...';
        fetch(form.action, { method: 'POST', body: fd, headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
                if (res.ok && res.d.ok) {
                    window.location = '{{ path('app_admin', {tab: 'apps'}) }}';
                } else {
                    alert(res.d.message || "Erreur lors de l'ajout");
                    submitBtn.disabled = false;
                    submitBtn.textContent = "Ajouter l'application";
                }
            })
            .catch(function () { alert('Impossible de contacter le serveur'); submitBtn.disabled = false; submitBtn.textContent = "Ajouter l'application"; });
    });
})();

(function () {
    var REPLACE_ACTION = '{{ path('app_admin_app_replace') }}';
    document.querySelectorAll('.replace-form').forEach(function (form) {
        var fileInput = form.querySelector('.rfile');
        var folderInput = form.querySelector('.rfolder');
        var modeBtns = Array.prototype.slice.call(form.querySelectorAll('.rmode'));
        var mode = 'file';
        function setMode(m) {
            mode = m;
            fileInput.classList.toggle('hidden', m !== 'file');
            folderInput.classList.toggle('hidden', m !== 'folder');
            modeBtns.forEach(function (b) {
                var active = b.getAttribute('data-rmode') === m;
                b.className = 'rmode px-2 py-1 text-xs rounded border ' + (active ? 'bg-qlik-blue text-white border-qlik-blue' : 'bg-white text-gray-600 border-gray-200');
            });
        }
        setMode('file');
        modeBtns.forEach(function (b) { b.addEventListener('click', function () { setMode(b.getAttribute('data-rmode')); }); });

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var files = (mode === 'file' ? fileInput.files : folderInput.files);
            if (!files || files.length === 0) { alert('Sélectionnez un fichier ou un dossier.'); return; }
            var fd = new FormData();
            fd.append('id', form.getAttribute('data-id'));
            fd.append('_csrf_token', form.querySelector('input[name=_csrf_token]').value);
            for (var i = 0; i < files.length; i++) {
                fd.append('files[]', files[i]);
                fd.append('paths[]', files[i].webkitRelativePath || files[i].name);
            }
            var btn = form.querySelector('button[type=submit]');
            btn.disabled = true; btn.textContent = 'Remplacement...';
            fetch(REPLACE_ACTION, { method: 'POST', body: fd, headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
                .then(function (res) {
                    if (res.ok && res.d.ok) { window.location = '{{ path('app_admin', {tab: 'apps'}) }}'; }
                    else { alert(res.d.message || 'Erreur lors du remplacement'); btn.disabled = false; btn.textContent = 'Remplacer'; }
                })
                .catch(function () { alert('Impossible de contacter le serveur'); btn.disabled = false; btn.textContent = 'Remplacer'; });
        });
    });
})();

(function () {
    var EDIT_ACTION = '{{ path('app_admin_app_edit') }}';
    document.querySelectorAll('.edit-form').forEach(function (form) {
        var type = form.getAttribute('data-type');
        var initial = type === 's3' ? 's3' : (type === 'url' || type === 'iframe') ? 'link' : 'file';
        var wraps = { file: '.efile-wrap', folder: '.efolder-wrap', link: '.elink-wrap', s3: '.es3-wrap' };
        var fileInput = form.querySelector('.efile');
        var folderInput = form.querySelector('.efolder');
        var keepHint = form.querySelector('.ekeep');
        var src = initial;

        function setSrc(s) {
            src = s;
            Object.keys(wraps).forEach(function (k) { form.querySelector(wraps[k]).classList.toggle('hidden', k !== s); });
            fileInput.disabled = (s !== 'file');
            folderInput.disabled = (s !== 'folder');
            keepHint.classList.toggle('hidden', !((s === 'file' || s === 'folder') && type === 'html'));
            form.querySelectorAll('.esrc').forEach(function (b) {
                var active = b.getAttribute('data-esrc') === s;
                b.className = 'esrc px-2 py-1 text-[11px] rounded border ' + (active ? 'bg-qlik-blue text-white border-qlik-blue' : 'bg-white text-gray-600 border-gray-200');
            });
        }
        setSrc(initial);
        form.querySelectorAll('.esrc').forEach(function (b) { b.addEventListener('click', function () { setSrc(b.getAttribute('data-esrc')); }); });

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var name = form.querySelector('.ename').value.trim();
            var spaceId = form.querySelector('.espace').value;
            if (!name || !spaceId) { alert('Nom et espace requis.'); return; }
            var fd = new FormData();
            fd.append('_csrf_token', form.querySelector('input[name=_csrf_token]').value);
            fd.append('id', form.querySelector('input[name=id]').value);
            fd.append('name', name);
            fd.append('spaceId', spaceId);
            fd.append('source', src);
            if (src === 'link') {
                var url = form.querySelector('.eurl').value.trim();
                if (!/^https?:\/\//i.test(url)) { alert('Le lien doit commencer par http:// ou https://'); return; }
                fd.append('url', url);
                fd.append('openMode', form.querySelector('.eopenmode:checked').value);
            } else if (src === 's3') {
                var key = form.querySelector('.ekey').value.trim();
                if (!key) { alert('Clé d\'objet S3 requise.'); return; }
                fd.append('objectKey', key);
            } else {
                var files = (src === 'file' ? fileInput.files : folderInput.files);
                if (files && files.length) {
                    for (var i = 0; i < files.length; i++) { fd.append('files[]', files[i]); fd.append('paths[]', files[i].webkitRelativePath || files[i].name); }
                } else if (type !== 'html') {
                    alert('Sélectionnez un fichier ou un dossier.'); return;
                }
                // type HTML sans nouveau fichier : on conserve l'existant (géré côté serveur).
            }
            if (form.querySelector('.ethumb').files[0]) fd.append('thumbnailFile', form.querySelector('.ethumb').files[0]);
            var rm = form.querySelector('.eremovethumb');
            if (rm && rm.checked) fd.append('removeThumbnail', '1');

            var btn = form.querySelector('button[type=submit]');
            btn.disabled = true; btn.textContent = 'Enregistrement...';
            fetch(EDIT_ACTION, { method: 'POST', body: fd, headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
                .then(function (res) {
                    if (res.ok && res.d.ok) { window.location = '{{ path('app_admin', {tab: 'apps'}) }}'; }
                    else { alert(res.d.message || 'Erreur lors de la modification'); btn.disabled = false; btn.textContent = 'Enregistrer'; }
                })
                .catch(function () { alert('Impossible de contacter le serveur'); btn.disabled = false; btn.textContent = 'Enregistrer'; });
        });
    });
})();
</script>
{% endif %}

{% if tab == 'settings' %}
<script>
(function () {
    var form = document.getElementById('s3-test-form');
    if (!form) return;
    var TEST_ACTION = '{{ path('app_admin_settings_s3_test') }}';
    var keyInput = document.getElementById('s3-test-key');
    var msg = document.getElementById('s3-test-msg');

    function showMsg(text, ok) {
        msg.textContent = text;
        msg.className = 'mt-3 text-xs ' + (ok ? 'text-green-700' : 'text-red-600');
    }

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var key = keyInput.value.trim();
        if (!key) { showMsg('Indiquez la clé d\'un objet S3.', false); return; }
        var fd = new FormData();
        fd.append('key', key);
        fd.append('_csrf_token', form.querySelector('input[name=_csrf_token]').value);
        showMsg('Génération du lien…', true);
        fetch(TEST_ACTION, { method: 'POST', body: fd, headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
                if (res.ok && res.d.ok) {
                    showMsg('Lien généré — ouverture dans un nouvel onglet.', true);
                    window.open(res.d.url, '_blank', 'noopener');
                } else {
                    showMsg(res.d.message || 'Erreur lors de la génération.', false);
                }
            })
            .catch(function () { showMsg('Impossible de contacter le serveur.', false); });
    });
})();
</script>
{% endif %}
{% endblock %}