@extends('admin.layout')

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

@section('content')
<!-- Alerts -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<!-- Search & Filters -->
<div class="admin-card">
    <form method="GET" action="{{ route('admin.users') }}" class="filter-form">
        <div class="form-group">
            <label for="search">Search</label>
            <input type="text" name="search" id="search" class="form-control" placeholder="Search by name or email..." value="{{ request('search') }}">
        </div>
        <div class="form-group">
            <label for="role">Role</label>
            <select name="role" id="role" class="form-select">
                <option value="">All Roles</option>
                <option value="user" {{ request('role') == 'user' ? 'selected' : '' }}>User</option>
                <option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                <option value="super_admin" {{ request('role') == 'super_admin' ? 'selected' : '' }}>Super Admin</option>
            </select>
        </div>
        <div class="form-group">
            <label for="sort">Sort By</label>
            <select name="sort" id="sort" class="form-select">
                <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest First</option>
                <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Oldest First</option>
                <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>Name (A-Z)</option>
                <option value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}>Name (Z-A)</option>
            </select>
        </div>
        <div class="form-group">
            <label>&nbsp;</label>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-search"></i> Filter
            </button>
            <a href="{{ route('admin.users') }}" class="btn btn-outline-light">
                <i class="bi bi-x-circle"></i> Clear
            </a>
        </div>
    </form>
</div>

<!-- Users Table -->
<div class="admin-card">
    <div class="admin-card-header">
        <h5 class="admin-card-title">All Users ({{ $users->total() }})</h5>
    </div>
    
    <div class="table-responsive">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Videos</th>
                    <th>Joined</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="user-avatar">
                            <div>
                                <div>{{ $user->name }}</div>
                                @if($user->id === auth()->id())
                                    <small class="text-info">(You)</small>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td>{{ $user->email }}</td>
                    <td>
                        @if($user->role === 'super_admin')
                            <span class="badge-role badge-super-admin">Super Admin</span>
                        @elseif($user->role === 'admin')
                            <span class="badge-role badge-admin">Admin</span>
                        @else
                            <span class="badge-role badge-user">User</span>
                        @endif
                    </td>
                    <td>
                        <a href="{{ route('channel', $user->id) }}" target="_blank" class="text-decoration-none">
                            {{ $user->videos->count() }} videos
                        </a>
                    </td>
                    <td>{{ $user->created_at->format('M d, Y') }}</td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-light dropdown-toggle" data-bs-toggle="dropdown">
                                <i class="bi bi-gear"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-dark">
                                <li>
                                    <a class="dropdown-item" href="{{ route('admin.users.edit', $user->id) }}">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                </li>
                                @if($user->id !== auth()->id())
                                <li>
                                    <button class="dropdown-item text-danger" onclick="confirmDeleteUser({{ $user->id }}, '{{ $user->name }}')">
                                        <i class="bi bi-trash"></i> Delete
                                    </button>
                                </li>
                                @endif
                            </ul>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center text-secondary py-4">
                        No users found
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    <div class="d-flex justify-content-center">
        {{ $users->links() }}
    </div>
</div>

<!-- Delete User Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="background: #1a1a1a; border: 1px solid #3f3f3f; border-radius: 12px;">
            <div class="modal-header" style="border-bottom: 1px solid #3f3f3f; padding: 20px 24px;">
                <h5 class="modal-title" id="deleteUserModalLabel" style="color: #fff; font-weight: 600;">
                    <i class="bi bi-exclamation-triangle-fill text-danger me-2"></i>
                    Delete User
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 24px;">
                <p>Are you sure you want to delete this user? This action cannot be undone.</p>
                <p><strong>User:</strong> <span id="deleteUserName"></span></p>
                <div class="alert alert-warning">
                    <i class="bi bi-info-circle me-2"></i>
                    This will also delete all videos uploaded by this user.
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid #3f3f3f; padding: 16px 24px;">
                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteUserForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete User</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    let currentDeleteUserId = null;

    function confirmDeleteUser(userId, userName) {
        currentDeleteUserId = userId;
        document.getElementById('deleteUserName').textContent = userName;
        document.getElementById('deleteUserForm').action = '/admin/users/' + userId;
        
        const modal = new bootstrap.Modal(document.getElementById('deleteUserModal'));
        modal.show();
    }
</script>
@endsection