@extends('layouts.admin')

@section('title', 'Manage Users')

@section('admin')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Admin Navigation --}}
    @include('admin._nav', ['current' => 'admin.users'])

    {{-- Header --}}
    <h1 class="text-3xl font-bold mb-8 bg-gradient-to-r from-red-400 to-yellow-400 bg-clip-text text-transparent">
        Manage Users
    </h1>

    {{-- Users Table --}}
    <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-800 bg-gray-900/80">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">User</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Email</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Role</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Playlists</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Registered</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                    @forelse($users as $user)
                        {{-- User Row --}}
                        <tr class="hover:bg-gray-800/50 transition-colors" id="user-row-{{ $user->id }}">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-full bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <span class="text-white font-medium text-sm block">{{ $user->name }}</span>
                                        @if($user->id === auth()->id())
                                            <span class="text-xs text-yellow-400">(you)</span>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-gray-300 text-sm">
                                {{ $user->email }}
                            </td>
                            <td class="px-4 py-3">
                                @if($user->is_admin)
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-600/20 text-yellow-400 border border-red-500/30">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                        </svg>
                                        Admin
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-gray-700 text-gray-300 border border-gray-600">
                                        User
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-gray-400 text-sm">
                                {{ $user->playlists_count ?? $user->playlists()->count() }}
                            </td>
                            <td class="px-4 py-3 text-gray-400 text-sm">
                                {{ $user->created_at->format('M d, Y') }}
                            </td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    {{-- Edit Button --}}
                                    <button type="button"
                                            onclick="togglePanel('edit-{{ $user->id }}')"
                                            class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium text-yellow-400 hover:text-yellow-300 bg-yellow-600/10 hover:bg-yellow-600/20 border border-yellow-500/20 transition-colors"
                                            title="Edit User">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                        </svg>
                                        Edit
                                    </button>

                                    {{-- Reset Password Button --}}
                                    <button type="button"
                                            onclick="togglePanel('pw-{{ $user->id }}')"
                                            class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium text-blue-400 hover:text-blue-300 bg-blue-600/10 hover:bg-blue-600/20 border border-blue-500/20 transition-colors"
                                            title="Reset Password">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                                        </svg>
                                        Password
                                    </button>

                                    @if($user->id !== auth()->id())
                                        {{-- Toggle Admin --}}
                                        <form method="POST" action="{{ route('admin.users.toggleAdmin', $user) }}">
                                            @csrf
                                            @method('PUT')
                                            <button type="submit"
                                                    class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors {{ $user->is_admin ? 'bg-amber-600/10 text-amber-400 hover:bg-amber-600/20 border border-amber-500/20' : 'bg-green-600/10 text-green-400 hover:bg-green-600/20 border border-green-500/20' }}"
                                                    title="{{ $user->is_admin ? 'Revoke Admin' : 'Make Admin' }}">
                                                @if($user->is_admin)
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                                                    </svg>
                                                    Revoke
                                                @else
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                                    </svg>
                                                    Make Admin
                                                @endif
                                            </button>
                                        </form>

                                        {{-- Delete User --}}
                                        <form method="POST"
                                              action="{{ route('admin.users.delete', $user) }}"
                                              onsubmit="return confirm('Are you sure you want to delete {{ addslashes($user->name) }}? This will also delete their playlists. This cannot be undone.')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium bg-red-600/10 text-red-400 hover:bg-red-600/20 border border-red-500/20 transition-colors"
                                                    title="Delete User">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                                </svg>
                                                Delete
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>

                        {{-- Edit User Inline Panel --}}
                        <tr id="edit-{{ $user->id }}" class="hidden">
                            <td colspan="6" class="px-4 py-4 bg-gray-950/50">
                                <form method="POST" action="{{ route('admin.users.update', $user) }}" class="flex flex-col sm:flex-row gap-3 items-end">
                                    @csrf
                                    @method('PUT')
                                    <div class="flex-1">
                                        <label class="block text-xs font-medium text-gray-400 mb-1">Name</label>
                                        <input type="text" name="name" value="{{ $user->name }}"
                                               class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500">
                                    </div>
                                    <div class="flex-1">
                                        <label class="block text-xs font-medium text-gray-400 mb-1">Email</label>
                                        <input type="email" name="email" value="{{ $user->email }}"
                                               class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500">
                                    </div>
                                    <div class="flex gap-2 flex-shrink-0">
                                        <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                            Save
                                        </button>
                                        <button type="button" onclick="togglePanel('edit-{{ $user->id }}')" class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                            Cancel
                                        </button>
                                    </div>
                                </form>
                            </td>
                        </tr>

                        {{-- Reset Password Inline Panel --}}
                        <tr id="pw-{{ $user->id }}" class="hidden">
                            <td colspan="6" class="px-4 py-4 bg-gray-950/50">
                                <form method="POST" action="{{ route('admin.users.resetPassword', $user) }}" class="flex flex-col sm:flex-row gap-3 items-end">
                                    @csrf
                                    @method('PUT')
                                    <div class="flex-1">
                                        <label class="block text-xs font-medium text-gray-400 mb-1">New Password</label>
                                        <input type="password" name="password" required minlength="8" placeholder="Min 8 characters"
                                               class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500">
                                    </div>
                                    <div class="flex-1">
                                        <label class="block text-xs font-medium text-gray-400 mb-1">Confirm Password</label>
                                        <input type="password" name="password_confirmation" required minlength="8" placeholder="Repeat password"
                                               class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500">
                                    </div>
                                    <div class="flex gap-2 flex-shrink-0">
                                        <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                            Reset Password
                                        </button>
                                        <button type="button" onclick="togglePanel('pw-{{ $user->id }}')" class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                            Cancel
                                        </button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-12 text-center">
                                <div class="flex flex-col items-center gap-3">
                                    <svg class="w-12 h-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                                    </svg>
                                    <p class="text-gray-400 text-lg">No users found.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    @if($users->hasPages())
        <div class="mt-6">
            {{ $users->links() }}
        </div>
    @endif
</div>

@push('scripts')
<script>
    function togglePanel(id) {
        const panel = document.getElementById(id);
        if (panel) {
            // Close all other open panels first
            document.querySelectorAll('tr[id^="edit-"], tr[id^="pw-"]').forEach(el => {
                if (el.id !== id) el.classList.add('hidden');
            });
            panel.classList.toggle('hidden');
        }
    }
</script>
@endpush
@endsection