{% 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', 'users': 'Utilisateurs', 'access': 'Accès', 'audit': "Journaux d'audit", 'settings': 'S3'} %}
            <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 %}
                    <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>
                {% 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 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>
                </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éé 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 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 Web</h2>
                    <form id="upload-form" method="post" action="{{ path('app_admin_app_upload') }}" enctype="multipart/form-data" class="space-y-4">
                        <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">Nom de l'application *</label>
                                <input type="text" name="name" required placeholder="Mon application" 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">Espace *</label>
                                <select name="spaceId" 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 }}">{{ s.name }}</option>{% endfor %}
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Source *</label>
                            <div class="flex flex-wrap gap-2">
                                <button type="button" data-mode="file" class="mode-btn flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-all bg-qlik-blue text-white border-qlik-blue">Fichier HTML simple</button>
                                <button type="button" data-mode="folder" class="mode-btn flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-all bg-white text-gray-600 border-gray-200 hover:border-gray-300">Dossier (HTML + data)</button>
                                <button type="button" data-mode="link" class="mode-btn flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-all bg-white text-gray-600 border-gray-200 hover:border-gray-300">Lien web (SharePoint…)</button>
                                <button type="button" data-mode="s3" class="mode-btn flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-all bg-white text-gray-600 border-gray-200 hover:border-gray-300">Fichier sur Amazon S3</button>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div id="file-input-wrap">
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Fichier HTML *</label>
                                <input id="file-input" type="file" name="files[]" 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 id="folder-input-wrap" class="hidden">
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Dossier *</label>
                                <input id="folder-input" type="file" webkitdirectory directory multiple 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">
                                <p id="folder-count" class="mt-1.5 text-xs text-gray-500"></p>
                            </div>
                            <div id="url-input-wrap" class="hidden col-span-2 space-y-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1.5">Lien web *</label>
                                    <input id="url-input" type="url" name="url" placeholder="https://emilfrey.sharepoint.com/…" 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">Mode d'ouverture</label>
                                    <div class="space-y-1.5">
                                        <label class="flex items-start gap-2 text-sm text-gray-700">
                                            <input type="radio" name="openMode" value="redirect" checked class="mt-0.5">
                                            <span><span class="font-medium">Lien direct</span> — ouvre l'URL dans un nouvel onglet (lecteur SharePoint compris).</span>
                                        </label>
                                        <label class="flex items-start gap-2 text-sm text-gray-700">
                                            <input type="radio" name="openMode" value="embed" class="mt-0.5">
                                            <span><span class="font-medium">Plein écran intégré</span> — affiche la page en iframe plein écran (masque la barre/Copilot du lecteur SharePoint, plus navigable). Nécessite que le contenu autorise l'intégration.</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div id="s3-input-wrap" class="hidden col-span-2">
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Clé de l'objet S3 *</label>
                                <input id="s3-input" type="text" name="objectKey" disabled 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>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Miniature (optionnel)</label>
                                <input id="thumb-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>
                        </div>
                        <p id="folder-help" class="text-xs text-gray-500 hidden">Le dossier doit contenir un fichier <span class="font-mono">index.html</span> à sa racine. Les sous-dossiers (ex. <span class="font-mono">data/</span>) sont accessibles via des chemins relatifs.</p>
                        <p id="s3-help" class="text-xs text-gray-500 hidden">Saisissez le <strong>chemin de l'objet dans le bucket</strong> (ex. <span class="font-mono">dashboards/ventes.html</span>), pas une URL. app-hub génère un lien pré-signé à chaque ouverture et affiche le fichier en plein écran. Le fichier doit avoir le type <span class="font-mono">Content-Type: text/html</span> sur S3. Configurez vos accès dans l'onglet <strong>Paramètres</strong> au préalable.</p>
                        <p id="url-help" class="text-xs text-gray-500 hidden">Pour un lien <strong>SharePoint</strong>, le mode <strong>« Plein écran intégré »</strong> masque la barre du lecteur (Ouvrez/Partager/Copilot) et rend la page plus navigable — le contenu se charge avec votre propre session SharePoint. ⚠️ Si SharePoint refuse l'intégration (politique du tenant), repassez en « Lien direct », ou pour un HTML autonome déposez-le plutôt via « Fichier HTML simple »/« Dossier » (app-hub le sert alors en vraie page navigable).</p>
                        <button id="upload-submit" 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 disabled:opacity-50">Ajouter l'application</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">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('Lien public') }}{{ 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' %}
                                            <span class="inline-block text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-50 text-amber-700 mr-1 align-middle">S3</span>{{ 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">
                                        {% if app.publicToken %}
                                            <div class="flex items-center gap-1.5">
                                                <span class="inline-block text-xs px-2.5 py-0.5 rounded-full font-medium bg-green-50 text-green-700">Actif</span>
                                                <button type="button" class="copy-link p-1.5 text-gray-400 hover:text-qlik-blue hover:bg-blue-50 rounded-lg transition-all" data-link="{{ url('app_public', {token: app.publicToken}) }}" title="Copier le lien">
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
                                                </button>
                                                <form method="post" action="{{ path('app_admin_app_token_delete') }}" onsubmit="return confirm('Révoquer le lien public de « {{ 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-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all" title="Révoquer">
                                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
                                                    </button>
                                                </form>
                                            </div>
                                        {% else %}
                                            <form method="post" action="{{ path('app_admin_app_token_create') }}">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}"><input type="hidden" name="id" value="{{ app.id }}">
                                                <button class="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium text-gray-500 border border-gray-200 rounded-lg hover:border-qlik-blue hover:text-qlik-blue hover:bg-blue-50 transition-all" title="Générer un lien public">
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
                                                    Générer
                                                </button>
                                            </form>
                                        {% 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="absolute right-0 mt-1 z-30 w-80 bg-white border border-gray-200 rounded-xl shadow-lg p-3 text-left max-h-[75vh] overflow-y-auto">
                                                    <form class="edit-form space-y-2.5" data-type="{{ app.appType }}">
                                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin') }}">
                                                        <input type="hidden" name="id" value="{{ app.id }}">
                                                        <p class="text-xs font-semibold text-gray-700">Modifier l'application</p>
                                                        <div>
                                                            <label class="block text-[11px] font-medium text-gray-500 mb-1">Nom</label>
                                                            <input type="text" class="ename w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-qlik-blue" value="{{ app.name }}">
                                                        </div>
                                                        <div>
                                                            <label class="block text-[11px] font-medium text-gray-500 mb-1">Espace</label>
                                                            <select class="espace 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">Source</label>
                                                            <div class="flex flex-wrap gap-1">
                                                                <button type="button" data-esrc="file" class="esrc px-2 py-1 text-[11px] rounded border bg-white text-gray-600 border-gray-200">Fichier</button>
                                                                <button type="button" data-esrc="folder" class="esrc px-2 py-1 text-[11px] rounded border bg-white text-gray-600 border-gray-200">Dossier</button>
                                                                <button type="button" data-esrc="link" class="esrc px-2 py-1 text-[11px] rounded border bg-white text-gray-600 border-gray-200">Lien web</button>
                                                                <button type="button" data-esrc="s3" class="esrc px-2 py-1 text-[11px] rounded border bg-white text-gray-600 border-gray-200">S3</button>
                                                            </div>
                                                        </div>
                                                        <div class="efile-wrap">
                                                            <input type="file" class="efile w-full text-[11px] text-gray-600" accept=".html,.htm">
                                                        </div>
                                                        <div class="efolder-wrap hidden">
                                                            <input type="file" class="efolder w-full text-[11px] text-gray-600" webkitdirectory directory multiple>
                                                        </div>
                                                        <p class="ekeep hidden text-[10px] text-gray-400">Laissez vide pour conserver le fichier actuel.</p>
                                                        <div class="elink-wrap hidden space-y-1.5">
                                                            <input type="url" class="eurl 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" placeholder="https://…" value="{{ app.appType in ['url', 'iframe'] ? app.url : '' }}">
                                                            <label class="flex items-center gap-1.5 text-xs text-gray-700"><input type="radio" name="openMode" class="eopenmode" value="redirect" {{ app.appType == 'iframe' ? '' : 'checked' }}> Lien direct</label>
                                                            <label class="flex items-center gap-1.5 text-xs text-gray-700"><input type="radio" name="openMode" class="eopenmode" value="embed" {{ app.appType == 'iframe' ? 'checked' : '' }}> Plein écran intégré</label>
                                                        </div>
                                                        <div class="es3-wrap hidden">
                                                            <input type="text" class="ekey 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" placeholder="dashboards/ventes.html" value="{{ app.appType == 's3' ? app.url : '' }}">
                                                        </div>
                                                        <div>
                                                            <label class="block text-[11px] font-medium text-gray-500 mb-1">Miniature</label>
                                                            <input type="file" class="ethumb w-full text-[11px] text-gray-600" accept="image/*">
                                                            {% if app.thumbnailFilename %}<label class="mt-1 flex items-center gap-1.5 text-[11px] text-gray-600"><input type="checkbox" class="eremovethumb" value="1"> Supprimer la miniature actuelle</label>{% endif %}
                                                        </div>
                                                        <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>
                                            </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 %}

            {# ------------------------------------------------------- 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">Analyzer</option>
                                <option value="professional">Professional</option>
                            </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('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' : '' }}>Analyzer</option>
                                                <option value="professional" {{ u.role == 'professional' ? 'selected' : '' }}>Professional</option>
                                            </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>
            </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">Amazon S3</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">Permet d'ajouter des applications dont le fichier HTML est stocké sur S3 : app-hub génère un lien pré-signé à la volée (signature locale, sans accès réseau) et affiche le dashboard en plein écran.</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 S3 — 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 S3 <span class="font-mono">403 / SignatureDoesNotMatch</span> indique une clé erronée, et <span class="font-mono">NoSuchKey</span> une clé d'objet inexistante.</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 == 'apps' %}
<script>
(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 () {
    document.querySelectorAll('.copy-link').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var link = btn.getAttribute('data-link');
            navigator.clipboard.writeText(link).then(function () {
                var old = btn.title; btn.title = 'Copié !';
                setTimeout(function () { btn.title = old; }, 1500);
            });
        });
    });
})();

(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 %}