@extends('admin.layouts.app')

@section('title', 'User Management')

@section('content')

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

    <!-- ================= STATS ================= -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

        <div class="bg-gradient-to-br from-gray-900 to-gray-800 p-6 rounded-2xl shadow-lg border border-gray-800">
            <p class="text-gray-400 text-sm">Total Users</p>
            <h2 class="text-3xl font-bold mt-2">{{ $users->total() }}</h2>
        </div>

        <div class="bg-gradient-to-br from-green-900/40 to-gray-800 p-6 rounded-2xl shadow-lg border border-green-800/40">
            <p class="text-gray-400 text-sm">Active Users</p>
            <h2 class="text-3xl font-bold mt-2">
                {{ \App\Models\User::where('is_banned',0)->count() }}
            </h2>
        </div>

        <div class="bg-gradient-to-br from-red-900/40 to-gray-800 p-6 rounded-2xl shadow-lg border border-red-800/40">
            <p class="text-gray-400 text-sm">Banned Users</p>
            <h2 class="text-3xl font-bold mt-2">
                {{ \App\Models\User::where('is_banned',1)->count() }}
            </h2>
        </div>

    </div>


    <!-- ================= MAIN TABLE CARD ================= -->
    <div class="bg-gray-900 rounded-2xl shadow-xl border border-gray-800 overflow-hidden">

        <!-- Header -->
        <div class="flex justify-between items-center p-6 border-b border-gray-800">

            <h1 class="text-xl font-semibold">User Management</h1>

            <!-- Search -->
            <form method="GET">
                <input type="text"
                       name="search"
                       placeholder="Search users..."
                       value="{{ request('search') }}"
                       class="bg-gray-800 border border-gray-700 text-sm rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-600">
            </form>

        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left">

                <thead class="bg-gray-800 text-gray-400 uppercase text-xs">
                    <tr>
                        <th class="px-6 py-4">User</th>
                        <th class="px-6 py-4">Email</th>
                        <th class="px-6 py-4">Status</th>
                        <th class="px-6 py-4 text-center">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-800">

                @forelse($users as $user)

                    <tr class="hover:bg-gray-800/60 transition duration-200">

                        <!-- User -->
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}"
                                     class="w-9 h-9 rounded-full">
                                <div>
                                    <p class="font-medium">{{ $user->name }}</p>
                                    <p class="text-xs text-gray-500">
    Joined 
    {{ $user->created_at ? $user->created_at->diffForHumans() : 'N/A' }}
</p>
                                </div>
                            </div>
                        </td>

                        <!-- Email -->
                        <td class="px-6 py-4 text-gray-400">
                            {{ $user->email }}
                        </td>

                       <!-- Status -->
<td class="px-6 py-4">
    <div class="flex flex-wrap gap-2">

        {{-- 🔴 BANNED --}}
        @if($user->is_banned)
            <span class="bg-red-600/20 text-red-500 text-xs px-3 py-1 rounded-full font-medium">
                Banned
            </span>
        @else

            {{-- 🟢 ONLINE / ⚫ OFFLINE --}}
            @if($user->last_login_at && $user->last_login_at->gt(now()->subMinutes(5)))
                <span class="bg-green-600/20 text-green-400 text-xs px-3 py-1 rounded-full font-medium">
                    Online
                </span>
            @else
                <span class="bg-gray-600/20 text-gray-400 text-xs px-3 py-1 rounded-full font-medium">
                    Offline
                </span>
            @endif

            {{-- 💎 SUBSCRIPTION STATUS --}}
            @if($user->activeSubscription)
                <span class="bg-blue-600/20 text-blue-400 text-xs px-3 py-1 rounded-full font-medium">
                    Premium
                </span>
            @else
                <span class="bg-gray-700/40 text-gray-300 text-xs px-3 py-1 rounded-full font-medium">
                    Free
                </span>
            @endif

        @endif

    </div>
</td>

                        <!-- Actions -->
                        <td class="px-6 py-4">
                            <div class="flex justify-center gap-3">

                                @if(!$user->is_banned)
                                    <form method="POST" action="{{ route('admin.users.ban', $user->id) }}">
                                        @csrf
                                        @method('PATCH')
                                        <button class="bg-yellow-500/20 hover:bg-yellow-500 text-yellow-400 hover:text-black px-4 py-1.5 rounded-lg text-sm transition">
                                            Ban
                                        </button>
                                    </form>
                                @endif

                                <form method="POST"
                                      action="{{ route('admin.users.destroy', $user->id) }}"
                                      onsubmit="return confirm('Delete this user permanently?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="bg-red-600/20 hover:bg-red-600 text-red-500 hover:text-white px-4 py-1.5 rounded-lg text-sm transition">
                                        Delete
                                    </button>
                                </form>

                            </div>
                        </td>

                    </tr>

                @empty
                    <tr>
                        <td colspan="4" class="text-center py-10 text-gray-500">
                            No users found.
                        </td>
                    </tr>
                @endforelse

                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="p-6 border-t border-gray-800">
            {{ $users->links() }}
        </div>

    </div>

</div>

@endsection