{{--
    Aperçu — détail d'un projet (JOS-20), volet compact. Split en deux par
    `$isParticipant` : le bloc "commun à tous" (titre, statut, description,
    dates, participants) rend pour tout utilisateur authentifié
    (`ProjectPolicy::viewSummary()`), le reste (chantiers, métriques,
    commentaires) est réservé aux participants du projet — voir
    HasProjectDetail pour le détail de chaque règle.
--}}
@php
    $project = $this->project();
    $isParticipant = $this->isParticipant();
    $statusColor = match ($project->status) {
        'active' => 'primary',
        'on_hold' => 'warning',
        'archived' => 'gray',
        default => 'gray',
    };
    $statusLabel = match ($project->status) {
        'draft' => 'Brouillon',
        'active' => 'Actif',
        'on_hold' => 'En pause',
        'archived' => 'Archivé',
    };
@endphp

<div>
    {{-- Favori et suivi côte à côte — voir `element-detail.blade.php`. --}}
    <div class="mb-1 flex items-center gap-2">
        @livewire('toggle-favorite', [
            'favoritableType' => \App\Models\Project::class,
            'favoritableId' => $project->id,
        ], key('fav-project-'.$project->id))
        @livewire('toggle-follow', [
            'followableType' => \App\Models\Project::class,
            'followableId' => $project->id,
        ], key('follow-project-'.$project->id))
        <x-report.button :project="$project" />
    </div>
    {{-- Titre + code + statut --}}
    <div class="mb-1 flex flex-wrap items-baseline gap-2">
        <h2 class="text-xl font-bold text-gray-950 dark:text-white">{{ $project->name }}</h2>
        <span class="rounded-md border border-gray-200 px-1.5 py-0.5 text-[11px] font-bold tabular-nums text-gray-500 dark:border-white/10 dark:text-gray-400">
            {{ $project->code }}
        </span>
    </div>
    <x-filament::badge :color="$statusColor">{{ $statusLabel }}</x-filament::badge>

    {{-- Description — jamais éditable ici, même pour un owner (spec JOS-20). --}}
    <div class="mt-5 mb-5">
        <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Description</div>
        @if ($project->description)
            {{-- `description` is stored as HTML (ProjectForm's field is a RichEditor,
                 same as ProjectElement's). Sanitized at render time — Filament's own
                 RichEditor docblock warns never to echo this raw, the wire payload can
                 be forged by any client regardless of what the toolbar allows.
                 No @tailwindcss/typography plugin installed, relies on the browser's
                 own default styling for <p>/<ul>/<strong>/etc. --}}
            <div class="text-sm text-gray-700 dark:text-gray-200">
                {!! \Illuminate\Support\Str::sanitizeHtml($project->description) !!}
            </div>
        @else
            <p class="text-sm text-gray-400 dark:text-gray-500">Aucune description.</p>
        @endif
    </div>

    {{-- Dates --}}
    <div class="mb-6 flex flex-wrap gap-2">
        <span class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:text-gray-200">
            <span class="text-gray-400 dark:text-gray-500">Début</span>
            {{ $project->start_date?->translatedFormat('j M Y') ?? '—' }}
        </span>
        <span class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-700 dark:border-white/10 dark:text-gray-200">
            <span class="text-gray-400 dark:text-gray-500">Échéance</span>
            {{ $project->target_end_date?->translatedFormat('j M Y') ?? '—' }}
        </span>
    </div>

    {{-- Participants — visibles de tous, y compris les non-membres (spec JOS-20). --}}
    <div class="mb-6">
        <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Participants</div>
        <div class="space-y-2">
            @foreach ($project->people as $person)
                <div class="flex items-center gap-2.5">
                    <span
                        class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
                        style="background-color: {{ $person->avatar_color ?? '#9CA3AF' }}"
                    >
                        {{ $person->initials }}
                    </span>
                    <span class="text-sm font-semibold text-gray-950 dark:text-white">{{ $person->full_name }}</span>
                    <span
                        @class([
                            'ml-auto rounded-full px-2.5 py-1 text-[11px] font-bold capitalize',
                            'bg-primary-50 text-primary-700 dark:bg-primary-500/10 dark:text-primary-400' => $person->pivot->role === 'owner',
                            'bg-warning-50 text-warning-700 dark:bg-warning-500/10 dark:text-warning-400' => $person->pivot->role === 'manager',
                            'bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400' => ! in_array($person->pivot->role, ['owner', 'manager'], true),
                        ])
                    >
                        {{ $person->pivot->role }}
                    </span>
                </div>
            @endforeach
        </div>
    </div>

    @if (! $isParticipant)
        {{-- Non-membre : uniquement les métriques agrégées + une demande d'accès en préparation. --}}
        <div class="mb-6">
            <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">En chiffres</div>
            <div class="grid grid-cols-2 gap-2.5">
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                            <x-filament::icon icon="heroicon-o-squares-2x2" class="h-5 w-5" />
                        </span>
                        <div>
                            <div class="text-xl font-bold tabular-nums leading-none">{{ $this->chantierCount() }}</div>
                            <div class="mt-1 text-xs text-gray-400 dark:text-gray-500">chantiers</div>
                        </div>
                    </div>
                </x-filament::section>
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400">
                            <x-filament::icon icon="heroicon-o-check-circle" class="h-5 w-5" />
                        </span>
                        <div>
                            <div class="text-xl font-bold tabular-nums leading-none">{{ $this->totalCount() }}</div>
                            <div class="mt-1 text-xs text-gray-400 dark:text-gray-500">tâches au total</div>
                        </div>
                    </div>
                </x-filament::section>
            </div>
        </div>

        <button
            type="button"
            disabled
            class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2.5 text-xs font-bold text-gray-400 dark:border-white/10 dark:bg-white/5 dark:text-gray-500"
        >
            <x-filament::icon icon="heroicon-o-user-plus" class="h-3.5 w-3.5" />
            Demander l'accès
            <span class="rounded-full border border-gray-200 px-1.5 py-0.5 text-[9.5px] font-bold uppercase dark:border-white/10">Bientôt</span>
        </button>
    @else
        {{-- Participant : chantiers + métriques complètes. --}}
        @php $chantiers = $this->chantiers(); @endphp
        <div class="mb-6">
            <div class="mb-2.5 flex items-center justify-between">
                <span class="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Chantiers</span>
                @if ($chantiers->isNotEmpty())
                    <span class="text-xs font-semibold tabular-nums text-gray-400 dark:text-gray-500">{{ $chantiers->count() }}</span>
                @endif
            </div>

            @if ($chantiers->isEmpty())
                <p class="rounded-lg border border-dashed border-gray-200 px-3 py-3 text-center text-sm text-gray-400 dark:border-white/10 dark:text-gray-500">
                    Il n'y a pas de chantier défini sur ce projet.
                </p>
            @else
                <div class="max-h-[180px] space-y-0.5 overflow-y-auto rounded-lg border border-gray-100 p-1 dark:border-white/5">
                    @foreach ($chantiers as $chantier)
                        <button
                            type="button"
                            wire:click="navigateToElement({{ $chantier->id }})"
                            class="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left hover:bg-gray-50 dark:hover:bg-white/5"
                        >
                            <span class="h-1.5 w-1.5 shrink-0 rounded-full" style="background-color: var(--{{ $this->statusColor($chantier->status->category) }}-500)"></span>
                            <span class="flex-1 truncate text-[13px] font-medium text-gray-950 dark:text-white">{{ $chantier->title }}</span>
                            <span class="shrink-0 text-[11px] font-bold" style="color: var(--{{ $this->statusColor($chantier->status->category) }}-500)">
                                {{ $chantier->status->label }}
                            </span>
                        </button>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="mb-6">
            <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Mes tâches</div>
            <div class="grid grid-cols-2 gap-2.5">
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400">
                            <x-filament::icon icon="heroicon-o-circle-stack" class="h-5 w-5" />
                        </span>
                        <div>
                            <div class="text-xl font-bold tabular-nums leading-none">{{ $this->myTodoCount() }}</div>
                            <div class="mt-1 text-xs text-gray-400 dark:text-gray-500">à faire</div>
                        </div>
                    </div>
                </x-filament::section>
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400">
                            <x-filament::icon icon="heroicon-o-clock" class="h-5 w-5" />
                        </span>
                        <div>
                            <div class="text-xl font-bold tabular-nums leading-none">{{ $this->myWaitingCount() }}</div>
                            <div class="mt-1 text-xs text-gray-400 dark:text-gray-500">en attente</div>
                        </div>
                    </div>
                </x-filament::section>
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400">
                            <x-filament::icon icon="heroicon-o-exclamation-triangle" class="h-5 w-5" />
                        </span>
                        <div>
                            <div class="text-xl font-bold tabular-nums leading-none">{{ $this->myBlockedCount() }}</div>
                            <div class="mt-1 text-xs text-gray-400 dark:text-gray-500">bloqués</div>
                        </div>
                    </div>
                </x-filament::section>
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-danger-50 text-danger-600 dark:bg-danger-500/10 dark:text-danger-400">
                            <x-filament::icon icon="heroicon-o-flag" class="h-5 w-5" />
                        </span>
                        <div>
                            <div class="text-xl font-bold tabular-nums leading-none">{{ $this->myOverdueCount() }}</div>
                            <div class="mt-1 text-xs text-gray-400 dark:text-gray-500">en retard</div>
                        </div>
                    </div>
                </x-filament::section>
            </div>
        </div>

        <div class="mb-6">
            <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Toutes les tâches</div>
            <div class="grid grid-cols-2 gap-2.5">
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                            <x-filament::icon icon="heroicon-o-chart-bar" class="h-5 w-5" />
                        </span>
                        <div>
                            <div class="text-xl font-bold tabular-nums leading-none">{{ $this->progressPercent() }}%</div>
                            <div class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ $this->doneCount() }} / {{ $this->totalCount() }} terminées</div>
                        </div>
                    </div>
                    {{--
                        `style="background-color: var(--primary-500)"`, not a `bg-primary-500`
                        class: that exact unprefixed utility isn't used literally anywhere
                        else in the app, so Tailwind never generated it into the compiled
                        CSS — the bar rendered with a transparent fill. Every other
                        dynamic-color bit in this app already goes through `var(--*-500)`
                        for the same reason (see the chantier status dots above).
                    --}}
                    <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
                        <div class="h-full rounded-full" style="width: {{ $this->progressPercent() }}%; background-color: var(--primary-500)"></div>
                    </div>
                </x-filament::section>
                <x-filament::section>
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400">
                            <x-filament::icon icon="heroicon-o-exclamation-triangle" class="h-5 w-5" />
                        </span>
                        <div>
                            <div class="text-xl font-bold tabular-nums leading-none">{{ $this->blockedCount() }}</div>
                            <div class="mt-1 text-xs text-gray-400 dark:text-gray-500">bloqués</div>
                        </div>
                    </div>
                </x-filament::section>
            </div>
        </div>

        {{--
            Compteur cliquable vers la page projet — pas de fil ni de bouton
            "Ajouter" ici (demandé explicitement). La page projet elle-même
            n'a pas encore de section Commentaires (JOS-50, à venir) : ce
            lien pointe simplement sur le projet pour l'instant, et
            commencera à ancrer sur la section dès que JOS-50 l'ajoutera —
            aucun changement à refaire ici à ce moment-là.
        --}}
        @php $commentsCount = $this->commentsCount(); @endphp
        @if ($commentsCount > 0)
            <a
                href="{{ \App\Filament\App\Resources\Projects\ProjectResource::getUrl('view', ['record' => $project], panel: 'app') }}"
                class="flex items-center gap-1.5 text-xs font-semibold text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400"
            >
                <x-filament::icon icon="heroicon-o-chat-bubble-left" class="h-3.5 w-3.5" />
                {{ $commentsCount }} {{ $commentsCount > 1 ? 'commentaires' : 'commentaire' }}
            </a>
        @endif
    @endif
</div>