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

    <div class="portal-card px-4 py-4 text-center">
        <p class="text-xs" style="color: var(--portal-muted);">{{ __('إجمالي المستحق') }}</p>
        {{-- Family-scoped on purpose: a household has one balance even when it
             has three players, which is why the profile switcher does not
             narrow this figure. --}}
        {{-- Figure large, currency small beside it — the same typesetting the
             home screen's headline uses, so the two agree on what a balance
             looks like. --}}
        @php $total = money_parts($totalDue); @endphp
        <p class="num mt-1.5 flex items-baseline justify-center gap-1.5 whitespace-nowrap"
           style="color: {{ $totalDue > 0 ? 'var(--portal-danger-ink)' : 'var(--portal-success-ink)' }};">
            <span class="text-3xl font-extrabold leading-none tracking-tight">{{ $total['amount'] }}</span>
            <span class="text-sm font-bold" style="opacity: .75;">{{ $total['currency'] }}</span>
        </p>
        <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">{{ __('لكل الأعضاء المرتبطين بحسابك') }}</p>
    </div>

    <x-portal.tabs :tabs="['due' => __('عليك'), 'history' => __('السجل'), 'wallet' => __('المحفظة')]"
                   :active="$tab" />

    @if($tab === 'due')
        @if($installments->isNotEmpty())
            <x-portal.card :title="__('الأقساط')">
                <ul class="space-y-2">
                    @foreach($installments as $installment)
                        @php $overdue = $installment->due_date?->isPast(); @endphp
                        <li class="flex items-center justify-between gap-3">
                            <div class="min-w-0">
                                <p class="text-sm font-semibold">
                                    {{ __('قسط') }} #{{ $installment->sequence }}
                                </p>
                                <p class="num text-xs" style="color: {{ $overdue ? 'var(--portal-danger-ink)' : 'var(--portal-muted)' }};">
                                    {{ $installment->due_date?->translatedFormat('j M Y') }}
                                    @if($overdue) · {{ __('متأخر') }} @endif
                                </p>
                            </div>
                            <span class="num shrink-0 text-sm font-bold">{{ format_money((int) $installment->amount) }}</span>
                        </li>
                    @endforeach
                </ul>
            </x-portal.card>
        @endif

        @if($invoices->isEmpty())
            <x-portal.card>
                <x-portal.empty :title="__('لا توجد مستحقات')"
                                :body="__('كل الفواتير مسددة — سيظهر هنا أي مبلغ جديد فور صدوره')" />
            </x-portal.card>
        @else
            <ol class="stagger-in space-y-2">
                @foreach($invoices as $invoice)
                    <li>
                        <a href="{{ route('portal.invoice', $invoice->uuid) }}" wire:navigate
                           class="portal-card flex items-center gap-3 px-4 py-3">
                            <div class="min-w-0 flex-1">
                                <p class="num truncate text-sm font-bold">{{ $invoice->number }}</p>
                                <p class="text-xs" style="color: var(--portal-muted);">
                                    {{ $invoice->status->label() }}
                                    @if($invoice->due_date)
                                        · {{ __('تاريخ الاستحقاق') }} {{ $invoice->due_date->translatedFormat('j M') }}
                                    @endif
                                </p>
                            </div>
                            <span class="num shrink-0 text-sm font-extrabold" style="color: var(--portal-danger-ink);">
                                {{ format_money((int) $invoice->due_amount) }}
                            </span>
                        </a>
                    </li>
                @endforeach
            </ol>

            <div>{{ $invoices->links() }}</div>
        @endif

    @elseif($tab === 'history')
        @if($payments->isEmpty())
            <x-portal.card>
                <x-portal.empty :title="__('لا توجد مدفوعات بعد')" />
            </x-portal.card>
        @else
            <ol class="stagger-in space-y-2">
                @foreach($payments as $payment)
                    <li class="portal-card flex items-center gap-3 px-4 py-3">
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl"
                              style="background: color-mix(in oklab, var(--brand-success) 14%, var(--portal-surface)); color: var(--portal-success-ink);">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                            </svg>
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="num truncate text-sm font-semibold">{{ $payment->reference }}</p>
                            <p class="text-xs" style="color: var(--portal-muted);">
                                {{ $payment->payment_date?->translatedFormat('j M Y') }} · {{ $payment->method?->label() }}
                            </p>
                        </div>
                        <span class="num shrink-0 text-sm font-bold">{{ format_money((int) $payment->amount) }}</span>
                    </li>
                @endforeach
            </ol>

            <div>{{ $payments->links() }}</div>
        @endif

    @else
        @if($wallets->isEmpty())
            <x-portal.card>
                <x-portal.empty :title="__('لا توجد محفظة')"
                                :body="__('تُنشأ المحفظة تلقائياً عند أول رصيد يُضاف لحسابك')" />
            </x-portal.card>
        @else
            <div class="space-y-2">
                @foreach($wallets as $wallet)
                    <div class="portal-card flex items-center justify-between gap-3 px-4 py-4">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-semibold">
                                {{ $wallet->owner?->person?->name_ar ?? __('محفظة') }}
                            </p>
                            <p class="text-xs" style="color: var(--portal-muted);">{{ __('الرصيد المتاح') }}</p>
                        </div>
                        <span class="num shrink-0 text-lg font-extrabold" style="color: var(--portal-link);">
                            {{ format_money((int) $wallet->balance) }}
                        </span>
                    </div>
                @endforeach
            </div>
        @endif
    @endif
</div>
