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

@section('content')

{{-- Stat Cards --}}
<div class="stats-grid">
    <div class="stat-card blue">
        <div class="stat-icon"><i class="fa fa-users"></i></div>
        <div class="stat-value">{{ number_format($stats['total_users']) }}</div>
        <div class="stat-label">Total Users</div>
        <div class="stat-change up"><i class="fa fa-arrow-up"></i> {{ $stats['new_users_today'] }} today</div>
    </div>
    <div class="stat-card green">
        <div class="stat-icon"><i class="fa fa-coins"></i></div>
        <div class="stat-value">{{ number_format($stats['total_points_issued']) }}</div>
        <div class="stat-label">Points Issued</div>
        <div class="stat-change up"><i class="fa fa-arrow-up"></i> {{ $stats['today_transactions'] }} txns today</div>
    </div>
    <div class="stat-card orange">
        <div class="stat-icon"><i class="fa fa-money-bill-transfer"></i></div>
        <div class="stat-value">GH₵{{ number_format($stats['pending_amount'],2) }}</div>
        <div class="stat-label">Pending Withdrawals</div>
        <div class="stat-change {{ $stats['pending_withdrawals']>0?'down':'up' }}">
            <i class="fa fa-clock"></i> {{ $stats['pending_withdrawals'] }} requests
        </div>
    </div>
    <div class="stat-card red">
        <div class="stat-icon"><i class="fa fa-shield-halved"></i></div>
        <div class="stat-value">{{ $stats['fraud_alerts'] }}</div>
        <div class="stat-label">Fraud Alerts Today</div>
        <div class="stat-change {{ $stats['banned_users']>0?'down':'up' }}">
            <i class="fa fa-ban"></i> {{ $stats['banned_users'] }} banned
        </div>
    </div>
</div>

{{-- Second Row Stats --}}
<div class="grid-3 mb-20">
    <div class="card card-body" style="padding:16px;display:flex;align-items:center;gap:14px;">
        <div style="width:44px;height:44px;border-radius:10px;background:#EDE9FE;color:#7C3AED;display:flex;align-items:center;justify-content:center;font-size:20px;"><i class="fa fa-user-check"></i></div>
        <div><div style="font-size:22px;font-weight:800;">{{ number_format($stats['active_users']) }}</div><div style="font-size:12px;color:var(--text-muted);">Active Users</div></div>
    </div>
    <div class="card card-body" style="padding:16px;display:flex;align-items:center;gap:14px;">
        <div style="width:44px;height:44px;border-radius:10px;background:#DCFCE7;color:#16A34A;display:flex;align-items:center;justify-content:center;font-size:20px;"><i class="fa fa-wallet"></i></div>
        <div><div style="font-size:22px;font-weight:800;">GH₵{{ number_format($stats['total_withdrawn'],2) }}</div><div style="font-size:12px;color:var(--text-muted);">Total Paid Out</div></div>
    </div>
    <div class="card card-body" style="padding:16px;display:flex;align-items:center;gap:14px;">
        <div style="width:44px;height:44px;border-radius:10px;background:#FEF3C7;color:#D97706;display:flex;align-items:center;justify-content:center;font-size:20px;"><i class="fa fa-hourglass-half"></i></div>
        <div><div style="font-size:22px;font-weight:800;">{{ number_format($stats['pending_tasks']) }}</div><div style="font-size:12px;color:var(--text-muted);">Pending Task Proofs</div></div>
    </div>
</div>

{{-- Charts + Leaderboard --}}
<div class="grid-side mb-20">
    {{-- Charts --}}
    <div style="display:flex;flex-direction:column;gap:20px;">
        <div class="card">
            <div class="card-header"><h3>User Registrations (30 Days)</h3></div>
            <div class="card-body"><canvas id="userChart" height="100"></canvas></div>
        </div>
        <div class="card">
            <div class="card-header"><h3>Points Earned (30 Days)</h3></div>
            <div class="card-body"><canvas id="pointsChart" height="100"></canvas></div>
        </div>
    </div>

    {{-- Right Panel --}}
    <div style="display:flex;flex-direction:column;gap:20px;">
        {{-- Level Distribution --}}
        <div class="card">
            <div class="card-header"><h3>User Levels</h3></div>
            <div class="card-body" style="padding:16px;">
                <canvas id="levelChart" height="160"></canvas>
            </div>
        </div>

        {{-- Quick Actions --}}
        <div class="card">
            <div class="card-header"><h3>Quick Actions</h3></div>
            <div class="card-body" style="padding:12px;display:flex;flex-direction:column;gap:8px;">
                <a href="{{ route('admin.withdrawals').'?status=pending' }}" class="btn btn-warning w-100"><i class="fa fa-money-bill-transfer"></i> Review Withdrawals ({{ $stats['pending_withdrawals'] }})</a>
                <a href="{{ route('admin.task.proofs') }}" class="btn btn-primary w-100"><i class="fa fa-file-image"></i> Review Task Proofs ({{ $stats['pending_tasks'] }})</a>
                <a href="{{ route('admin.users').'?status=banned' }}" class="btn btn-outline w-100"><i class="fa fa-ban"></i> Banned Users ({{ $stats['banned_users'] }})</a>
                <a href="{{ route('admin.fraud') }}" class="btn btn-outline w-100"><i class="fa fa-shield-halved"></i> Fraud Logs</a>
            </div>
        </div>
    </div>
</div>

{{-- Pending Withdrawals --}}
@if($recentWithdrawals->isNotEmpty())
<div class="card mb-20">
    <div class="card-header">
        <h3>Pending Withdrawals</h3>
        <a href="{{ route('admin.withdrawals') }}" class="btn btn-sm btn-outline">View All</a>
    </div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>User</th><th>Amount</th><th>Method</th><th>Account</th><th>Date</th><th>Actions</th></tr></thead>
            <tbody>
            @foreach($recentWithdrawals as $w)
            <tr>
                <td><div style="display:flex;align-items:center;gap:8px;"><img src="{{ $w->user->avatar_url }}" class="td-avatar"><div><div style="font-weight:600;font-size:13px;">{{ $w->user->name }}</div><div style="font-size:11px;color:var(--text-muted);">{{ $w->user->email }}</div></div></div></td>
                <td><strong>GH₵{{ number_format($w->net_amount,2) }}</strong><br><span style="font-size:11px;color:var(--text-muted);">{{ number_format($w->points_deducted) }} pts</span></td>
                <td><span class="badge badge-primary">{{ strtoupper($w->method) }}</span></td>
                <td>{{ $w->account_name }}<br><span style="font-size:12px;color:var(--text-muted);">{{ $w->account_number }}</span></td>
                <td style="font-size:12px;color:var(--text-muted);">{{ $w->created_at->diffForHumans() }}</td>
                <td>
                    <div style="display:flex;gap:6px;">
                        <form method="POST" action="{{ route('admin.withdrawals.approve',$w) }}" style="display:inline;">@csrf <button class="btn btn-success btn-xs">✓ Approve</button></form>
                        <form method="POST" action="{{ route('admin.withdrawals.reject',$w) }}" style="display:inline;">@csrf <button class="btn btn-danger btn-xs" onclick="return confirm('Reject and refund?')">✗ Reject</button></form>
                    </div>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- Recent Users + Fraud --}}
<div class="grid-2">
    <div class="card">
        <div class="card-header"><h3>New Users</h3><a href="{{ route('admin.users') }}" class="btn btn-sm btn-outline">View All</a></div>
        <div class="table-wrap">
            <table>
                <thead><tr><th>User</th><th>Points</th><th>Level</th><th>Joined</th></tr></thead>
                <tbody>
                @foreach($recentUsers as $u)
                <tr>
                    <td><div style="display:flex;align-items:center;gap:8px;"><img src="{{ $u->avatar_url }}" class="td-avatar"><div><div style="font-weight:600;font-size:13px;">{{ $u->name }}</div><div style="font-size:11px;color:var(--text-muted);">{{ $u->email }}</div></div></div></td>
                    <td>{{ number_format($u->points) }}</td>
                    <td><span class="badge badge-primary">{{ $u->level }}</span></td>
                    <td style="font-size:12px;color:var(--text-muted);">{{ $u->created_at->diffForHumans() }}</td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><h3>Recent Fraud Alerts</h3><a href="{{ route('admin.fraud') }}" class="btn btn-sm btn-outline">View All</a></div>
        @if($recentFraud->isEmpty())
            <div class="card-body text-muted" style="text-align:center;padding:40px;"><i class="fa fa-shield-check" style="font-size:32px;color:var(--success);"></i><br>No fraud detected recently.</div>
        @else
        <div class="table-wrap">
            <table>
                <thead><tr><th>Type</th><th>User</th><th>Action</th><th>Time</th></tr></thead>
                <tbody>
                @foreach($recentFraud as $f)
                <tr>
                    <td><span class="badge badge-danger">{{ str_replace('_',' ',strtoupper($f->type)) }}</span></td>
                    <td style="font-size:13px;">{{ $f->user?->name ?? 'Unknown' }}<br><span style="font-size:11px;color:var(--text-muted);">{{ $f->ip_address }}</span></td>
                    <td><span class="badge badge-warning">{{ $f->action_taken }}</span></td>
                    <td style="font-size:12px;color:var(--text-muted);">{{ $f->created_at->diffForHumans() }}</td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script>
// Build labels for last 30 days
const labels = [];
for(let i=29;i>=0;i--){
    const d = new Date(); d.setDate(d.getDate()-i);
    labels.push(d.toLocaleDateString('en-GB',{day:'numeric',month:'short'}));
}

const userRaw    = @json($userChart);
const pointsRaw  = @json($pointsChart);

function buildData(raw) {
    return labels.map((_,i) => {
        const d = new Date(); d.setDate(d.getDate()-(29-i));
        const key = d.toISOString().split('T')[0];
        return raw[key] || 0;
    });
}

const chartOpts = {
    responsive:true, maintainAspectRatio:true,
    plugins:{legend:{display:false}},
    scales:{x:{grid:{display:false},ticks:{maxTicksLimit:7,font:{size:11}}},y:{grid:{color:'#F1F5F9'},ticks:{font:{size:11}}}},
};

new Chart(document.getElementById('userChart').getContext('2d'),{
    type:'line', data:{labels, datasets:[{data:buildData(userRaw), fill:true,
        backgroundColor:'rgba(26,115,232,.08)', borderColor:'#1A73E8', borderWidth:2, pointRadius:3, tension:.4}]},
    options:chartOpts
});

new Chart(document.getElementById('pointsChart').getContext('2d'),{
    type:'bar', data:{labels, datasets:[{data:buildData(pointsRaw),
        backgroundColor:'rgba(34,197,94,.15)', borderColor:'#22C55E', borderWidth:2, borderRadius:4}]},
    options:chartOpts
});

// Level Pie
const lvlData = @json($levelDist);
new Chart(document.getElementById('levelChart').getContext('2d'),{
    type:'doughnut',
    data:{
        labels:Object.keys(lvlData),
        datasets:[{data:Object.values(lvlData),
            backgroundColor:['#CD7F32','#94A3B8','#F59E0B','#8B5CF6','#1A73E8'],
            borderWidth:0}]
    },
    options:{responsive:true,plugins:{legend:{position:'bottom',labels:{font:{size:11}}}}}
});
</script>
@endpush