@props(['user', 'generation' => 1])

{{-- Trigger button --}}
<button
    onclick="openUserModal{{ $user->id }}()"
    class="px-3 py-1 text-xs font-medium text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none whitespace-nowrap"
>
    Details
</button>

{{-- Modal --}}
<div
    id="userModal{{ $user->id }}"
    class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50 px-4"
>
    <div
        class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-y-auto max-h-screen"
        onclick="event.stopPropagation()"
    >
        {{-- Header --}}
        <div class="flex items-center justify-between p-5 border-b dark:border-gray-700">
            <div>
                <h3 class="text-lg font-bold text-gray-900 dark:text-white">
                    {{ $user->first_name }} {{ $user->last_name }}
                </h3>
                <p class="text-xs text-gray-500">{{ $user->email }} · @{{ $user->username }}</p>
            </div>
            <button
                onclick="closeUserModal{{ $user->id }}()"
                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 ml-4"
            >
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <div class="p-5 space-y-5">

            {{-- Verification Status --}}
            <div>
                <p class="mb-2 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 tracking-wide">Verification</p>
                <div class="grid grid-cols-2 gap-2">
                    <div class="flex items-center gap-2 p-2 rounded-lg bg-gray-50 dark:bg-gray-700">
                        @if($user->email_verified_at)
                            <span class="w-2 h-2 rounded-full bg-green-500 flex-shrink-0"></span>
                            <div>
                                <p class="text-xs font-semibold text-gray-700 dark:text-gray-200">Email Verified</p>
                                <p class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($user->email_verified_at)->format('M j, Y') }}</p>
                            </div>
                        @else
                            <span class="w-2 h-2 rounded-full bg-red-400 flex-shrink-0"></span>
                            <p class="text-xs font-semibold text-gray-500">Email Unverified</p>
                        @endif
                    </div>
                    <div class="flex items-center gap-2 p-2 rounded-lg bg-gray-50 dark:bg-gray-700">
                        @if($user->kyc_status == 1)
                            <span class="w-2 h-2 rounded-full bg-green-500 flex-shrink-0"></span>
                            <p class="text-xs font-semibold text-gray-700 dark:text-gray-200">KYC Approved</p>
                        @elseif($user->kyc_status == 2)
                            <span class="w-2 h-2 rounded-full bg-yellow-400 flex-shrink-0"></span>
                            <p class="text-xs font-semibold text-yellow-600">KYC Pending</p>
                        @else
                            <span class="w-2 h-2 rounded-full bg-gray-400 flex-shrink-0"></span>
                            <p class="text-xs font-semibold text-gray-500">KYC Not Done</p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- AI Bots --}}
            @if(isset($user->active_bots))
            <div>
                <p class="mb-2 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 tracking-wide">AI Bots</p>
                <div class="grid grid-cols-2 gap-2">
                    <div class="p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-800">
                        <p class="text-xs text-gray-500 dark:text-gray-400">Active</p>
                        <p class="text-xl font-bold text-green-700 dark:text-green-400">{{ $user->active_bots ?? 0 }}</p>
                    </div>
                </div>
            </div>
            @endif

            {{-- Pending Trades --}}
            @if(isset($user->pending_bids) || isset($user->pending_sells))
            <div>
                <p class="mb-2 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 tracking-wide">Pending Trades</p>
                <div class="grid grid-cols-2 gap-2">
                    <div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800">
                        <p class="text-xs text-gray-500 dark:text-gray-400">Bids</p>
                        <p class="text-xl font-bold text-blue-700 dark:text-blue-400">{{ $user->pending_bids ?? 0 }}</p>
                    </div>
                    <div class="p-3 rounded-lg bg-purple-50 dark:bg-purple-900/20 border border-purple-100 dark:border-purple-800">
                        <p class="text-xs text-gray-500 dark:text-gray-400">Sells</p>
                        <p class="text-xl font-bold text-purple-700 dark:text-purple-400">{{ $user->pending_sells ?? 0 }}</p>
                    </div>
                </div>
            </div>
            @endif

            {{-- Team --}}
            @if(isset($user->team_count))
            <div>
                <p class="mb-2 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 tracking-wide">Team</p>
                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-700">
                    <p class="text-xs text-gray-500">Downline members</p>
                    <p class="text-xl font-bold text-gray-700 dark:text-gray-200">{{ $user->team_count }}</p>
                </div>
            </div>
            @endif

            {{-- Member since --}}
            <div class="pt-2 border-t dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 flex justify-between">
                <span>Generation {{ $generation }}</span>
                <span>Joined {{ \Carbon\Carbon::parse($user->created_at)->format('M j, Y') }}</span>
            </div>

        </div>

        {{-- Footer --}}
        <div class="px-5 pb-5">
            <a
                href="{{ route('admin.user_info', $user->id) }}"
                class="block w-full py-2 text-sm font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700"
            >
                View Full Profile →
            </a>
        </div>
    </div>
</div>

<script>
    function openUserModal{{ $user->id }}() {
        var m = document.getElementById('userModal{{ $user->id }}');
        m.classList.remove('hidden');
        m.classList.add('flex');
        document.body.style.overflow = 'hidden';
    }
    function closeUserModal{{ $user->id }}() {
        var m = document.getElementById('userModal{{ $user->id }}');
        m.classList.add('hidden');
        m.classList.remove('flex');
        document.body.style.overflow = '';
    }
    // Close on backdrop click
    document.getElementById('userModal{{ $user->id }}')
        .addEventListener('click', function(e) {
            if (e.target === this) closeUserModal{{ $user->id }}();
        });
    // Close on Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeUserModal{{ $user->id }}();
    });
</script>