{{--
    Deux niveaux : une ligne par famille, et le détail par type qui ne s'ouvre
    que sur demande — voir le docblock de `NotificationSettings` pour le
    raisonnement. Rien ici ne décide de quoi que ce soit : chaque case lit
    `NotificationPreferences` et lui réécrit.
--}}
<x-filament-panels::page>
    <div class="mx-auto flex max-w-4xl flex-col gap-5">

        {{--
            Le bandeau d'absence, en tête et non au niveau de sa section. Le
            risque réel de cette fonctionnalité n'est pas de mal couper, c'est
            qu'on oublie de la désactiver et qu'on se demande pendant trois
            semaines pourquoi plus aucun email n'arrive.
        --}}
        @if ($this->isAbsent())
            <div class="flex items-start gap-3 rounded-xl border border-warning-300 bg-warning-50 p-4 dark:border-warning-500/30 dark:bg-warning-500/10">
                <x-filament::icon icon="heroicon-o-moon" class="mt-0.5 h-5 w-5 shrink-0 text-warning-600 dark:text-warning-400" />
                <div class="text-sm text-warning-800 dark:text-warning-200">
                    <span class="font-semibold">Mode absence actif</span> — {{ $this->absenceSummary() }}.
                    Vos emails et récapitulatifs sont suspendus&nbsp;; la cloche continue de tout enregistrer.
                </div>
            </div>
        @endif

        <x-filament::section>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Ces réglages ne valent que pour cet espace de travail. Certains types ne sont pas
                encore émis&nbsp;: ils apparaissent pour que le réglage soit déjà en place quand ils
                le seront.
            </p>
        </x-filament::section>

        <x-filament::section>
            <div class="flex flex-col">

                {{-- En-tête des colonnes de canaux. --}}
                <div class="flex items-center gap-4 border-b border-gray-200 pb-3 dark:border-white/10">
                    <div class="flex-1"></div>
                    @foreach ($this->channels() as $channel)
                        <div class="w-24 shrink-0 text-center text-xs font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">
                            {{ $channel->label() }}
                        </div>
                    @endforeach
                </div>

                @foreach ($this->families() as $family)
                    @php($expanded = $this->isExpanded($family->value))

                    {{-- Niveau 1 : la famille. --}}
                    <div class="flex items-center gap-4 border-b border-gray-100 py-4 dark:border-white/5">
                        <button
                            type="button"
                            wire:click="toggleExpanded('{{ $family->value }}')"
                            class="flex flex-1 items-center gap-2 text-left"
                            aria-expanded="{{ $expanded ? 'true' : 'false' }}"
                        >
                            <x-filament::icon
                                :icon="$expanded ? 'heroicon-m-chevron-down' : 'heroicon-m-chevron-right'"
                                class="h-4 w-4 shrink-0 text-gray-400"
                            />
                            <span>
                                <span class="block text-sm font-semibold text-gray-950 dark:text-white">{{ $family->label() }}</span>
                                <span class="block text-xs text-gray-400 dark:text-gray-500">{{ $family->description() }}</span>
                            </span>
                        </button>

                        @foreach ($this->channels() as $channel)
                            @php($state = $this->familyState($family, $channel))
                            <div class="w-24 shrink-0 text-center">
                                @if ($state === 'locked')
                                    {{-- Toute la famille est imposée sur ce canal : rien à régler. --}}
                                    <x-filament::icon icon="heroicon-m-lock-closed" class="mx-auto h-4 w-4 text-gray-300 dark:text-gray-600" />
                                @else
                                    <input
                                        type="checkbox"
                                        class="h-5 w-5 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5"
                                        @checked($state === 'all')
                                        {{--
                                            `indeterminate` n'existe qu'en propriété JS, pas en
                                            attribut HTML : l'écrire dans le balisage ne ferait
                                            rien. D'où le passage par Alpine, réévalué à chaque
                                            rendu Livewire grâce à la clé ci-dessous.
                                        --}}
                                        wire:key="family-{{ $family->value }}-{{ $channel->value }}-{{ $state }}"
                                        x-init="$el.indeterminate = @js($state === 'some')"
                                        wire:click="setFamily('{{ $family->value }}', '{{ $channel->value }}', {{ $state === 'all' ? 'false' : 'true' }})"
                                        aria-label="{{ $family->label() }} — {{ $channel->label() }}"
                                    />
                                @endif
                            </div>
                        @endforeach
                    </div>

                    {{-- Niveau 2 : le détail par type. --}}
                    @if ($expanded)
                        @foreach ($family->types() as $type)
                            {{--
                                `pl-12` et non `pl-6` : le libellé de famille est déjà décalé de la
                                largeur du chevron, un retrait plus faible alignerait les deux
                                niveaux au lieu de les distinguer.
                            --}}
                            <div class="flex items-center gap-4 border-b border-gray-100 bg-gray-50/60 py-2.5 pl-12 dark:border-white/5 dark:bg-white/[0.02]">
                                <div class="flex-1 text-sm text-gray-600 dark:text-gray-300">{{ $type->label() }}</div>

                                @foreach ($this->channels() as $channel)
                                    <div class="w-24 shrink-0 text-center">
                                        @if ($type->isLocked($channel))
                                            {{--
                                                Grisé et non masqué : un interrupteur absent se lit
                                                comme un oubli, et fait chercher le réglage ailleurs.
                                            --}}
                                            <span
                                                class="inline-flex"
                                                title="{{ $type->isEnabledByDefault($channel) ? 'Toujours activé — ne peut pas être coupé.' : 'Indisponible pour ce type.' }}"
                                            >
                                                <x-filament::icon icon="heroicon-m-lock-closed" class="h-4 w-4 text-gray-300 dark:text-gray-600" />
                                            </span>
                                        @else
                                            @php($enabled = $this->isEnabled($type, $channel))
                                            <input
                                                type="checkbox"
                                                class="h-4 w-4 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5"
                                                @checked($enabled)
                                                wire:click="setType('{{ $type->value }}', '{{ $channel->value }}', {{ $enabled ? 'false' : 'true' }})"
                                                aria-label="{{ $type->label() }} — {{ $channel->label() }}"
                                            />
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    @endif
                @endforeach

            </div>

            <p class="mt-4 flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500" data-legend>
                <x-filament::icon icon="heroicon-m-lock-closed" class="h-3.5 w-3.5" />
                Un cadenas signale un réglage imposé&nbsp;: certaines informations (accès accordé,
                mention directe) ne peuvent pas être coupées.
            </p>
        </x-filament::section>

        {{--
            Les récapitulatifs se créent et se règlent (rythme, heure, projets,
            blocs) depuis l'onglet Récapitulatifs de « Rapports » depuis le lot 2
            de JOS-69 — cette page n'en gère plus le contenu ni l'horaire.
        --}}

        <x-filament::section>
            <div class="flex flex-col gap-5">
                <div>
                    <h2 class="text-sm font-bold text-gray-950 dark:text-white">Absence</h2>
                    <p class="text-xs text-gray-400 dark:text-gray-500">
                        Pendant cette période, aucun email ni récapitulatif ne vous est envoyé —
                        <span class="font-medium">y compris ceux habituellement obligatoires</span>.
                        La cloche, elle, continue de tout enregistrer&nbsp;: vous retrouverez à votre
                        retour ce qui s'est passé. Laisser les deux dates vides désactive le mode absence.
                    </p>
                </div>

                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label for="absent-from" class="mb-1.5 block text-xs font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">
                            Du
                        </label>
                        <input
                            id="absent-from"
                            type="date"
                            wire:model="absentFrom"
                            class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                        />
                    </div>

                    <div>
                        <label for="absent-until" class="mb-1.5 block text-xs font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">
                            Au (inclus)
                        </label>
                        <input
                            id="absent-until"
                            type="date"
                            wire:model="absentUntil"
                            class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                        />
                    </div>
                </div>

                <div class="flex flex-wrap gap-2">
                    <x-filament::button wire:click="saveAbsence" wire:loading.attr="disabled">
                        Enregistrer
                    </x-filament::button>

                    @if ($this->hasOtherWorkspaces())
                        <x-filament::button color="gray" wire:click="duplicateAbsenceToAllWorkspaces" wire:loading.attr="disabled">
                            Appliquer à tous mes espaces
                        </x-filament::button>
                    @endif
                </div>
            </div>
        </x-filament::section>

    </div>
</x-filament-panels::page>