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

@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">Toutes les notes que tu as créées — privées ou publiques, rattachées ou non.</p>
        <x-filament::button icon="heroicon-o-plus" wire:click="openApercuNote">
            Nouvelle note
        </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 tags -->
            @php
                $selectedTagFilter = $filterTag ? $this->availableTags()->firstWhere('name', $filterTag) : 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">Tag :</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">
                            {{ $selectedTagFilter ? "#".$selectedTagFilter : "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('filterTag', null)">
                            Tous
                        </x-filament::dropdown.list.item>
                        @foreach ($this->availableTags() as $tag)
                            <x-filament::dropdown.list.item wire:click="$set('filterTag', '{{ $tag }}')">
                                #{{ $tag }}
                            </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>


            <!-- View style -->
            <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 ($notes as $note)
                <button
                    type="button"
                    wire:click="openApercuNote({{ $note->id }})"
                    class="group flex flex-col gap-2.5 rounded-xl border border-gray-200 bg-white p-4 text-left transition hover:border-primary-500 hover:ring-1 hover:ring-primary-500 dark:border-white/10 dark:bg-gray-900"
                >
                    <div class="flex items-start justify-between gap-2">
                        <p class="text-sm font-bold text-gray-950 dark:text-white">{{ $note->title }}</p>
                        @if ($note->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">Publique</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ée</span>
                        @endif
                    </div>

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

                    <div class="flex flex-wrap gap-1.5">
                        @forelse ($note->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ée</span>
                        @endforelse
                        @foreach ($note->tags as $tag)
                            <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">#{{ $tag->name }}</span>
                        @endforeach
                    </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>{{ $note->wasEdited() ? 'Modifiée' : 'Créée' }} {{ $note->updated_at->diffForHumans() }}</span>
                    </div>
                </button>
            @endforeach
        </div>
        @else
        <x-filament::section>
            @foreach ($notes as $note)
                <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 ($note->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>
                    <span
                        wire:click="openApercuNote({{ $note->id }})"
                        class="min-w-0 truncate text-sm cursor-pointer hover:underline font-bold text-gray-950 dark:text-white"
                    >
                        {{ $note->title }}
                    </span>
                    <span class="whitespace-nowrap text-[11px] text-gray-400 dark:text-gray-500">
                        {{ $note->wasEdited() ? 'Modifiée' : 'Créée' }} {{ $note->updated_at->diffForHumans() }}
                    </span>
                    <div class="col-start-2 flex flex-wrap gap-1.5">
                        @forelse ($note->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ée</span>
                        @endforelse
                        @foreach ($note->tags as $tag)
                            <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">#{{ $tag->name }}</span>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </x-filament::section>
        @endif  

        @if ($notes->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">
                Aucune note pour l'instant.
            </div>
        @endif
    </div>
</x-filament-panels::page>