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

    <x-portal.tabs :tabs="[
        'profile' => __('الملف'),
        'documents' => __('المستندات'),
        'requests' => __('طلباتي'),
        'settings' => __('الإعدادات'),
    ]" :active="$tab" />

    @if($tab === 'profile')
        <x-portal.card :title="__('الحساب')">
            <dl class="space-y-2 text-sm">
                <div class="flex justify-between gap-3">
                    <dt style="color: var(--portal-muted);">{{ __('الاسم') }}</dt>
                    <dd class="truncate font-semibold">{{ $user?->name_ar ?: $user?->name }}</dd>
                </div>
                @if($user?->phone)
                    <div class="flex justify-between gap-3">
                        <dt style="color: var(--portal-muted);">{{ __('الهاتف') }}</dt>
                        <dd class="num font-semibold">{{ $user->phone }}</dd>
                    </div>
                @endif
                @if($user && ! $user->email_is_synthetic)
                    {{-- A synthetic .invalid address is an internal placeholder,
                         not something to show someone as their email. --}}
                    <div class="flex justify-between gap-3">
                        <dt style="color: var(--portal-muted);">{{ __('البريد') }}</dt>
                        <dd class="num truncate font-semibold">{{ $user->email }}</dd>
                    </div>
                @endif
            </dl>
        </x-portal.card>

        <x-portal.card :title="__('الأعضاء المرتبطون')">
            <ul class="space-y-2">
                @foreach($profiles as $profile)
                    <li class="flex items-center gap-3">
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full text-xs font-bold"
                              style="background: var(--brand-50); color: var(--brand-700);">
                            {{ mb_substr($profile->person?->name_ar ?? '—', 0, 1) }}
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-sm font-semibold">{{ $profile->person?->name_ar ?? $profile->person?->name }}</p>
                            <p class="text-[11px]" style="color: var(--portal-muted);">
                                {{ $profile->membership_type === 'member' ? __('عضو') : __('غير عضو') }}
                            </p>
                        </div>
                    </li>
                @endforeach
            </ul>
        </x-portal.card>

    @elseif($tab === 'documents')
        @forelse($documents as $document)
            @php
                $expired = $document->expires_at?->isPast();
                $soon = ! $expired && $document->expires_at && $document->expires_at->lte(now()->addDays(30));
                $tone = $expired ? 'var(--brand-danger)' : ($soon ? 'var(--brand-warning)' : 'var(--brand-success)');
            @endphp
            <article class="portal-card px-4 py-3">
                <div class="flex items-start justify-between gap-2">
                    <div class="min-w-0">
                        <p class="truncate text-sm font-bold">{{ $document->document_type->label() }}</p>
                        <p class="truncate text-[11px]" style="color: var(--portal-muted);">
                            {{ $document->documentable?->person?->name_ar }}
                        </p>
                    </div>
                    <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold"
                          style="background: color-mix(in oklab, {{ $tone }} 14%, var(--portal-surface)); color: {{ $tone }};">
                        {{ $document->status->label() }}
                    </span>
                </div>
                @if($document->expires_at)
                    <p class="num mt-1 text-[11px]" style="color: {{ $tone }};">
                        {{ $expired ? __('انتهت في') : __('تنتهي في') }} {{ $document->expires_at->translatedFormat('j M Y') }}
                    </p>
                @endif
            </article>
        @empty
            <x-portal.card>
                <x-portal.empty :title="__('لا توجد مستندات')"
                                :body="__('تظهر هنا المستندات المرفوعة وحالة اعتمادها وتاريخ انتهائها')" />
            </x-portal.card>
        @endforelse

        <a href="{{ route('portal.documents') }}" wire:navigate
           class="block rounded-xl px-4 py-3 text-center text-sm font-bold"
           style="background: var(--brand-500); color: var(--brand-fg);">
            {{ __('رفع مستند') }}
        </a>

    @elseif($tab === 'requests')
        @forelse($requests as $request)
            @php
                $tone = match ($request->status) {
                    'approved' => 'var(--brand-success)',
                    'rejected' => 'var(--brand-danger)',
                    default => 'var(--brand-warning)',
                };
            @endphp
            <article class="portal-card px-4 py-3">
                <div class="flex items-start justify-between gap-2">
                    <p class="min-w-0 truncate text-sm font-bold">{{ $request->type }}</p>
                    <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold"
                          style="background: color-mix(in oklab, {{ $tone }} 14%, var(--portal-surface)); color: {{ $tone }};">
                        {{ $request->status }}
                    </span>
                </div>
                @if($request->participant)
                    <p class="mt-0.5 truncate text-[11px]" style="color: var(--portal-muted);">
                        {{ $request->participant->person?->name_ar }}
                    </p>
                @endif
                @if($request->reason)
                    <p class="mt-1 text-xs leading-relaxed" style="color: var(--portal-muted);">{{ $request->reason }}</p>
                @endif
                @if($request->admin_notes)
                    <p class="mt-2 rounded-lg px-2 py-1 text-[11px]"
                       style="background: color-mix(in oklab, {{ $tone }} 10%, var(--portal-surface)); color: {{ $tone }};">
                        {{ $request->admin_notes }}
                    </p>
                @endif
                <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">{{ $request->created_at?->diffForHumans() }}</p>
            </article>
        @empty
            <x-portal.card>
                <x-portal.empty :title="__('لا توجد طلبات')"
                                :body="__('التجميد والنقل والإلغاء والأعذار — كلها من هنا')" />
            </x-portal.card>
        @endforelse

        <a href="{{ route('portal.requests.create') }}" wire:navigate
           class="block rounded-xl px-4 py-3 text-center text-sm font-bold"
           style="background: var(--brand-500); color: var(--brand-fg);">
            {{ __('تقديم طلب جديد') }}
        </a>

    @else
        <x-portal.card :title="__('الإعدادات')">
            <ul class="divide-y" style="border-color: var(--portal-border);">
                @foreach([
                    ['portal.notifications', 'الإشعارات'],
                    ['portal.dues', 'الأقساط والعروض'],
                    ['portal.documents', 'المستندات'],
                    ['portal.requests.create', 'تقديم طلب'],
                    ['portal.preferences', 'التفضيلات واللغة'],
                    ['portal.privacy', 'الخصوصية والبيانات'],
                ] as [$route, $label])
                    <li>
                        <a href="{{ route($route) }}" wire:navigate
                           class="flex items-center justify-between py-3 text-sm font-semibold">
                            {{ __($label) }}
                            <svg class="h-4 w-4 rtl:rotate-180" fill="none" stroke="currentColor" stroke-width="2"
                                 viewBox="0 0 24 24" aria-hidden="true" style="color: var(--portal-muted);">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
                            </svg>
                        </a>
                    </li>
                @endforeach
                <li>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="w-full py-3 text-start text-sm font-semibold" style="color: var(--brand-danger);">
                            {{ __('تسجيل الخروج') }}
                        </button>
                    </form>
                </li>
            </ul>
        </x-portal.card>
    @endif
</div>
