<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($keep && $merge)
        <section class="rounded-xl border-2 border-amber-200 bg-amber-50 p-4">
            <h2 class="font-bold text-gray-900">{{ __('تأكيد الدمج') }}</h2>
            <div class="mt-3 grid gap-3 sm:grid-cols-2">
                @foreach([[$keep, 'الحساب الذي سيبقى', 'emerald'], [$merge, 'الحساب الذي سيُدمج', 'red']] as [$account, $label, $tone])
                    <div class="rounded-lg border border-{{ $tone }}-200 bg-white p-3">
                        <p class="text-xs font-bold text-{{ $tone }}-700">{{ __($label) }}</p>
                        <p class="mt-1 text-sm font-semibold">{{ $account->name_ar ?: $account->name }}</p>
                        <p class="font-mono text-xs text-gray-500" dir="ltr">{{ $account->phone ?: '—' }}</p>
                        <p class="font-mono text-xs text-gray-500" dir="ltr">
                            {{ $account->email_is_synthetic ? '—' : $account->email }}
                        </p>
                        <p class="mt-1 text-xs text-gray-500">
                            {{ __('آخر دخول') }}: {{ $account->last_login_at?->diffForHumans() ?? __('لم يسجل دخولاً') }}
                        </p>
                    </div>
                @endforeach
            </div>
            <p class="mt-3 text-xs text-amber-800">
                {{ __('تنتقل الارتباطات (ولي الأمر، الأجهزة، التفضيلات، الطلبات) إلى الحساب الباقي، ويُؤرشَف الحساب الآخر ولا يُحذف — لأن حذف معرِّف مستخدم من سجل مالي أسوأ من حساب مكرر.') }}
            </p>
            <div class="mt-4 flex gap-3">
                <button type="button" wire:click="merge" wire:loading.attr="disabled" wire:target="merge"
                        class="rounded-xl bg-amber-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-amber-700 disabled:opacity-60">
                    {{ __('تأكيد الدمج') }}
                </button>
                <button type="button" wire:click="cancel"
                        class="rounded-xl px-4 py-2.5 text-sm font-medium text-gray-600">{{ __('إلغاء') }}</button>
            </div>
        </section>
    @endif

    @forelse($groups as $group)
        <section class="overflow-hidden rounded-xl border border-gray-200 bg-white">
            <h2 class="border-b border-gray-100 bg-gray-50 px-4 py-2.5 text-sm">
                <span class="font-bold text-gray-900">
                    {{ $group['kind'] === 'phone' ? __('رقم هاتف مشترك') : __('بريد مشترك') }}
                </span>
                <span class="ms-2 font-mono text-xs text-gray-500" dir="ltr">{{ $group['key'] }}</span>
            </h2>
            <table class="min-w-full divide-y divide-gray-100 text-sm">
                <tbody class="divide-y divide-gray-100">
                    @foreach($group['users'] as $user)
                        <tr>
                            <td class="px-4 py-3">
                                <p class="font-medium text-gray-900">{{ $user->name_ar ?: $user->name }}</p>
                                <p class="text-xs text-gray-500">
                                    #{{ $user->id }} ·
                                    {{ $user->last_login_at ? __('آخر دخول') . ' ' . $user->last_login_at->diffForHumans() : __('لم يسجل دخولاً') }}
                                </p>
                            </td>
                            <td class="px-4 py-3 text-end">
                                @foreach($group['users'] as $other)
                                    @if($other->id !== $user->id)
                                        <button type="button" wire:click="choose({{ $user->id }}, {{ $other->id }})"
                                                class="ms-2 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50">
                                            {{ __('أبقِ هذا وادمج') }} #{{ $other->id }}
                                        </button>
                                    @endif
                                @endforeach
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </section>
    @empty
        <div class="rounded-xl border border-gray-200 bg-white px-4 py-12 text-center">
            <p class="font-semibold text-gray-900">{{ __('لا توجد حسابات مكررة') }}</p>
            <p class="mt-1 text-sm text-gray-500">
                {{ __('يمكن إضافة قيد التفرد على رقم الهاتف بأمان عندما تبقى هذه الشاشة فارغة.') }}
            </p>
        </div>
    @endforelse
</div>
