{{--
    « À régler » — ce qui, dans cet espace, n'a plus de titulaire ou ne sert à
    rien.

    ► Les définitions vivent dans `WorkspaceHousekeeping`, pas ici. Cette vue
      ne fait que rendre ce qu'il déclare.

    Deux natures, deux traitements. **Un orphelin est un accident** — un objet
    que plus aucun écran ne peut montrer — et il porte donc un fond d'alerte et
    une pastille dans l'onglet. **Un inutilisé n'est qu'un encombrement**, il se
    présente sobrement : garder trois étiquettes en réserve est un choix
    légitime, pas un problème à signaler.

    Chaque ligne mène à l'objet, où les actions existent déjà. Une seule action
    groupée par bloc, celle qui a un sens évident en masse.
--}}
@php
    $orphanElements = $this->housekeeping()->orphanElements();
    $orphanProjects = $this->housekeeping()->orphanProjects();
    $unusedTags = $this->housekeeping()->unusedTags();
    $emptyCategories = $this->housekeeping()->emptyCategories();
    $rienARegler = $orphanElements->isEmpty() && $orphanProjects->isEmpty()
        && $unusedTags->isEmpty() && $emptyCategories->isEmpty();
@endphp

<div class="flex flex-col gap-5">
    @if ($rienARegler)
        <x-filament::section>
            <div class="flex flex-col items-center gap-2 py-6 text-center">
                <x-filament::icon icon="heroicon-o-check-circle" class="h-8 w-8 text-success-500" />
                <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">Rien à régler.</p>
                <p class="max-w-sm text-xs text-gray-400 dark:text-gray-500">
                    Aucun élément ni projet sans titulaire, aucune étiquette ni catégorie inutilisée.
                </p>
            </div>
        </x-filament::section>
    @endif

    {{-- Orphelins : éléments --}}
    @if ($orphanElements->isNotEmpty())
        <x-filament::section>
            <div class="flex flex-col gap-4">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-sm font-bold text-gray-950 dark:text-white">
                            Tâches sans titulaire ({{ $orphanElements->count() }})
                        </h2>
                        <p class="text-xs text-gray-400 dark:text-gray-500">
                            Elles ne sont rangées dans aucun projet et personne n'y est assigné :
                            cet écran est le seul endroit où elles apparaissent. Cela arrive quand
                            un membre est supprimé de l'espace.
                        </p>
                    </div>
                    <button
                        type="button"
                        wire:click="claimOrphanElements"
                        wire:loading.attr="disabled"
                        wire:target="claimOrphanElements"
                        wire:confirm="Vous assigner les {{ $orphanElements->count() }} tâche(s) sans titulaire ?"
                        class="shrink-0 rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-500 disabled:opacity-40"
                    >
                        Me les assigner
                    </button>
                </div>

                <div class="flex flex-col divide-y divide-gray-100 dark:divide-white/5">
                    @foreach ($orphanElements as $element)
                        <a
                            href="{{ \App\Filament\App\Resources\ProjectElements\ProjectElementResource::getUrl('view', ['record' => $element], panel: 'app') }}"
                            wire:key="orphan-element-{{ $element->id }}"
                            class="flex items-center gap-3 py-2.5 hover:bg-gray-50 dark:hover:bg-white/5"
                        >
                            <span class="shrink-0 rounded-md bg-gray-100 px-2 py-0.5 text-[11px] font-bold text-gray-500 dark:bg-white/5 dark:text-gray-400">
                                {{ $element->code }}
                            </span>
                            <span class="min-w-0 flex-1 truncate text-sm text-gray-700 dark:text-gray-200">{{ $element->title }}</span>
                            <span class="shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
                                créée le {{ $element->created_at->translatedFormat('j M Y') }}
                            </span>
                        </a>
                    @endforeach
                </div>
            </div>
        </x-filament::section>
    @endif

    {{-- Orphelins : projets --}}
    @if ($orphanProjects->isNotEmpty())
        <x-filament::section>
            <div class="flex flex-col gap-4">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-sm font-bold text-gray-950 dark:text-white">
                            Projets sans participant ({{ $orphanProjects->count() }})
                        </h2>
                        <p class="text-xs text-gray-400 dark:text-gray-500">
                            Plus personne n'y a de rôle : seuls les administrateurs de l'espace peuvent
                            encore les ouvrir.
                        </p>
                    </div>
                    <button
                        type="button"
                        wire:click="claimOrphanProjects"
                        wire:loading.attr="disabled"
                        wire:target="claimOrphanProjects"
                        wire:confirm="Vous ajouter comme propriétaire des {{ $orphanProjects->count() }} projet(s) sans participant ?"
                        class="shrink-0 rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-500 disabled:opacity-40"
                    >
                        M'y ajouter
                    </button>
                </div>

                <div class="flex flex-col divide-y divide-gray-100 dark:divide-white/5">
                    @foreach ($orphanProjects as $project)
                        <a
                            href="{{ \App\Filament\App\Resources\Projects\ProjectResource::getUrl('view', ['record' => $project], panel: 'app') }}"
                            wire:key="orphan-project-{{ $project->id }}"
                            class="flex items-center gap-3 py-2.5 hover:bg-gray-50 dark:hover:bg-white/5"
                        >
                            <span class="shrink-0 rounded-md bg-gray-100 px-2 py-0.5 text-[11px] font-bold text-gray-500 dark:bg-white/5 dark:text-gray-400">
                                {{ $project->code }}
                            </span>
                            <span class="min-w-0 flex-1 truncate text-sm text-gray-700 dark:text-gray-200">{{ $project->name }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </x-filament::section>
    @endif

    {{-- Inutilisés : étiquettes --}}
    @if ($unusedTags->isNotEmpty())
        <x-filament::section>
            <div class="flex flex-col gap-4">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-sm font-bold text-gray-950 dark:text-white">
                            Étiquettes inutilisées ({{ $unusedTags->count() }})
                        </h2>
                        <p class="text-xs text-gray-400 dark:text-gray-500">
                            Aucune note ne les porte. Les étiquettes ne s'attachent qu'aux notes.
                        </p>
                    </div>
                    <button
                        type="button"
                        wire:click="deleteUnusedTags"
                        wire:loading.attr="disabled"
                        wire:target="deleteUnusedTags"
                        wire:confirm="Supprimer les {{ $unusedTags->count() }} étiquette(s) inutilisée(s) ?"
                        class="shrink-0 rounded-lg border border-danger-200 px-3 py-1.5 text-xs font-bold text-danger-600 hover:bg-danger-50 disabled:opacity-40 dark:border-danger-500/30 dark:text-danger-400 dark:hover:bg-danger-500/10"
                    >
                        Toutes supprimer
                    </button>
                </div>

                <div class="flex flex-wrap gap-1.5">
                    @foreach ($unusedTags as $tag)
                        <span wire:key="unused-tag-{{ $tag->id }}" class="rounded-full bg-gray-100 px-2.5 py-1 text-xs text-gray-600 dark:bg-white/5 dark:text-gray-300">
                            {{ $tag->name }}
                        </span>
                    @endforeach
                </div>
            </div>
        </x-filament::section>
    @endif

    {{-- Inutilisés : catégories de documents --}}
    @if ($emptyCategories->isNotEmpty())
        <x-filament::section>
            <div class="flex flex-col gap-4">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-sm font-bold text-gray-950 dark:text-white">
                            Catégories de documents vides ({{ $emptyCategories->count() }})
                        </h2>
                        <p class="text-xs text-gray-400 dark:text-gray-500">
                            Aucun document n'y est classé. Elles encombrent le sélecteur de classement.
                        </p>
                    </div>
                    <button
                        type="button"
                        wire:click="deleteEmptyCategories"
                        wire:loading.attr="disabled"
                        wire:target="deleteEmptyCategories"
                        wire:confirm="Supprimer les {{ $emptyCategories->count() }} catégorie(s) vide(s) ?"
                        class="shrink-0 rounded-lg border border-danger-200 px-3 py-1.5 text-xs font-bold text-danger-600 hover:bg-danger-50 disabled:opacity-40 dark:border-danger-500/30 dark:text-danger-400 dark:hover:bg-danger-500/10"
                    >
                        Toutes supprimer
                    </button>
                </div>

                <div class="flex flex-wrap gap-1.5">
                    @foreach ($emptyCategories as $category)
                        <span wire:key="empty-category-{{ $category->id }}" class="inline-flex items-center gap-1.5 rounded-full bg-gray-100 px-2.5 py-1 text-xs text-gray-600 dark:bg-white/5 dark:text-gray-300">
                            <span class="h-2 w-2 rounded-full" style="background-color: {{ $category->color ?? '#8FB3CD' }}"></span>
                            {{ $category->label }}
                        </span>
                    @endforeach
                </div>
            </div>
        </x-filament::section>
    @endif
</div>