@php
    $documents = $this->documents();

@endphp

<x-filament-panels::page>
    <div class="flex items-center justify-between gap-4 flex-wrap">
        <p class="text-sm text-gray-500 dark:text-gray-400">Tous les documents dont tu es auteur — fichiers, liens ou notes Markdown, rattachés ou non.</p>
        <x-filament::button icon="heroicon-o-plus" wire:click="openApercuDocument">
            Nouveau document
        </x-filament::button>
    </div>
    <x-filament::section>
        <!-- Filtre par projet -->
        <div class="flex flex-col gap-y-3 sm:flex-row sm:items-center sm:gap-x-6 sm:gap-y-0">
            <x-filter-search :value="$search" />

            @php
                $selectedProjectFilter = $filterProjectId ? $this->availableProjects()->firstWhere('id', $filterProjectId) : null;
            @endphp
            <div class="flex items-baseline gap-2">
                <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Projet :</div>
                <x-filament::dropdown placement="bottom-start" width="200">
                    <x-slot name="trigger">
                        <button type="button" class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-[13px] font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5">
                            {{ $selectedProjectFilter ? $selectedProjectFilter->name : "Tous"}}
                            <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400" />
                        </button>
                    </x-slot>
                    <x-filament::dropdown.list>
                        <x-filament::dropdown.list.item wire:click="$set('filterProjectId', null)">
                            Tous
                        </x-filament::dropdown.list.item>
                        @foreach ($this->availableProjects() as $project)
                            <x-filament::dropdown.list.item wire:click="$set('filterProjectId', {{ $project->id }})">
                                {{ $project->code }} — {{ $project->name }}
                            </x-filament::dropdown.list.item>
                        @endforeach
                    </x-filament::dropdown.list>
                </x-filament::dropdown>
            </div>

            <!-- Filtre par catégorie -->
            @php
                $selectedCategoryFilter = $filterCategoryId ? $this->categories()->firstWhere('id', $filterCategoryId) : null;
            @endphp
            <div class="flex items-baseline gap-2">
                <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Catégorie :</div>
                <x-filament::dropdown placement="bottom-start" width="200">
                    <x-slot name="trigger">
                        <button type="button" class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-[13px] font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5">
                            {{ $selectedCategoryFilter ? $selectedCategoryFilter->label : "Toutes"}}
                            <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400" />
                        </button>
                    </x-slot>
                    <x-filament::dropdown.list>
                        <x-filament::dropdown.list.item wire:click="$set('filterCategoryId', null)">
                            Toutes
                        </x-filament::dropdown.list.item>
                        @foreach ($this->categories() as $category)
                            <x-filament::dropdown.list.item wire:click="$set('filterCategoryId', {{ $category->id }})">
                                {{ $category->label }}
                            </x-filament::dropdown.list.item>
                        @endforeach
                    </x-filament::dropdown.list>
                </x-filament::dropdown>
            </div>

            <!-- Tri  -->
            @php
                $sort_class = ['recent' => 'Plus récentes', 'oldest' => 'Plus ancienne', 'alphabetical' => 'Ordre alphabétique', 'reverse-alphabetical' => 'Ordre alphabétique inversé'];
            @endphp
            <div class="flex items-baseline gap-2">
                <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Tri :</div>
                <x-filament::dropdown placement="bottom-start" width="100">
                    <x-slot name="trigger">
                        <button type="button" class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-[13px] font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5">
                            {{ $sort_class[$sort] }}
                            <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400" />
                        </button>
                    </x-slot>
                    <x-filament::dropdown.list>
                         @foreach ($sort_class as $key => $label)
                            <x-filament::dropdown.list.item wire:click="$set('sort', '{{ $key }}')">{{ $label }}</x-filament::dropdown.list.item>
                         @endforeach
                    </x-filament::dropdown.list>
                </x-filament::dropdown>
            </div>
            <span class="h-1.5 w-1.5 shrink-0 flex-1"> </span>

            <!-- Vue -->
            <div class="flex text-right justify-right">
                <div class="flex gap-1 rounded-lg bg-gray-100 p-1 dark:bg-white/5">
                @foreach (['card' => 'heroicon-o-window', 'line' => 'heroicon-o-bars-3'] as $key => $icon)
                    <button
                        type="button"
                        wire:click="$set('view_style', '{{ $key }}')"
                        @class([
                            'rounded-md px-2.5 py-1 text-xs font-semibold',
                            'bg-white text-primary-600 shadow-sm dark:bg-gray-900 dark:text-primary-400' => $view_style === $key,
                            'text-gray-500 dark:text-gray-400' => $view_style !== $key,
                        ])
                    >
                        <x-filament::icon icon="{{ $icon }}" class="h-5 w-5" />
                    </button>
                @endforeach
                </div>
            </div>
        </div>
    </x-filament::section>
    <div>
        @if($view_style === 'card')
        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
            @foreach ($documents as $document)
                <div
                    class="group flex flex-col gap-2.5 rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900"
                >
                    <div class="flex items-start justify-between gap-2">
                        @if ($document->type !== 'markdown')
                            <a href="{{ route('documents.open', $document) }}" target="_blank" class="flex gap-1 items-center text-left text-sm font-bold text-gray-950 hover:underline dark:text-white">{{ $document->title }} <x-filament::icon icon="heroicon-o-arrow-top-right-on-square" class="h-3 w-3 text-gray-400" /></a>
                        @else
                            <button type="button" wire:click="openApercuDocument({{ $document->id }})" class="text-left text-sm font-bold text-gray-950 hover:underline dark:text-white">{{ $document->title }}</button>
                        @endif
                        @if ($document->is_public)
                            <span class="inline-flex shrink-0 items-center gap-1 rounded-full bg-success-50 px-2.5 py-0.5 text-[11px] font-semibold text-success-700 dark:bg-success-500/10 dark:text-success-400">Public</span>
                        @else
                            <span class="inline-flex shrink-0 items-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-semibold text-gray-500 dark:bg-white/5 dark:text-gray-400">Privé</span>
                        @endif
                    </div>

                    @if ($document->description)
                        <p class="line-clamp-2 text-xs text-gray-500 dark:text-gray-400">{{ $document->description }}</p>
                    @endif

                    <div class="flex flex-wrap items-center gap-1.5">
                        @if ($document->category)
                            <span class="rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-semibold text-gray-500 dark:bg-white/5 dark:text-gray-400">{{ $document->category->label }}</span>
                        @endif
                        @forelse ($document->attachmentCodes() as $code)
                            <span class="rounded-full bg-primary-50 px-2.5 py-0.5 text-[11px] font-semibold text-primary-700 dark:bg-primary-500/10 dark:text-primary-400">{{ $code }}</span>
                        @empty
                            <span class="rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-semibold text-gray-400 italic dark:bg-white/5 dark:text-gray-500">Non rattaché</span>
                        @endforelse
                    </div>

                    <div class="mt-auto flex items-center justify-between border-t border-dashed border-gray-200 pt-2 text-[11px] text-gray-400 dark:border-white/10 dark:text-gray-500">
                        <span>{{ $document->wasEdited() ? 'Modifié' : 'Créé' }} {{ $document->updated_at->diffForHumans() }}</span>
                        <button type="button" wire:click="openApercuDocument({{ $document->id }})" class="font-semibold text-primary-600 hover:underline dark:text-primary-400">Détail</button>
                    </div>
                </div>
            @endforeach
        </div>
        @else
        <x-filament::section>
            @foreach ($documents as $document)
                <div class="grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-1.5 border-b border-gray-100 mb-3 pb-2 last:mb-0 last:border-0 dark:border-white/5">
                    <span class="flex shrink-0 w-16 justify-center">
                        @if ($document->is_public)
                            <span class="shrink-0 items-center justify-center gap-1 rounded-full bg-success-50 px-2.5 py-0.5 text-[11px] font-semibold text-success-700 dark:bg-success-500/10 dark:text-success-400">Publique</span>
                        @else
                            <span class="shrink-0 items-center justify-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-semibold text-gray-500 dark:bg-white/5 dark:text-gray-400">Privée</span>
                        @endif
                    </span>
                    @if ($document->type !== 'markdown')
                            <a href="{{ route('documents.open', $document) }}" target="_blank" class="flex gap-1 items-center text-left text-sm font-bold text-gray-950 hover:underline dark:text-white">{{ $document->title }} <x-filament::icon icon="heroicon-o-arrow-top-right-on-square" class="h-3 w-3 text-gray-400" /></a>
                    @else
                            <button type="button" wire:click="openApercuDocument({{ $document->id }})" class="text-left text-sm font-bold text-gray-950 hover:underline dark:text-white">{{ $document->title }}</button>
                    @endif
                    <span class="whitespace-nowrap text-[11px] text-gray-400 dark:text-gray-500">
                        {{ $document->wasEdited() ? 'Modifié' : 'Créé' }} {{ $document->updated_at->diffForHumans() }}
                        <button type="button" wire:click="openApercuDocument({{ $document->id }})" class="font-semibold text-[11px] text-primary-600 hover:underline dark:text-primary-400">Détail</button>
                    </span>
                    <div class="col-start-2 flex flex-wrap gap-1.5">
                        @if ($document->category)
                            <span class="rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-semibold text-gray-500 dark:bg-white/5 dark:text-gray-400">{{ $document->category->label }}</span>
                        @endif
                        @forelse ($document->attachmentCodes() as $code)
                            <span class="rounded-full bg-primary-50 px-2.5 py-0.5 text-[11px] font-semibold text-primary-700 dark:bg-primary-500/10 dark:text-primary-400">{{ $code }}</span>
                        @empty
                            <span class="rounded-full bg-gray-100 px-2.5 py-0.5 text-[11px] font-semibold text-gray-400 italic dark:bg-white/5 dark:text-gray-500">Non rattaché</span>
                        @endforelse
                    </div>
                </div>
            @endforeach
        </x-filament::section>
        @endif

        @if ($documents->isEmpty())
            <div class="rounded-xl border border-dashed border-gray-200 p-10 text-center text-sm text-gray-400 dark:border-white/10 dark:text-gray-500">
                Aucun document pour l'instant.
            </div>
        @endif
    </div>
</x-filament-panels::page>