<div class="space-y-4">

    <x-portal.tabs :tabs="['upcoming' => __('القادمة'), 'past' => __('السابقة')]"
                   :active="$view" property="view" />

    @if($sessions->isEmpty())
        <x-portal.card>
            <x-portal.empty :title="$view === 'upcoming' ? __('لا توجد حصص قادمة') : __('لا يوجد سجل حصص')"
                            :body="__('تظهر الحصص هنا بمجرد جدولتها للمجموعة المسجَّل بها العضو')" />
        </x-portal.card>
    @else
        <ol class="stagger-in space-y-2">
            @foreach($sessions as $session)
                @php
                    $record = $attendance[$session->id] ?? null;
                    $status = $record?->status;
                    $statusValue = $status instanceof \BackedEnum ? $status->value : $status;
                    $cancelled = ($session->status instanceof \BackedEnum ? $session->status->value : $session->status) === 'cancelled';

                    [$tone, $statusLabel] = match (true) {
                        $cancelled => ['warning', __('ملغاة')],
                        $statusValue === 'present' => ['success', __('حاضر')],
                        $statusValue === 'late' => ['warning', __('متأخر')],
                        $statusValue === 'excused' => ['neutral', __('معذور')],
                        in_array($statusValue, ['absent', 'no_show'], true) => ['danger', __('غائب')],
                        default => [null, null],
                    };
                @endphp

                <li class="portal-card px-4 py-3">
                    <div class="flex items-start gap-3">
                        {{-- A fixed column, not an intrinsic one: "سبتمبر" is
                             three times the width of "مايو", and without a
                             width the whole row shifts from one month to the
                             next down a single list. --}}
                        <div class="w-12 shrink-0 text-center">
                            <p class="num text-lg font-extrabold leading-none">{{ $session->session_date?->format('j') }}</p>
                            <p class="mt-0.5 text-[10px] leading-tight" style="color: var(--portal-muted);">
                                {{ $session->session_date?->translatedFormat('M') }}
                            </p>
                        </div>

                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-2">
                                <p class="min-w-0 truncate text-sm font-bold">
                                    {{ $session->topic ?: ($session->group?->name_ar ?? __('حصة تدريب')) }}
                                </p>
                                @if($statusLabel)
                                    <x-portal.chip :tone="$tone">{{ $statusLabel }}</x-portal.chip>
                                @endif
                            </div>

                            <p class="num mt-0.5 text-xs" style="color: var(--portal-muted);">
                                {{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }}
                                – {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}
                                @if($session->facility)
                                    · {{ $session->facility->name_ar ?? $session->facility->name }}
                                @endif
                            </p>

                            @if($session->trainer)
                                <p class="mt-1 text-xs" style="color: var(--portal-muted);">
                                    {{ __('المدرب') }}:
                                    <span class="font-medium" style="color: var(--portal-link);">
                                        {{ $session->trainer->person?->name_ar ?? $session->trainer->person?->name }}
                                    </span>
                                    @if($session->substitute_reason)
                                        {{-- A substitution without its reason reads as a
                                             mistake. The column has always been there. --}}
                                        <span class="block text-[11px]">{{ __('بديلاً') }} — {{ $session->substitute_reason }}</span>
                                    @endif
                                </p>
                            @endif

                            @if($cancelled)
                                <x-portal.note tone="warning" class="mt-1">
                                    {{ $session->cancelled_reason ?: __('أُلغيت هذه الحصة') }}
                                </x-portal.note>
                            @endif

                            @if($session->objectives)
                                <p class="mt-1 line-clamp-2 text-[11px]" style="color: var(--portal-muted);">{{ $session->objectives }}</p>
                            @endif

                            @if(! $cancelled && ! in_array($statusValue, ['present', 'late', 'excused'], true)
                                && $session->session_date?->gte(now()->subDays(7)))
                                {{-- From the session, not from a menu three
                                     screens away: this is where a member is
                                     standing when they realise they cannot
                                     make it. --}}
                                <a href="{{ route('portal.requests.create', $session->id) }}" wire:navigate
                                   class="mt-2 inline-block rounded-lg px-3 py-1.5 text-[11px] font-bold"
                                   style="background: var(--brand-50); color: var(--brand-700);">
                                    {{ __('قدّم عذر') }}
                                </a>
                            @endif
                        </div>
                    </div>
                </li>
            @endforeach
        </ol>
    @endif

    @if($evaluations->isNotEmpty())
        <x-portal.card :title="__('التقييمات')">
            <ul class="space-y-2">
                @foreach($evaluations as $evaluation)
                    <li class="flex items-center justify-between gap-3">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-semibold">{{ $evaluation->group?->name_ar ?? __('تقييم') }}</p>
                            <p class="text-xs" style="color: var(--portal-muted);">
                                {{ $evaluation->evaluation_date?->translatedFormat('j M Y') }}
                            </p>
                        </div>
                        <span class="num shrink-0 text-lg font-extrabold" style="color: var(--portal-link);">
                            {{ $evaluation->overall_score }}
                        </span>
                    </li>
                @endforeach
            </ul>
        </x-portal.card>
    @endif
</div>
