@extends('layouts.admin')

@section('title','Users')

@section('content')
<div class="min-h-screen bg-slate-50">
    
    <div class="space-y-4">

        {{-- Header --}}
        <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h1 class="text-2xl font-bold tracking-tight text-slate-800 md:text-3xl">Users Management</h1>
                <p class="mt-1 text-sm text-slate-500">
                    ইউজারদের তথ্য, স্ট্যাটাস, লগইন/লগআউট, অনলাইন স্ট্যাটাস এবং bulk action এখান থেকে ম্যানেজ করুন।
                </p>
            </div>

            <div class="flex flex-wrap items-center gap-3">
                <div class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-4 py-2 shadow-sm">
                    <span class="mr-2 h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
                    <span class="text-sm font-medium text-slate-600">
                        Total Users:
                        <span class="font-bold text-slate-800">{{ $users->total() }}</span>
                    </span>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="mb-5 rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
                {{ session('success') }}
            </div>
        @endif

        {{-- Stats --}}
        <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Total Listed</p>
                <h3 class="mt-2 text-3xl font-bold text-slate-800">{{ $users->count() }}</h3>
                <p class="mt-1 text-xs text-slate-400">Current page users</p>
            </div>

            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Active Users</p>
                <h3 class="mt-2 text-3xl font-bold text-emerald-600">
                    {{ collect($users->items())->where('status', 'active')->count() }}
                </h3>
                <p class="mt-1 text-xs text-slate-400">Current page active users</p>
            </div>

            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Blocked Users</p>
                <h3 class="mt-2 text-3xl font-bold text-rose-600">
                    {{ collect($users->items())->where('status', 'blocked')->count() }}
                </h3>
                <p class="mt-1 text-xs text-slate-400">Current page blocked users</p>
            </div>

            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <p class="text-sm font-medium text-slate-500">Online Users</p>
                <h3 class="mt-2 text-3xl font-bold text-indigo-600">
                    {{ collect($users->items())->filter(fn($u) => $u->is_online)->count() }}
                </h3>
                <p class="mt-1 text-xs text-slate-400">Current page online users</p>
            </div>
        </div>

        {{-- Main Card --}}
        <div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">

            {{-- Toolbar --}}
            <div class="border-b border-slate-200 px-5 py-4 sm:px-6">
                <div class="flex flex-col gap-4">

                    {{-- Search + Filters --}}
                    <div class="grid grid-cols-1 gap-4 xl:grid-cols-12">

                        <div class="relative xl:col-span-5">
                            <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                     viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                            </span>

                            <input type="text"
                                   id="searchInput"
                                   placeholder="Search username / phone / email..."
                                   value="{{ request('search') }}"
                                   class="w-full rounded-2xl border border-slate-300 bg-slate-50 py-3 pl-11 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100">
                        </div>

                        <div class="xl:col-span-2">
                            <select id="statusFilter"
                                    class="w-full rounded-2xl border border-slate-300 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100">
                                <option value="">All Status</option>
                                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="blocked" {{ request('status') === 'blocked' ? 'selected' : '' }}>Blocked</option>
                            </select>
                        </div>

                        <div class="xl:col-span-2">
                            <select id="onlineFilter"
                                    class="w-full rounded-2xl border border-slate-300 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100">
                                <option value="">All Presence</option>
                                <option value="online" {{ request('online') === 'online' ? 'selected' : '' }}>Online</option>
                                <option value="offline" {{ request('online') === 'offline' ? 'selected' : '' }}>Offline</option>
                            </select>
                        </div>

                        <div class="xl:col-span-2">
                            <select id="sortFilter"
                                    class="w-full rounded-2xl border border-slate-300 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100">
                                <option value="latest" {{ request('sort', 'latest') === 'latest' ? 'selected' : '' }}>Newest First</option>
                                <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest First</option>
                            </select>
                        </div>

                        <div class="xl:col-span-1">
                            <button id="resetFilters"
                                    type="button"
                                    class="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                                Reset
                            </button>
                        </div>
                    </div>

                    {{-- Bulk Actions --}}
                    <div class="flex flex-col gap-3 sm:flex-row">
                        <button onclick="bulkAction('block')"
                                class="inline-flex items-center justify-center rounded-2xl bg-rose-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700 hover:shadow">
                            Block Selected
                        </button>

                        <button onclick="bulkAction('unblock')"
                                class="inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 hover:shadow">
                            Unblock Selected
                        </button>
                    </div>
                </div>
            </div>

            {{-- Table --}}
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead class="bg-slate-100/80">
                        <tr class="text-left">
                            <th class="px-6 py-4">
                                <input type="checkbox"
                                       id="selectAll"
                                       class="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                            </th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">User</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">Phone</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">Email</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">Joined</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">Last Login</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">Last Logout</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">Last Activity</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">Presence</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-600">Status</th>
                            <th class="px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-slate-600">Action</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse($users as $user)
                            <tr id="user-row-{{ $user->id }}" class="transition hover:bg-slate-50/80">
                                <td class="px-6 py-4 align-middle">
                                    <input type="checkbox"
                                           class="user-checkbox h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                                           value="{{ $user->id }}">
                                </td>

                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-100 to-indigo-100 text-sm font-bold uppercase text-blue-700 shadow-sm">
                                            {{ strtoupper(substr($user->username ?? 'U', 0, 1)) }}
                                        </div>
                                        <div>
                                            <div class="font-semibold text-slate-800">{{ $user->username }}</div>
                                            <div class="text-xs text-slate-400">User ID: #{{ $user->id }}</div>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-6 py-4 text-sm font-medium text-slate-700">
                                    {{ $user->phone ?: '—' }}
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-600">
                                    {{ $user->email ?: '—' }}
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-600">
                                    <div>{{ optional($user->created_at)?->format('d M Y') ?? '—' }}</div>
                                    <div class="text-xs text-slate-400">{{ optional($user->created_at)?->format('h:i A') ?? '' }}</div>
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-600">
                                    {{ optional($user->last_login_at)?->format('d M Y h:i A') ?? '—' }}
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-600">
                                    {{ optional($user->last_logout_at)?->format('d M Y h:i A') ?? '—' }}
                                </td>

                                <td class="px-6 py-4 text-sm text-slate-600">
                                    <span id="activity-text-{{ $user->id }}">
                                        {{ optional($user->last_activity_at)?->format('d M Y h:i A') ?? '—' }}
                                    </span>
                                </td>

                                <td class="px-6 py-4">
                                    <span id="presence-badge-{{ $user->id }}"
                                          class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold ring-1
                                          {{ $user->is_online
                                              ? 'bg-indigo-100 text-indigo-700 ring-indigo-200'
                                              : 'bg-slate-100 text-slate-600 ring-slate-200' }}">
                                        <span class="h-2 w-2 rounded-full {{ $user->is_online ? 'bg-indigo-500' : 'bg-slate-400' }}"></span>
                                        {{ $user->is_online ? 'Online' : 'Offline' }}
                                    </span>
                                </td>

                                <td class="px-6 py-4">
                                    <span id="status-badge-{{ $user->id }}"
                                          class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold ring-1
                                          {{ $user->status === 'active'
                                                ? 'bg-emerald-100 text-emerald-700 ring-emerald-200'
                                                : 'bg-rose-100 text-rose-700 ring-rose-200' }}">
                                        <span id="status-dot-{{ $user->id }}"
                                              class="h-2 w-2 rounded-full {{ $user->status === 'active' ? 'bg-emerald-500' : 'bg-rose-500' }}"></span>
                                        <span id="status-text-{{ $user->id }}">
                                            {{ ucfirst($user->status) }}
                                        </span>
                                    </span>
                                </td>

                                <td class="px-6 py-4">
                                    <div class="flex justify-end gap-2">
                                        <a href="{{ route('admin.users.show', $user) }}"
                                           class="inline-flex items-center rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                                            View
                                        </a>

                                        <a href="{{ route('admin.users.edit', $user) }}"
                                           class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600">
                                            Edit
                                        </a>

                                        <button onclick="confirmToggleStatus({{ $user->id }}, '{{ $user->status }}')"
                                                id="btn-{{ $user->id }}"
                                                class="inline-flex items-center rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm transition
                                                {{ $user->status === 'active'
                                                    ? 'bg-rose-600 hover:bg-rose-700'
                                                    : 'bg-emerald-600 hover:bg-emerald-700' }}">
                                            {{ $user->status === 'active' ? 'Block' : 'Unblock' }}
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="px-6 py-16 text-center">
                                    <div class="mx-auto max-w-md">
                                        <h3 class="text-lg font-semibold text-slate-700">No users found</h3>
                                        <p class="mt-1 text-sm text-slate-500">
                                            সার্চ বা ফিল্টার অনুযায়ী কোনো ইউজার পাওয়া যায়নি।
                                        </p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Footer --}}
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-4 sm:px-6">
                <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                    <p class="text-sm text-slate-500">
                        Showing
                        <span class="font-semibold text-slate-700">{{ $users->firstItem() ?? 0 }}</span>
                        to
                        <span class="font-semibold text-slate-700">{{ $users->lastItem() ?? 0 }}</span>
                        of
                        <span class="font-semibold text-slate-700">{{ $users->total() }}</span>
                        users
                    </p>

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

@vite(['resources/js/app.js'])

<script>
    let timer;

    function buildFilterUrl() {
        const url = new URL(window.location.href);
        const search = document.getElementById('searchInput').value.trim();
        const status = document.getElementById('statusFilter').value;
        const online = document.getElementById('onlineFilter').value;
        const sort = document.getElementById('sortFilter').value;

        search ? url.searchParams.set('search', search) : url.searchParams.delete('search');
        status ? url.searchParams.set('status', status) : url.searchParams.delete('status');
        online ? url.searchParams.set('online', online) : url.searchParams.delete('online');
        sort ? url.searchParams.set('sort', sort) : url.searchParams.delete('sort');

        window.location.href = url.toString();
    }

    document.getElementById('searchInput').addEventListener('keyup', function () {
        clearTimeout(timer);
        timer = setTimeout(buildFilterUrl, 400);
    });

    document.getElementById('statusFilter').addEventListener('change', buildFilterUrl);
    document.getElementById('onlineFilter').addEventListener('change', buildFilterUrl);
    document.getElementById('sortFilter').addEventListener('change', buildFilterUrl);

    document.getElementById('resetFilters').addEventListener('click', function () {
        const url = new URL(window.location.href);
        url.search = '';
        window.location.href = url.toString();
    });

    function confirmToggleStatus(userId, currentStatus) {
        const isActive = currentStatus === 'active';

        Swal.fire({
            title: isActive ? 'Block this user?' : 'Unblock this user?',
            text: isActive
                ? 'এই ইউজারকে ব্লক করলে সে সিস্টেম ব্যবহার করতে পারবে না।'
                : 'এই ইউজারকে আনব্লক করলে সে আবার সিস্টেম ব্যবহার করতে পারবে।',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: isActive ? '#dc2626' : '#16a34a',
            cancelButtonColor: '#64748b',
            confirmButtonText: isActive ? 'Yes, Block' : 'Yes, Unblock',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                toggleStatus(userId);
            }
        });
    }

    function toggleStatus(userId) {
        fetch(`/admin/users/${userId}/toggle-status`, {
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                updateUserRow(userId, data.status);
                Toast.fire({ icon: 'success', title: data.message || 'Status Updated' });
            } else {
                Toast.fire({ icon: 'error', title: data.message || 'Something went wrong' });
            }
        })
        .catch(() => {
            Toast.fire({ icon: 'error', title: 'Request failed' });
        });
    }

    function updateUserRow(userId, status) {
        const badge = document.getElementById(`status-badge-${userId}`);
        const text = document.getElementById(`status-text-${userId}`);
        const dot = document.getElementById(`status-dot-${userId}`);
        const button = document.getElementById(`btn-${userId}`);

        text.textContent = status.charAt(0).toUpperCase() + status.slice(1);

        badge.className = 'inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold ring-1';
        dot.className = 'h-2 w-2 rounded-full';

        if (status === 'active') {
            badge.classList.add('bg-emerald-100', 'text-emerald-700', 'ring-emerald-200');
            dot.classList.add('bg-emerald-500');

            button.textContent = 'Block';
            button.className = 'inline-flex items-center rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm transition bg-rose-600 hover:bg-rose-700';
            button.setAttribute('onclick', `confirmToggleStatus(${userId}, 'active')`);
        } else {
            badge.classList.add('bg-rose-100', 'text-rose-700', 'ring-rose-200');
            dot.classList.add('bg-rose-500');

            button.textContent = 'Unblock';
            button.className = 'inline-flex items-center rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm transition bg-emerald-600 hover:bg-emerald-700';
            button.setAttribute('onclick', `confirmToggleStatus(${userId}, 'blocked')`);
        }
    }

    function bulkAction(action) {
        let selected = [];

        document.querySelectorAll('.user-checkbox:checked').forEach(cb => {
            selected.push(cb.value);
        });

        if (selected.length === 0) {
            Toast.fire({ icon: 'warning', title: 'No users selected' });
            return;
        }

        const isBlock = action === 'block';

        Swal.fire({
            title: isBlock ? 'Block selected users?' : 'Unblock selected users?',
            text: isBlock ? 'নির্বাচিত ইউজারগুলো ব্লক করা হবে।' : 'নির্বাচিত ইউজারগুলো আনব্লক করা হবে।',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: isBlock ? '#dc2626' : '#16a34a',
            cancelButtonColor: '#64748b',
            confirmButtonText: isBlock ? 'Yes, Block All' : 'Yes, Unblock All',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (!result.isConfirmed) return;

            fetch(`/admin/users/bulk-${action}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ users: selected })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    selected.forEach(id => {
                        updateUserRow(id, action === 'block' ? 'blocked' : 'active');
                    });

                    Toast.fire({ icon: 'success', title: data.message || 'Bulk Action Done' });
                } else {
                    Toast.fire({ icon: 'error', title: data.message || 'Bulk action failed' });
                }
            })
            .catch(() => {
                Toast.fire({ icon: 'error', title: 'Request failed' });
            });
        });
    }

    document.getElementById('selectAll').addEventListener('change', function () {
        document.querySelectorAll('.user-checkbox').forEach(cb => {
            cb.checked = this.checked;
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        if (typeof window.Echo === 'undefined') return;

        window.Echo.channel('users.presence')
            .listen('.user.presence.changed', (e) => {
                const badge = document.getElementById(`presence-badge-${e.user_id}`);
                const activityText = document.getElementById(`activity-text-${e.user_id}`);

                if (!badge) return;

                const isOnline = e.status === 'online';

                badge.className = 'inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold ring-1 ' +
                    (isOnline
                        ? 'bg-indigo-100 text-indigo-700 ring-indigo-200'
                        : 'bg-slate-100 text-slate-600 ring-slate-200');

                badge.innerHTML = `
                    <span class="h-2 w-2 rounded-full ${isOnline ? 'bg-indigo-500' : 'bg-slate-400'}"></span>
                    ${isOnline ? 'Online' : 'Offline'}
                `;

                if (activityText && e.last_activity_at) {
                    activityText.textContent = e.last_activity_at;
                }
            });
    });
</script>
@endsection