@extends('layouts.admin')
@section('title', 'Admin Users — JAM Admin')
@section('page-title', 'Admin Users')

@section('content')
<div x-data="{ createModal: false }" class="space-y-6">

    @if(session('success'))
    <div class="bg-green-900/20 border border-green-700/40 rounded-xl px-5 py-3 text-green-400 text-sm">{{ session('success') }}</div>
    @endif
    @if(session('error'))
    <div class="bg-red-900/20 border border-red-700/40 rounded-xl px-5 py-3 text-red-400 text-sm">{{ session('error') }}</div>
    @endif

    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-semibold" style="font-family: 'Playfair Display', serif;">Admin Users</h2>
            <p class="text-white/40 text-sm mt-1">Manage admin access to the panel.</p>
        </div>
        <button @click="createModal = true"
                class="bg-[#D4B84A] hover:bg-[#E8D080] text-black text-xs font-semibold tracking-widest uppercase px-5 py-3 rounded-full transition-colors">
            + Add Admin
        </button>
    </div>

    {{-- Admin list --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-xl overflow-hidden">
        <div class="divide-y divide-[#1e1e1e]">
            @foreach($admins as $admin)
            <div class="flex items-center justify-between px-6 py-4">
                <div class="flex items-center gap-4">
                    <div class="w-9 h-9 rounded-full bg-[#D4B84A]/15 flex items-center justify-center">
                        <span class="text-[#D4B84A] text-sm font-semibold">{{ strtoupper(substr($admin->name, 0, 1)) }}</span>
                    </div>
                    <div>
                        <div class="flex items-center gap-2">
                            <p class="text-white text-sm font-medium">{{ $admin->name }}</p>
                            @if($admin->id === auth('admin')->id())
                            <span class="text-[10px] text-white/25 uppercase tracking-widest">You</span>
                            @endif
                        </div>
                        <p class="text-white/40 text-xs">{{ $admin->email }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-6">
                    <span class="px-2.5 py-1 rounded-full text-xs border
                        {{ $admin->isSuperAdmin() ? 'border-[#D4B84A]/50 text-[#D4B84A]' : 'border-white/20 text-white/50' }}">
                        {{ $admin->isSuperAdmin() ? 'Super Admin' : 'Admin' }}
                    </span>
                    <span class="px-2.5 py-1 rounded-full text-xs {{ $admin->status === 'active' ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400' }}">
                        {{ ucfirst($admin->status) }}
                    </span>
                    <p class="text-white/30 text-xs w-32 text-right">
                        {{ $admin->last_login_at ? $admin->last_login_at->diffForHumans() : 'Never logged in' }}
                    </p>
                    @if($admin->id !== auth('admin')->id())
                    <form method="POST" action="{{ route('admin.admins.toggle-status', $admin) }}">
                        @csrf
                        <button type="submit"
                                class="text-xs border rounded-full px-3 py-1.5 transition-colors
                                {{ $admin->status === 'active'
                                    ? 'border-red-800/50 text-red-400/60 hover:text-red-400 hover:border-red-600'
                                    : 'border-green-800/50 text-green-400/60 hover:text-green-400 hover:border-green-600' }}">
                            {{ $admin->status === 'active' ? 'Deactivate' : 'Reactivate' }}
                        </button>
                    </form>
                    @else
                    <div class="w-20"></div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Activity log --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-xl">
        <div class="px-6 py-4 border-b border-[#1e1e1e]">
            <h3 class="text-sm font-medium">Recent Activity Log</h3>
        </div>
        <div class="divide-y divide-[#1e1e1e]">
            @forelse($activityLog as $log)
            <div class="flex items-center justify-between px-6 py-3">
                <div class="flex items-center gap-4">
                    <span class="text-white/30 font-mono text-xs bg-white/5 px-2.5 py-1 rounded">{{ $log->action }}</span>
                    <div>
                        <p class="text-white/60 text-xs">
                            by <span class="text-white/80">{{ $log->admin?->name ?? 'System' }}</span>
                            @if($log->meta)
                            · {{ collect($log->meta)->map(fn($v,$k) => "$k: $v")->implode(', ') }}
                            @endif
                        </p>
                    </div>
                </div>
                <p class="text-white/25 text-xs flex-shrink-0 ml-4">{{ $log->created_at->format('d M Y · h:i A') }}</p>
            </div>
            @empty
            <div class="px-6 py-8 text-center text-white/30 text-sm">No activity recorded yet.</div>
            @endforelse
        </div>
    </div>

    {{-- Create Admin Modal --}}
    <div x-show="createModal" x-cloak
         class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
         @keydown.escape.window="createModal = false">
        <div class="bg-[#111111] border border-[#2a2a2a] rounded-2xl p-8 w-full max-w-md" @click.stop>
            <h3 class="text-lg font-semibold mb-1" style="font-family: 'Playfair Display', serif;">Add Admin</h3>
            <p class="text-white/40 text-sm mb-6">New admin accounts are active immediately.</p>

            @if($errors->any())
            <div class="bg-red-900/20 border border-red-800/50 rounded-lg p-3 mb-4">
                @foreach($errors->all() as $error)
                <p class="text-red-400 text-xs">{{ $error }}</p>
                @endforeach
            </div>
            @endif

            <form method="POST" action="{{ route('admin.admins.store') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Name</label>
                    <input type="text" name="name" value="{{ old('name') }}" required
                           class="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#D4B84A] rounded-lg px-4 py-3 text-sm text-white outline-none transition-colors">
                </div>
                <div>
                    <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" required
                           class="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#D4B84A] rounded-lg px-4 py-3 text-sm text-white outline-none transition-colors">
                </div>
                <div>
                    <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Role</label>
                    <select name="role" required
                            class="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#D4B84A] rounded-lg px-4 py-3 text-sm text-white outline-none transition-colors">
                        <option value="admin">Admin</option>
                        <option value="super_admin">Super Admin</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Password</label>
                    <input type="text" name="password" required placeholder="Min. 8 characters"
                           class="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#D4B84A] rounded-lg px-4 py-3 text-sm text-white outline-none transition-colors placeholder-white/20">
                </div>
                <div class="flex justify-end gap-3 pt-2">
                    <button type="button" @click="createModal = false"
                            class="px-5 py-2.5 rounded-full border border-[#2a2a2a] text-white/50 text-sm hover:text-white transition-colors">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-5 py-2.5 rounded-full bg-[#D4B84A] hover:bg-[#E8D080] text-black font-semibold text-sm transition-colors">
                        Create Admin
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection