@if($folders->isEmpty())
    <div class="card">
        <div class="empty-state">
            <div class="empty-state-icon">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
                </svg>
            </div>
            <p class="font-semibold text-surface-500">No folders assigned</p>
            <p class="mt-1 text-xs text-surface-400">Contact your administrator to get access to folders</p>
        </div>
    </div>
@else
    <div class="space-y-4">
        @foreach($folders as $folder)
            @php
                $folderDocs   = $folder->documents;
                $folderRequiredDocs = $folderDocs->where('created_by', '!=', auth()->id());
                $folderAcked  = $folderRequiredDocs->filter(fn ($d) => in_array($d->id, $acknowledgedDocIds))->count();
                $folderTotal  = $folderDocs->count();
                $folderRequiredTotal = $folderRequiredDocs->count();
                $allAcked     = $folderRequiredTotal > 0 && $folderAcked === $folderRequiredTotal;
                $typeColors   = [
                    'controlled_documents' => ['badge' => 'bg-blue-50 text-blue-700', 'icon' => 'text-blue-500', 'bar' => 'bg-blue-500'],
                    'records'              => ['badge' => 'bg-emerald-50 text-emerald-700', 'icon' => 'text-emerald-500', 'bar' => 'bg-emerald-500'],
                    'bulletins'            => ['badge' => 'bg-amber-50 text-amber-700', 'icon' => 'text-amber-500', 'bar' => 'bg-amber-500'],
                ];
                $tc = $typeColors[$folder->document_type] ?? ['badge' => 'bg-surface-100 text-surface-600', 'icon' => 'text-surface-400', 'bar' => 'bg-surface-400'];
                $pct = $folderTotal > 0 ? round(($folderAcked / $folderTotal) * 100) : 0;

                $ancestors = collect();
                $node = $folder->parent;
                while ($node) {
                    $ancestors->prepend($node->name);
                    $node = $node->parent;
                }
                $hasAncestors = $ancestors->isNotEmpty();
                $breadcrumb = $ancestors->concat([$folder->name])->implode(' / ');
            @endphp

            @php
                $folderAckedIds = $folderRequiredDocs->filter(fn ($d) => in_array($d->id, $acknowledgedDocIds))->pluck('id')->values();
            @endphp
            <div class="card overflow-hidden" x-data="{ open: true, ackedIds: {{ Illuminate\Support\Js::from($folderAckedIds) }} }">

                <div role="button" tabindex="0" @click="open = !open" @keydown.enter="open = !open" @keydown.space.prevent="open = !open"
                     class="flex w-full cursor-pointer items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-surface-50">

                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-surface-100 {{ $tc['icon'] }}">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                                  d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
                        </svg>
                    </div>

                    <div class="min-w-0 flex-1">
                        @if($hasAncestors)
                            <p class="mb-1 truncate whitespace-nowrap text-[11px] leading-none text-surface-400" title="{{ $breadcrumb }}">{{ $breadcrumb }}</p>
                        @endif
                        <div class="flex flex-wrap items-center gap-2">
                            <p class="font-bold text-surface-900">{{ $folder->name }}</p>
                            <span class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold {{ $tc['badge'] }}">
                                {{ \App\Models\Folder::TYPES[$folder->document_type] ?? $folder->document_type }}
                            </span>
                            <span x-show="{{ $folderRequiredTotal }} > 0 && ackedIds.length === {{ $folderRequiredTotal }}" style="display:none;"
                                  class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-semibold text-emerald-700">
                                <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                All Acknowledged
                            </span>
                        </div>
                        <div class="mt-2 flex items-center gap-3">
                            <div class="h-1.5 flex-1 rounded-full bg-surface-100">
                                <div class="h-1.5 rounded-full {{ $tc['bar'] }} transition-all"
                                     :style="`width: ${ {{ $folderRequiredTotal }} > 0 ? Math.round((ackedIds.length / {{ $folderRequiredTotal }}) * 100) : 0 }%`"></div>
                            </div>
                            <p class="shrink-0 text-xs text-surface-400" x-text="ackedIds.length + '/{{ $folderRequiredTotal }} acknowledged'"></p>
                        </div>
                    </div>

                    <div class="ml-2 flex items-center gap-2 shrink-0">
                        @if($folder->pivot->can_write ?? false)
                            <a href="{{ route('admin.documents.create', ['folder_id' => $folder->id]) }}"
                               @click.stop
                               class="hidden items-center gap-1.5 rounded-lg bg-primary-50 px-2.5 py-1.5 text-xs font-semibold text-primary-700 transition-colors hover:bg-primary-100 sm:inline-flex">
                                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                Document
                            </a>
                        @endif
                        @if($folder->pivot->can_create_subfolder ?? false)
                            <a href="{{ route('admin.folders.create', ['parent_id' => $folder->id]) }}"
                               @click.stop
                               class="hidden items-center gap-1.5 rounded-lg bg-surface-100 px-2.5 py-1.5 text-xs font-semibold text-surface-700 transition-colors hover:bg-surface-200 sm:inline-flex">
                                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                Sub-folder
                            </a>
                        @endif
                        <span class="rounded-lg bg-surface-100 px-2.5 py-1 text-xs font-semibold text-surface-600">
                            {{ $folderTotal }} {{ Str::plural('doc', $folderTotal) }}
                        </span>
                        <svg class="h-4 w-4 text-surface-400 transition-transform duration-200"
                             :class="open ? 'rotate-180' : ''"
                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </div>
                </div>

                <div x-show="open" x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-100"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 -translate-y-1">

                    @if($folderDocs->isEmpty())
                        <div class="border-t border-surface-100 px-5 py-8 text-center">
                            <p class="text-sm text-surface-400">No documents in this folder yet</p>
                        </div>
                    @else
                        <div class="border-t border-surface-100 overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-surface-100 bg-surface-50/60">
                                        <th class="table-th">Doc No.</th>
                                        <th class="table-th">Title</th>
                                        @if($folder->document_type === 'controlled_documents')
                                            <th class="table-th text-center">Ver.</th>
                                            <th class="table-th">Effective Date</th>
                                        @endif
                                        <th class="table-th text-right pr-6">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-surface-50">
                                    @foreach($folderDocs as $document)
                                        <tr class="table-row-hover" x-data="{ submitting: false }">
                                            <td class="table-td">
                                                <span class="font-mono text-xs font-bold text-surface-600">
                                                    {{ $document->doc_number ?? '—' }}
                                                </span>
                                            </td>
                                            <td class="table-td max-w-[260px]">
                                                <a href="{{ route('admin.documents.show', $document) }}"
                                                   class="block truncate font-semibold text-surface-900 hover:text-primary-700 transition-colors"
                                                   title="{{ $document->title }}">
                                                    {{ $document->title }}
                                                </a>
                                                @if($document->file_name)
                                                    <span class="mt-0.5 block text-xs text-surface-400">{{ $document->file_size_formatted }}</span>
                                                @endif
                                            </td>
                                            @if($folder->document_type === 'controlled_documents')
                                                <td class="table-td text-center">
                                                    <span class="text-sm font-semibold text-surface-600">v{{ $document->version }}</span>
                                                </td>
                                                <td class="table-td text-sm text-surface-600">
                                                    {{ $document->effective_date?->format('d M Y') ?? '—' }}
                                                </td>
                                            @endif
                                            <td class="table-td">
                                                <div class="flex items-center justify-end gap-2">
                                                    @if($document->file_path)
                                                        <a href="{{ route('admin.documents.download', $document) }}"
                                                           target="_blank" rel="noopener"
                                                           class="inline-icon-button-primary" title="Download">
                                                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <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>
                                                    @endif

                                                    <a href="{{ route('admin.documents.show', $document) }}"
                                                       class="inline-icon-button-neutral" title="View">
                                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                                        </svg>
                                                    </a>

                                                    @if((int) $document->created_by === (int) auth()->id())
                                                        <span class="inline-flex min-w-[104px] items-center justify-center rounded-lg border border-surface-200 bg-surface-50 px-3 py-1.5 text-xs font-semibold text-surface-500">
                                                            Uploaded by you
                                                        </span>
                                                    @else
                                                    <template x-if="!ackedIds.includes({{ $document->id }})">
                                                        <button type="button"
                                                                :disabled="submitting"
                                                                class="inline-flex min-w-[104px] items-center justify-center gap-1.5 rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60"
                                                                @click="
                                                                    submitting = true;
                                                                    window.appRequest(@js(route('my-documents.acknowledge', $document->id)), { method: 'POST' })
                                                                    .then(d => { if (d.success) ackedIds.push({{ $document->id }}); })
                                                                    .catch(() => window.notify('error', 'Failed. Try again.'))
                                                                    .finally(() => submitting = false);
                                                                ">
                                                            <svg x-show="!submitting" class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                                                            <svg x-show="submitting" class="h-3.5 w-3.5 shrink-0 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none;"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                                            <span x-show="!submitting">Acknowledge</span>
                                                            <span x-show="submitting">Saving…</span>
                                                        </button>
                                                    </template>

                                                    <template x-if="ackedIds.includes({{ $document->id }})">
                                                        <span class="inline-flex min-w-[104px] items-center justify-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700">
                                                            <svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                                                            </svg>
                                                            Acknowledged
                                                        </span>
                                                    </template>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
@endif