@extends('dashboard.layout')

@section('content')
    <section class="grid gap-6 xl:grid-cols-[1.6fr,1fr]">
        <div class="overflow-hidden rounded-[32px] bg-[linear-gradient(135deg,#111827_0%,#1f2937_45%,#374151_100%)] p-6 text-white shadow-theme-lg sm:p-8">
            <p class="text-sm uppercase tracking-[0.3em] text-white/65">Platform Oversight</p>
            <h2 class="mt-3 max-w-2xl text-3xl font-semibold leading-tight sm:text-4xl">Watch growth, user activity, and platform health from a single control surface.</h2>
            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('admin.users.index') }}" class="inline-flex items-center justify-center rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 shadow-theme-xs transition hover:bg-slate-100">Manage Users</a>
                <a href="{{ route('admin.courses.index') }}" class="inline-flex items-center justify-center rounded-2xl border border-white/20 bg-white/10 px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/15">Review Courses</a>
            </div>
        </div>

        <div class="cepi-panel p-6">
            <p class="text-sm font-medium text-slate-500">Admin snapshot</p>
            <dl class="mt-5 space-y-4">
                <div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3"><dt class="text-sm text-slate-500">Admin</dt><dd class="text-sm font-semibold text-slate-900">{{ auth()->user()->name }}</dd></div>
                <div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3"><dt class="text-sm text-slate-500">Email</dt><dd class="text-sm font-semibold text-slate-900">{{ auth()->user()->email }}</dd></div>
                <div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3"><dt class="text-sm text-slate-500">Role</dt><dd class="text-sm font-semibold text-slate-900">Administrator</dd></div>
            </dl>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[1fr,1fr]">
        <div class="cepi-panel p-6 sm:p-8">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-brand-600">Recent Users</p>
                    <h2 class="text-2xl font-semibold text-slate-900">Latest account activity</h2>
                </div>
                <a href="{{ route('admin.users.index') }}" class="text-sm font-semibold text-brand-600 hover:text-brand-700">Open users</a>
            </div>

            <div class="mt-6 space-y-4">
                @foreach ($recentUsers as $recentUser)
                    <div class="rounded-3xl border border-slate-200 bg-slate-50 p-4">
                        <div class="flex items-center justify-between gap-4">
                            <div>
                                <p class="text-sm font-semibold text-slate-900">{{ $recentUser->name }}</p>
                                <p class="mt-1 text-sm text-slate-500">{{ $recentUser->email }}</p>
                            </div>
                            <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold uppercase text-brand-700">
                                {{ ucfirst($recentUser->user_type ?: 'student') }}
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="cepi-panel p-6 sm:p-8">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-brand-600">Recent Payments</p>
                    <h2 class="text-2xl font-semibold text-slate-900">Latest revenue events</h2>
                </div>
                <a href="{{ route('admin.payments.index') }}" class="text-sm font-semibold text-brand-600 hover:text-brand-700">Open ledger</a>
            </div>

            @if ($recentPayments->isNotEmpty())
                <div class="mt-6 space-y-4">
                    @foreach ($recentPayments as $payment)
                        <div class="rounded-3xl border border-slate-200 bg-slate-50 p-4">
                            <div class="flex items-center justify-between gap-4">
                                <div>
                                    <p class="text-sm font-semibold text-slate-900">{{ $payment->user?->name ?: 'Unknown user' }}</p>
                                    <p class="mt-1 text-sm text-slate-500">{{ $payment->course?->title ?: 'Course unavailable' }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-semibold text-slate-900">{{ $payment->currency }} {{ number_format((float) $payment->amount, 2) }}</p>
                                    <p class="mt-1 text-xs uppercase tracking-[0.2em] text-slate-400">{{ $payment->status }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="mt-6 rounded-3xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center text-sm text-slate-500">
                    No payments recorded yet.
                </div>
            @endif
        </div>
    </section>
@endsection