@extends('admin.layout')
@section('title', 'Dashboard')

@section('content')

{{-- Stats Grid --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    @php
    $cards = [
        ['label' => 'Total Users',   'value' => number_format($stats['total_users']),                       'color' => 'text-blue-400'],
        ['label' => 'New Today',     'value' => $stats['new_users_today'],                                   'color' => 'text-green-400'],
        ['label' => 'Total Trades',  'value' => number_format($stats['total_trades']),                       'color' => 'text-purple-400'],
        ['label' => 'Trades Today',  'value' => $stats['trades_today'],                                      'color' => 'text-yellow-400'],
        ['label' => 'Open Trades',   'value' => $stats['open_trades'],                                       'color' => 'text-orange-400'],
        ['label' => 'Total Volume',  'value' => '$'.number_format($stats['total_volume'], 2),                'color' => 'text-cyan-400'],
        ['label' => 'Profit Paid',   'value' => '$'.number_format($stats['total_profit_paid'], 2),           'color' => 'text-green-400'],
        ['label' => 'House Profit',  'value' => '$'.number_format($stats['house_profit'], 2),                'color' => $stats['house_profit'] >= 0 ? 'text-green-400' : 'text-red-400'],
    ];
    @endphp

    @foreach($cards as $card)
    <div class="card p-5">
        <div class="text-xs text-gray-500 uppercase tracking-wide mb-2">{{ $card['label'] }}</div>
        <div class="text-2xl font-bold {{ $card['color'] }}">{{ $card['value'] }}</div>
    </div>
    @endforeach
</div>

{{-- Pending Actions --}}
@if($stats['pending_deposits'] > 0 || $stats['pending_withdrawals'] > 0)
<div class="flex gap-4 mb-8">
    @if($stats['pending_deposits'] > 0)
    <a href="/ponir/deposits?status=pending" class="card p-4 flex items-center gap-3 flex-1 hover:bg-yellow-500/5 transition" style="border-color:rgba(251,191,36,.2);">
        <span class="text-xl">⚠️</span>
        <div>
            <div class="font-semibold text-yellow-400 text-sm">{{ $stats['pending_deposits'] }} Pending Deposits</div>
            <div class="text-xs text-gray-500">Require approval</div>
        </div>
    </a>
    @endif
    @if($stats['pending_withdrawals'] > 0)
    <a href="/ponir/withdrawals?status=pending" class="card p-4 flex items-center gap-3 flex-1 hover:bg-red-500/5 transition" style="border-color:rgba(248,113,113,.2);">
        <span class="text-xl">⚠️</span>
        <div>
            <div class="font-semibold text-red-400 text-sm">{{ $stats['pending_withdrawals'] }} Pending Withdrawals</div>
            <div class="text-xs text-gray-500">Require approval</div>
        </div>
    </a>
    @endif
</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    {{-- Win/Loss ratio --}}
    <div class="card p-6">
        <h3 class="font-semibold text-white mb-4 text-sm">Trade Results</h3>
        @php
            $total = $stats['won_trades'] + $stats['lost_trades'];
            $winPct = $total > 0 ? round($stats['won_trades'] / $total * 100) : 0;
            $losePct = 100 - $winPct;
        @endphp
        <div class="space-y-3">
            <div>
                <div class="flex justify-between text-xs mb-1">
                    <span class="text-green-400">Won ({{ number_format($stats['won_trades']) }})</span>
                    <span class="text-green-400">{{ $winPct }}%</span>
                </div>
                <div class="h-2 rounded-full" style="background:rgba(255,255,255,.05);">
                    <div class="h-2 rounded-full bg-green-500" style="width:{{ $winPct }}%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs mb-1">
                    <span class="text-red-400">Lost ({{ number_format($stats['lost_trades']) }})</span>
                    <span class="text-red-400">{{ $losePct }}%</span>
                </div>
                <div class="h-2 rounded-full" style="background:rgba(255,255,255,.05);">
                    <div class="h-2 rounded-full bg-red-500" style="width:{{ $losePct }}%"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent Users --}}
    <div class="card p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-white text-sm">Recent Users</h3>
            <a href="/ponir/users" class="text-xs text-green-400 hover:text-green-300">View all →</a>
        </div>
        <div class="space-y-3">
            @forelse($recent_users as $user)
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold" style="background:rgba(96,165,250,.15);color:#60A5FA;">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                    <div>
                        <div class="text-sm text-white">{{ $user->name }}</div>
                        <div class="text-xs text-gray-500">{{ $user->email }}</div>
                    </div>
                </div>
                <a href="/ponir/users/{{ $user->id }}" class="text-xs text-gray-500 hover:text-white">View →</a>
            </div>
            @empty
            <p class="text-sm text-gray-500">No users yet.</p>
            @endforelse
        </div>
    </div>
</div>

{{-- Recent Trades --}}
<div class="card">
    <div class="flex items-center justify-between p-5 border-b border-white/5">
        <h3 class="font-semibold text-white text-sm">Recent Trades</h3>
        <a href="/ponir/trades" class="text-xs text-green-400 hover:text-green-300">View all →</a>
    </div>
    <div class="overflow-x-auto">
        <table>
            <thead>
                <tr>
                    <th>User</th>
                    <th>Asset</th>
                    <th>Dir</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th>Profit</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recent_trades as $trade)
                <tr>
                    <td>{{ $trade->user->name ?? 'N/A' }}</td>
                    <td class="font-mono">{{ $trade->asset_symbol }}</td>
                    <td>
                        @if($trade->direction === 'up')
                            <span class="badge-green">UP</span>
                        @else
                            <span class="badge-red">DOWN</span>
                        @endif
                    </td>
                    <td class="font-mono">${{ number_format($trade->amount, 2) }}</td>
                    <td>
                        @if($trade->status === 'won') <span class="badge-green">WON</span>
                        @elseif($trade->status === 'lost') <span class="badge-red">LOST</span>
                        @elseif(in_array($trade->status, ['active','pending'])) <span class="badge-yellow">OPEN</span>
                        @else <span class="badge-blue">{{ strtoupper($trade->status) }}</span>
                        @endif
                    </td>
                    <td class="font-mono {{ ($trade->actual_profit ?? 0) >= 0 ? 'text-green-400' : 'text-red-400' }}">
                        {{ ($trade->actual_profit ?? 0) >= 0 ? '+' : '' }}${{ number_format($trade->actual_profit ?? 0, 2) }}
                    </td>
                    <td class="text-gray-500">{{ $trade->created_at->diffForHumans() }}</td>
                </tr>
                @empty
                <tr><td colspan="7" class="text-center text-gray-500 py-8">No trades yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection
