@extends('layouts.app')

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

@section('content')
<div class="container-fluid px-3 px-md-4">
    {{-- Page Header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-1 fw-bold">User Management</h1>
            <p class="text-muted small mb-0">Manage and oversee all users on your marketplace platform</p>
        </div>
        @if(auth()->user()?->role?->hasPermission('users.manage'))
    <a
        href="{{ route('admin.users.create') }}"
        class="btn btn-sm btn-primary"
    >
        <i class="fas fa-user-plus me-1"></i>
        Create User
    </a>
@endif
        <div class="d-flex gap-2 mt-2 mt-sm-0">
            <a href="{{ route('admin.users.export', request()->query()) }}" class="btn btn-sm btn-success">
                <i class="fas fa-file-export me-1"></i> <span class="d-none d-sm-inline">Export</span>
            </a>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
                <i class="fas fa-sync-alt me-1"></i> <span class="d-none d-sm-inline">Refresh</span>
            </button>
        </div>
    </div>

    {{-- Quick Stats --}}
    @include('admin.users.partials.stats', ['stats' => $stats])

    {{-- Filters --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.users.index') }}" id="filterForm">
                <div class="row g-2 g-md-3">
                    {{-- Search --}}
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-white border-end-0">
                                <i class="fas fa-search text-muted"></i>
                            </span>
                            <input
                                type="text"
                                name="search"
                                class="form-control bg-white border-start-0"
                                placeholder="Search users..."
                                value="{{ request('search') }}"
                            >
                        </div>
                    </div>

                    {{-- Role Filter --}}
                    <div class="col-6 col-md-3 col-lg-2">
                        <select name="role" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">All Roles</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}" {{ request('role') == $role->id ? 'selected' : '' }}>
                                    {{ $role->display_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Status Filters --}}
                    <div class="col-6 col-md-3 col-lg-2">
                        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">All Status</option>
                            <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="banned" {{ request('status') === 'banned' ? 'selected' : '' }}>Banned</option>
                        </select>
                    </div>

                    <div class="col-6 col-md-3 col-lg-2">
                        <select name="seller_status" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">All Sellers</option>
                            <option value="seller" {{ request('seller_status') === 'seller' ? 'selected' : '' }}>Sellers</option>
                            <option value="non_seller" {{ request('seller_status') === 'non_seller' ? 'selected' : '' }}>Non-Sellers</option>
                        </select>
                    </div>

                    {{-- Per Page --}}
                    <div class="col-6 col-md-3 col-lg-2">
                        <select name="per_page" class="form-select form-select-sm" onchange="this.form.submit()">
                            @foreach([15, 30, 50, 100] as $perPage)
                                <option value="{{ $perPage }}" {{ request('per_page', 30) == $perPage ? 'selected' : '' }}>
                                    {{ $perPage }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Hidden sort/direction --}}
                    <input type="hidden" name="sort" value="{{ request('sort', 'id') }}">
                    <input type="hidden" name="direction" value="{{ request('direction', 'desc') }}">

                    {{-- Actions --}}
                    <div class="col-12">
                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                            <div class="d-flex flex-wrap gap-2">
                                <button type="submit" class="btn btn-sm btn-primary">
                                    <i class="fas fa-filter me-1"></i> Apply
                                </button>
                                <a href="{{ route('admin.users.index') }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-times me-1"></i> Reset
                                </a>
                            </div>
                            <div class="text-muted small">
                                <span class="fw-bold">{{ $users->total() }}</span> users
                                @if($users->total() > 0)
                                    ({{ $users->firstItem() }} - {{ $users->lastItem() }})
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Bulk Actions --}}
    @if($users->count() > 0)
        <div class="mb-3" id="bulkActions" style="display:none;">
            <div class="card border-0 shadow-sm bg-light">
                <div class="card-body py-2">
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <span class="fw-bold small text-uppercase text-muted me-2">
                            <span id="selectedCount">0</span> selected:
                        </span>
                        <button type="button" class="btn btn-sm btn-danger" onclick="confirmBulkAction('ban')">
                            <i class="fas fa-ban me-1"></i> Ban
                        </button>
                        <button type="button" class="btn btn-sm btn-success" onclick="confirmBulkAction('unban')">
                            <i class="fas fa-check-circle me-1"></i> Unban
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmBulkAction('delete')">
                            <i class="fas fa-user-slash me-1"></i> Deactivate
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary ms-auto" onclick="clearSelection()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Users Table - Compact Version --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive" style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
                <table class="table table-hover align-middle mb-0 table-striped" style="min-width: 768px;">
                    <thead class="bg-light">
                        <tr>
                            <th width="36" class="text-center">
                                <input type="checkbox" id="selectAll" class="form-check-input" onchange="toggleAll(this)">
                            </th>
                            <th width="50" class="text-center">ID</th>
                            <th>User</th>
                            <th class="d-none d-sm-table-cell">Role</th>
                            <th class="text-center d-none d-lg-table-cell">Status</th>
                            <th class="text-end d-none d-md-table-cell">Balance</th>
                            <th class="text-center" width="100">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $user)
                            <tr>
                                {{-- Checkbox --}}
                                <td class="text-center">
                                    <input
                                        type="checkbox"
                                        name="user_ids[]"
                                        value="{{ $user->id }}"
                                        class="form-check-input user-checkbox"
                                        onchange="updateBulkActions()"
                                    >
                                </td>

                                {{-- ID --}}
                                <td class="text-center fw-bold small">#{{ $user->id }}</td>

                                {{-- User Info --}}
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="flex-shrink-0">
                                            @if($user->avatar)
                                                <img
                                                    src="{{ asset('storage/' . $user->avatar) }}"
                                                    alt="{{ $user->username }}"
                                                    class="rounded-circle"
                                                    width="32"
                                                    height="32"
                                                    style="object-fit:cover;"
                                                >
                                            @else
                                                <div class="avatar-placeholder rounded-circle d-flex align-items-center justify-content-center
                                                    {{ $user->banned ? 'bg-secondary' : 'bg-primary' }}"
                                                     style="width:32px;height:32px;color:#fff;font-weight:600;font-size:12px;">
                                                    {{ Str::upper(Str::substr($user->username ?? $user->email ?? 'U', 0, 2)) }}
                                                </div>
                                            @endif
                                        </div>
                                        <div class="min-width-0">
                                            <div class="fw-bold small text-truncate" style="max-width:120px;">
                                                <a href="{{ route('admin.users.show', $user) }}"
                                                   class="text-dark text-decoration-none hover-underline">
                                                    {{ $user->username ?? $user->email }}
                                                </a>
                                            </div>
                                            <div class="text-muted small text-truncate" style="max-width:120px;">
                                                {{ $user->email }}
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                {{-- Role --}}
                                <td class="d-none d-sm-table-cell">
                                    <span class="badge
                                        @if($user->role?->is_super_admin) bg-danger
                                        @elseif($user->role?->is_admin) bg-primary
                                        @elseif($user->role?->is_vendor) bg-warning text-dark
                                        @else bg-secondary
                                        @endif
                                        small
                                    ">
                                        {{ $user->role?->display_name ?? 'Member' }}
                                    </span>
                                </td>

                                {{-- Status --}}
                                <td class="text-center d-none d-lg-table-cell">
                                    @if($user->banned)
                                        <span class="badge bg-danger small">
                                            <i class="fas fa-ban me-1"></i> Banned
                                        </span>
                                    @else
                                        <span class="badge bg-success small">
                                            <i class="fas fa-check-circle me-1"></i> Active
                                        </span>
                                    @endif
                                </td>

                                {{-- Balance --}}
                                <td class="text-end fw-bold d-none d-md-table-cell small">
                                    {{ currency_symbol() }}{{ number_format($user->balance, 2) }}
                                </td>

                                {{-- Actions --}}
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{{ route('admin.users.show', $user) }}"
                                           class="btn btn-outline-primary"
                                           title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.users.edit', $user) }}"
                                           class="btn btn-outline-secondary"
                                           title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        @if(!$user->role?->is_super_admin)
                                            <button type="button"
                                                    class="btn btn-outline-{{ $user->banned ? 'success' : 'danger' }}"
                                                    onclick="confirmToggleBan({{ $user->id }}, '{{ addslashes($user->username ?? $user->email) }}', {{ $user->banned ? 'true' : 'false' }})"
                                                    title="{{ $user->banned ? 'Unban' : 'Ban' }}">
                                                <i class="fas fa-{{ $user->banned ? 'check' : 'ban' }}"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <i class="fas fa-users fa-3x text-muted mb-3 d-block"></i>
                                    <h6 class="text-muted">No users found</h6>
                                    <p class="text-muted small">Try adjusting your search or filter criteria</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Pagination --}}
        @if($users->hasPages())
            <div class="card-footer bg-white border-0 py-3">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div class="text-muted small">
                        Showing {{ $users->firstItem() ?? 0 }} to {{ $users->lastItem() ?? 0 }}
                        of {{ $users->total() }} users
                    </div>
                    <div class="pagination-wrapper">
                        {{ $users->appends(request()->except('page'))->links() }}
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

{{-- Hidden Forms --}}
<form id="bulkActionForm" method="POST" action="" style="display:none;">
    @csrf
    @method('DELETE')
</form>

<form id="banForm" method="POST" action="" style="display:none;">
    @csrf
</form>
@endsection

@push('styles')
<style>
    /* ============================================================
       Reset & Base
    ============================================================ */
    .fw-bold { font-weight: 700; }
    .hover-underline:hover { text-decoration: underline !important; }
    .avatar-placeholder { font-size: 12px; font-weight: 600; }
    .min-width-0 { min-width: 0; }

    /* ============================================================
       Table Styles
    ============================================================ */
    .table {
        margin-bottom: 0;
        font-size: 0.875rem;
    }

    .table > :not(caption) > * > * {
        padding: 0.6rem 0.5rem;
        vertical-align: middle;
    }

    .table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-accent-bg: rgba(0, 0, 0, 0.02);
    }

    .table thead th {
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

    /* ============================================================
       Button Group
    ============================================================ */
    .btn-group .btn {
        padding: 0.2rem 0.45rem;
        font-size: 0.7rem;
    }

    .btn-group .btn i {
        font-size: 0.75rem;
    }

    .btn-group-sm > .btn {
        padding: 0.2rem 0.45rem;
        font-size: 0.7rem;
    }

    /* ============================================================
       Badge Styles
    ============================================================ */
    .badge.small {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        font-weight: 500;
    }

    .badge.bg-secondary {
        background-color: #6c757d !important;
    }

    .badge.bg-success {
        background-color: #198754 !important;
    }

    .badge.bg-danger {
        background-color: #dc3545 !important;
    }

    .badge.bg-warning {
        background-color: #ffc107 !important;
        color: #000 !important;
    }

    /* ============================================================
       Pagination
    ============================================================ */
    .pagination-wrapper .pagination {
        margin-bottom: 0;
        flex-wrap: wrap;
        gap: 2px;
    }

    .pagination-wrapper .page-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        border-radius: 4px;
    }

    .pagination-wrapper .page-item.active .page-link {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

    .pagination-wrapper .page-item.disabled .page-link {
        color: #6c757d;
        pointer-events: none;
        background-color: #fff;
        border-color: #dee2e6;
    }

    /* ============================================================
       Form Controls
    ============================================================ */
    .form-select-sm {
        padding-right: 1.75rem;
        font-size: 0.8rem;
        min-height: 31px;
    }

    .input-group-sm .form-control {
        font-size: 0.8rem;
        min-height: 31px;
    }

    .input-group-sm .input-group-text {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
        min-height: 31px;
    }

    /* ============================================================
       Responsive
    ============================================================ */
    @media (max-width: 768px) {
        .table {
            font-size: 0.8rem;
        }

        .table > :not(caption) > * > * {
            padding: 0.4rem 0.3rem;
        }

        .table thead th {
            font-size: 0.65rem;
        }

        .btn-group .btn {
            padding: 0.15rem 0.35rem;
            font-size: 0.65rem;
        }

        .btn-group .btn i {
            font-size: 0.65rem;
        }

        .avatar-placeholder {
            width: 28px !important;
            height: 28px !important;
            font-size: 10px !important;
        }

        .pagination-wrapper .page-link {
            padding: 0.2rem 0.45rem;
            font-size: 0.7rem;
        }

        .badge.small {
            font-size: 0.6rem;
            padding: 0.2rem 0.4rem;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .table > :not(caption) > * > * {
            padding: 0.3rem 0.2rem;
            font-size: 0.75rem;
        }

        .btn-group-sm > .btn {
            padding: 0.1rem 0.3rem;
            font-size: 0.6rem;
        }

        .btn-group-sm > .btn i {
            font-size: 0.6rem;
        }
    }

    /* ============================================================
       Dark Mode Support
    ============================================================ */
    @media (prefers-color-scheme: dark) {
        .bg-light {
            background-color: #1a1a2e !important;
        }

        .table-striped > tbody > tr:nth-of-type(odd) > * {
            --bs-table-accent-bg: rgba(255, 255, 255, 0.02);
        }

        .card-footer.bg-white {
            background-color: #1e293b !important;
        }

        .table thead th {
            border-bottom-color: #2d3748;
            color: #94a3b8;
        }

        .pagination-wrapper .page-link {
            background-color: #1e293b;
            border-color: #2d3748;
            color: #e2e8f0;
        }

        .pagination-wrapper .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #fff;
        }

        .pagination-wrapper .page-item.disabled .page-link {
            background-color: #1a1a2e;
            border-color: #2d3748;
            color: #64748b;
        }

        .form-control,
        .form-select,
        .input-group-text {
            background-color: #1e293b !important;
            border-color: #2d3748 !important;
            color: #e2e8f0 !important;
        }

        .form-control::placeholder {
            color: #64748b !important;
        }
    }

    /* ============================================================
       Print Styles
    ============================================================ */
    @media print {
        .btn,
        .btn-group,
        .input-group,
        .form-select,
        #bulkActions {
            display: none !important;
        }

        .card {
            border: 1px solid #ddd !important;
            box-shadow: none !important;
        }

        .table {
            font-size: 10pt !important;
        }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    updateBulkActions();
});

function toggleAll(checkbox) {
    document.querySelectorAll('.user-checkbox').forEach(function(cb) {
        cb.checked = checkbox.checked;
    });
    updateBulkActions();
}

function updateBulkActions() {
    var checkboxes = document.querySelectorAll('.user-checkbox:checked');
    var count = checkboxes.length;
    var bulkActions = document.getElementById('bulkActions');
    var selectedCount = document.getElementById('selectedCount');

    if (count > 0) {
        bulkActions.style.display = 'block';
        selectedCount.textContent = count;
    } else {
        bulkActions.style.display = 'none';
    }
}

function clearSelection() {
    document.querySelectorAll('.user-checkbox').forEach(function(cb) {
        cb.checked = false;
    });
    document.getElementById('selectAll').checked = false;
    updateBulkActions();
}

function confirmBulkAction(action) {
    var ids = [];
    document.querySelectorAll('.user-checkbox:checked').forEach(function(cb) {
        ids.push(cb.value);
    });

    if (ids.length === 0) return;

    var actionMap = {
        'ban': { label: 'ban', url: '{{ route("admin.users.bulk-ban") }}' },
        'unban': { label: 'unban', url: '{{ route("admin.users.bulk-unban") }}' },
        'delete': { label: 'deactivate', url: '{{ route("admin.users.bulk-delete") }}' }
    };

    var config = actionMap[action];
    if (!config) return;

    var message = 'Are you sure you want to ' + config.label + ' ' + ids.length + ' selected user' + (ids.length > 1 ? 's' : '') + '?';
    if (!confirm(message)) return;

    var form = document.getElementById('bulkActionForm');
    form.action = config.url;

    // Clear previous inputs
    var existingInputs = form.querySelectorAll('input[name="user_ids[]"]');
    existingInputs.forEach(function(input) {
        input.remove();
    });

    // Add new inputs with all IDs
    ids.forEach(function(id) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'user_ids[]';
        input.value = id;
        form.appendChild(input);
    });

    form.submit();
}

function confirmToggleBan(userId, username, isBanned) {
    const action = isBanned ? 'unban' : 'ban';
    const message = 'Are you sure you want to ' + action + ' "' + username + '"?';

    if (!confirm(message)) {
        return;
    }

    const form = document.getElementById('banForm');
    const routeTemplate = @json(
        route('admin.users.toggle-ban', ['user' => '__USER_ID__'])
    );

    form.action = routeTemplate.replace(
        '__USER_ID__',
        encodeURIComponent(userId)
    );

    form.submit();
}
</script>
@endpush