<div class="space-y-5">
    <header>
        <h1 class="text-xl font-bold text-gray-900">{{ __('دعوات بوابة الأعضاء') }}</h1>
        <p class="mt-0.5 text-sm text-gray-500">
            {{ __('أنشئ رابط تفعيل لولي أمر أو لاعب. الرابط صالح ٧٢ ساعة ويُستخدم مرة واحدة.') }}
        </p>
    </header>

    @if($freshLink)
        {{-- The one moment the raw link exists. It is not stored anywhere — only
             its SHA-256 is — so a refresh loses it and a new one must be issued. --}}
        <div class="rounded-xl border-2 border-emerald-200 bg-emerald-50 p-4" x-data="{ copied: false }">
            <p class="text-sm font-bold text-emerald-900">{{ __('رابط التفعيل — انسخه الآن') }}</p>
            <p class="mt-1 text-xs text-emerald-800">{{ __('لن يظهر هذا الرابط مرة أخرى بعد مغادرة الصفحة.') }}</p>
            <div class="mt-3 flex gap-2">
                <input type="text" readonly dir="ltr" value="{{ $freshLink }}" x-ref="link"
                       class="flex-1 rounded-lg border-emerald-300 bg-white font-mono text-xs">
                <button type="button"
                        @click="navigator.clipboard.writeText($refs.link.value); copied = true; setTimeout(() => copied = false, 2000)"
                        class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-bold text-white hover:bg-emerald-700">
                    <span x-show="!copied">{{ __('نسخ') }}</span>
                    <span x-show="copied" x-cloak>{{ __('تم النسخ') }}</span>
                </button>
            </div>
        </div>
    @endif

    <div class="rounded-xl border border-gray-200 bg-white p-4">
        <input type="search" wire:model.live.debounce.400ms="search"
               placeholder="{{ __('ابحث بالاسم أو رقم الهاتف') }}"
               class="w-full rounded-lg border-gray-300 text-sm">
    </div>

    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead class="bg-gray-50 text-xs text-gray-500">
                <tr>
                    <th class="px-4 py-3 text-start font-medium">{{ __('الاسم') }}</th>
                    <th class="px-4 py-3 text-start font-medium">{{ __('الهاتف') }}</th>
                    <th class="px-4 py-3 text-start font-medium">{{ __('الحالة') }}</th>
                    <th class="px-4 py-3 text-end font-medium">{{ __('إجراء') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($people as $person)
                    @php $active = $activeByPerson[$person->id] ?? null; @endphp
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 font-medium text-gray-900">{{ $person->name_ar ?: $person->name }}</td>
                        <td class="px-4 py-3 font-mono text-xs" dir="ltr">{{ $person->phone ?: '—' }}</td>
                        <td class="px-4 py-3 text-xs">
                            @if($person->user_id)
                                <span class="text-emerald-700">{{ __('لديه حساب') }}</span>
                            @elseif($active)
                                <span class="text-amber-700">{{ __('دعوة سارية') }}</span>
                            @else
                                <span class="text-gray-500">{{ __('لا يوجد حساب') }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-end">
                            <div class="flex justify-end gap-2">
                                <button type="button" wire:click="invite({{ $person->id }})"
                                        class="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-blue-700">
                                    {{ $active ? __('رابط جديد') : __('إنشاء رابط') }}
                                </button>
                                @if($person->phone)
                                    <button type="button" wire:click="sendViaWhatsApp({{ $person->id }})"
                                            class="rounded-lg border border-emerald-300 px-3 py-1.5 text-xs font-bold text-emerald-700 hover:bg-emerald-50">
                                        {{ __('واتساب') }}
                                    </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="px-4 py-10 text-center text-gray-500">{{ __('لا توجد نتائج') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div>{{ $people->links() }}</div>

    <section class="overflow-hidden rounded-xl border border-gray-200 bg-white">
        <h2 class="border-b border-gray-100 px-4 py-3 text-sm font-bold text-gray-900">{{ __('آخر الدعوات') }}</h2>
        <ul class="divide-y divide-gray-100">
            @forelse($invitations as $invitation)
                <li class="flex flex-wrap items-center justify-between gap-2 px-4 py-3 text-sm">
                    <span class="font-medium text-gray-900">{{ $invitation->person?->name_ar }}</span>
                    <span class="text-xs text-gray-500">{{ $invitation->statusLabel() }}</span>
                    <span class="text-xs text-gray-400">{{ $invitation->created_at?->diffForHumans() }}</span>
                    @if($invitation->isLive())
                        <button type="button" wire:click="revoke({{ $invitation->id }})"
                                class="text-xs font-semibold text-red-700 hover:underline">{{ __('إلغاء') }}</button>
                    @endif
                </li>
            @empty
                <li class="px-4 py-10 text-center text-gray-500">{{ __('لم تُصدر دعوات بعد') }}</li>
            @endforelse
        </ul>
    </section>
</div>
