@extends('layouts.app')

@section('title', 'Permissions - Détail')
@section('header', 'Permissions des dossiers')

@push('styles')
<style>
.perm-toggle { cursor:pointer; user-select:none; font-size:12px; background:none; border:none; padding:0; color:#6b7280; line-height:1; transform:translateY(1px); }
.perm-toggle::before { content:'\25B6'; display:inline-block; margin-right:5px; font-size:9px; transition:transform .15s; }
.perm-toggle.expanded::before { transform:rotate(90deg); }
.perm-children { padding-left:18px; }
.perm-node { padding:2px 0; }
.perm-row { cursor:pointer; display:inline-flex; align-items:center; border-radius:4px; }
.perm-row:hover { background:#f1f5f9; }
.perm-row.selected { background:#e0e7ff; }
.perm-file { color:#6b7280; }
.perm-groupe { background: #dbeafe; color: #1e40af; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.perm-utilisateur { background: #fef3c7; color: #92400e; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.perm-acl { background:#f8fafc; border:1px solid #e5e7eb; border-radius:6px; margin:4px 0 8px; }
.perm-acl-filtre { display:flex; align-items:center; gap:8px; padding:8px 20px 0; }
.perm-acl table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; table-layout:fixed; }
.perm-acl th { text-align:left; padding:8px 30px 8px 20px; background:#eef2f7; color:#475569; font-weight:600; font-size:11px; border-bottom:1px solid #e5e7eb; white-space:nowrap; }
.perm-acl td { padding:8px 30px 8px 20px; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.perm-acl col.c-type { width:13%; }
.perm-acl col.c-principal { width:30%; }
.perm-acl col.c-email { width:30%; }
.perm-acl col.c-droit { width:17%; }
.perm-acl col.c-origine { width:10%; }
.perm-acl tr:last-child td { border-bottom:none; }
.perm-acl tr.perm-acl-match { background:#fefce8; }
.perm-acl-match-badge { background:#eab308; color:#fff; padding:1px 5px; border-radius:3px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.perm-filtre-suggestion { width:100%; text-align:left; padding:6px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.perm-filtre-suggestion:hover { background:#eef2ff; }
</style>
@endpush

@section('content')
@php
$statutLabels = ['pending' => ['En attente…', 'text-yellow-600'], 'running' => ['Scan en cours…', 'text-blue-600'], 'stopped' => ['Arrêté (partiel)', 'text-orange-600'], 'failed' => ['Échec', 'text-red-600'], 'completed' => ['Terminé', 'text-green-600']];
$enCours = false;
$sections = [
    'sharepoint' => ['scan' => $spScan, 'enCours' => $spEnCours, 'folders' => $spFolders, 'arbreScan' => $spArbreScan, 'name' => 'SharePoint SRVPG', 'empty' => 'Aucune donnée dans la table des ACL.', 'totaux' => $spTotaux],
    'partage'    => ['scan' => $partageScan, 'enCours' => $partageEnCours, 'folders' => $partageFolders, 'arbreScan' => $partageArbreScan, 'name' => 'Serveur de fichiers', 'empty' => 'Aucune donnée dans la table des ACL.', 'totaux' => $partageTotaux],
];
if (!empty($type)) {
    $sections = array_filter($sections, fn($key) => $key === $type, ARRAY_FILTER_USE_KEY);
}
@endphp

@foreach($sections as $type => $section)
@php
    $s = $section['scan'];
    $ec = $section['enCours'];
    $folders = $section['folders'];
    $arbreScan = $section['arbreScan'];
    $running = $ec && in_array($ec->statut, ['pending', 'running']);
    $frozen = $ec && $ec->statut === 'running' && $ec->updated_at->diffInMinutes(now()) > 3;
    $stuck = $ec && $ec->statut === 'pending' && $ec->updated_at->diffInSeconds(now()) > 30;
    if ($running) $enCours = true;
    $totaux = $section['totaux'];
@endphp

<div class="bg-white rounded shadow mb-6 perm-section">
    <div class="px-4 py-3 border-b flex items-center justify-between flex-wrap gap-2">
        <div>
            <h3 class="font-semibold text-lg">{{ $section['name'] }}</h3>
            <div class="flex items-center gap-3 text-xs mt-1">
                @if($running)
                    <span class="{{ $statutLabels[$ec->statut][1] }} font-medium">{{ $statutLabels[$ec->statut][0] }}</span>
                    @if(!$frozen)<span class="text-gray-500">{{ $totaux['dossiers'] }} dossiers — {{ $totaux['fichiers'] }} fichiers</span>@endif
                    @if($ec->declenche_par) <span class="text-gray-400">par {{ $ec->declenche_par }}</span> @endif
                @elseif($s)
                    <span class="{{ $statutLabels[$s->statut][1] }} font-medium">{{ $statutLabels[$s->statut][0] }}</span>
                    <span class="text-gray-500">{{ $totaux['dossiers'] }} dossiers — {{ $totaux['fichiers'] }} fichiers</span>
                    @if($s->scanne_le) <span class="text-gray-400">{{ $s->scanne_le->format('d/m/Y H:i') }}</span> @endif
                @else
                    <span class="font-medium text-gray-700">Contenu de la table ACL</span>
                    <span class="text-gray-500">{{ $totaux['dossiers'] }} dossiers — {{ $totaux['fichiers'] }} fichiers</span>
                @endif
                </div>
            </div>
        <div class="flex gap-1">
            @if($running)
            <a href="{{ url()->current() }}" class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded hover:bg-indigo-200">Actualiser</a>
            <form action="{{ route('admin.permissions.' . $type . '.stop', $ec) }}" method="POST" class="inline">@csrf<button type="submit" class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded hover:bg-red-200">Stop</button></form>
            @endif
            @if($s && $s->total_entrees_acl > 0 && $s->statut !== 'pending' && $s->statut !== 'running')
            <a href="{{ route('admin.permissions.' . $type . '.detail', $s) }}" class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded hover:bg-gray-200">Historique</a>
            @endif
        </div>
    </div>

    <div class="p-4">
        @if($running && !$frozen)
        <div class="mb-3">
            <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-blue-500 h-2 rounded-full animate-pulse" style="width: 100%"></div>
            </div>
            <p class="text-xs text-gray-500 mt-1">
                Scan en cours — les nouvelles données remplaceront l'ancien scan à la fin.
                @if($s && $s->id !== $ec->id)
                    Résultats précédents conservés jusqu'à la fin du scan.
                @endif
            </p>
        </div>
        @endif
        @if($frozen)
        <div class="mb-3 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">⏳ Scan gelé — plus d'activité depuis {{ $ec->updated_at->diffForHumans() }}.</div>
        @endif
        @if($stuck)
        <div class="mb-3 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">⚠ Scan bloqué — le processus n'a pas démarré.</div>
        @endif
        @if($s && $s->statut === 'failed' && $s->erreurs)
        <div class="mb-3 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">
            <strong>Erreur :</strong> {{ is_array($s->erreurs) ? implode('; ', $s->erreurs) : $s->erreurs }}
        </div>
        @endif

        @php $filtreSection = $filtreActif && $filtreActif['type'] === $type ? $filtreActif : null; @endphp
        <div class="mb-3" data-filtre
             @if($filtreSection)
             data-filtre-actif="{{ $filtreSection['ftype'] }}:{{ $filtreSection['fid'] }}"
             data-filtre-label="{{ $filtreSection['resolved']['label'] ?? '' }}"
             data-filtre-dossier="{{ $filtreSection['dossier'] }}"
             data-filtre-t="{{ $filtreSection['t'] ?? '' }}"
             data-filtre-origine="{{ $filtreSection['origine'] ?? '' }}"
             @endif>
            <div class="flex flex-wrap items-center gap-2">
                <span class="text-xs font-semibold text-gray-500 whitespace-nowrap">Filtrer :</span>
                <div class="relative flex-1 min-w-[180px] max-w-md">
                    <input type="text" data-filtre-input placeholder="Groupe ou personne…"
                           class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
                           autocomplete="off">
                    <div data-filtre-suggestions
                         class="hidden absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded shadow-lg max-h-64 overflow-y-auto"></div>
                </div>
                <input type="text" data-dossier-input placeholder="Rechercher un dossier…"
                       class="flex-1 min-w-[180px] max-w-md px-3 py-1.5 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
                       autocomplete="off">
                <select data-type-filtre
                        class="text-xs border border-gray-300 rounded px-2 py-1.5 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                    <option value="">Tous</option>
                    <option value="groupe">Groupes uniquement</option>
                    <option value="utilisateur">Utilisateurs uniquement</option>
                </select>
                <select data-origine-filtre
                        class="text-xs border border-gray-300 rounded px-2 py-1.5 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                    <option value="">Toutes origines</option>
                    <option value="direct">Directes uniquement</option>
                    <option value="herite">Héritées uniquement</option>
                </select>
                <button type="button" data-filtre-clear
                        class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded hover:bg-red-200 hidden">Effacer</button>
            </div>
            <div data-filtre-badge class="mt-2 hidden">
                <span class="inline-flex items-center gap-2 text-xs bg-indigo-50 text-indigo-700 px-2 py-1 rounded">
                    <span data-filtre-badge-label></span>
                </span>
            </div>
        </div>

        @php $afficherArbre = $folders['total'] > 0; @endphp
        @if($afficherArbre)
            <div class="text-sm max-h-[70vh] overflow-y-auto"
                 data-arbre-type="{{ $type }}"
                 data-arbre-scan="{{ $arbreScan }}"
                 @if($filtreSection)
                 data-arbre-fid="{{ $filtreSection['fid'] }}"
                 data-arbre-ftype="{{ $filtreSection['ftype'] ?? '' }}"
                 data-arbre-q="{{ $filtreSection['dossier'] }}"
                 data-arbre-t="{{ $filtreSection['t'] ?? '' }}"
                 data-arbre-origine="{{ $filtreSection['origine'] ?? '' }}"
                 @endif>
                <p class="text-xs text-gray-400 mb-2">Cliquez sur un dossier pour explorer ses permissions.</p>
                <div class="arbre-root" aria-busy="true">
                    <p class="text-gray-400">Chargement…</p>
                </div>
            </div>
        @elseif($running)
            <div class="flex items-center justify-center h-32 text-gray-400 text-sm">En attente des résultats…</div>
        @elseif($s)
            <p class="text-gray-500 italic text-sm">Aucun dossier scanné.</p>
        @else
            <p class="text-gray-500 italic text-sm">{{ $section['empty'] }}</p>
        @endif
    </div>
</div>
@endforeach

@if(!empty($sections) && collect($sections)->contains(fn($sec) => $sec['enCours'] && in_array($sec['enCours']->statut, ['pending','running'])) && request()->has('autorefresh'))
<script>setTimeout(() => { window.location.reload(); }, 5000);</script>
@endif

<script>
(function () {
    var ARBRE_BASE = "{{ url('/admin/permissions/arbre') }}";
    var PRINC_BASE = "{{ url('/admin/permissions/principaux') }}";

    function esc(s) {
        return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
        });
    }

    function baseUrl(type, scan, dossier, filtre, page) {
        var q = new URLSearchParams();
        if (dossier) q.set('dossier', dossier);
        filtre = filtre || {};
        if (filtre.fid) { q.set('fid', filtre.fid); q.set('ftype', filtre.ftype || ''); }
        if (filtre.q) q.set('q', filtre.q);
        if (filtre.t) q.set('t', filtre.t);
        if (filtre.origine) q.set('origine', filtre.origine);
        if (page && page > 1) q.set('page', page);
        return ARBRE_BASE + '/' + encodeURIComponent(type) + '/' + encodeURIComponent(scan)
             + (q.toString() ? '?' + q.toString() : '');
    }

    function fetchNodes(type, scan, dossier, cb, errEl, filtre, page) {
        var x = new XMLHttpRequest();
        x.open('GET', baseUrl(type, scan, dossier, filtre, page));
        x.setRequestHeader('Accept', 'application/json');
        x.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        x.onload = function () {
            try { cb(JSON.parse(x.responseText)); }
            catch (e) {
                console.error('Arbre : réponse invalide', e);
                if (errEl) errEl.innerHTML = '<p class="text-red-500 text-sm">Erreur de chargement des permissions.</p>';
            }
        };
        x.onerror = function () {
            console.error('Arbre : erreur réseau');
            if (errEl) errEl.innerHTML = '<p class="text-red-500 text-sm">Erreur réseau pendant le chargement.</p>';
        };
        x.send();
    }

    function renderAcl(acl) {
        if (!acl || !acl.length) return '';
        var nbMatch = acl.filter(function (e) { return e.match; }).length;
        var rows = '';
        acl.forEach(function (e) {
            var badge = '<span class="' + (e.est_groupe ? 'perm-groupe' : 'perm-utilisateur') + '">'
                      + (e.est_groupe ? 'Groupe' : 'Utilisateur') + '</span>';
            var droit = '<span class="font-mono text-[10px] px-1.5 py-0.5 rounded ' + e.droits_couleur
                      + '" title="Code : ' + esc(e.droits) + '">' + esc(e.droits_libelle) + '</span>';
            rows += '<tr data-groupe="' + (e.est_groupe ? 'group' : 'user') + '"'
                  + (e.match ? ' class="perm-acl-match"' : '') + '>'
                  + '<td>' + (e.match ? '<span class="perm-acl-match-badge">cible</span> ' : '') + badge + '</td>'
                  + '<td>' + esc(e.principal) + '</td>'
                  + '<td class="text-xs text-gray-400">' + (e.email ? esc(e.email) : '') + '</td>'
                  + '<td>' + droit + '</td>'
                  + '<td class="text-xs text-gray-400">' + (e.est_herite ? 'hérité' : 'direct') + '</td>'
                  + '</tr>';
        });
        return '<div class="perm-acl">'
             + '<div class="perm-acl-filtre"><span class="text-[11px] font-semibold text-gray-500">Type :</span>'
             + '<select class="perm-acl-filtre-type text-xs border border-gray-300 rounded px-2 py-1">'
             + '<option value="all">Tous</option>'
             + '<option value="user">Utilisateur</option>'
             + '<option value="group">Groupe</option>'
             + '</select>'
             + (nbMatch ? '<span class="text-[11px] text-amber-700 ml-auto">' + nbMatch + ' entrée(s) cible(s)</span>' : '')
             + '</div>'
             + '<table><colgroup>'
             + '<col class="c-type"><col class="c-principal"><col class="c-email"><col class="c-droit"><col class="c-origine">'
             + '</colgroup><thead><tr>'
             + '<th>Type</th><th>Principal</th><th>Email</th><th>Droit</th><th>Origine</th>'
             + '</tr></thead><tbody>' + rows + '</tbody></table></div>';
    }

    function wireAclFiltre(block) {
        if (!block) return;
        var sel = block.querySelector('.perm-acl-filtre-type');
        if (!sel) return;
        var rows = block.querySelectorAll('tbody tr');
        sel.addEventListener('change', function () {
            var v = sel.value;
            rows.forEach(function (tr) {
                tr.style.display = (v === 'all' || tr.getAttribute('data-groupe') === v) ? '' : 'none';
            });
        });
    }

    function buildNode(type, scan, parentPath, c) {
        var path = parentPath ? parentPath + '/' + c.nom : c.nom;
        var div = document.createElement('div');
        div.className = 'perm-node';
        var label = '<span>' + (c.est_fichier ? '📄 ' : '📁 ') + esc(c.nom) + '</span>';
        if (!c.est_fichier) {
            label += '<span class="perm-count text-xs text-gray-400 mx-1">(' + (c.nb_dossiers || 0)
                   + ' dossiers · ' + (c.nb_fichiers || 0) + ' fichiers)</span>';
        }

        // Toute entrée est dépliable : les dossiers révèlent leurs sous-dossiers,
        // les fichiers (stockés uniquement s'ils dérogent à l'ACL du dossier parent)
        // révèlent leurs propres droits.
        var row = document.createElement('span');
        row.className = 'perm-row';
        row.innerHTML = '<button class="perm-toggle" type="button" title="Ouvrir"></button>' + label;
        div.appendChild(row);
        div.insertAdjacentHTML('beforeend', '<div class="perm-children" hidden></div>');
        row.addEventListener('click', function () {
            toggle(div, type, scan, path);
        });
        return div;
    }

    function toggle(node, type, scan, path) {
        var children = node.querySelector('.perm-children');
        var btn = node.querySelector('.perm-toggle');
        if (btn.classList.contains('expanded')) {
            btn.classList.remove('expanded');
            children.hidden = true;
            return;
        }
        btn.classList.add('expanded');
        if (children.dataset.loaded) { children.hidden = false; return; }
        children.innerHTML = '<p class="text-gray-400 pl-5">Chargement…</p>';
        children.hidden = false;
        var container = node.closest('[data-arbre-type]');
        var filtre = container ? (container._filtre || {}) : {};
        loadChildrenPage(children, type, scan, path, filtre, 1);
    }

    function loadChildrenPage(children, type, scan, path, filtre, page) {
        fetchNodes(type, scan, path, function (data) {
            if (page === 1) {
                children.innerHTML = renderAcl(data.acl);
                wireAclFiltre(children.querySelector('.perm-acl'));
            }
            (data.children || []).forEach(function (c) {
                children.appendChild(buildNode(type, scan, path, c));
            });
            if (data.plus > 0) {
                var moreBtn = document.createElement('button');
                moreBtn.type = 'button';
                moreBtn.className = 'text-xs text-indigo-600 hover:text-indigo-800 pl-5 my-1';
                moreBtn.textContent = 'Charger ' + data.plus + ' entrée(s) supplémentaire(s)…';
                moreBtn.addEventListener('click', function () {
                    moreBtn.textContent = 'Chargement…';
                    moreBtn.disabled = true;
                    loadChildrenPage(children, type, scan, path, filtre, page + 1);
                    children.removeChild(moreBtn);
                });
                children.appendChild(moreBtn);
            }
            children.dataset.loaded = '1';
        }, children, filtre, page);
    }

    function loadRoot(container) {
        var type = container.dataset.arbreType;
        var scan = container.dataset.arbreScan;
        var filtre = container._filtre || {};
        var root = container.querySelector('.arbre-root');
        loadRootPage(root, type, scan, filtre, 1);
    }

    function loadRootPage(root, type, scan, filtre, page) {
        fetchNodes(type, scan, '', function (data) {
            if (page === 1) {
                root.setAttribute('aria-busy', 'false');
                root.innerHTML = '';
            }
            (data.children || []).forEach(function (c) {
                root.appendChild(buildNode(type, scan, '', c));
            });
            if (data.plus > 0) {
                var moreBtn = document.createElement('button');
                moreBtn.type = 'button';
                moreBtn.className = 'text-xs text-indigo-600 hover:text-indigo-800 pl-2 my-1 block';
                moreBtn.textContent = 'Charger ' + data.plus + ' entrée(s) supplémentaire(s)…';
                moreBtn.addEventListener('click', function () {
                    moreBtn.textContent = 'Chargement…';
                    moreBtn.disabled = true;
                    loadRootPage(root, type, scan, filtre, page + 1);
                    root.removeChild(moreBtn);
                });
                root.appendChild(moreBtn);
            } else if ((!data.children || !data.children.length) && data.plus === 0 && page === 1) {
                root.innerHTML = '<p class="text-gray-500 italic text-sm">'
                    + (root.closest('[data-arbre-type]')?._filtre && (root.closest('[data-arbre-type]')?._filtre.fid || root.closest('[data-arbre-type]')?._filtre.q || root.closest('[data-arbre-type]')?._filtre.t || root.closest('[data-arbre-type]')?._filtre.origine)
                        ? 'Aucun dossier ne correspond au filtre actif.'
                        : 'Aucun dossier scanné.') + '</p>';
            }
        }, root, filtre, page);
    }

    function wireFiltre(section) {
        var wrap = section.querySelector('[data-filtre]');
        if (!wrap) return;
        var input = wrap.querySelector('[data-filtre-input]');
        var dossierInput = wrap.querySelector('[data-dossier-input]');
        var typeFiltreSel = wrap.querySelector('[data-type-filtre]');
        var origineFiltreSel = wrap.querySelector('[data-origine-filtre]');
        var suggestions = wrap.querySelector('[data-filtre-suggestions]');
        var clear = wrap.querySelector('[data-filtre-clear]');
        var badge = wrap.querySelector('[data-filtre-badge]');
        var badgeLabel = wrap.querySelector('[data-filtre-badge-label]');
        var tree = section.querySelector('[data-arbre-type]');
        var type = tree ? tree.dataset.arbreType : '';

        var timer = null;
        var dossierTimer = null;
        var items = [];
        var current = null;
        var dossierTerm = '';
        var typeTerm = typeFiltreSel ? typeFiltreSel.value : '';
        var origineTerm = origineFiltreSel ? origineFiltreSel.value : '';

        function renderSuggestions() {
            suggestions.innerHTML = '';
            if (!items.length) {
                suggestions.innerHTML = '<p class="px-3 py-2 text-xs text-gray-400">Aucun résultat.</p>';
                suggestions.classList.remove('hidden');
                return;
            }
            items.forEach(function (it) {
                var el = document.createElement('button');
                el.type = 'button';
                el.className = 'perm-filtre-suggestion text-sm';
                el.innerHTML = '<span>' + esc(it.label) + '</span>'
                    + '<span class="' + (it.type === 'groupe' ? 'perm-groupe' : 'perm-utilisateur') + '">'
                    + (it.type === 'groupe' ? 'Groupe' : 'Personne') + '</span>';
                el.addEventListener('click', function () { choisir(it); });
                suggestions.appendChild(el);
            });
            suggestions.classList.remove('hidden');
        }

        function doSearch() {
            var q = input.value.trim();
            if (q.length < 2) { suggestions.classList.add('hidden'); suggestions.innerHTML = ''; return; }
            var x = new XMLHttpRequest();
            x.open('GET', PRINC_BASE + '?q=' + encodeURIComponent(q) + '&limit=15');
            x.setRequestHeader('Accept', 'application/json');
            x.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            x.onload = function () {
                try { items = JSON.parse(x.responseText); } catch (e) { items = []; }
                renderSuggestions();
            };
            x.onerror = function () { suggestions.classList.add('hidden'); };
            x.send();
        }

        function choisir(it) {
            current = { type: it.type, id: it.id, label: it.label };
            input.value = it.label;
            suggestions.classList.add('hidden');
            suggestions.innerHTML = '';
            appliquer();
        }

        function labelFiltre() {
            var parts = [];
            if (current) parts.push('« ' + current.label + ' »');
            if (dossierTerm) parts.push('dossier « ' + dossierTerm + ' »');
            if (typeTerm) parts.push(typeTerm === 'groupe' ? 'groupes uniquement' : 'utilisateurs uniquement');
            if (origineTerm) parts.push(origineTerm === 'herite' ? 'héritées uniquement' : 'directes uniquement');
            return parts.join(' — ');
        }

        function rechargerArbre() {
            if (!tree) return;
            tree._filtre = {
                fid: current ? current.id : '',
                ftype: current ? current.type : '',
                q: dossierTerm,
                t: typeTerm,
                origine: origineTerm
            };
            var root = tree.querySelector('.arbre-root');
            root.innerHTML = '<p class="text-gray-400">Filtrage en cours…</p>';
            root.setAttribute('aria-busy', 'true');
            loadRoot(tree);
        }

        function appliquer() {
            if (!current && !dossierTerm && !typeTerm && !origineTerm) return;
            badgeLabel.textContent = 'Arborescence filtrée : ' + labelFiltre();
            badge.classList.remove('hidden');
            clear.classList.remove('hidden');
            rechargerArbre();
        }

        function effacer() {
            current = null;
            dossierTerm = '';
            typeTerm = '';
            origineTerm = '';
            input.value = '';
            dossierInput.value = '';
            if (typeFiltreSel) typeFiltreSel.value = '';
            if (origineFiltreSel) origineFiltreSel.value = '';
            badge.classList.add('hidden');
            clear.classList.add('hidden');
            if (tree) {
                tree._filtre = {};
                var root = tree.querySelector('.arbre-root');
                if (root && (root.childElementCount || !tree.dataset.arbreInitialise)) {
                    root.innerHTML = '<p class="text-gray-400">Chargement…</p>';
                    loadRoot(tree);
                } else if (root) {
                    root.innerHTML = '';
                }
            }
        }

        clear.addEventListener('click', effacer);
        input.addEventListener('input', function () {
            clearTimeout(timer);
            timer = setTimeout(doSearch, 250);
        });
        dossierInput.addEventListener('input', function () {
            clearTimeout(dossierTimer);
            dossierTimer = setTimeout(function () {
                var newTerm = dossierInput.value.trim();
                if (newTerm === dossierTerm) return;
                dossierTerm = newTerm;
                if (!dossierTerm && !current) {
                    effacer();
                } else if (dossierTerm.length < 2 && !current) {
                    dossierTerm = '';
                    dossierInput.value = '';
                    effacer();
                } else {
                    appliquer();
                }
            }, 300);
        });
        input.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') suggestions.classList.add('hidden');
        });
        if (typeFiltreSel) {
            typeFiltreSel.addEventListener('change', function () {
                typeTerm = typeFiltreSel.value;
                if (current || dossierTerm || typeTerm || origineTerm) appliquer();
                else effacer();
            });
        }
        if (origineFiltreSel) {
            origineFiltreSel.addEventListener('change', function () {
                origineTerm = origineFiltreSel.value;
                if (current || dossierTerm || typeTerm || origineTerm) appliquer();
                else effacer();
            });
        }
        document.addEventListener('click', function (e) {
            if (!wrap.contains(e.target)) suggestions.classList.add('hidden');
        });

        // Filtre appliqué à l'initial (URL ?ftype=...&fid=...&dossier=...&t=...&origine=...) : arbre déjà filtré.
        if (wrap.dataset.filtreActif || wrap.dataset.filtreDossier || wrap.dataset.filtreT || wrap.dataset.filtreOrigine) {
            var parts = (wrap.dataset.filtreActif || '').split(':');
            if (parts[0]) {
                current = { type: parts[0], id: Number(parts[1]), label: wrap.dataset.filtreLabel };
                input.value = current.label;
            }
            dossierTerm = wrap.dataset.filtreDossier || '';
            dossierInput.value = dossierTerm;
            typeTerm = wrap.dataset.filtreT || '';
            if (typeFiltreSel) typeFiltreSel.value = typeTerm;
            origineTerm = wrap.dataset.filtreOrigine || '';
            if (origineFiltreSel) origineFiltreSel.value = origineTerm;
            badgeLabel.textContent = 'Arborescence filtrée : ' + labelFiltre();
            badge.classList.remove('hidden');
            clear.classList.remove('hidden');
        }
    }

    function filtresFromDataset(el) {
        return {
            fid: el.dataset.arbreFid || '',
            ftype: el.dataset.arbreFtype || '',
            q: el.dataset.arbreQ || '',
            t: el.dataset.arbreT || '',
            origine: el.dataset.arbreOrigine || ''
        };
    }

    document.querySelectorAll('.perm-section').forEach(function (section) {
        wireFiltre(section);
        var tree = section.querySelector('[data-arbre-type]');
        if (tree) {
            tree._filtre = filtresFromDataset(tree);
            if (!tree.dataset.arbreInitialise) {
                tree.dataset.arbreInitialise = '1';
                loadRoot(tree);
            }
        }
    });
})();
</script>
@endsection