@extends('layouts.admin')
@section('title', $user->name.' — User Profile')
@section('page-title', 'User Profile')

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

    {{-- User Info Card --}}
    <div class="space-y-4">
        <div class="card p-6 rounded-xl text-center">
            <img src="{{ $user->avatar_url }}" class="w-20 h-20 rounded-full object-cover mx-auto mb-3 border-2 border-indigo-500">
            <h2 class="text-white font-bold text-lg">{{ $user->name }}</h2>
            <p class="text-slate-400 text-sm font-mono">{{ $user->phone }}</p>
            @if($user->email)<p class="text-slate-500 text-xs mt-1">{{ $user->email }}</p>@endif
            <div class="mt-3">
                @if($user->trashed())
                <span class="badge badge-secondary">Deleted</span>
                @elseif($user->is_banned)
                <span class="badge badge-danger">Banned — {{ $user->ban_reason }}</span>
                @else
                <span class="badge badge-success">Active</span>
                @endif
            </div>
            <p class="text-slate-600 text-xs mt-2">Joined {{ $user->created_at->format('d M Y') }}</p>
        </div>

        {{-- Balance --}}
        <div class="card p-5 rounded-xl">
            <p class="text-slate-400 text-xs uppercase tracking-wider font-semibold mb-3">Balances</p>
            <div class="space-y-2">
                <div class="flex justify-between"><span class="text-slate-400 text-sm">Deposit Balance</span><span class="text-green-400 font-bold">৳{{ number_format($user->balance, 2) }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400 text-sm">Winning Balance</span><span class="text-yellow-400 font-bold">৳{{ number_format($user->winning, 2) }}</span></div>
                <div class="flex justify-between pt-2 border-t border-slate-700"><span class="text-white text-sm font-semibold">Total</span><span class="text-white font-bold">৳{{ number_format($user->balance + $user->winning, 2) }}</span></div>
            </div>
        </div>

        {{-- Stats --}}
        <div class="card p-5 rounded-xl">
            <p class="text-slate-400 text-xs uppercase tracking-wider font-semibold mb-3">Stats</p>
            <div class="grid grid-cols-2 gap-2 text-center">
                <div class="bg-slate-900 rounded-xl p-2"><p class="text-white font-bold text-lg">{{ $user->total_matches }}</p><p class="text-slate-500 text-xs">Matches</p></div>
                <div class="bg-slate-900 rounded-xl p-2"><p class="text-white font-bold text-lg">{{ $user->total_kills }}</p><p class="text-slate-500 text-xs">Kills</p></div>
                <div class="bg-slate-900 rounded-xl p-2"><p class="text-white font-bold text-lg">{{ $user->total_wins }}</p><p class="text-slate-500 text-xs">Wins</p></div>
                <div class="bg-slate-900 rounded-xl p-2"><p class="text-slate-300 text-xs font-mono">{{ $user->referral_code }}</p><p class="text-slate-500 text-xs">Ref Code</p></div>
            </div>
        </div>

        {{-- Actions --}}
        <div class="card p-5 rounded-xl space-y-2">
            <a href="{{ route('admin.users.edit', $user) }}" class="flex items-center gap-2 w-full btn-primary py-2.5 justify-center text-sm">Edit User</a>
            @if(!$user->is_banned)
            <button onclick="document.getElementById('banModal').classList.remove('hidden')" class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-2.5 rounded-xl text-sm transition">Ban User</button>
            @else
            <form method="POST" action="{{ route('admin.users.unban', $user) }}">@csrf<button type="submit" class="w-full bg-green-600 text-white font-bold py-2.5 rounded-xl text-sm">Unban User</button></form>
            @endif
        </div>
    </div>

    {{-- Right Column --}}
    <div class="lg:col-span-2 space-y-5">

        {{-- Recent Transactions --}}
        <div class="card rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-700">
                <h3 class="text-white font-bold">Recent Transactions</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-slate-800/50"><tr>
                        <th class="text-left px-4 py-2.5 text-slate-400 font-medium text-xs">Type</th>
                        <th class="text-left px-4 py-2.5 text-slate-400 font-medium text-xs">Amount</th>
                        <th class="text-left px-4 py-2.5 text-slate-400 font-medium text-xs">TRX ID</th>
                        <th class="text-left px-4 py-2.5 text-slate-400 font-medium text-xs">Status</th>
                        <th class="text-left px-4 py-2.5 text-slate-400 font-medium text-xs">Date</th>
                    </tr></thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse($user->transactions as $txn)
                        <tr class="hover:bg-white/[0.02]">
                            <td class="px-4 py-2.5 capitalize text-slate-300 text-xs">{{ str_replace('_',' ',$txn->type) }}</td>
                            <td class="px-4 py-2.5 font-bold text-xs {{ in_array($txn->type, ['deposit','prize','refund','referral_bonus']) ? 'text-green-400' : 'text-red-400' }}">৳{{ number_format($txn->amount,2) }}</td>
                            <td class="px-4 py-2.5 font-mono text-xs text-slate-500">{{ $txn->trx_id ?? '-' }}</td>
                            <td class="px-4 py-2.5"><span class="badge text-xs {{ $txn->status === 'completed' ? 'badge-success' : ($txn->status === 'rejected' ? 'badge-danger' : 'badge-warning') }}">{{ ucfirst($txn->status) }}</span></td>
                            <td class="px-4 py-2.5 text-slate-500 text-xs">{{ $txn->created_at->format('d M Y') }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="px-4 py-6 text-center text-slate-500 text-xs">No transactions.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Match History --}}
        <div class="card rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-700">
                <h3 class="text-white font-bold">Match History</h3>
            </div>
            <div class="divide-y divide-slate-800">
                @forelse($user->registrations->take(10) as $reg)
                <div class="px-5 py-3 flex items-center justify-between text-sm hover:bg-white/[0.02]">
                    <div>
                        <p class="text-white font-medium">{{ $reg->tournament->title ?? 'Deleted' }}</p>
                        <p class="text-slate-500 text-xs">{{ $reg->player_name }} · {{ $reg->created_at->format('d M Y') }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-slate-300 text-xs">{{ $reg->kills }} kills · pos #{{ $reg->position ?? '-' }}</p>
                        @if($reg->prize_won > 0)<p class="text-yellow-400 font-bold text-xs">৳{{ number_format($reg->prize_won) }}</p>@endif
                    </div>
                </div>
                @empty
                <div class="px-5 py-6 text-center text-slate-500 text-sm">No matches played.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- Ban Modal --}}
<div id="banModal" class="hidden fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4">
    <div class="bg-slate-800 border border-slate-700 rounded-2xl p-6 w-full max-w-md">
        <h3 class="text-white font-bold text-lg mb-4">Ban {{ $user->name }}</h3>
        <form method="POST" action="{{ route('admin.users.ban', $user) }}">
            @csrf
            <textarea name="ban_reason" rows="3" required placeholder="Reason for ban..."
                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-red-500 resize-none mb-4"></textarea>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-red-600 hover:bg-red-500 text-white font-bold py-2.5 rounded-xl">Ban</button>
                <button type="button" onclick="document.getElementById('banModal').classList.add('hidden')" class="flex-1 bg-slate-700 text-white font-bold py-2.5 rounded-xl">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection