@php
    $attachments = $brief->attachments ?? collect();
    $grouped = $attachments->groupBy(fn ($a) => $a->folderName() ?? '__root__');
    $canUpload = auth()->user()->hasRole('admin') || auth()->user()->employer;
@endphp

<div id="fichiers" class="flex h-full min-h-[320px] w-full flex-col rounded-xl border border-slate-200 bg-white shadow-sm">
    <div class="flex flex-wrap items-start justify-between gap-2 border-b border-slate-100 px-4 py-3">
        <div>
            <h3 class="text-sm font-semibold text-slate-900">Fichiers & dossiers</h3>
            <p class="text-xs text-slate-500">Maquettes et assets partages</p>
        </div>
        @if($attachments->isNotEmpty())
            <a href="{{ route('employer-briefs.attachments.archive', $brief) }}"
               class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">
                <svg class="h-4 w-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>
                Tout telecharger (.zip)
            </a>
        @endif
    </div>

    @if($canUpload)
        <form method="POST" action="{{ route('employer-briefs.attachments.store', $brief) }}" enctype="multipart/form-data"
              id="brief-attachments-form" class="border-b border-slate-100 px-3 py-3">
            @csrf
            <div class="flex flex-wrap gap-2">
                <button type="button" id="brief-pick-files-btn"
                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">
                    <svg class="h-4 w-4 text-[#E83646]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                    Fichiers
                </button>
                <button type="button" id="brief-pick-folder-btn"
                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">
                    <svg class="h-4 w-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                    Dossier entier
                </button>
            </div>
            <input type="file" name="files[]" multiple class="hidden brief-files-input" tabindex="-1" aria-hidden="true">
            <input type="file" webkitdirectory directory multiple class="hidden brief-folder-input" tabindex="-1" aria-hidden="true">
            <div id="brief-upload-queue" class="mt-3 hidden space-y-1 text-xs text-slate-600"></div>
            <x-input-error :messages="$errors->get('files')" class="mt-2" />
            <x-input-error :messages="$errors->get('files.*')" class="mt-2" />
            <button type="submit" id="brief-upload-submit" disabled
                    class="mt-2 rounded-full bg-[#E83646] px-3 py-1 text-xs font-semibold text-white opacity-50 hover:bg-rose-600 disabled:cursor-not-allowed enabled:opacity-100">
                Televerser
            </button>
        </form>
    @endif

    <div class="flex-1 overflow-y-auto px-3 py-3" style="max-height: 420px;">
    @if($attachments->isEmpty())
        <div class="rounded-lg border border-slate-200 bg-white px-4 py-8 text-center">
            <svg class="mx-auto h-10 w-10 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            <p class="mt-2 text-sm text-slate-500">Aucun fichier pour ce brief.</p>
        </div>
    @else
        <div class="space-y-4">
            @foreach($grouped as $folderKey => $folderFiles)
                <div class="overflow-hidden rounded-lg border border-slate-200">
                    @if($folderKey !== '__root__')
                        <div class="flex items-center gap-2 border-b border-slate-100 bg-white px-3 py-2">
                            <svg class="h-4 w-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                            <span class="text-xs font-semibold uppercase tracking-wide text-slate-600">{{ $folderKey }}</span>
                            <span class="text-xs text-slate-400">({{ $folderFiles->count() }})</span>
                        </div>
                    @endif
                    <ul class="divide-y divide-slate-100">
                        @foreach($folderFiles as $attachment)
                            @php
                                $previewUrl = route('employer-briefs.attachments.show', ['brief' => $brief, 'attachment' => $attachment]);
                                $downloadUrl = $previewUrl.'?download=1';
                                $canDelete = auth()->user()->hasRole('admin')
                                    || (auth()->user()->employer && (int) $attachment->employer_id === (int) auth()->user()->employer->id);
                            @endphp
                            <li class="flex flex-wrap items-center gap-3 px-3 py-2.5 hover:bg-slate-50/80">
                                @if($attachment->isImage())
                                    <a href="{{ $previewUrl }}" target="_blank" class="block h-12 w-12 shrink-0 overflow-hidden rounded-lg border border-slate-200 bg-white">
                                        <img src="{{ $previewUrl }}" alt="" class="h-full w-full object-cover">
                                    </a>
                                @else
                                    <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-slate-100 text-xs font-bold uppercase text-slate-500">
                                        {{ $attachment->extension() ?: '?' }}
                                    </div>
                                @endif
                                <div class="min-w-0 flex-1">
                                    <p class="truncate text-sm font-medium text-slate-800" title="{{ $attachment->displayLabel() }}">
                                        {{ $folderKey === '__root__' ? $attachment->original_name : basename($attachment->relative_path ?? $attachment->original_name) }}
                                    </p>
                                    <p class="text-xs text-slate-500">
                                        {{ $attachment->formattedSize() }}
                                        @if($attachment->employer?->user)
                                            · {{ $attachment->employer->user->name }}
                                        @endif
                                        · {{ $attachment->created_at?->format('d/m/Y H:i') }}
                                    </p>
                                </div>
                                <div class="flex shrink-0 items-center gap-1">
                                    @if($attachment->isPreviewable())
                                        <button type="button"
                                                class="brief-preview-btn rounded-md px-2 py-1 text-xs font-semibold text-indigo-700 hover:bg-indigo-50"
                                                data-preview-url="{{ $previewUrl }}"
                                                data-preview-type="{{ $attachment->isPdf() ? 'pdf' : 'image' }}"
                                                data-preview-title="{{ $attachment->displayLabel() }}">
                                            Apercu
                                        </button>
                                    @endif
                                    <a href="{{ $downloadUrl }}" class="rounded-md px-2 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-100">
                                        Telecharger
                                    </a>
                                    @if($canDelete)
                                        <form method="POST" action="{{ route('employer-briefs.attachments.destroy', ['brief' => $brief, 'attachment' => $attachment]) }}"
                                              onsubmit="return confirm('Supprimer ce fichier ?');" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="rounded-md px-2 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-50">
                                                Suppr.
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>
    @endif
    </div>
</div>

<div id="brief-file-preview-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/70 p-4" role="dialog" aria-modal="true">
    <div class="relative flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-xl bg-white shadow-2xl">
        <div class="flex items-center justify-between border-b border-slate-200 px-4 py-3">
            <h4 id="brief-preview-title" class="truncate pr-4 text-sm font-semibold text-slate-900"></h4>
            <button type="button" id="brief-preview-close" class="rounded-lg p-1 text-slate-500 hover:bg-slate-100">
                <svg class="h-5 w-5" 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>
        </div>
        <div id="brief-preview-body" class="flex min-h-[200px] flex-1 items-center justify-center overflow-auto bg-slate-50 p-4"></div>
    </div>
</div>

<script>
(function () {
    const form = document.getElementById('brief-attachments-form');
    if (!form) return;

    const fileInput = form.querySelector('.brief-files-input');
    const folderInput = form.querySelector('.brief-folder-input');
    const pickFilesBtn = document.getElementById('brief-pick-files-btn');
    const pickFolderBtn = document.getElementById('brief-pick-folder-btn');
    const submitBtn = document.getElementById('brief-upload-submit');
    const queueEl = document.getElementById('brief-upload-queue');
    let uploadMode = null; // 'files' | 'folder'

    function clearPaths() {
        form.querySelectorAll('input[name="paths[]"]').forEach((el) => el.remove());
    }

    function setPathsFromFileList(fileList, useRelativePath) {
        clearPaths();
        Array.from(fileList || []).forEach((file) => {
            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.name = 'paths[]';
            hidden.value = useRelativePath && file.webkitRelativePath ? file.webkitRelativePath : file.name;
            form.appendChild(hidden);
        });
    }

    function useFilesMode() {
        uploadMode = 'files';
        fileInput.setAttribute('name', 'files[]');
        folderInput.removeAttribute('name');
        folderInput.value = '';
    }

    function useFolderMode() {
        uploadMode = 'folder';
        fileInput.removeAttribute('name');
        fileInput.value = '';
        folderInput.setAttribute('name', 'files[]');
    }

    function updateQueue(fileList, useRelativePath) {
        const files = Array.from(fileList || []);
        if (files.length === 0) {
            queueEl.classList.add('hidden');
            queueEl.innerHTML = '';
            submitBtn.disabled = true;
            uploadMode = null;
            useFilesMode();
            clearPaths();
            return;
        }

        if (useRelativePath) {
            setPathsFromFileList(files, true);
        } else {
            clearPaths();
        }

        queueEl.classList.remove('hidden');
        const label = useRelativePath ? 'dossier' : 'fichiers';
        queueEl.innerHTML = '<p class="font-semibold text-slate-700">' + files.length + ' fichier(s) (' + label + ') pret(s)</p>'
            + files.slice(0, 8).map((f) => {
                const p = useRelativePath && f.webkitRelativePath ? f.webkitRelativePath : f.name;
                return '<p class="truncate">' + p + '</p>';
            }).join('')
            + (files.length > 8 ? '<p>… et ' + (files.length - 8) + ' de plus</p>' : '');
        submitBtn.disabled = false;
    }

    useFilesMode();

    pickFilesBtn?.addEventListener('click', () => {
        useFilesMode();
        fileInput.click();
    });

    pickFolderBtn?.addEventListener('click', () => {
        useFolderMode();
        folderInput.click();
    });

    fileInput?.addEventListener('change', (e) => {
        useFilesMode();
        updateQueue(e.target.files, false);
    });

    folderInput?.addEventListener('change', (e) => {
        useFolderMode();
        updateQueue(e.target.files, true);
    });

    form.addEventListener('submit', () => {
        if (uploadMode === 'folder' && folderInput.files.length > 0) {
            setPathsFromFileList(folderInput.files, true);
        }
    });

    const modal = document.getElementById('brief-file-preview-modal');
    const previewBody = document.getElementById('brief-preview-body');
    const previewTitle = document.getElementById('brief-preview-title');

    document.querySelectorAll('.brief-preview-btn').forEach((btn) => {
        btn.addEventListener('click', () => {
            const url = btn.dataset.previewUrl;
            const type = btn.dataset.previewType;
            const title = btn.dataset.previewTitle || 'Apercu';
            previewTitle.textContent = title;
            previewBody.innerHTML = '';
            if (type === 'pdf') {
                previewBody.innerHTML = '<iframe src="' + url + '" class="h-[70vh] w-full rounded-lg border border-slate-200 bg-white" title="' + title + '"></iframe>';
            } else {
                previewBody.innerHTML = '<img src="' + url + '" alt="" class="max-h-[70vh] max-w-full rounded-lg object-contain">';
            }
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        });
    });

    document.getElementById('brief-preview-close')?.addEventListener('click', () => {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        previewBody.innerHTML = '';
    });
    modal?.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            previewBody.innerHTML = '';
        }
    });
})();
</script>