{{--
    "Mes tâches" — cross-project task list for the current person, with tabs
    (Aujourd'hui / En retard / À venir / À valider / Inbox), all backed by
    real queries (see the "Mes tâches" data-retrieval section of
    Dashboard.php and HasMyTaskLists).

    $activeTaskTab, $myElements and the todoTasks()/todoCount()/overdueCount()/
    upcomingCount()/toValidateCount()/inboxCount()/toggleDone() methods all
    come from the page class (App\Filament\App\Pages\Dashboard), inherited
    into scope the same way every ambient variable is on ViewProject's
    partials.
--}}
@php
    $tabs = [
        ['key' => 'todo', 'label' => 'Aujourd\'hui', 'count' => $this->todoCount()],
        ['key' => 'overdue', 'label' => 'En retard', 'count' => $this->overdueCount()],
        ['key' => 'upcoming', 'label' => 'À venir', 'count' => $this->upcomingCount()],
        ['key' => 'to_validate', 'label' => 'À valider', 'count' => $this->toValidateCount()],
        ['key' => 'inbox', 'label' => 'À ranger', 'count' => $this->inboxCount()],
    ];
    $key_selected = array_search($activeTaskTab, array_column($tabs, 'todo'));

@endphp

<x-filament::section heading="Mes tâches">
    <x-slot name="afterHeader">
        <label class="flex items-start md:items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
            <input type="checkbox" wire:model.live="displayCompletedTasks" class="rounded border-gray-300 dark:border-gray-600">
            Afficher les terminées
        </label>
    </x-slot>
    <x-filament::dropdown width="xs" class="md:hidden">
        <x-slot name="trigger">
            <x-filament::button class="dropdown-menu-btn w-full">
                @foreach ($tabs as $tab)
                    @if ($activeTaskTab=== $tab['key'])
                        {{ $tab['label'] }}
                    @endif
                @endforeach
                <x-filament::icon icon="heroicon-o-chevron-down" class="h-3 w-3 text-gray-400" />
            </x-filament::button>
        </x-slot>
        
        <x-filament::dropdown.list>
            @foreach ($tabs as $tab)
                <x-filament::dropdown.list.item wire:click="setTaskTab('{{ $tab['key'] }}')">
                    <span
                        @class([
                            'text-sm',
                            'font-semibold text-primary-800 dark:text-primary-200' => $activeTaskTab === $tab['key'],
                            'text-gray-800 dark:text-gray-200' => $activeTaskTab !== $tab['key'],
                        ])
                    >
                        {{ $tab['label'] }}
                    </span>
                </x-filament::dropdown.list.item>
            @endforeach
            </x-filament::dropdown.list>
    </x-filament::dropdown>    
    <div class="-mx-6 -mt-6 border-b border-gray-100 dark:border-white/5 hidden md:flex">
        @foreach ($tabs as $tab)
            <button
                type="button"
                wire:click="setTaskTab('{{ $tab['key'] }}')"
                class="flex-1 border-b-2 px-4 py-3 text-center transition-colors"
                @style([
                    'border-color: var(--primary-500)' => $activeTaskTab === $tab['key'],
                    'border-color: transparent' => $activeTaskTab !== $tab['key'],
                ])
            >
                <div
                    @class([
                        'text-sm font-semibold',
                        'text-primary-600 dark:text-primary-400' => $activeTaskTab === $tab['key'],
                        'text-gray-500 dark:text-gray-400' => $activeTaskTab !== $tab['key'],
                    ])
                >
                    {{ $tab['label'] }}
                </div>
                <span
                    @class([
                        'mt-1.5 inline-flex min-w-[1.75rem] justify-center rounded-md px-1.5 py-0.5 text-xs font-bold tabular-nums',
                        'bg-danger-50 text-danger-600 dark:bg-danger-500/10 dark:text-danger-400' => $tab['key'] === 'overdue',
                        'bg-info-50 text-info-600 dark:bg-info-500/10 dark:text-info-400' => $tab['key'] === 'to_validate',
                        'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400' => ! in_array($tab['key'], ['overdue', 'to_validate'], true) && $activeTaskTab === $tab['key'],
                        'bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400' => ! in_array($tab['key'], ['overdue', 'to_validate'], true) && $activeTaskTab !== $tab['key'],
                    ])
                >
                    {{ $tab['count'] }}
                </span>
            </button>
        @endforeach
    </div>


    <div class="-mx-6 -mb-6">
        @forelse ($this->currentTabTasks() as $task)
            @php
                $isDone = $task->status->category === 'done';
                $isToday = $task->due_date && ($task->due_date->toDateString() == Carbon\Carbon::today()->toDateString());
                $isOverdue = $task->due_date && ($task->due_date->toDateString() <= Carbon\Carbon::today()->subDay()->toDateString()) && ! in_array($task->status->category, ['done', 'cancelled'], true);
                $projectColor = $task->projectColorOrNeutral();
            @endphp
            <div
                wire:key="my-task-{{ $task->id }}"
                class="flex items-start md: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';
                    $canToggleDone = ! $isMeeting || $task->meeting?->organizer_id === $this->currentPersonId();
                @endphp
                @if ($canToggleDone)
                    <button
                        type="button"
                        wire:click="toggleDone({{ $task->id }})"
                        @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' => $isDone,
                            'border-gray-300 dark:border-gray-600' => ! $isDone,
                        ])
                    >
                        @if ($isDone)
                            <x-filament::icon icon="heroicon-o-check" class="h-3 w-3" />
                        @endif
                    </button>
                @else
                    <span class="h-5 w-5 shrink-0"></span>
                @endif

                @if (in_array($task->type->code, ['meeting'], true) && $task->meeting->starts_at != null)
                    <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->meeting->starts_at->format('H:i') }}
                    </span>
                @endif

                {{--
                    Same technique as today-task-row.blade.php: this
                    flex-col/md:flex-row wrapper is what lets the badge/
                    date reflow onto their own line below `md`. The title
                    row underneath is its own always-inline flex group (not
                    responsive) so the type dot stays glued to the title on
                    every breakpoint instead of wrapping onto its own line;
                    it also carries the `flex-1` that used to live on the
                    old spacer span, so the meta group below still lands
                    flush against the row's right edge on desktop.
                --}}
                <div class="min-w-0 flex-1 flex flex-col gap-1 md:flex-row md:items-center md:gap-3">
                    <div class="min-w-0 flex flex-1 items-center gap-2">
                        <span
                            wire:click="openApercuElement({{ $task->id }})"
                            @class([
                                'min-w-0 truncate text-xs md: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->title }}
                        </span>
                        @if (in_array($task->type->code, ['chantier', 'milestone'], true))
                            <span class="h-1.5 w-1.5 shrink-0 rounded-full" style="background-color: var(--{{ $this->typeColor($task->type->code) }}-500)"></span>
                        @endif
                    </div>

                    <div class="flex items-center gap-2 md:contents">
                        @if (!$task->assignees->isNotEmpty())
                        <x-filament::button
                            type="button"
                            outlined
                            wire:click="assignToMe({{$task->id}})"
                            wire:loading.attr="disabled"
                            wire:target="assignToMe({{$task->id}})"
                            class="shrink-0 justify-center w-min-0 fi-btn  fi-size-sm text-xs border border-gray-200 bg-white dark:text-gray-400 text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5"
                            size="sm"
                        >
                        <span wire:loading.remove wire:target="assignToMe({{$task->id}})">Me l'assigner</span>
                        <span wire:loading wire:target="assignToMe({{$task->id}})" class="text-xs"> En cours </span>
                        </x-filament::button>
                        @endif
                        @if ($task->type->code === 'meeting' && $task->meeting?->organizer)
                        @php $color = $task->meeting->organizer->avatar_color ?? '#9CA3AF'; @endphp
                        <span @class([
                            'flex h-9 w-9 items-center justify-center rounded-full border-2 border-white text-xs font-bold dark:border-gray-900 text-white',
                        ])
                        style="background-color: {{ $color }}; color: #fff"
                        x-tooltip="{ content: @js('Organisateur : '.$task->meeting->organizer->full_name), theme: $store.theme }">
                            {{ $task->meeting->organizer->initials ?? '?' }}
                        </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
                            @class([
                                'shrink-0 text-xs tabular-nums md:w-16 md:text-right md:text-sm',
                                'font-semibold text-danger-600 dark:text-danger-400' => $isOverdue,
                                'text-gray-400 dark:text-gray-500' => ! $isOverdue,
                            ])
                        >
                            {{ $this->relativeDateLabel($task->due_date) ?? '—' }}
                        </span>
                    </div>
                </div>
            </div>
        @empty
            <div class="px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                Aucune tâche à faire — bien joué 🎉
            </div>
        @endforelse
    </div>
</x-filament::section>