@extends('layouts.admin')
@section('title', $user->name)
@section('page-title', $user->name)
@section('page-subtitle', $user->email)

@section('content')
<div class="mb-6 flex items-center justify-between">
    <a href="{{ route('admin.users.index') }}" class="text-[var(--text-secondary)] hover:text-gold-500 flex items-center gap-2">
        <i class="fas fa-arrow-left"></i> Back to Users
    </a>
    <div class="flex items-center gap-2">
        <a href="{{ route('admin.users.edit', $user) }}" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
            <i class="fas fa-edit mr-2"></i> Edit
        </a>
        @if($user->id !== auth()->id())
            <form action="{{ route('admin.users.destroy', $user) }}" method="POST" class="inline" onsubmit="return confirm('Delete this user?')">
                @csrf @method('DELETE')
                <button type="submit" class="px-4 py-2 rounded-lg border border-red-500 text-red-500 hover:bg-red-500 hover:text-white">
                    <i class="fas fa-trash mr-2"></i> Delete
                </button>
            </form>
        @endif
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-1">
        <div class="card-royal p-6">
            <div class="text-center mb-6">
                @if($user->avatar)
                    <img src="{{ asset('storage/' . $user->avatar) }}" class="w-24 h-24 rounded-full mx-auto object-cover border-4 border-[var(--border-color)]">
                @else
                    <div class="w-24 h-24 rounded-full mx-auto bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center text-white text-3xl font-bold">
                        {{ substr($user->name, 0, 1) }}
                    </div>
                @endif
                <h2 class="font-cinzel text-xl font-bold text-[var(--text-primary)] mt-4">{{ $user->name }}</h2>
                <p class="text-[var(--text-secondary)]">{{ $user->email }}</p>
                @if($user->is_active)
                    <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-green-500/20 text-green-400">Active</span>
                @else
                    <span class="inline-block mt-2 px-3 py-1 text-xs rounded-full bg-red-500/20 text-red-400">Inactive</span>
                @endif
            </div>

            <div class="space-y-4">
                <div class="flex items-center justify-between py-2 border-b border-[var(--border-color)]">
                    <span class="text-[var(--text-secondary)]"><i class="fas fa-church mr-2"></i> Branch</span>
                    <span class="text-[var(--text-primary)]">{{ $user->church?->name ?? 'N/A' }}</span>
                </div>
                <div class="flex items-center justify-between py-2 border-b border-[var(--border-color)]">
                    <span class="text-[var(--text-secondary)]"><i class="fas fa-phone mr-2"></i> Phone</span>
                    <span class="text-[var(--text-primary)]">{{ $user->phone ?? 'N/A' }}</span>
                </div>
                <div class="flex items-center justify-between py-2 border-b border-[var(--border-color)]">
                    <span class="text-[var(--text-secondary)]"><i class="fas fa-clock mr-2"></i> Last Login</span>
                    <span class="text-[var(--text-primary)]">{{ $user->last_login_at?->diffForHumans() ?? 'Never' }}</span>
                </div>
                <div class="flex items-center justify-between py-2">
                    <span class="text-[var(--text-secondary)]"><i class="fas fa-calendar mr-2"></i> Joined</span>
                    <span class="text-[var(--text-primary)]">{{ $user->created_at->format('M d, Y') }}</span>
                </div>
            </div>
        </div>

        <div class="card-royal p-6 mt-6">
            <h3 class="font-cinzel font-semibold text-[var(--text-primary)] mb-4">Assigned Roles</h3>
            <div class="flex flex-wrap gap-2">
                @forelse($user->roles as $role)
                    <span class="px-3 py-1 text-sm rounded-full {{ $role->name === 'super-admin' ? 'bg-red-500/20 text-red-400' : ($role->name === 'admin' ? 'bg-gold-500/20 text-gold-500' : 'bg-royal-500/20 text-royal-400') }}">
                        {{ ucfirst(str_replace('-', ' ', $role->name)) }}
                    </span>
                @empty
                    <span class="text-[var(--text-secondary)]">No roles assigned</span>
                @endforelse
            </div>
        </div>

        @if($user->id !== auth()->id())
        <div class="card-royal p-6 mt-6">
            <h3 class="font-cinzel font-semibold text-[var(--text-primary)] mb-4">Quick Actions</h3>
            <form action="{{ route('admin.users.toggle-status', $user) }}" method="POST">
                @csrf
                <button type="submit" class="w-full px-4 py-2 rounded-lg border {{ $user->is_active ? 'border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-white' : 'border-green-500 text-green-500 hover:bg-green-500 hover:text-white' }}">
                    <i class="fas fa-{{ $user->is_active ? 'ban' : 'check' }} mr-2"></i>
                    {{ $user->is_active ? 'Deactivate User' : 'Activate User' }}
                </button>
            </form>
        </div>
        @endif
    </div>

    <div class="lg:col-span-2">
        <div class="card-royal p-6">
            <h3 class="font-cinzel font-semibold text-[var(--text-primary)] mb-4">Recent Activity</h3>
            @if($user->loginActivities->isNotEmpty())
                <div class="space-y-3">
                    @foreach($user->loginActivities as $activity)
                        <div class="flex items-start gap-3 py-3 border-b border-[var(--border-color)] last:border-0">
                            <div class="w-8 h-8 rounded-full {{ $activity->status ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }} flex items-center justify-center">
                                <i class="fas fa-{{ $activity->status ? 'check' : 'times' }} text-sm"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-[var(--text-primary)]">
                                    {{ $activity->status ? 'Successful login' : 'Failed login attempt' }}
                                    @if($activity->ip_address)
                                        from {{ $activity->ip_address }}
                                    @endif
                                </p>
                                <p class="text-xs text-[var(--text-secondary)]">{{ $activity->login_at?->format('M d, Y H:i') ?? 'N/A' }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-[var(--text-secondary)] text-center py-8">No login activity recorded.</p>
            @endif
        </div>
    </div>
</div>
@endsection