@extends('layouts.app')
@section('title','Admin Dashboard')
@section('content')
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="p-4 bg-white rounded shadow">
    <div class="text-sm text-gray-500">Total Users</div>
    <div class="text-2xl font-bold">{{ $totals['users'] }}</div>
  </div>
  <div class="p-4 bg-white rounded shadow">
    <div class="text-sm text-gray-500">Stage Pool</div>
    <div class="text-2xl font-bold">N${{ number_format($totals['stage_pool'],2) }}</div>
  </div>
  <div class="p-4 bg-white rounded shadow">
    <div class="text-sm text-gray-500">Pending Withdrawals</div>
    <div class="text-2xl font-bold">N${{ number_format($totals['pending_withdrawals'],2) }}</div>
  </div>
</div>

<div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
  <div class="p-4 bg-white rounded shadow">
    <canvas id="usersChart" height="120"></canvas>
  </div>
  <div class="p-4 bg-white rounded shadow">
    <h3 class="font-semibold mb-3">Recent Commissions</h3>
    <ul class="space-y-2">
      @foreach($recent as $c)
        <li class="flex justify-between"><span class="text-sm">{{ $c->type }} @if($c->user_id) (UID:{{ $c->user_id }}) @endif</span><span class="font-medium">N${{ number_format($c->amount,2) }}</span></li>
      @endforeach
    </ul>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
fetch('{{ route("admin.stats") }}')
  .then(r=>r.json())
  .then(data=>{
    const labels = data.users_by_day.map(d=>d.day);
    const counts = data.users_by_day.map(d=>d.count);
    const ctx = document.getElementById('usersChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: { labels, datasets:[{ label:'New Users', data:counts, fill:false, borderWidth:2 }]},
      options: { responsive:true }
    });
  });
</script>
@endsection