{{--
    v4.4.0 §C1 (c) — LE BLOC « MA PRIME », après « Mes heures », avant « ＋ Nouvelle tâche ».

    Tout ce qui est ici est LU : rien ne se saisit, tout vient des gestes de la journée. L'ordre
    suit la maquette `pilotage-v3.38.html`, onglet « Primes · gamifiées » : montant projeté et
    cible → jauge des niveaux → les cinq points du jour → la série → les badges → l'objectif
    d'équipe → le règlement → « Chaque point a sa ligne ».

    ⚠️ Le montant est une PROJECTION, jamais une promesse : le taux courant appliqué à la cible.
    Sans prime cible sur la fiche, on montre les points et le niveau — jamais un montant inventé.
--}}
<x-filament::section id="ma-prime">
    <x-slot name="heading">Ma prime</x-slot>
    <x-slot name="description">{{ $bloc['mois_libelle'] }}, en direct — calculée à l'heure du récap, rien à saisir</x-slot>

    {{-- ── Le montant projeté et la cible ──────────────────────────────────────────────── --}}
    <div class="flex flex-wrap items-end justify-between gap-3 rounded-xl bg-primary-50 px-4 py-3 dark:bg-primary-500/10">
        <div>
            @if ($bloc['projete'] !== null)
                <p class="text-3xl font-bold tabular-nums text-primary-700 dark:text-primary-300">
                    {{ \App\Support\Money::format($bloc['projete']) }}
                </p>
                <p class="text-xs text-primary-700/70 dark:text-primary-300/70">
                    projetés si tu tiens ce rythme
                </p>
            @else
                <p class="text-2xl font-bold text-primary-700 dark:text-primary-300">
                    {{ $bloc['niveau']->label() }}
                </p>
                <p class="text-xs text-primary-700/70 dark:text-primary-300/70">
                    aucune prime cible n'est encore définie sur votre fiche
                </p>
            @endif
        </div>
        <div class="text-right text-xs text-primary-700/80 dark:text-primary-300/80">
            @if ($bloc['cible'] !== null)
                cible 100 % : <strong>{{ \App\Support\Money::format($bloc['cible']) }}</strong><br>
            @endif
            <span class="tabular-nums">
                {{ $bloc['points_du_mois'] }} / {{ $bloc['maximum'] }} pts ·
                {{ rtrim(rtrim(number_format($bloc['taux'], 1, ',', ' '), '0'), ',') }} %
            </span>
        </div>
    </div>

    {{-- ── La jauge des niveaux, avec ses trois seuils ─────────────────────────────────── --}}
    <div class="mt-4">
        <div class="relative h-3 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-white/10">
            <div class="ma-prime-jauge h-full rounded-full bg-primary-500"
                 style="width: {{ min(100, max(0, $bloc['taux'])) }}%"></div>
            @foreach ($bloc['seuils'] as $seuil)
                <span class="absolute top-0 h-full w-px bg-gray-400 dark:bg-white/40"
                      style="left: {{ min(100, max(0, $seuil)) }}%"></span>
            @endforeach
        </div>
        <div class="mt-1 flex justify-between text-[10px] text-gray-500 dark:text-gray-400">
            <span>0</span>
            @foreach (\App\Enums\NiveauPrime::paliers() as $i => $palier)
                <span>{{ $palier->label() }} {{ rtrim(rtrim(number_format($bloc['seuils'][$i] ?? 0, 1, ',', ' '), '0'), ',') }} %</span>
            @endforeach
        </div>
    </div>

    {{-- ── Les cinq points du jour ─────────────────────────────────────────────────────── --}}
    <h3 class="mt-5 text-sm font-semibold text-gray-900 dark:text-white">
        Aujourd'hui
        <span class="text-xs font-normal text-gray-500 dark:text-gray-400">
            — {{ $bloc['points_du_jour'] }}/{{ $bloc['max_jour'] }} pts
            @if ($bloc['bonus_du_jour'] > 0)
                <span>· +{{ $bloc['bonus_du_jour'] }} de bonus</span>
            @endif
        </span>
    </h3>
    <ul class="mt-2 space-y-1">
        @foreach ($bloc['gestes'] as $geste)
            <li class="flex items-start gap-2 rounded-lg border border-gray-200 px-3 py-2 dark:border-white/10">
                <span @class([
                    'shrink-0 text-sm font-bold',
                    'text-success-600 dark:text-success-400' => $geste['etat'] === \App\Enums\EtatDuGeste::Acquis,
                    'text-danger-600 dark:text-danger-400' => $geste['etat'] === \App\Enums\EtatDuGeste::Perdu,
                    'text-gray-400 dark:text-gray-500' => in_array($geste['etat'], [\App\Enums\EtatDuGeste::APrendre, \App\Enums\EtatDuGeste::SansObjet], true),
                ])>{{ $geste['etat']->signe() }}</span>
                <span class="min-w-0 flex-1">
                    <span class="block text-sm text-gray-900 dark:text-white">{{ $geste['libelle'] }}</span>
                    <span class="block text-xs text-gray-500 dark:text-gray-400">{{ $geste['phrase'] }}</span>
                </span>
                <span @class([
                    'shrink-0 text-sm font-semibold tabular-nums',
                    'text-success-600 dark:text-success-400' => $geste['etat'] === \App\Enums\EtatDuGeste::Acquis,
                    'text-gray-400 dark:text-gray-500' => $geste['etat'] !== \App\Enums\EtatDuGeste::Acquis,
                ])>
                    {{ $geste['etat'] === \App\Enums\EtatDuGeste::Acquis ? '+'.$geste['points'] : $geste['etat']->label() }}
                </span>
            </li>
        @endforeach
    </ul>

    @if ($bloc['bonus']->isNotEmpty())
        <ul class="mt-2 space-y-1">
            @foreach ($bloc['bonus'] as $bonus)
                <li class="flex items-start gap-2 rounded-lg border border-primary-200 bg-primary-50/40 px-3 py-2 text-xs dark:border-primary-500/30 dark:bg-primary-500/5">
                    <span class="shrink-0 font-semibold text-primary-700 dark:text-primary-300">+{{ $bonus['points'] }}</span>
                    <span class="text-gray-700 dark:text-gray-300">{{ $bonus['phrase'] }}</span>
                </li>
            @endforeach
        </ul>
    @endif

    {{-- ── La série, ses quatorze cases, et le joker du mois ───────────────────────────── --}}
    <div class="mt-5 rounded-xl border border-gray-200 p-3 dark:border-white/10">
        <div class="flex flex-wrap items-center gap-2">
            <span class="text-sm font-semibold text-gray-900 dark:text-white">Série</span>
            <span class="flex gap-0.5">
                @foreach ($bloc['serie_cases'] as $case)
                    <i @class([
                        'block h-4 w-2 rounded-sm',
                        'bg-primary-500' => $case === 'on',
                        'bg-warning-400' => $case === 'joker',
                        'bg-gray-200 dark:bg-white/10' => $case === 'off',
                    ])></i>
                @endforeach
            </span>
            <span class="text-sm font-bold tabular-nums text-gray-900 dark:text-white">
                {{ $bloc['serie'] > 0 ? $bloc['serie'].' j' : 'rompue' }}
            </span>
        </div>
        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
            Joker du mois {{ $bloc['joker_utilise'] ? 'utilisé' : 'disponible' }} — une journée en
            dessous du seuil ne casse pas la série, la suivante la ramène à zéro.
            @foreach ($bloc['serie_seuils'] as $i => $seuil)
                <span>{{ $seuil }} j = {{ ($bloc['serie_points'][$i] ?? 0) > 0 ? '+'.$bloc['serie_points'][$i].' pts' : 'badge' }}{{ $loop->last ? '' : ' ·' }}</span>
            @endforeach
        </p>
    </div>

    {{-- ── Les badges du mois ──────────────────────────────────────────────────────────── --}}
    <h3 class="mt-5 text-sm font-semibold text-gray-900 dark:text-white">Mes badges du mois</h3>
    @if ($bloc['badges']->isEmpty())
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
            Aucun badge encore ce mois-ci — la série de {{ $bloc['serie_seuils'][0] ?? 5 }} jours en débloque un.
        </p>
    @else
        <div class="mt-2 flex flex-wrap gap-2">
            @foreach ($bloc['badges'] as $badge)
                <span class="inline-flex items-center gap-1 rounded-full border border-warning-300 bg-warning-50 px-3 py-1 text-xs font-medium text-warning-800 dark:border-warning-500/40 dark:bg-warning-500/10 dark:text-warning-200"
                      title="{{ $badge->cle->explication() }}">
                    ★ {{ $badge->label() }}
                    @if ((int) $badge->points > 0)
                        <span class="font-bold">+{{ $badge->points }}</span>
                    @endif
                </span>
            @endforeach
        </div>
    @endif

    {{-- ── L'objectif d'équipe de la semaine ───────────────────────────────────────────── --}}
    @if ($bloc['objectifs']->isNotEmpty())
        <h3 class="mt-5 text-sm font-semibold text-gray-900 dark:text-white">Objectif d'équipe</h3>
        <ul class="mt-2 space-y-1">
            @foreach ($bloc['objectifs'] as $objectif)
                <li class="rounded-lg border border-gray-200 px-3 py-2 text-xs dark:border-white/10">
                    <strong class="text-gray-900 dark:text-white">{{ $objectif->libelle }}</strong>
                    <span class="text-gray-500 dark:text-gray-400">
                        — {{ $objectif->libelleDuMarche() }} · {{ $objectif->etat() }}
                    </span>
                </li>
            @endforeach
        </ul>
    @endif

    {{-- ── Le tableau d'équipe, quand l'option est active. Jamais de montant. ──────────── --}}
    @if ($bloc['tableau_equipe'] && $equipePrimes->isNotEmpty())
        <h3 class="mt-5 text-sm font-semibold text-gray-900 dark:text-white">Mon équipe cette semaine</h3>
        <p class="text-xs text-gray-500 dark:text-gray-400">
            Séries et niveaux — jamais de montant, jamais de classement.
        </p>
        <ul class="mt-2 space-y-1">
            @foreach ($equipePrimes as $ligne)
                <li class="flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2 text-xs dark:border-white/10">
                    <span class="text-gray-900 dark:text-white">{{ $ligne['employee']->full_name }}</span>
                    <span class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
                        série {{ $ligne['serie'] }} j
                        <x-filament::badge :color="$ligne['niveau']->color()" size="xs">
                            {{ $ligne['niveau']->label() }}
                        </x-filament::badge>
                    </span>
                </li>
            @endforeach
        </ul>
    @endif

    {{-- ── Le règlement, et le journal du mois ─────────────────────────────────────────── --}}
    <div class="mt-5 flex flex-wrap items-center gap-3 border-t border-gray-200 pt-4 dark:border-white/10">
        <button type="button" wire:click="telechargerLeReglement"
                class="text-sm text-primary-600 hover:underline dark:text-primary-400">
            Règlement des primes (PDF) ›
        </button>
    </div>

    <details class="mt-3">
        <summary class="cursor-pointer text-sm text-gray-600 dark:text-gray-300">
            Chaque point a sa ligne — le détail du mois, jour par jour
        </summary>
        <ul class="mt-2 space-y-1">
            @foreach ($bloc['journal'] as $jourDuMois)
                <li class="flex items-start justify-between gap-3 rounded-lg border border-gray-200 px-3 py-1.5 text-xs dark:border-white/10">
                    <span class="text-gray-700 dark:text-gray-300">
                        {{ $jourDuMois->date->translatedFormat('D j M') }}
                        @unless ($jourDuMois->jour_ouvre)
                            <span class="text-gray-400 dark:text-gray-500">— jour non ouvré</span>
                        @endunless
                    </span>
                    <span class="shrink-0 tabular-nums text-gray-900 dark:text-white">
                        {{ $jourDuMois->points }} pts
                        @if ($jourDuMois->points_bonus > 0)
                            <span>+ {{ $jourDuMois->points_bonus }}</span>
                        @endif
                        @if ($jourDuMois->serie > 0)
                            <span class="text-gray-400 dark:text-gray-500">· série {{ $jourDuMois->serie }}</span>
                        @endif
                    </span>
                </li>
            @endforeach
        </ul>
    </details>
</x-filament::section>