@extends('layouts.admin')

@section('title', 'User Management')
@section('subtitle', 'Provision and manage all user accounts')

@section('content')
<div class="grid lg:grid-cols-3 gap-8">

    <!-- User List -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-6 border-b border-slate-100 flex items-center justify-between">
                <h2 class="font-black text-slate-800">All Accounts</h2>
                <span class="text-xs font-bold text-slate-400">{{ $users->total() }} total</span>
            </div>
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100">
                        <th class="text-left px-6 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest">User</th>
                        <th class="text-left px-6 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest">Role</th>
                        <th class="text-left px-6 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>
                        <th class="text-left px-6 py-3 text-[10px] font-black text-slate-400 uppercase tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach($users as $user)
                        <tr class="hover:bg-slate-50/50 transition-colors {{ !$user->is_active ? 'opacity-50' : '' }}">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-full {{ $user->is_active ? 'bg-primary/10 text-primary' : 'bg-slate-100 text-slate-400' }} flex items-center justify-center font-black flex-shrink-0">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <p class="font-bold text-slate-800">{{ $user->name }}</p>
                                        <p class="text-[11px] text-slate-400 font-medium">{{ $user->email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                @php
                                    $roleColors = [
                                        'admin' => 'bg-purple-100 text-purple-700',
                                        'manager' => 'bg-indigo-100 text-indigo-700',
                                        'staff' => 'bg-blue-100 text-blue-700',
                                        'editor' => 'bg-blue-100 text-blue-700',
                                        'user' => 'bg-slate-100 text-slate-600'
                                    ];
                                @endphp
                                <span class="px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest {{ $roleColors[$user->role] ?? 'bg-slate-100' }}">
                                    {{ $user->role }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest {{ $user->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-600' }}">
                                    {{ $user->is_active ? 'Active' : 'Disabled' }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                @if(auth()->user()->role !== 'admin' && $user->role === 'admin')
                                    <span class="text-[11px] text-slate-400 italic font-bold flex items-center gap-1">
                                        <span class="material-icons text-sm text-slate-300">lock</span> Protected
                                    </span>
                                @else
                                    <div class="flex items-center gap-2">
                                        @php
                                            $canImpersonate = false;
                                            if ($user->id !== auth()->id()) {
                                                if (auth()->user()->role === 'admin') {
                                                    $canImpersonate = ($user->role !== 'admin');
                                                } elseif (auth()->user()->role === 'manager') {
                                                    $canImpersonate = in_array($user->role, ['user', 'staff', 'editor']);
                                                }
                                            }
                                        @endphp
                                        @if($canImpersonate)
                                            <a href="{{ route('admin.impersonate', $user) }}" title="Login as {{ $user->name }} ({{ $user->role }})"
                                                class="px-2.5 py-1.5 rounded-xl bg-amber-50 hover:bg-amber-500 text-amber-600 hover:text-white text-[11px] font-bold transition-all flex items-center gap-1">
                                                <span class="material-icons text-xs">login</span> Login as
                                            </a>
                                        @endif

                                        <a href="{{ route('admin.users.edit', $user) }}" class="p-2 rounded-xl bg-slate-100 hover:bg-primary hover:text-white text-slate-500 transition-all" title="Edit">
                                            <span class="material-icons text-sm">edit</span>
                                        </a>
                                        @if($user->id !== auth()->id())
                                            <form action="{{ route('admin.users.toggle', $user) }}" method="POST">
                                                @csrf
                                                <button type="submit" title="{{ $user->is_active ? 'Disable' : 'Enable' }}"
                                                    class="p-2 rounded-xl transition-all {{ $user->is_active ? 'bg-red-50 hover:bg-red-500 text-red-400 hover:text-white' : 'bg-emerald-50 hover:bg-emerald-500 text-emerald-400 hover:text-white' }}">
                                                    <span class="material-icons text-sm">{{ $user->is_active ? 'block' : 'check_circle' }}</span>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            @if($users->hasPages())
                <div class="p-6 border-t border-slate-100">{{ $users->links() }}</div>
            @endif
        </div>
    </div>

    <!-- Add New User Form -->
    <div class="lg:col-span-1">
        <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6">
            <h3 class="font-black text-slate-800 mb-6 flex items-center gap-2">
                <span class="material-icons text-primary">person_add</span>
                New Account
            </h3>
            <form action="{{ route('admin.users.store') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Full Name</label>
                    <input name="name" value="{{ old('name') }}" required class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary" placeholder="e.g. Dr. Adeola Obi">
                </div>
                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Email Address</label>
                    <input name="email" type="email" value="{{ old('email') }}" required class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary" placeholder="user@mtu.edu.ng">
                </div>
                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Password</label>
                    <input name="password" type="password" required class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Min. 8 characters">
                </div>
                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Role</label>
                    <select name="role" required class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary">
                        <option value="user">User (Depositor)</option>
                        <option value="staff">Staff (Reviewer)</option>
                        <option value="manager">Manager</option>
                        @if(auth()->user()->role === 'admin')
                            <option value="admin">Admin</option>
                        @endif
                    </select>
                </div>
                <button type="submit" class="w-full py-4 bg-primary text-white font-black rounded-2xl hover:scale-[1.02] active:scale-[0.98] transition-all text-xs uppercase tracking-widest shadow-lg shadow-primary/30">
                    Create Account
                </button>
            </form>
        </div>
    </div>

</div>
@endsection