@extends('layouts.admin')

@section('title', 'Executive Overview - ' . $appName . ' Admin')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Executive Overview</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400">Live analytics and business metrics for {{ $appName }} Worldwide.</p>
        </div>
        <div>
            <span class="text-xs font-mono bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-3 py-1.5 rounded-lg inline-block">
                System Live: {{ now()->format('M d, Y') }}
            </span>
        </div>
    </div>

    <!-- Top KPI Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        <!-- Gross Sales -->
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs transition-colors">
            <span class="text-xs font-semibold text-slate-500 dark:text-slate-400">Gross Sales Revenue</span>
            <h3 class="text-2xl font-black text-slate-900 dark:text-white mt-1">₱{{ number_format($grossRevenue, 2) }}</h3>
            <p class="text-[11px] text-emerald-600 dark:text-emerald-400 font-semibold mt-1">Packages + Retail E-com</p>
        </div>

        <!-- Total Payouts -->
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs transition-colors">
            <span class="text-xs font-semibold text-slate-500 dark:text-slate-400">Released Payouts</span>
            <h3 class="text-2xl font-black text-rose-600 dark:text-rose-400 mt-1">₱{{ number_format($totalPayouts, 2) }}</h3>
            <p class="text-[11px] text-slate-400 dark:text-slate-500 mt-1">Encashments paid out</p>
        </div>

        <!-- Net Operating Reserve -->
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs transition-colors">
            <span class="text-xs font-semibold text-slate-500 dark:text-slate-400">Net Company Reserve</span>
            <h3 class="text-2xl font-black text-sky-600 dark:text-sky-400 mt-1">₱{{ number_format($netReserve, 2) }}</h3>
            <p class="text-[11px] text-sky-600 dark:text-sky-400 font-semibold mt-1">Gross minus payouts</p>
        </div>

        <!-- Total Members -->
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs transition-colors">
            <span class="text-xs font-semibold text-slate-500 dark:text-slate-400">Distributors Network</span>
            <h3 class="text-2xl font-black text-slate-900 dark:text-white mt-1">{{ $totalMembers }} Members</h3>
            <p class="text-[11px] text-blue-600 dark:text-blue-400 font-semibold mt-1">+{{ $newMembersToday }} joined today</p>
        </div>
    </div>

    <!-- Secondary Row: Pairs & Pending Approvals -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center justify-between transition-colors">
            <div>
                <span class="text-xs font-semibold text-slate-500 dark:text-slate-400">Total Binary Pairs Matched</span>
                <h3 class="text-2xl font-extrabold text-slate-900 dark:text-white mt-1">{{ $totalPairsMatched }} Pairs</h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-purple-50 dark:bg-purple-950/50 text-purple-600 dark:text-purple-400 flex items-center justify-center">
                <i data-lucide="git-merge" class="w-6 h-6"></i>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center justify-between transition-colors">
            <div>
                <span class="text-xs font-semibold text-slate-500 dark:text-slate-400">Pending Encashments</span>
                <h3 class="text-2xl font-extrabold text-amber-600 dark:text-amber-400 mt-1">₱{{ number_format($pendingWithdrawals, 2) }}</h3>
            </div>
            <a href="{{ route('admin.payouts') }}" class="px-3 py-1.5 bg-amber-50 hover:bg-amber-100 dark:bg-amber-950/40 dark:hover:bg-amber-900/50 text-amber-800 dark:text-amber-300 rounded-lg text-xs font-bold transition">
                Review &rarr;
            </a>
        </div>

        <div class="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-200 dark:border-slate-800 shadow-xs flex items-center justify-between transition-colors">
            <div>
                <span class="text-xs font-semibold text-slate-500 dark:text-slate-400">System Safety Net</span>
                <h3 class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-400 mt-1">100% Healthy</h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
                <i data-lucide="shield-check" class="w-6 h-6"></i>
            </div>
        </div>
    </div>

    <!-- Tables Grid: Active Recruiters, Recent Members & Pending Payouts -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Active Recruiters / Network Growth Leaders -->
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-200 dark:border-slate-800 shadow-xs transition-colors">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center gap-1.5">
                        <i data-lucide="award" class="w-4 h-4 text-amber-500"></i>
                        <span>Recruitment Leaders</span>
                    </h3>
                    <p class="text-[11px] text-slate-400">Distributors actively building downlines</p>
                </div>
                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-50 dark:bg-amber-950/50 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
                    Active
                </span>
            </div>

            <div class="divide-y divide-slate-100 dark:divide-slate-800">
                @forelse($activeRecruiters as $leader)
                    <div class="py-3 flex items-center justify-between gap-3">
                        <div class="min-w-0">
                            <p class="text-xs font-bold text-slate-800 dark:text-slate-200 truncate">{{ $leader->full_name }}</p>
                            <p class="text-[11px] text-slate-400 font-mono">{{ $leader->account_id }} &bull; {{ $leader->rank }}</p>
                            <span class="text-[10px] font-bold text-emerald-600 dark:text-emerald-400">
                                👥 {{ $leader->referrals_count }} Direct {{ Str::plural('Downline', $leader->referrals_count) }}
                            </span>
                        </div>
                        <a href="{{ route('admin.genealogy', ['account_id' => $leader->account_id]) }}"
                           class="px-2.5 py-1.5 rounded-xl bg-sky-50 hover:bg-sky-100 dark:bg-sky-950/60 dark:hover:bg-sky-900 text-sky-700 dark:text-sky-300 text-[11px] font-bold transition flex items-center gap-1 whitespace-nowrap border border-sky-200/60 dark:border-sky-800"
                           title="View downline tree for {{ $leader->first_name }}">
                            <i data-lucide="network" class="w-3.5 h-3.5"></i>
                            <span>Tree</span>
                        </a>
                    </div>
                @empty
                    <p class="text-xs text-slate-400 py-6 text-center">No active recruiter records yet.</p>
                @endforelse
            </div>
        </div>

        <!-- Recent Member Registrations with Recruiter Details -->
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-200 dark:border-slate-800 shadow-xs transition-colors">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-sm font-bold text-slate-900 dark:text-white">Recent Registrations</h3>
                    <p class="text-[11px] text-slate-400">Latest new recruits in network</p>
                </div>
                <a href="{{ route('admin.members') }}" class="text-xs font-semibold text-sky-600 dark:text-sky-400 hover:underline">View All</a>
            </div>

            <div class="divide-y divide-slate-100 dark:divide-slate-800">
                @foreach($recentMembers as $m)
                    <div class="py-3 flex items-center justify-between gap-2">
                        <div class="min-w-0">
                            <p class="text-xs font-bold text-slate-800 dark:text-slate-200 truncate">{{ $m->full_name }}</p>
                            <p class="text-[10px] text-slate-400 font-mono">{{ $m->account_id }}</p>
                            <p class="text-[10px] text-sky-600 dark:text-sky-400 font-semibold truncate">
                                Recruiter: <strong class="text-slate-700 dark:text-slate-200">{{ $m->sponsor ? $m->sponsor->full_name : 'Direct Company' }}</strong>
                            </p>
                        </div>
                        <div class="flex flex-col items-end gap-1 shrink-0">
                            <span class="px-2 py-0.5 rounded-full text-[9px] font-bold bg-sky-50 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-200/60 dark:border-sky-800">
                                {{ $m->package->name ?? 'Starter' }}
                            </span>
                            <a href="{{ route('admin.genealogy', ['account_id' => $m->account_id]) }}"
                               class="text-[10px] text-sky-600 hover:text-sky-700 dark:text-sky-400 font-bold hover:underline flex items-center gap-0.5">
                                <span>Tree</span> &rarr;
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Pending Withdrawals -->
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-200 dark:border-slate-800 shadow-xs transition-colors">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-sm font-bold text-slate-900 dark:text-white">Pending Encashments</h3>
                    <p class="text-[11px] text-slate-400">Withdrawals waiting for payout</p>
                </div>
                <a href="{{ route('admin.payouts') }}" class="text-xs font-semibold text-sky-600 dark:text-sky-400 hover:underline">Manage</a>
            </div>

            <div class="divide-y divide-slate-100 dark:divide-slate-800">
                @forelse($pendingPayoutsList as $p)
                    <div class="py-3 flex items-center justify-between">
                        <div>
                            <p class="text-xs font-bold text-slate-800 dark:text-slate-200">{{ $p->user->full_name }}</p>
                            <p class="text-[11px] text-slate-400 uppercase font-bold">{{ $p->payout_method }}: {{ $p->account_number }}</p>
                        </div>
                        <span class="text-xs font-extrabold text-rose-600 dark:text-rose-400">₱{{ number_format($p->net_amount, 2) }}</span>
                    </div>
                @empty
                    <p class="text-xs text-slate-400 py-6 text-center">No pending withdrawal requests.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection