{{--
    L'onglet Récapitulatifs de la page Rapport (JOS-69, lot 2) — voir le
    docblock de `ReportBuilder` pour le raisonnement. Une recette
    (`RecapConfiguration`) par ligne ; l'éditeur ne s'ouvre qu'à la demande,
    sous la liste, pour ne jamais faire de cet onglet un formulaire par
    défaut alors que le geste le plus fréquent est de consulter ou de couper.
--}}
<div class="mx-auto flex max-w-3xl flex-col gap-6">

    <x-filament::section>
        <div class="flex flex-col gap-4">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h2 class="text-sm font-bold text-gray-950 dark:text-white">Vos récapitulatifs</h2>
                    <p class="text-xs text-gray-400 dark:text-gray-500">
                        Des emails envoyés à un rythme choisi, composés des blocs ci-dessous.
                        Un récapitulatif sans rien à dire n'est pas envoyé.
                    </p>
                </div>
                <x-filament::button size="sm" icon="heroicon-m-plus" wire:click="newRecapConfiguration">
                    Nouveau
                </x-filament::button>
            </div>

            @if ($this->recapConfigurations()->isEmpty())
                <p class="text-sm text-gray-400 dark:text-gray-500">Aucun récapitulatif pour l'instant.</p>
            @else
                <div class="flex flex-col divide-y divide-gray-100 dark:divide-white/5">
                    @foreach ($this->recapConfigurations() as $configuration)
                        <div class="flex items-center justify-between gap-3 py-3">
                            <button type="button" wire:click="loadRecapConfiguration({{ $configuration->id }})" class="min-w-0 flex-1 text-left">
                                <span class="block truncate text-sm font-medium text-gray-950 dark:text-white">{{ $configuration->name }}</span>
                                <span class="block text-xs text-gray-400 dark:text-gray-500">
                                    {{ match ($configuration->frequency) {
                                        \App\Notifications\Recaps\RecapPeriod::Daily => 'Chaque jour à '.substr((string) $configuration->send_at, 0, 5),
                                        \App\Notifications\Recaps\RecapPeriod::Weekly => 'Chaque '.($this->recapWeekDays()[(int) $configuration->weekly_day] ?? '').' à '.substr((string) $configuration->send_at, 0, 5),
                                        \App\Notifications\Recaps\RecapPeriod::ReturnFromAbsence => 'Au retour d\'une absence',
                                    } }}
                                    @unless ($configuration->is_active)
                                        · <span class="text-warning-600 dark:text-warning-400">Inactif</span>
                                    @endunless
                                </span>
                            </button>

                            <div class="flex shrink-0 items-center gap-1">
                                <button
                                    type="button"
                                    wire:click="toggleRecapActive({{ $configuration->id }})"
                                    @class([
                                        "rounded-lg p-1.5 text-gray-400 hover:bg-gray-50  dark:hover:bg-white/5 ",
                                        "hover:text-gray-600 dark:hover:text-gray-300" => $configuration->is_active,
                                        "text-warning-600 dark:text-warning-400" => ! $configuration->is_active
                                    ])                                  
                                    :aria-label="'Basculer actif/inactif'"
                                    title="{{ $configuration->is_active ? 'Couper' : 'Réactiver' }}"
                                >
                                    <x-filament::icon :icon="$configuration->is_active ? 'heroicon-o-bell' : 'heroicon-o-bell-slash'" class="h-4 w-4" />
                                </button>
                                <button
                                    type="button"
                                    wire:click="sendRecapTest({{ $configuration->id }})"
                                    class="rounded-lg p-1.5 text-gray-400 hover:bg-gray-50 hover:text-gray-600 dark:hover:bg-white/5 dark:hover:text-gray-300"
                                    title="Envoyer un essai"
                                >
                                    <x-filament::icon icon="heroicon-o-paper-airplane" class="h-4 w-4" />
                                </button>
                                <button
                                    type="button"
                                    wire:click="deleteRecapConfiguration({{ $configuration->id }})"
                                    wire:confirm="Supprimer ce récapitulatif ?"
                                    class="rounded-lg p-1.5 text-gray-400 hover:bg-danger-50 hover:text-danger-600 dark:hover:bg-danger-500/10 dark:hover:text-danger-400"
                                    title="Supprimer"
                                >
                                    <x-filament::icon icon="heroicon-o-trash" class="h-4 w-4" />
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </x-filament::section>

    @if ($this->recapEditorOpen())
        <x-filament::section>
            <div class="flex flex-col gap-5">
                <div class="flex items-center justify-between">
                    <h2 class="text-sm font-bold text-gray-950 dark:text-white">
                        {{ $this->recapConfigurationId === null ? 'Nouveau récapitulatif' : 'Modifier le récapitulatif' }}
                    </h2>
                    <button type="button" wire:click="closeRecapEditor" class="text-gray-300 hover:text-gray-500 dark:text-gray-600" aria-label="Fermer">
                        <x-filament::icon icon="heroicon-m-x-mark" class="h-4 w-4" />
                    </button>
                </div>

                <div class="flex flex-col gap-1.5">
                    <label for="recap-name" class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Nom</label>
                    <input
                        id="recap-name"
                        type="text"
                        wire:model.blur="recapName"
                        class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                    />
                    @error('recapName') <p class="text-xs text-danger-600 dark:text-danger-400">{{ $message }}</p> @enderror
                </div>

                <div class="grid gap-4 sm:grid-cols-3">
                    <div class="flex flex-col gap-1.5">
                        <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Rythme</span>
                        <select wire:model.live="recapFrequency" class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white">
                            <option value="daily">Quotidien</option>
                            <option value="weekly">Hebdomadaire</option>
                            <option value="return_from_absence">Au retour d'une absence</option>
                        </select>
                    </div>

                    @if ($recapFrequency === 'weekly')
                        <div class="flex flex-col gap-1.5">
                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Jour</span>
                            <select wire:model="recapWeeklyDay" class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white">
                                @foreach ($this->recapWeekDays() as $iso => $label)
                                    <option value="{{ $iso }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    <div class="flex flex-col gap-1.5">
                        <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Heure</span>
                        <input type="time" wire:model="recapSendAt" class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white" />
                    </div>
                </div>

                @if ($recapFrequency === 'return_from_absence')
                    <p class="text-xs text-gray-400 dark:text-gray-500">
                        Ne part qu'une fois, le premier jour travaillé après une absence renseignée sur votre profil — pas à un rythme régulier. L'heure ci-dessus reste celle visée ce jour-là.
                    </p>
                @endif

                <div class="flex flex-col gap-1.5">
                    <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Projets couverts</span>
                    <x-filament::dropdown placement="bottom-start" width="xs">
                        <x-slot name="trigger">
                            <button type="button" class="rounded-lg border border-gray-200 px-2 py-1.5 text-xs text-gray-600 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5">
                                {{ $recapProjectIds === [] ? 'Tous les projets' : count($recapProjectIds).' projet(s)' }}
                            </button>
                        </x-slot>
                        <div class="flex max-h-56 flex-col gap-1 overflow-y-auto p-2">
                            @foreach ($this->selectableProjects() as $project)
                                <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
                                    <input
                                        type="checkbox"
                                        class="h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5"
                                        @checked(in_array($project->id, $recapProjectIds, true))
                                        wire:click="toggleRecapProject({{ $project->id }})"
                                    />
                                    <span class="min-w-0 truncate">{{ $project->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </x-filament::dropdown>
                    <p class="text-xs text-gray-400 dark:text-gray-500">
                        Vos éléments non rangés restent toujours visibles, quel que soit ce réglage.
                    </p>
                </div>

                @if ($this->recapCanShowAllTasks())
                    <div class="flex flex-col gap-1.5">
                        <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Contenu</span>
                        <div class="flex gap-4 text-sm text-gray-600 dark:text-gray-300">
                            <label class="flex items-center gap-1.5">
                                <input type="radio" wire:model="recapOnlyMine" value="1" class="h-3.5 w-3.5 border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5" />
                                Mes tâches
                            </label>
                            <label class="flex items-center gap-1.5">
                                <input type="radio" wire:model="recapOnlyMine" value="0" class="h-3.5 w-3.5 border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5" />
                                Toutes les tâches du projet
                            </label>
                        </div>
                        <p class="text-xs text-gray-400 dark:text-gray-500">
                            « Toutes » ne couvre que les projets dont vous êtes responsable ou manager.
                        </p>
                    </div>
                @endif
                <label class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                    <input type="checkbox" wire:model="recapShowChantiers" class="h-4 w-4 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5" />
                    Afficher les chantiers
                </label>

                <div class="flex flex-col gap-2">
                    <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Blocs</span>

                    @foreach ($recapBlocks as $index => $raw)
                        @php $block = $this->recapBlock($index); @endphp
                        @if ($block !== null)
                            <div class="flex flex-wrap items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 dark:border-white/10">
                                <x-filament::icon :icon="$block->type->icon()" class="h-4 w-4 shrink-0 text-gray-400" />
                                <span class="min-w-0 flex-1 text-sm text-gray-950 dark:text-white">{{ $block->type->label() }}</span>

                                @if ($block->type->hasPeriod())
                                    <select wire:model.live="recapBlocks.{{ $index }}.period" class="rounded-lg border-gray-200 py-1 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white" aria-label="Période du bloc">
                                        @foreach ($this->recapBlockPeriods($index) as $period)
                                            <option value="{{ $period->value }}">{{ $period->label() }}</option>
                                        @endforeach
                                    </select>
                                @endif

                                <button type="button" wire:click="removeRecapBlock({{ $index }})" class="text-gray-300 hover:text-danger-500 dark:text-gray-600" aria-label="Retirer le bloc">
                                    <x-filament::icon icon="heroicon-m-x-mark" class="h-4 w-4" />
                                </button>
                            </div>
                        @endif
                    @endforeach

                    @error('recapBlocks') <p class="text-xs text-danger-600 dark:text-danger-400">{{ $message }}</p> @enderror

                    <x-filament::dropdown placement="bottom-start" width="xs">
                        <x-slot name="trigger">
                            <x-filament::button color="gray" size="sm" icon="heroicon-m-plus" class="w-fit">
                                Ajouter un bloc
                            </x-filament::button>
                        </x-slot>
                        <x-filament::dropdown.list>
                            @foreach ($this->recapBlockTypes() as $type)
                                <x-filament::dropdown.list.item wire:click="addRecapBlock('{{ $type->value }}')" :icon="$type->icon()">
                                    {{ $type->label() }}
                                </x-filament::dropdown.list.item>
                            @endforeach
                        </x-filament::dropdown.list>
                    </x-filament::dropdown>
                </div>

                <label class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                    <input type="checkbox" wire:model="recapIsActive" class="h-4 w-4 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5" />
                    Actif
                </label>

                <div class="flex items-center gap-2 border-t border-gray-100 pt-4 dark:border-white/5">
                    <x-filament::button wire:click="saveRecapConfiguration" wire:loading.attr="disabled">
                        Enregistrer
                    </x-filament::button>

                    @if ($recapConfigurationId !== null)
                        <x-filament::button color="gray" outlined wire:click="sendRecapTest({{ $recapConfigurationId }})">
                            Envoyer un essai
                        </x-filament::button>
                    @endif
                </div>
            </div>
        </x-filament::section>
    @endif
</div>