@extends('admin.layout')
@section('title', 'Quản lý người dùng')
@section('greeting') QUẢN LÝ <span>NGƯỜI DÙNG</span> @endsection
@section('subtitle') Danh sách tất cả người dùng trong hệ thống @endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-users" style="color:var(--accent);margin-right:8px;"></i>Người dùng ({{ $users->total() }})</h3>
            <form method="GET" style="display:flex;gap:8px;flex-wrap:wrap;">
                <input type="text" name="search" class="ad-input" placeholder="Tìm username, email..." value="{{ request('search') }}" style="width:200px;">
                <select name="plan" class="ad-input ad-select" style="width:130px;">
                    <option value="">Tất cả gói</option>
                    <option value="free" {{ request('plan')==='free' ? 'selected' : '' }}>Free</option>
                    <option value="basic" {{ request('plan')==='basic' ? 'selected' : '' }}>Basic</option>
                    <option value="pro" {{ request('plan')==='pro' ? 'selected' : '' }}>Pro</option>
                    <option value="premium" {{ request('plan')==='premium' ? 'selected' : '' }}>Premium</option>
                    <option value="android premium" {{ request('plan')==='android premium' ? 'selected' : '' }}>Android</option>
                </select>
                <select name="role" class="ad-input ad-select" style="width:130px;">
                    <option value="">Tất cả quyền</option>
                    <option value="admin" {{ request('role')==='admin' ? 'selected' : '' }}>Admin</option>
                    <option value="staff" {{ request('role')==='staff' ? 'selected' : '' }}>Staff</option>
                    <option value="user" {{ request('role')==='user' ? 'selected' : '' }}>User</option>
                </select>
                <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Tìm</button>
            </form>
        </div>

        <div style="overflow-x:auto;">
            <table class="ad-table">
                <thead>
                    <tr>
                        <th style="width:36px;text-align:center;">
                            <input type="checkbox" id="selectAll" onchange="toggleAll()" style="accent-color:var(--accent);cursor:pointer;">
                        </th>
                        <th>ID</th><th>Username</th><th>Email</th><th>Locket</th><th>Gói</th><th>Hạn</th><th>Role</th><th>Ngày tạo</th><th style="text-align:center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $user)
                    <tr id="row-{{ $user->id }}">
                        <td style="text-align:center;">
                            @if($user->id !== auth()->id())
                            <input type="checkbox" class="user-check" value="{{ $user->id }}" onchange="updateSelection()" style="accent-color:var(--accent);cursor:pointer;">
                            @endif
                        </td>
                        <td style="color:var(--text-muted);font-size:11px;font-family:monospace;">#{{ $user->id }}</td>
                        <td style="font-weight:600;color:var(--text);">
                            <div style="display:flex;align-items:center;gap:8px;">
                                @if($user->avatar)
                                    <img src="{{ $user->avatar }}" style="width:26px;height:26px;border-radius:50%;object-fit:cover;">
                                @else
                                    <div style="width:26px;height:26px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;">
                                        <span style="font-size:10px;font-weight:700;color:var(--accent);">{{ strtoupper(substr($user->username, 0, 1)) }}</span>
                                    </div>
                                @endif
                                {{ $user->username }}
                            </div>
                        </td>
                        <td>{{ $user->email }}</td>
                        <td style="font-size:12px;">@if($user->locket_username)<span style="color:var(--accent);font-weight:600;">{{ $user->locket_username }}</span>@else<span style="color:var(--text-muted);">—</span>@endif</td>
                        <td>
                            @if($user->current_plan === 'pro')<span class="badge badge-warning">Pro</span>
                            @elseif($user->current_plan === 'premium')<span class="badge badge-info">Premium</span>
                            @elseif($user->current_plan === 'basic')<span class="badge badge-success">Basic</span>
                            @elseif($user->current_plan === 'android premium')<span class="badge badge-warning" style="background:#f59e0b20;color:#f59e0b;border-color:#f59e0b50;">Android</span>
                            @else<span class="badge badge-muted">Free</span>@endif
                        </td>
                        <td style="font-size:11px;color:var(--text-muted);">{{ $user->plan_expires_at ? \Carbon\Carbon::parse($user->plan_expires_at)->format('d/m/Y H:i') : '∞' }}</td>
                        <td>
                            @if($user->is_admin)<span class="badge badge-warning"><i class="fas fa-crown"></i> Admin</span>
                            @elseif($user->is_staff)<span class="badge badge-info"><i class="fas fa-user-shield"></i> Staff</span>
                            @else<span class="badge badge-muted">User</span>@endif
                        </td>
                        <td style="font-size:11px;color:var(--text-muted);">{{ $user->created_at ? \Carbon\Carbon::parse($user->created_at)->format('d/m/Y') : '—' }}</td>
                        <td style="text-align:center;">
                            <div style="display:flex;gap:4px;justify-content:center;">
                                <a href="{{ route('admin.users.referrals', $user->id) }}" class="btn btn-outline btn-sm" title="Tiếp thị liên kết" style="color:#10b981;border-color:#10b981;">
                                    <i class="fas fa-handshake"></i>
                                </a>
                                <button type="button" class="btn btn-outline btn-sm" title="Xem" onclick="viewUser({{ json_encode($user) }})">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button type="button" class="btn btn-outline btn-sm" title="Sửa" onclick="editUser({{ json_encode($user) }})" style="color:var(--accent);border-color:var(--accent);">
                                    <i class="fas fa-pen"></i>
                                </button>
                                @if($user->id !== auth()->id())
                                <form method="POST" action="{{ route('admin.users.delete', $user->id) }}" onsubmit="return confirm('Xóa user {{ $user->username }}?')" style="display:inline;">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" title="Xóa"><i class="fas fa-trash"></i></button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="10" style="text-align:center;color:var(--text-muted);padding:40px;">Không tìm thấy user nào.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{ $users->links('admin.pagination') }}
    </div>

    {{-- ═══ Bulk Action Bar ═══ --}}
    <div id="bulkBar" style="display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:90;
        background:#3d3229;color:#fff;border-radius:14px;padding:10px 20px;
        box-shadow:0 8px 32px rgba(0,0,0,0.2);
        display:none;align-items:center;gap:16px;animation:barIn 0.3s ease;">
        <div style="display:flex;align-items:center;gap:8px;">
            <i class="fas fa-check-circle" style="color:var(--accent);"></i>
            <span id="bulkCount" style="font-size:13px;font-weight:600;">0 đã chọn</span>
        </div>
        <div style="width:1px;height:24px;background:rgba(255,255,255,0.15);"></div>
        <button onclick="deselectAll()" style="background:none;border:none;color:rgba(255,255,255,0.7);font-size:12px;cursor:pointer;font-family:inherit;">
            <i class="fas fa-times"></i> Bỏ chọn
        </button>
        <form id="bulkDeleteForm" method="POST" action="{{ route('admin.users.bulkDelete') }}" onsubmit="return confirmBulk()">
            @csrf
            <div id="bulkIdsContainer"></div>
            <button type="submit" style="background:#e53935;color:#fff;border:none;border-radius:8px;padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;">
                <i class="fas fa-trash"></i> Xóa tất cả
            </button>
        </form>
    </div>

    {{-- ═══ View Modal ═══ --}}
    <div id="viewModal" style="display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.35);align-items:center;justify-content:center;">
        <div style="background:#fff;border-radius:18px;width:100%;max-width:480px;box-shadow:0 12px 40px rgba(0,0,0,0.12);animation:modalIn 0.25s ease;">
            <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,0.06);">
                <h3 style="font-size:14px;font-weight:700;color:var(--text);"><i class="fas fa-user" style="color:var(--accent);margin-right:8px;"></i>Chi tiết người dùng</h3>
                <button onclick="closeModal('viewModal')" style="background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-muted);">&times;</button>
            </div>
            <div style="padding:20px;" id="viewContent"></div>
        </div>
    </div>

    {{-- ═══ Edit Modal ═══ --}}
    <div id="editModal" style="display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.35);align-items:center;justify-content:center;">
        <div style="background:#fff;border-radius:18px;width:100%;max-width:480px;box-shadow:0 12px 40px rgba(0,0,0,0.12);animation:modalIn 0.25s ease;">
            <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,0.06);">
                <h3 style="font-size:14px;font-weight:700;color:var(--text);"><i class="fas fa-pen" style="color:var(--accent);margin-right:8px;"></i>Chỉnh sửa người dùng</h3>
                <button onclick="closeModal('editModal')" style="background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-muted);">&times;</button>
            </div>
            <div style="padding:20px;" id="editContent"></div>
        </div>
    </div>

    <style>
        @keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
        @keyframes barIn { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
        .detail-row { display:flex; align-items:center; padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.04); }
        .detail-row:last-child { border-bottom:none; }
        .detail-label { width:110px; font-size:12px; font-weight:600; color:var(--text-muted); flex-shrink:0; }
        .detail-value { font-size:13px; font-weight:500; color:var(--text); }
        .edit-group { margin-bottom:14px; }
        .edit-label { display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:5px; }
        .edit-input { width:100%; }
        tr.selected { background:rgba(201,169,110,0.08) !important; }
    </style>

    <script>
        // ── Checkbox / Bulk ──
        function toggleAll() {
            const checked = document.getElementById('selectAll').checked;
            document.querySelectorAll('.user-check').forEach(cb => {
                cb.checked = checked;
                cb.closest('tr').classList.toggle('selected', checked);
            });
            updateSelection();
        }

        function updateSelection() {
            const checks = document.querySelectorAll('.user-check:checked');
            const count = checks.length;
            const bar = document.getElementById('bulkBar');

            if (count >= 3) {
                bar.style.display = 'flex';
                document.getElementById('bulkCount').textContent = count + ' đã chọn';
                // Build hidden inputs
                const container = document.getElementById('bulkIdsContainer');
                container.innerHTML = '';
                checks.forEach(cb => {
                    const input = document.createElement('input');
                    input.type = 'hidden'; input.name = 'ids[]'; input.value = cb.value;
                    container.appendChild(input);
                });
            } else {
                bar.style.display = 'none';
            }

            // Highlight selected rows
            document.querySelectorAll('.user-check').forEach(cb => {
                cb.closest('tr').classList.toggle('selected', cb.checked);
            });

            // Update "select all" checkbox state
            const total = document.querySelectorAll('.user-check').length;
            const selectAll = document.getElementById('selectAll');
            selectAll.checked = count > 0 && count === total;
            selectAll.indeterminate = count > 0 && count < total;
        }

        function deselectAll() {
            document.getElementById('selectAll').checked = false;
            document.querySelectorAll('.user-check').forEach(cb => {
                cb.checked = false;
                cb.closest('tr').classList.remove('selected');
            });
            document.getElementById('bulkBar').style.display = 'none';
        }

        function confirmBulk() {
            const count = document.querySelectorAll('.user-check:checked').length;
            return confirm('Xác nhận xóa ' + count + ' user đã chọn? Hành động này không thể hoàn tác!');
        }

        // ── View Modal ──
        function viewUser(user) {
            const planBadge = user.current_plan === 'pro' ? '<span class="badge badge-warning">Pro</span>'
                : user.current_plan === 'premium' ? '<span class="badge badge-info">Premium</span>'
                : user.current_plan === 'basic' ? '<span class="badge badge-success">Basic</span>'
                : user.current_plan === 'android premium' ? '<span class="badge badge-warning" style="background:#f59e0b20;color:#f59e0b;border-color:#f59e0b50;">Android</span>'
                : '<span class="badge badge-muted">Free</span>';
            const role = user.is_admin ? '<span class="badge badge-warning"><i class="fas fa-crown"></i> Admin</span>' : user.is_staff ? '<span class="badge badge-info"><i class="fas fa-user-shield"></i> Staff</span>' : '<span class="badge badge-muted">User</span>';
            const expires = user.plan_expires_at || '∞';
            const created = user.created_at ? new Date(user.created_at).toLocaleDateString('vi-VN') : '—';
            const avatar = user.avatar
                ? `<img src="${user.avatar}" style="width:50px;height:50px;border-radius:50%;object-fit:cover;">`
                : `<div style="width:50px;height:50px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--accent);">${user.username[0].toUpperCase()}</div>`;

            document.getElementById('viewContent').innerHTML = `
                <div style="text-align:center;margin-bottom:16px;">
                    ${avatar}
                    <div style="font-size:16px;font-weight:700;color:var(--text);margin-top:8px;">${user.username}</div>
                    <div style="font-size:12px;color:var(--text-muted);">${user.email}</div>
                </div>
                <div class="detail-row"><div class="detail-label">ID</div><div class="detail-value">#${user.id}</div></div>
                <div class="detail-row"><div class="detail-label">Locket Username</div><div class="detail-value" style="color:var(--accent);font-weight:600;">${user.locket_username || '<span style="color:var(--text-muted);font-weight:400;">Chưa liên kết</span>'}</div></div>
                <div class="detail-row"><div class="detail-label">Gói hiện tại</div><div class="detail-value">${planBadge}</div></div>
                <div class="detail-row"><div class="detail-label">Hạn dùng</div><div class="detail-value">${expires}</div></div>
                <div class="detail-row"><div class="detail-label">Vai trò</div><div class="detail-value">${role}</div></div>
                <div class="detail-row"><div class="detail-label">Ngày tạo</div><div class="detail-value">${created}</div></div>
            `;
            openModal('viewModal');
        }

        // ── Edit Modal ──
        function editUser(user) {
            const planOptions = ['', 'basic', 'pro', 'premium', 'android premium'].map(p => {
                const label = p === '' ? 'Free' : p === 'basic' ? 'Basic' : p === 'android premium' ? 'Android Premium' : p.charAt(0).toUpperCase() + p.slice(1);
                const sel = (user.current_plan || '') === p ? 'selected' : '';
                return `<option value="${p}" ${sel}>${label}</option>`;
            }).join('');

            document.getElementById('editContent').innerHTML = `
                <form method="POST" action="/admin/users/${user.id}">
                    <input type="hidden" name="_token" value="${document.querySelector('meta[name=csrf-token]').content}">
                    <input type="hidden" name="_method" value="PUT">
                    <div class="edit-group">
                        <label class="edit-label">Username</label>
                        <input type="text" class="ad-input edit-input" value="${user.username}" disabled style="background:#f8f6f2;">
                    </div>
                    <div class="edit-group">
                        <label class="edit-label">Email</label>
                        <input type="text" class="ad-input edit-input" value="${user.email}" disabled style="background:#f8f6f2;">
                    </div>
                    <div class="edit-group">
                        <label class="edit-label">Locket Username</label>
                        <input type="text" name="locket_username" class="ad-input edit-input" value="${user.locket_username || ''}" placeholder="Chưa liên kết" autocomplete="off">
                    </div>
                    <div class="edit-group">
                        <label class="edit-label">Mật khẩu mới (để trống nếu giữ nguyên)</label>
                        <div style="position: relative;">
                            <input type="password" name="password" id="adminPasswordInput" class="ad-input edit-input" placeholder="Nhập mật khẩu mới" style="padding-right: 40px;">
                            <button type="button" onclick="toggleAdminPasswordVisibility()" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 5px;">
                                <i id="adminPasswordEye" class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        <div class="edit-group">
                            <label class="edit-label">Gói hiện tại</label>
                            <select name="current_plan" class="ad-input ad-select edit-input">${planOptions}</select>
                        </div>
                        <div class="edit-group">
                            <label class="edit-label">Hạn dùng</label>
                            <input type="datetime-local" name="plan_expires_at" class="ad-input edit-input" value="${user.plan_expires_at ? user.plan_expires_at.replace(' ', 'T').slice(0,16) : ''}">
                        </div>
                    </div>
                    <div class="edit-group">
                        <label class="edit-label">Vai trò</label>
                        <select name="role" class="ad-input ad-select edit-input">
                            <option value="user" ${!user.is_admin && !user.is_staff ? 'selected' : ''}>User</option>
                            <option value="staff" ${user.is_staff && !user.is_admin ? 'selected' : ''}>Nhân viên (Staff)</option>
                            <option value="admin" ${user.is_admin ? 'selected' : ''}>Admin</option>
                        </select>
                    </div>
                    <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,0,0,0.06);">
                        <button type="button" class="btn btn-outline" onclick="closeModal('editModal')">Hủy</button>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Lưu thay đổi</button>
                    </div>
                </form>
            `;
            openModal('editModal');
        }

        // ── Modal Controls ──
        function openModal(id) { document.getElementById(id).style.display = 'flex'; document.body.style.overflow = 'hidden'; }
        function closeModal(id) { document.getElementById(id).style.display = 'none'; document.body.style.overflow = ''; }

        ['viewModal', 'editModal'].forEach(id => {
            document.getElementById(id).addEventListener('click', function(e) { if (e.target === this) closeModal(id); });
        });
        document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closeModal('viewModal'); closeModal('editModal'); } });

        function toggleAdminPasswordVisibility() {
            const input = document.getElementById('adminPasswordInput');
            const eye = document.getElementById('adminPasswordEye');
            if (input.type === 'password') {
                input.type = 'text';
                eye.classList.remove('fa-eye');
                eye.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                eye.classList.remove('fa-eye-slash');
                eye.classList.add('fa-eye');
            }
        }
    </script>
@endsection