document.addEventListener('DOMContentLoaded', function () {
    var panel = document.getElementById('sf-panel');
    if (!panel) return;

    var input  = document.getElementById('sf-input');
    var btn    = document.getElementById('sf-btn');
    var box    = document.getElementById('sf-results');
    var toUuid = panel.dataset.uuid;

    function fileIcon(mime) {
        if (mime.startsWith('video/')) return '🎬';
        if (mime.startsWith('audio/')) return '🎵';
        if (mime === 'application/pdf') return '📑';
        return '📄';
    }

    async function doSearch() {
        var q = input.value.trim();
        if (!q) return;
        btn.disabled = true;
        box.innerHTML = '<p class="text-muted small">Recherche…</p>';
        try {
            var res  = await fetch('/?action=search_files&q=' + encodeURIComponent(q) + '&exclude=' + encodeURIComponent(toUuid));
            var data = await res.json();
            box.innerHTML = '';
            if (!data.length) {
                box.innerHTML = '<p class="text-muted small">Aucun fichier trouvé.</p>';
                return;
            }
            data.forEach(function (group) {
                var section = document.createElement('div');
                section.className = 'mb-4';

                var header = document.createElement('p');
                header.className = 'fw-semibold small mb-2';
                header.textContent = group.article.title;
                section.appendChild(header);

                var grid = document.createElement('div');
                grid.className = 'd-flex flex-wrap gap-2';

                group.files.forEach(function (f) {
                    var wrap = document.createElement('div');
                    wrap.style.cssText = 'position:relative;cursor:pointer';
                    wrap.title = f.name + ' (' + (f.size / 1024).toFixed(1) + ' Ko)';

                    if (f.is_image) {
                        var img = document.createElement('img');
                        img.src = f.url;
                        img.alt = f.name;
                        img.style.cssText = 'width:72px;height:72px;object-fit:cover;border-radius:6px;border:2px solid transparent;transition:border-color .15s,opacity .15s;display:block';
                        wrap.appendChild(img);
                    } else {
                        var icon = document.createElement('div');
                        icon.style.cssText = 'width:72px;height:72px;border-radius:6px;border:2px solid #dee2e6;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.6rem;background:#f8f9fa;transition:border-color .15s';
                        icon.innerHTML = fileIcon(f.mime) + '<span style="font-size:.6rem;margin-top:2px;color:#6c757d;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + f.name.split('.').pop().toUpperCase() + '</span>';
                        wrap.appendChild(icon);
                    }

                    var overlay = document.createElement('div');
                    overlay.style.cssText = 'position:absolute;inset:0;border-radius:6px;display:none;align-items:center;justify-content:center;background:rgba(25,135,84,.8);color:#fff;font-size:1.4rem';
                    overlay.textContent = '✓';
                    wrap.appendChild(overlay);

                    wrap.addEventListener('mouseenter', function () {
                        if (!wrap._copied) wrap.firstChild.style.borderColor = '#0d6efd';
                    });
                    wrap.addEventListener('mouseleave', function () {
                        if (!wrap._copied) wrap.firstChild.style.borderColor = 'transparent';
                    });

                    wrap.addEventListener('click', async function () {
                        if (wrap._copying || wrap._copied) return;
                        wrap._copying = true;
                        wrap.firstChild.style.opacity = '.5';
                        try {
                            var fd = new FormData();
                            fd.append('from_uuid', group.article.uuid);
                            fd.append('name',      f.name);
                            fd.append('to_uuid',   toUuid);
                            var r = await fetch('/?action=copy_file&uuid=' + encodeURIComponent(toUuid), {method: 'POST', body: fd});
                            var d = await r.json();
                            if (d.ok) {
                                wrap._copied = true;
                                wrap.firstChild.style.opacity = '1';
                                wrap.firstChild.style.borderColor = '#198754';
                                overlay.style.display = 'flex';
                            } else {
                                wrap.firstChild.style.opacity = '1';
                                wrap.firstChild.style.borderColor = '#dc3545';
                                wrap.title = d.error || 'Erreur';
                            }
                        } catch (e) {
                            wrap.firstChild.style.opacity = '1';
                        } finally {
                            wrap._copying = false;
                        }
                    });

                    grid.appendChild(wrap);
                });

                section.appendChild(grid);
                box.appendChild(section);
            });
        } catch (e) {
            box.innerHTML = '<p class="text-danger small">Erreur de recherche.</p>';
        } finally {
            btn.disabled = false;
        }
    }

    btn.addEventListener('click', doSearch);
    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); doSearch(); }
    });
    doSearch();
});