@php
    $bandwidth = $this->bandwidth();
    $tasks = $this->tasks();
    $unestimatedCount = $this->unestimatedTasksCount();
    if($this->period === 'month') {

        $weeks = $this->weeklyBreakdown();
    }

    $pointsTotal = $this->pointsTotal();
    $pointsByDay = $this->pointsHeatmap();

    $heatmapStart = \Illuminate\Support\Carbon::now()->subYear()->startOfWeek(\Illuminate\Support\Carbon::MONDAY);
    $heatmapEnd = \Illuminate\Support\Carbon::now()->endOfWeek(\Illuminate\Support\Carbon::SUNDAY);
    $heatmapWeeks = [];
    $heatmapCursor = $heatmapStart->copy();
    $heatmapMonthLabels = [];

    while ($heatmapCursor <= $heatmapEnd) {
        $week = [];
        for ($d = 0; $d < 7; $d++) {
            $dateKey = $heatmapCursor->toDateString();
            $week[] = [
                'date' => $heatmapCursor->copy(),
                'points' => (int) ($pointsByDay[$dateKey] ?? 0),
                'future' => $heatmapCursor->isAfter(\Illuminate\Support\Carbon::now()),
            ];
            $heatmapCursor->addDay();
        }
        $heatmapMonthLabels[] = $week[0]['date']->day <= 7 ? $week[0]['date']->translatedFormat('M') : null;
        $heatmapWeeks[] = $week;
    }

    $heatmapBucket = function (int $points): string {
        return match (true) {
            $points <= 0 => 'bg-gray-100 dark:bg-white/5',
            $points <= 2 => 'bg-success-100 dark:bg-success-900',
            $points <= 10 => 'bg-success-300 dark:bg-success-700',
            $points <= 20 => 'bg-success-500 dark:bg-success-500',
            default => 'bg-success-700 dark:bg-success-300',
        };
    };
@endphp
<x-filament-panels::page class="gap-2">
    <div>
    <div class="mt-4 flex items-center justify-between gap-2">
        <div class="flex items-center justify-between gap-2">
            <div class="flex items-center gap-1">
                <button
                    type="button"
                    wire:click="previousPeriod"
                    class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5"
                >
                    <x-filament::icon icon="heroicon-o-chevron-left" class="h-4 w-4" />
                </button>

                <span class="text-sm font-semibold text-gray-950 dark:text-white">
                    {{ $this->periodLabel() }}
                </span>

                <button
                    type="button"
                    wire:click="nextPeriod"
                    class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5"
                >
                    <x-filament::icon icon="heroicon-o-chevron-right" class="h-4 w-4" />
                </button>
            </div>
        </div>
        <div class="gap-1 rounded-lg bg-gray-100 p-1 dark:bg-white/5">
                @foreach (['week' => 'Semaine', 'month' => 'Mois'] as $key => $label)
                    <button
                        type="button"
                        wire:click="setPeriod('{{ $key }}')"
                        @class([
                            'rounded-md px-2.5 py-1 text-xs font-semibold text-[13px]',
                            'bg-white text-primary-600 shadow-sm dark:bg-gray-900 dark:text-primary-400' => $this->period === $key,
                            'text-gray-500 dark:text-gray-400' => $this->period !== $key,
                        ])
                    >
                        {{ $label }}
                    </button>
                @endforeach
        </div>
    </div>
    <div class="mt-2 grid grid-cols-1 gap-6 lg:grid-cols-3">
        
        <div class="lg:col-span-1">
            <x-filament::section>
                @if (! $bandwidth)
                    <div class="px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                        Aucune donnée disponible
                    </div>
                @else
                    @php
                        $pillClasses = [
                            'warning' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400',
                            'ok' => 'bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-400',
                            'over' => 'bg-danger-50 text-danger-600 dark:bg-danger-500/10 dark:text-danger-400',
                        ];
                        $barClasses = [
                            'warning' => 'bg-warning-500',
                            'ok' => 'bg-success-500',
                            'over' => 'bg-danger-500',
                        ];
                        $labels = ['warning' => 'Limite', 'ok' => 'Équilibrée', 'over' => 'Surchargée'];
                    @endphp
                    @if($period === 'week')
                    @php
                        $percent = $bandwidth['capacity'] > 0
                            ? min(100, (int) round($bandwidth['hours'] / $bandwidth['capacity'] * 100))
                            : 0;
                    @endphp
                    
                    <div class="flex items-baseline gap-2 mt-3">
                        <span class="text-2xl font-bold text-gray-950 dark:text-white">{{ rtrim(rtrim(number_format($bandwidth['hours'], 1), '0'), '.') }}h</span>
                        <span class="text-sm text-gray-500 dark:text-gray-400">
                            / {{ rtrim(rtrim(number_format($bandwidth['capacity'], 1), '0'), '.') }}h cette semaine
                        </span>
                    </div>
                    <div class="flex gap-2 mt-2">
                    <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold {{ $pillClasses[$bandwidth['status']] }}">
                        {{ $labels[$bandwidth['status']] }}
                    </span>
                    </div>
                    <div class="mt-4 h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
                        <div class="h-full rounded-full {{ $barClasses[$bandwidth['status']] }}" style="width: {{ $percent }}%"></div>
                    </div>
                    @if ($unestimatedCount > 0)
                    <span class="mt-2 w-full inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400">
                        <x-filament::icon icon="heroicon-o-flag" class="h-3 w-3" />
                        {{ $unestimatedCount }} tâches non estimées.
                    </span>
                    @endif
                    @else
                    <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Semaines</div>
                    <div class="grid grid-cols-1 gap-3">
                        @foreach ($weeks as $week)
                            <x-filament::section>
                                <div class="text-[11px] font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">
                                    {{ $week['start']->translatedFormat('d') }} – {{ $week['end']->translatedFormat('d M') }}
                                </div>

                                <div class="mt-1 text-base font-bold text-gray-950 dark:text-white">
                                    {{ rtrim(rtrim(number_format($week['hours'], 1), '0'), '.') }}h
                                    <span class="text-xs font-normal text-gray-400">/ {{ rtrim(rtrim(number_format($week['capacity'], 1), '0'), '.') }}h</span>
                                </div>

                                <div class="mt-2.5 h-1 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
                                    @php $weekPercent = $week['capacity'] > 0 ? min(100, (int) round($week['hours'] / $week['capacity'] * 100)) : 0; @endphp
                                    <div class="h-full rounded-full {{ $barClasses[$week['status']] }}" style="width: {{ $weekPercent }}%"></div>
                                </div>
                            </x-filament::section>
                        @endforeach
                    </div>
                    @endif
                @endif
            </x-filament::section>
            <div class="mt-4">
            <x-filament::section>
                
                <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Jours travaillés</div>
                <div class="grid grid-cols-7 gap-1">
                    @foreach([1 => 'L', 2 => 'M', 3 => 'M', 4=>'J', 5=>'V', 6=>'S', 7=> 'D'] as $key => $day)
                        <button
                            type="button"
                            wire:click="toggleWorkingDay({{ $key }})"
                            wire:key="working-day-{{ $key }}"
                            @class([
                                'rounded-full px-2.5 py-1 text-xs font-semibold text-[13px]',
                                'bg-primary-600 text-white dark:bg-primary-400 dark:text-gray-900' => in_array($key, $this->workingDays),
                                'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400' => !in_array($key, $this->workingDays),
                            ])
                        >{{ $day }}</button>
                    @endforeach
                </div>
                <div class="mt-4 mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Heures / jour</div>
                <div class="max-w-[160px]">
                    <input type="number" step="0.5" min="0" max="24"
                        wire:model.live.debounce.500ms="dailyHours"
                        class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white" />
                </div>

                <div class="mt-4 flex justify-end">
                    <button
                        type="button"
                        wire:click="saveCapacity"
                        wire:loading.attr="disabled"
                        @disabled(! $this->isDirty())
                        @class([
                            'rounded-lg px-3 py-1.5 text-xs font-semibold transition',
                            'bg-primary-600 text-white hover:bg-primary-500' => $this->isDirty(),
                            'cursor-not-allowed bg-gray-100 text-gray-400 dark:bg-white/5 dark:text-gray-600' => ! $this->isDirty(),
                        ])
                    >Enregistrer</button>
                </div>
            </x-filament::section>
            </div>
            <div class="mt-4">
            <x-filament::section>
                <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Points</div>
                <div class="flex items-center gap-3 mt-1">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <x-filament::icon icon="heroicon-o-sparkles" class="h-5 w-5" />
                    </div>
                    <div>
                        <span class="text-2xl font-bold tabular-nums text-gray-950 dark:text-white">{{ $pointsTotal }}</span>
                        <span class="ml-1 text-sm text-gray-500 dark:text-gray-400">au total</span>
                    </div>
                </div>
            </x-filament::section>
            </div>
        </div>
        <div class="lg:col-span-2">
            <x-filament::section>
                <div class="-mx-6 -mb-6">
                    @forelse ($tasks as $task)
                        @php
                            $isDone = $task->status->category === 'done';
                            $projectColor = $task->projectColorOrNeutral();
                            $isEstimated = $task->estimated_effort_hours !== null;
                        @endphp
                        <div
                            wire:key="my-task-{{ $task->id }}"
                            class="flex items-center gap-3 border-b border-gray-100 px-6 py-3 last:border-0 dark:border-white/5">
                            @php
                                $isMeeting = $task->type->code === 'meeting';
                            @endphp
                            @if ($isDone)
                                <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1.5px] border-success-500 bg-success-500 text-white">
                                        <x-filament::icon icon="heroicon-o-check" class="h-3 w-3" />
                                </span>
                            @else
                                <span class="h-5 w-5 shrink-0"></span>
                            @endif
                            @if ($projectColor)
                                <span
                                    class="shrink-0 rounded-md px-2.5 py-1 text-xs font-bold"
                                    style="background-color: {{ $projectColor }}1a; color: {{ $projectColor }}"
                                >
                                    {{ $task->projectCodeOrUnfiled() }}
                                </span>
                            @else
                                <span class="shrink-0 rounded-md bg-gray-100 px-2.5 py-1 text-xs font-bold text-gray-500 dark:bg-white/5 dark:text-gray-400">
                                    {{ $task->projectCodeOrUnfiled() }}
                                </span>
                            @endif
                            <span
                                wire:click="openApercuElement({{ $task->id }})"
                                @class([
                                    'min-w-0 truncate text-sm cursor-pointer hover:underline',
                                    'text-gray-400 line-through decoration-gray-300 dark:text-gray-600' => $isDone,
                                    'text-gray-700 dark:text-gray-200' => ! $isDone,
                                ])
                                x-tooltip="{ content: @js($task->title), theme: $store.theme, placement: 'bottom' }"
                            >
                                {{ $task->title }}
                            </span>
                            @if ($task->type->code === 'milestone')
                            <span class="el-type-badge el-type-{{ $task->type->code }}">{{ $this->milestoneKindLabel($task->milestone->milestone_kind) }}</span>
                            @else
                            <span class="el-type-badge el-type-{{ $task->type->code }}">{{ $task->type->label }}</span>    
                            @endif
                            
                            <span class="h-1.5 w-1.5 shrink-0 flex-1"> </span>

                            @if($task->completed_at)
                            <span class="el-status-badge el-status-done">
                                Terminé le {{ $task->completed_at->translatedFormat('d/m/Y') }}
                            </span>
                            @else
                            <span class="w-16 shrink-0 text-center text-sm tabular-nums font-semibold">
                                {{ $this->relativeDateLabel($task->due_date) ?? '—' }}
                            </span>
                            @endif
                            
                            @if($isEstimated)
                            <span
                             @class([
                                    'w-10 text-right tabular-nums truncate text-sm cursor-pointer hover:underline',
                                    'text-gray-400 line-through decoration-gray-300 dark:text-gray-600' => $isDone,
                                    'text-gray-700 dark:text-gray-200' => ! $isDone,
                                ])>
                                {{ ($task->estimated_effort_hours + 0) . "h"}}
                            </span>
                            @else
                            <span
                             @class([
                                    'w-10 text-right font-italic tabular-nums truncate text-xs cursor-pointer hover:underline',
                                    'text-gray-400 line-through decoration-gray-300 dark:text-gray-600' => $isDone,
                                    'text-warning-600 dark:text-warning-400' => ! $isDone,
                                ])>
                                n.c.
                            </span>
                            @endif
                        </div>
                    @empty
                        <div class="px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                            Aucune tâche à faire.
                        </div>
                    @endforelse
                </div>
                @if ($tasks->hasPages())
                    <div class="mt-6 flex justify-center">
                        <div class="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-white p-1 dark:border-white/10 dark:bg-gray-900">
                            <button
                                type="button"
                                wire:click="previousPage"
                                @disabled($tasks->onFirstPage())
                                class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 disabled:pointer-events-none disabled:opacity-40 dark:text-gray-500 dark:hover:bg-white/5 dark:hover:text-gray-300"
                            >
                                <x-filament::icon icon="heroicon-o-chevron-left" class="h-4 w-4" />
                            </button>

                            {{-- Réutilise l'algorithme de fenêtrage (avec "…") de Laravel plutôt que d'en réécrire un — même array que celui que <x-filament::pagination> lit en interne. --}}
                            @foreach ($tasks->render()->offsetGet('elements') as $element)
                                @if (is_string($element))
                                    <span class="flex h-8 w-8 items-center justify-center text-sm text-gray-400 dark:text-gray-600">…</span>
                                @endif

                                @if (is_array($element))
                                    @foreach ($element as $page => $url)
                                        <button
                                            type="button"
                                            wire:click="gotoPage({{ $page }})"
                                            @class([
                                                'flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-colors',
                                                'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400' => $page === $tasks->currentPage(),
                                                'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200' => $page !== $tasks->currentPage(),
                                            ])
                                        >
                                            {{ $page }}
                                        </button>
                                    @endforeach
                                @endif
                            @endforeach

                            <button
                                type="button"
                                wire:click="nextPage"
                                @disabled(! $tasks->hasMorePages())
                                class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 disabled:pointer-events-none disabled:opacity-40 dark:text-gray-500 dark:hover:bg-white/5 dark:hover:text-gray-300"
                            >
                                <x-filament::icon icon="heroicon-o-chevron-right" class="h-4 w-4" />
                            </button>
                        </div>
                    </div>
                @endif
            </x-filament::section>
        </div>
    </div>

    <div class="mt-6">
        <x-filament::section>
            <div class="flex items-center justify-between">
                <div class="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Points gagnés par jour</div>
                <div class="flex items-center gap-1.5 text-[11px] text-gray-400 dark:text-gray-500">
                    <span>Moins</span>
                    <span class="h-2.5 w-2.5 rounded-sm bg-gray-100 dark:bg-white/5"></span>
                    <span class="h-2.5 w-2.5 rounded-sm bg-success-100 dark:bg-success-900"></span>
                    <span class="h-2.5 w-2.5 rounded-sm bg-success-300 dark:bg-success-700"></span>
                    <span class="h-2.5 w-2.5 rounded-sm bg-success-500 dark:bg-success-500"></span>
                    <span class="h-2.5 w-2.5 rounded-sm bg-success-700 dark:bg-success-300"></span>
                    <span>Plus</span>
                </div>
            </div>

            <div class="mt-4 overflow-x-auto">
                <div class="inline-flex flex-col gap-1" style="min-width: max-content">
                    <div class="flex gap-1 pl-6">
                        @foreach ($heatmapWeeks as $week)
                            <div class="w-2.5 shrink-0 text-[10px] text-gray-400 dark:text-gray-500">
                                {{ $heatmapMonthLabels[$loop->index] }}
                            </div>
                        @endforeach
                    </div>
                    <div class="flex gap-1">
                        <div class="flex w-5 shrink-0 flex-col gap-1 text-[10px] leading-[10px] text-gray-400 dark:text-gray-500">
                            <span></span>
                            <span>L</span>
                            <span></span>
                            <span>M</span>
                            <span></span>
                            <span>V</span>
                            <span></span>
                        </div>
                        @foreach ($heatmapWeeks as $week)
                            <div class="flex flex-col gap-1">
                                @foreach ($week as $day)
                                    <div
                                        @class([
                                            'h-2.5 w-2.5 rounded-sm',
                                            'invisible' => $day['future'],
                                            $heatmapBucket($day['points']) => ! $day['future'],
                                        ])
                                        @unless ($day['future'])
                                            x-tooltip="{ content: '{{ $day['points'] }} point{{ $day['points'] > 1 ? 's' : '' }} le {{ $day['date']->translatedFormat('d M Y') }}', theme: $store.theme, placement: 'top' }"
                                        @endunless
                                    ></div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </x-filament::section>
    </div>
    </div>
</x-filament-panels::page>