{{--
    "Portfolio" — projects the current person has a stake in (owner/manager/
    member), each with a progress percentage and a segmented bar showing the
    real per-project statuses (not the generic category palette — projects
    can define their own statuses/colors, and that's what this card shows).

    $this->myProjects() comes from the page class (Dashboard.php) — each
    entry is `{project, total, progressPercent, statusBreakdown}`, where
    statusBreakdown is `[{status, count}]` sorted by the status's own
    position.
--}}
<x-filament::section heading="Portfolio">
    <div class="-mx-6 -mb-6">
        @forelse ($this->myProjects() as $entry)
            <div
                wire:key="portfolio-project-{{ $entry->project->id }}"
                class="border-b border-gray-100 px-6 py-4 last:border-0 dark:border-white/5"
            >
                <div class="flex items-center justify-between gap-3">
                    <span class="flex min-w-0 items-center gap-1.5">
                        <span
                        wire:click="openApercuProject({{ $entry->project->id, true }})"
                        @class([
                            'min-w-0 truncate text-sm cursor-pointer hover:underline',
                            'font-semibold text-gray-700 hover:underline cursor-pointer dark:text-gray-200',
                        ])
                        >
                            {{ $entry->project->name }}
                        </span>
                        @if ($entry->hasWarning)
                            <span
                                class="h-1.5 w-1.5 shrink-0 rounded-full bg-warning-500"
                                x-tooltip="{ content: 'Éléments en retard ou bloqués', theme: $store.theme, placement: 'top' }"
                            ></span>
                        @endif
                    </span>
                    <span class="shrink-0 text-sm font-bold tabular-nums text-gray-950 dark:text-white">
                        {{ $entry->progressPercent }}%
                    </span>
                </div>

                @if ($entry->total > 0)
                    <div class="mt-3 flex h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
                        @foreach ($entry->statusBreakdown as $item)
                            <span
                                style="width: {{ $item->count / $entry->total * 100 }}%; background-color: {{ $item->status->color ?? '#9CA3AF' }}"
                            ></span>
                        @endforeach
                    </div>

                    <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5">
                        @foreach ($entry->statusBreakdown as $item)
                            <div class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
                                <span class="h-1.5 w-1.5 shrink-0 rounded-full" style="background-color: {{ $item->status->color ?? '#9CA3AF' }}"></span>
                                <span class="font-semibold tabular-nums text-gray-700 dark:text-gray-200">{{ $item->count }}</span>
                                {{ $item->status->label }}
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="mt-2 text-xs text-gray-400 dark:text-gray-500">Aucun élément.</p>
                @endif
            </div>
        @empty
            <div class="px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                Aucun projet.
            </div>
        @endforelse
    </div>
</x-filament::section>