@push('title') Dashboard @endpush

<x-app-layout>

{{-- ══════════════ PAGE HEADER ══════════════ --}}
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="fw-bold mb-0">Admin Dashboard</h4>
        <p class="text-muted mb-0" style="font-size:13px;">{{ now()->format('l, d F Y') }} · Overview</p>
    </div>
    <span class="badge bg-label-primary px-3 py-2" style="font-size:12px;">
        <i class="bx bx-pulse me-1"></i> Live Analytics
    </span>
</div>

{{-- ══════════════ FLASH MESSAGES ══════════════ --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- ══════════════ STAT CARDS ROW ══════════════ --}}
<div class="row g-3 mb-4">

    {{-- Total Revenue --}}
    <div class="col-6 col-md-3">
        <div class="card ">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted" style="font-size:11px; text-transform:uppercase; letter-spacing:1.2px;">Total Revenue</span>
                    <span class="badge bg-label-success p-2"><i class="bx bx-dollar-circle fs-5"></i></span>
                </div>
                <h3 class="fw-bold mb-0 text-success">${{ number_format($totalRevenue, 2) }}</h3>
                <p class="text-muted mb-0 mt-1" style="font-size:12px;">
                    <span class="text-success fw-semibold">${{ number_format($revenueMonth, 2) }}</span> this month
                </p>
            </div>
        </div>
    </div>

    {{-- Total Users --}}
    <div class="col-6 col-md-3">
        <div class="card ">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted" style="font-size:11px; text-transform:uppercase; letter-spacing:1.2px;">Total Users</span>
                    <span class="badge bg-label-primary p-2"><i class="bx bx-group fs-5"></i></span>
                </div>
                <h3 class="fw-bold mb-0">{{ number_format($totalUsers) }}</h3>
                <p class="text-muted mb-0 mt-1" style="font-size:12px;">
                    <span class="text-primary fw-semibold">+{{ $newUsersMonth }}</span> joined this month
                </p>
            </div>
        </div>
    </div>

    {{-- Active Subscriptions --}}
    <div class="col-6 col-md-3">
        <div class="card ">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted" style="font-size:11px; text-transform:uppercase; letter-spacing:1.2px;">Subscriptions</span>
                    <span class="badge bg-label-info p-2"><i class="bx bx-credit-card fs-5"></i></span>
                </div>
                <h3 class="fw-bold mb-0">{{ $totalSubs }}</h3>
                <p class="text-muted mb-0 mt-1" style="font-size:12px;">
                    <span class="text-success fw-semibold">{{ $activeSubs }} active</span>
                    · {{ $expiredSubs }} expired
                </p>
            </div>
        </div>
    </div>

    {{-- API Keys --}}
    <div class="col-6 col-md-3">
        <div class="card ">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="text-muted" style="font-size:11px; text-transform:uppercase; letter-spacing:1.2px;">API Keys</span>
                    <span class="badge bg-label-warning p-2"><i class="bx bx-key fs-5"></i></span>
                </div>
                <h3 class="fw-bold mb-0">{{ $totalKeys }}</h3>
                <p class="text-muted mb-0 mt-1" style="font-size:12px;">
                    <span class="text-success fw-semibold">{{ $activeKeys }} active</span>
                    · {{ $disabledKeys }} disabled
                </p>
            </div>
        </div>
    </div>
</div>

{{-- ══════════════ ALERT: EXPIRING SOON ══════════════ --}}
@if($expiringSoon > 0)
<div class="card mb-4 border-0" style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-left: 4px solid #f59e0b !important; border-left-style: solid !important;">
    <div class="card-body py-3 px-4 d-flex align-items-center gap-3">
        <div class="flex-shrink-0 d-flex align-items-center justify-content-center rounded-circle" style="width:42px; height:42px; background:rgba(245,158,11,0.15);">
            <i class="bx bx-time-five" style="font-size:20px; color:#d97706;"></i>
        </div>
        <div class="flex-grow-1">
            <p class="fw-bold mb-0" style="font-size:14px; color:#92400e;">
                <span class="badge bg-warning text-dark me-1">{{ $expiringSoon }}</span>
                subscription{{ $expiringSoon > 1 ? 's are' : ' is' }} expiring within 7 days
            </p>
            <p class="mb-0 text-muted" style="font-size:12px;">Notify affected users to renew before they lose access.</p>
        </div>
        <a href="{{ route('admin.subscriptions.index') }}" class="btn btn-sm fw-semibold flex-shrink-0" style="background:#f59e0b; color:#fff; font-size:12px; padding: 6px 16px;">
            Review Now
        </a>
    </div>
</div>
@endif

{{-- ══════════════ CHARTS ROW ══════════════ --}}
<div class="row g-4 mb-4">

    {{-- Revenue Chart --}}
    <div class="col-md-8">
        <div class="card">
            <div class="card-header border-bottom d-flex align-items-center justify-content-between">
                <h6 class="fw-bold mb-0">Revenue Overview</h6>
                <span class="badge bg-label-success" style="font-size:11px;">Last 6 Months</span>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" height="150"></canvas>
            </div>
        </div>
    </div>

    {{-- Plan Breakdown --}}
    <div class="col-md-4">
        <div class="card">
            <div class="card-header border-bottom">
                <h6 class="fw-bold mb-0">Plan Breakdown</h6>
            </div>
            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                <canvas id="planChart" height="160"></canvas>
                <div class="mt-3 w-100">
                    @foreach($planBreakdown as $plan => $count)
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-capitalize" style="font-size:13px;">{{ $plan ?: 'Unknown' }}</span>
                            <div class="d-flex align-items-center gap-2">
                                <span class="fw-bold" style="font-size:13px;">{{ $count }}</span>
                                <span class="text-muted" style="font-size:11px;">({{ $totalSubs > 0 ? round(($count / $totalSubs) * 100) : 0 }}%)</span>
                            </div>
                        </div>
                    @endforeach
                    @if($planBreakdown->isEmpty())
                        <p class="text-muted text-center small mb-0">No subscriptions yet</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ══════════════ USER GROWTH + QUICK STATS ══════════════ --}}
<div class="row g-4 mb-4">

    {{-- User Growth Chart --}}
    <div class="col-md-7">
        <div class="card ">
            <div class="card-header border-bottom d-flex align-items-center justify-content-between">
                <h6 class="fw-bold mb-0">User Growth</h6>
                <span class="badge bg-label-primary" style="font-size:11px;">Last 6 Months</span>
            </div>
            <div class="card-body">
                <canvas id="userChart" height="120"></canvas>
            </div>
        </div>
    </div>

    {{-- Quick Stats Panel --}}
    <div class="col-md-5">
        <div class="card ">
            <div class="card-header border-bottom">
                <h6 class="fw-bold mb-0">Quick Stats</h6>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bx bx-check-circle text-success fs-5"></i>
                            <span style="font-size:13px;">Verified Users</span>
                        </div>
                        <span class="fw-bold">{{ $verifiedUsers }} <span class="text-muted fw-normal" style="font-size:11px;">/ {{ $totalUsers }}</span></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bx bx-trash text-danger fs-5"></i>
                            <span style="font-size:13px;">Deleted Accounts</span>
                        </div>
                        <span class="fw-bold text-danger">{{ $deletedUsers }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bx bx-trending-up text-primary fs-5"></i>
                            <span style="font-size:13px;">New Users (Month)</span>
                        </div>
                        <span class="fw-bold text-primary">{{ $newUsersMonth }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bx bx-time-five text-warning fs-5"></i>
                            <span style="font-size:13px;">Expiring Soon</span>
                        </div>
                        <span class="fw-bold text-warning">{{ $expiringSoon }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bx bx-money text-success fs-5"></i>
                            <span style="font-size:13px;">Revenue This Month</span>
                        </div>
                        <span class="fw-bold text-success">${{ number_format($revenueMonth, 2) }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bx bx-key text-info fs-5"></i>
                            <span style="font-size:13px;">Active API Keys</span>
                        </div>
                        <span class="fw-bold text-info">{{ $activeKeys }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

{{-- ══════════════ RECENT SUBS + ACTIVITY ══════════════ --}}
<div class="row g-4">

    {{-- Recent Subscriptions --}}
    <div class="col-md-6">
        <div class="card ">
            <div class="card-header border-bottom d-flex align-items-center justify-content-between">
                <h6 class="fw-bold mb-0">Recent Subscriptions</h6>
                <a href="{{ route('admin.subscriptions.index') }}" class="btn btn-label-primary btn-sm" style="font-size:11px;">View All</a>
            </div>
            <div class="card-body p-0">
                @if($recentSubs->isEmpty())
                    <div class="text-center py-5">
                        <div style="font-size:2.5rem;">🛒</div>
                        <p class="text-muted small mt-2 mb-0">No subscriptions yet</p>
                    </div>
                @else
                    <ul class="list-group list-group-flush">
                        @foreach($recentSubs as $sub)
                        <li class="list-group-item px-4 py-3">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    {{-- Avatar --}}
                                    @if($sub->user && $sub->user->profile_picture && !str_starts_with($sub->user->profile_picture, 'avt') && file_exists(public_path('assets/img/avatars/' . $sub->user->profile_picture)))
                                        <img src="{{ asset('assets/img/avatars/' . $sub->user->profile_picture) }}" class="rounded-circle" width="32" height="32" style="object-fit:cover;">
                                    @else
                                        <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:32px;height:32px;font-size:13px;background:linear-gradient(135deg,#18181b,#52525b);">
                                            {{ strtoupper(substr($sub->user ? $sub->user->name : 'U', 0, 1)) }}
                                        </div>
                                    @endif
                                    <div>
                                        <p class="fw-semibold mb-0" style="font-size:13px;">{{ $sub->user ? $sub->user->name : 'N/A' }}</p>
                                        <p class="text-muted mb-0" style="font-size:11px; text-transform:capitalize;">{{ $sub->plan_type }} · {{ $sub->created_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <p class="fw-bold text-success mb-0" style="font-size:13px;">${{ number_format($sub->amount, 2) }}</p>
                                    <span class="badge {{ $sub->status === 'active' ? 'bg-label-success' : ($sub->status === 'expired' ? 'bg-label-danger' : 'bg-label-secondary') }}" style="font-size:10px;">
                                        {{ ucfirst($sub->status) }}
                                    </span>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>

    {{-- Recent Activity --}}
    <div class="col-md-6">
        <div class="card ">
            <div class="card-header border-bottom d-flex align-items-center justify-content-between">
                <h6 class="fw-bold mb-0">Recent Activity</h6>
                @can('activity_management')
                    <a href="/activity-log" class="btn btn-label-secondary btn-sm" style="font-size:11px;">View All</a>
                @endcan
            </div>
            <div class="card-body p-0">
                @if($recentActivity->isEmpty())
                    <div class="text-center py-5">
                        <div style="font-size:2.5rem;">📋</div>
                        <p class="text-muted small mt-2 mb-0">No activity yet</p>
                    </div>
                @else
                    <ul class="list-group list-group-flush">
                        @foreach($recentActivity as $log)
                        @php
                            $iconMap = [
                                'created' => ['icon' => 'bx-plus-circle', 'color' => 'text-success'],
                                'updated' => ['icon' => 'bx-edit-alt',   'color' => 'text-primary'],
                                'deleted' => ['icon' => 'bx-trash',      'color' => 'text-danger'],
                                'login'   => ['icon' => 'bx-log-in',     'color' => 'text-info'],
                            ];
                            $logStyle = $iconMap[$log->action] ?? ['icon' => 'bx-circle', 'color' => 'text-muted'];
                        @endphp
                        <li class="list-group-item px-4 py-3">
                            <div class="d-flex align-items-start gap-3">
                                <i class="bx {{ $logStyle['icon'] }} {{ $logStyle['color'] }} fs-5 mt-1 flex-shrink-0"></i>
                                <div class="flex-grow-1 min-width-0">
                                    <p class="fw-semibold mb-0" style="font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $log->description }}</p>
                                    <p class="text-muted mb-0" style="font-size:11px;">
                                        {{ $log->user ? $log->user->name : 'System' }} · {{ $log->created_at->diffForHumans() }}
                                    </p>
                                </div>
                                <span class="badge bg-label-secondary" style="font-size:10px; text-transform:capitalize; flex-shrink:0;">{{ $log->action }}</span>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>

</div>

{{-- ══════════════ CHART.JS SCRIPTS ══════════════ --}}
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    const revenueLabels  = {!! json_encode($revenueGrowth->pluck('month')) !!};
    const revenueData    = {!! json_encode($revenueGrowth->pluck('revenue')) !!};
    const userLabels     = {!! json_encode($userGrowth->pluck('month')) !!};
    const userData       = {!! json_encode($userGrowth->pluck('count')) !!};
    const planLabels     = {!! json_encode($planBreakdown->keys()->map(fn($k) => ucfirst($k ?: 'Unknown'))) !!};
    const planData       = {!! json_encode($planBreakdown->values()) !!};

    // ── Revenue Chart ──
    new Chart(document.getElementById('revenueChart'), {
        type: 'bar',
        data: {
            labels: revenueLabels,
            datasets: [{
                label: 'Revenue ($)',
                data: revenueData,
                backgroundColor: 'rgba(99, 102, 241, 0.85)',
                borderColor: 'rgba(99, 102, 241, 1)',
                borderWidth: 0,
                borderRadius: 6,
                borderSkipped: false,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(0,0,0,0.04)' },
                    ticks: { callback: v => '$' + v, font: { size: 11 } }
                },
                x: { grid: { display: false }, ticks: { font: { size: 11 } } }
            }
        }
    });

    // ── User Growth Chart ──
    new Chart(document.getElementById('userChart'), {
        type: 'line',
        data: {
            labels: userLabels,
            datasets: [{
                label: 'New Users',
                data: userData,
                fill: true,
                backgroundColor: 'rgba(59, 130, 246, 0.08)',
                borderColor: 'rgba(59, 130, 246, 0.85)',
                borderWidth: 2,
                tension: 0.4,
                pointBackgroundColor: 'rgba(59, 130, 246, 1)',
                pointRadius: 4,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { stepSize: 1, font: { size: 11 } },
                    grid: { color: 'rgba(0,0,0,0.04)' }
                },
                x: { grid: { display: false }, ticks: { font: { size: 11 } } }
            }
        }
    });

    // ── Plan Doughnut Chart ──
    new Chart(document.getElementById('planChart'), {
        type: 'doughnut',
        data: {
            labels: planLabels,
            datasets: [{
                data: planData,
                backgroundColor: [
                    'rgba(99, 102, 241, 0.85)',
                    'rgba(16, 185, 129, 0.85)',
                    'rgba(245, 158, 11, 0.85)',
                    'rgba(239, 68, 68, 0.85)',
                ],
                borderWidth: 2,
                borderColor: '#fff',
            }]
        },
        options: {
            responsive: true,
            cutout: '70%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: { label: ctx => ` ${ctx.label}: ${ctx.parsed} subs` }
                }
            }
        }
    });
</script>
@endpush

</x-app-layout>