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

@section('content')

    {{-- Page Header --}}
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-white leading-tight">@yield('page-title', 'Dashboard')</h1>
        <p class="text-sm text-muted mt-1">Overview of your platform</p>
    </div>

    {{-- ═══ TOP STAT CARDS ═══ --}}
    <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 gap-5 mb-6">
        
        {{-- Card 1: Total Users --}}
        <div class="bg-surface border border-subtle rounded-xl p-5 relative overflow-hidden group hover:border-purple/50 transition-colors">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-lg bg-purple/10 text-purple flex items-center justify-center text-xl shrink-0">
                    <i class="ph-fill ph-users"></i>
                </div>
                <div>
                    <div class="text-2xs text-muted uppercase tracking-wider font-bold mb-0.5">Total Users</div>
                    <div class="text-2xl font-bold text-white leading-none">{{ number_format($stats['total_users']) }}</div>
                </div>
            </div>
            <div class="flex items-center gap-1.5 mt-3 text-xs">
                @if($trends['users_change'] >= 0)
                    <span class="text-primary font-bold flex items-center"><i class="ph-fill ph-caret-up"></i> {{ $trends['users_change'] }}%</span>
                @else
                    <span class="text-red-500 font-bold flex items-center"><i class="ph-fill ph-caret-down"></i> {{ abs($trends['users_change']) }}%</span>
                @endif
                <span class="text-muted">from last week</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full h-12 opacity-50 group-hover:opacity-100 transition-opacity">
                <canvas id="sparklineUsers"></canvas>
            </div>
        </div>

        {{-- Card 2: Today's Revenue --}}
        <div class="bg-surface border border-subtle rounded-xl p-5 relative overflow-hidden group hover:border-primary/50 transition-colors">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-xl shrink-0">
                    <i class="ph-fill ph-currency-dollar"></i>
                </div>
                <div>
                    <div class="text-2xs text-muted uppercase tracking-wider font-bold mb-0.5">Today's Revenue</div>
                    <div class="text-2xl font-bold text-white leading-none">@money($stats['today_earnings'])</div>
                </div>
            </div>
            <div class="flex items-center gap-1.5 mt-3 text-xs">
                @if($trends['today_vs_yesterday'] >= 0)
                    <span class="text-primary font-bold flex items-center"><i class="ph-fill ph-caret-up"></i> {{ $trends['today_vs_yesterday'] }}%</span>
                @else
                    <span class="text-red-500 font-bold flex items-center"><i class="ph-fill ph-caret-down"></i> {{ abs($trends['today_vs_yesterday']) }}%</span>
                @endif
                <span class="text-muted">from yesterday</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full h-12 opacity-50 group-hover:opacity-100 transition-opacity">
                <canvas id="sparklineTodayRev"></canvas>
            </div>
        </div>

        {{-- Card 3: Total Revenue --}}
        <div class="bg-surface border border-subtle rounded-xl p-5 relative overflow-hidden group hover:border-blue/50 transition-colors">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-lg bg-blue/10 text-blue flex items-center justify-center text-xl shrink-0">
                    <i class="ph-fill ph-money"></i>
                </div>
                <div>
                    <div class="text-2xs text-muted uppercase tracking-wider font-bold mb-0.5">Total Revenue</div>
                    <div class="text-2xl font-bold text-white leading-none">@money($stats['total_earnings'])</div>
                </div>
            </div>
            <div class="flex items-center gap-1.5 mt-3 text-xs">
                @if($trends['revenue_change'] >= 0)
                    <span class="text-primary font-bold flex items-center"><i class="ph-fill ph-caret-up"></i> {{ $trends['revenue_change'] }}%</span>
                @else
                    <span class="text-red-500 font-bold flex items-center"><i class="ph-fill ph-caret-down"></i> {{ abs($trends['revenue_change']) }}%</span>
                @endif
                <span class="text-muted">from last month</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full h-12 opacity-50 group-hover:opacity-100 transition-opacity">
                <canvas id="sparklineTotalRev"></canvas>
            </div>
        </div>

        {{-- Card 4: Pending Cashouts --}}
        <div class="bg-surface border border-subtle rounded-xl p-5 relative overflow-hidden group hover:border-amber/50 transition-colors">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-lg bg-amber/10 text-amber flex items-center justify-center text-xl shrink-0">
                    <i class="ph-fill ph-clock-countdown"></i>
                </div>
                <div>
                    <div class="text-2xs text-muted uppercase tracking-wider font-bold mb-0.5">Pending Cashouts</div>
                    <div class="text-2xl font-bold text-white leading-none">{{ $stats['pending_withdrawals_count'] }}</div>
                </div>
            </div>
            <div class="flex items-center gap-1.5 mt-3 text-xs">
                <span class="text-amber font-bold flex items-center"><i class="ph-fill ph-currency-dollar"></i> @money($stats['pending_withdrawals_amount'])</span>
                <span class="text-muted">pending</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full h-12 opacity-50 group-hover:opacity-100 transition-opacity">
                <canvas id="sparklineCashouts"></canvas>
            </div>
        </div>

        {{-- Card 5: Total Cashed Out --}}
        <div class="bg-surface border border-subtle rounded-xl p-5 relative overflow-hidden group hover:border-teal/50 transition-colors">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-lg bg-teal/10 text-teal flex items-center justify-center text-xl shrink-0">
                    <i class="ph-fill ph-bank"></i>
                </div>
                <div>
                    <div class="text-2xs text-muted uppercase tracking-wider font-bold mb-0.5">Total Cashed Out</div>
                    <div class="text-2xl font-bold text-white leading-none">@money($stats['total_withdrawn'])</div>
                </div>
            </div>
            <div class="flex items-center gap-1.5 mt-3 text-xs">
                <span class="text-teal font-bold flex items-center"><i class="ph-fill ph-wallet"></i> @money($stats['total_paid'])</span>
                <span class="text-muted">paid to users</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full h-12 opacity-50 group-hover:opacity-100 transition-opacity">
                <canvas id="sparklineTotalPaid"></canvas>
            </div>
        </div>

    </div>

    {{-- ═══ MIDDLE ROW (CHARTS & RECENT CASHOUTS) ═══ --}}
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-5 mb-6">
        
        {{-- Revenue Overview Chart --}}
        <div class="lg:col-span-6 xl:col-span-6 bg-surface border border-subtle rounded-xl p-5 flex flex-col relative overflow-hidden">
            <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(0,242,96,0.05)_0%,transparent_50%)] pointer-events-none"></div>
            <div class="flex justify-between items-start mb-4 relative z-10">
                <div>
                    <h3 class="text-white font-bold text-sm mb-1">Revenue Overview</h3>
                    <div class="flex items-center gap-3">
                        @php $totalChartRevenue = collect($revenueChart)->sum('revenue'); @endphp
                        <span id="chartTotal" class="text-2xl font-bold text-white">@money($totalChartRevenue)</span>
                        @if($trends['revenue_change'] >= 0)
                            <span class="text-primary text-xs font-bold flex items-center"><i class="ph-fill ph-caret-up"></i> {{ $trends['revenue_change'] }}% vs previous</span>
                        @else
                            <span class="text-red-500 text-xs font-bold flex items-center"><i class="ph-fill ph-caret-down"></i> {{ abs($trends['revenue_change']) }}% vs previous</span>
                        @endif
                    </div>
                </div>
                <input type="text" id="dateRangeInput" style="position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none;">
                <div id="dateRangeBtn" class="bg-subtle text-muted text-xs px-3 py-1.5 rounded-md flex items-center gap-2 hover:bg-[#2b3341] hover:text-white transition-colors cursor-pointer shrink-0">
                    <i class="ph ph-calendar-blank"></i>
                    <span id="dateRangeText" class="whitespace-nowrap">{{ $startDate->format('M j, Y') }} — {{ $endDate->format('M j, Y') }}</span>
                    <i class="ph ph-caret-down"></i>
                </div>
            </div>
            <div class="flex-1 min-h-[220px] relative z-10">
                <canvas id="revenueLineChart"></canvas>
            </div>
        </div>

        {{-- Revenue by Source (Doughnut) --}}
        <div class="lg:col-span-3 xl:col-span-3 bg-surface border border-subtle rounded-xl p-5 flex flex-col">
            <h3 class="text-white font-bold text-sm mb-6">Revenue by Source</h3>
            <div class="flex-1 flex items-center justify-center relative">
                <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                    <span class="text-muted text-2xs font-bold">Total</span>
                    <span class="text-white font-bold text-sm">@money($stats['total_earnings'])</span>
                </div>
                <div class="h-[140px] w-full">
                    <canvas id="revenueSourceChart"></canvas>
                </div>
            </div>
            @php
                $sourceColors = ['#00f260', '#8b5cf6', '#3b82f6', '#14b8a6', '#f59e0b', '#ef4444', '#ec4899', '#6366f1', '#06b6d4', '#84cc16'];
                $totalRevAll = $providerRev->sum('total_rev') ?: 1;
            @endphp
            <div class="mt-4 space-y-2">
                @foreach($providerRev->take(5) as $idx => $source)
                    @php $srcPct = round(($source->total_rev / $totalRevAll) * 100, 1); @endphp
                    <div class="flex items-center justify-between text-xs">
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 rounded-full" style="background: {{ $sourceColors[$idx] ?? '#8B949E' }}"></div>
                            <span class="text-muted capitalize">{{ $source->network_slug }}</span>
                        </div>
                        <span class="text-white font-bold">{{ $srcPct }}%</span>
                    </div>
                @endforeach
                @if($providerRev->isEmpty())
                    <div class="text-xs text-muted text-center py-2">No revenue data yet</div>
                @endif
            </div>
        </div>

        {{-- Recent Cashouts --}}
        <div class="lg:col-span-3 xl:col-span-3 bg-surface border border-subtle rounded-xl flex flex-col">
            <div class="flex justify-between items-center px-5 py-4 border-b border-subtle">
                <h3 class="text-white font-bold text-sm">Recent Cashouts</h3>
                <a href="{{ route('admin.withdrawals.index') }}" class="text-muted text-xs hover:text-white transition-colors bg-subtle px-2 py-1 rounded">View All</a>
            </div>
            <div class="p-2 flex-1 overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr>
                            <th class="text-3xs text-muted font-bold uppercase tracking-wider text-left px-3 py-2 border-b border-subtle">User</th>
                            <th class="text-3xs text-muted font-bold uppercase tracking-wider text-left px-3 py-2 border-b border-subtle">Method</th>
                            <th class="text-3xs text-muted font-bold uppercase tracking-wider text-left px-3 py-2 border-b border-subtle">Amount</th>
                            <th class="text-3xs text-muted font-bold uppercase tracking-wider text-center px-3 py-2 border-b border-subtle">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentWithdrawals->take(5) as $w)
                        <tr class="hover:bg-white/[0.02] transition-colors">
                            <td class="px-3 py-2.5 text-xs font-medium text-white">{{ $w->user->username ?? 'Unknown' }}</td>
                            <td class="px-3 py-2.5 text-xs text-muted flex items-center gap-1">
                                @if(strtolower($w->method) === 'paypal') <i class="ph-fill ph-paypal-logo text-blue"></i> 
                                @elseif(strtolower($w->method) === 'usdt') <i class="ph-fill ph-coin text-teal"></i>
                                @else <i class="ph-fill ph-wallet"></i> @endif
                                {{ $w->method }}
                            </td>
                            <td class="px-3 py-2.5 text-xs text-white font-bold">@money($w->amount)</td>
                            <td class="px-3 py-2.5 text-center">
                                @if($w->status === 'pending')
                                    <span class="text-3xs font-bold text-amber border border-amber/30 bg-amber/10 px-2 py-0.5 rounded uppercase">Pending</span>
                                @elseif($w->status === 'completed')
                                    <span class="text-3xs font-bold text-primary border border-primary/30 bg-primary/10 px-2 py-0.5 rounded uppercase">Completed</span>
                                @else
                                    <span class="text-3xs font-bold text-red-500 border border-red-500/30 bg-red-500/10 px-2 py-0.5 rounded uppercase">Rejected</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                        @if($recentWithdrawals->isEmpty())
                        <tr><td colspan="4" class="text-center py-6 text-xs text-muted">No recent cashouts.</td></tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    {{-- ═══ BOTTOM ROW (ACTIVITY, OFFERWALLS, GEO) ═══ --}}
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-5 mb-6">
        
        {{-- Recent Activity (REAL DATA) --}}
        <div class="lg:col-span-3 bg-surface border border-subtle rounded-xl flex flex-col">
            <div class="flex justify-between items-center px-5 py-4 border-b border-subtle">
                <h3 class="text-white font-bold text-sm">Recent Activity</h3>
                <a href="{{ route('admin.log.index') }}" class="text-muted text-xs hover:text-white transition-colors bg-subtle px-2 py-1 rounded">View All</a>
            </div>
            <div class="p-5 flex-1 space-y-5">
                @forelse($activityTimeline as $activity)
                    <div class="flex gap-3">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style="background: {{ $activity['color'] }}15; border: 1px solid {{ $activity['color'] }}30; color: {{ $activity['color'] }}">
                            <i class="ph-fill {{ $activity['icon'] }}"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm text-white font-medium truncate">{{ $activity['text'] }}</div>
                            <div class="text-xs text-muted">{{ $activity['time']->diffForHumans() }}</div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-6 text-xs text-muted">No recent activity</div>
                @endforelse
            </div>
        </div>

        {{-- Top Offerwalls --}}
        <div class="lg:col-span-5 bg-surface border border-subtle rounded-xl flex flex-col">
            <div class="flex justify-between items-center px-5 py-4 border-b border-subtle">
                <h3 class="text-white font-bold text-sm">Top Offerwalls</h3>
                <a href="{{ route('admin.offerwalls.index') }}" class="text-muted text-xs hover:text-white transition-colors bg-subtle px-2 py-1 rounded">View All</a>
            </div>
            <div class="p-2 flex-1 overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr>
                            <th class="text-3xs text-muted font-bold uppercase tracking-wider text-left px-4 py-3 border-b border-subtle">Offerwall</th>
                            <th class="text-3xs text-muted font-bold uppercase tracking-wider text-left px-4 py-3 border-b border-subtle">Revenue</th>
                            <th class="text-3xs text-muted font-bold uppercase tracking-wider text-left px-4 py-3 border-b border-subtle">Conversions</th>
                            <th class="text-3xs text-muted font-bold uppercase tracking-wider text-left px-4 py-3 border-b border-subtle">Paid Out</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if($providerRev->isEmpty())
                        <tr><td colspan="4" class="text-center py-6 text-xs text-muted">No data yet.</td></tr>
                        @else
                            @foreach($providerRev->take(5) as $prov)
                            <tr class="hover:bg-white/[0.02] transition-colors border-b border-subtle/50 last:border-0">
                                <td class="px-4 py-3 text-sm text-white font-medium flex items-center gap-2 capitalize">
                                    <div class="w-6 h-6 rounded bg-[#2b3341] flex items-center justify-center text-xs text-muted">
                                        <i class="ph-fill ph-puzzle-piece"></i>
                                    </div>
                                    {{ $prov->network_slug }}
                                </td>
                                <td class="px-4 py-3 text-sm text-white font-bold">@money($prov->total_rev)</td>
                                <td class="px-4 py-3 text-sm text-muted">{{ number_format($prov->total_conversions) }}</td>
                                <td class="px-4 py-3 text-sm text-primary font-bold">@money($prov->total_paid)</td>
                            </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Top Countries with SVG Map --}}
        <div class="lg:col-span-4 bg-surface border border-subtle rounded-xl flex flex-col">
            <div class="flex justify-between items-center px-5 py-4 border-b border-subtle">
                <h3 class="text-white font-bold text-sm">Top Countries</h3>
            </div>
            <div class="p-4 flex-1 flex flex-col">
                {{-- SVG World Map --}}
                <div id="world-map" class="h-[160px] rounded-lg mb-4"></div>
                
                <div class="space-y-3 mt-auto">
                    @php 
                        $totalGeoUsers = $geoStats->sum('users_count') ?: 1;
                        $countryNames = [
                            'US' => 'United States', 'IN' => 'India', 'BR' => 'Brazil', 'PH' => 'Philippines',
                            'GB' => 'United Kingdom', 'DE' => 'Germany', 'CA' => 'Canada', 'AU' => 'Australia',
                            'FR' => 'France', 'ID' => 'Indonesia', 'MX' => 'Mexico', 'VN' => 'Vietnam',
                            'NG' => 'Nigeria', 'PK' => 'Pakistan', 'BD' => 'Bangladesh', 'JP' => 'Japan',
                            'KR' => 'South Korea', 'IT' => 'Italy', 'ES' => 'Spain', 'TR' => 'Turkey',
                        ];
                    @endphp
                    @foreach($geoStats->take(5) as $idx => $geo)
                    @php
                        $code = strtoupper($geo->country);
                        $name = $countryNames[$code] ?? $code;
                        $pct = round(($geo->users_count / $totalGeoUsers) * 100, 1);
                    @endphp
                    <div class="flex items-center gap-3">
                        <span class="text-muted text-xs w-2">{{ $idx + 1 }}</span>
                        <img src="https://flagcdn.com/16x12/{{ strtolower($code) }}.png" width="16" height="12" class="rounded-sm" onerror="this.style.display='none'">
                        <span class="text-xs text-white font-medium w-24 truncate">{{ $name }}</span>
                        <div class="flex-1 bg-subtle h-1.5 rounded-full overflow-hidden">
                            <div class="bg-primary h-full rounded-full" style="width: {{ $pct }}%"></div>
                        </div>
                        <span class="text-xs text-white font-bold w-10 text-right">{{ $pct }}%</span>
                    </div>
                    @endforeach
                    @if($geoStats->isEmpty())
                        <div class="text-center text-xs text-muted py-4">No geo data available</div>
                    @endif
                </div>
            </div>
        </div>

    </div>

    {{-- ═══ SYSTEM OVERVIEW (PILLS) ═══ --}}
    <div class="mb-2">
        <div class="flex justify-between items-center mb-3">
            <h3 class="text-white font-bold text-sm">System Overview</h3>
            <a href="{{ route('admin.settings.index') }}" class="text-muted text-xs hover:text-white transition-colors bg-subtle px-2 py-1 rounded">View Details</a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
            
            <div class="bg-surface border border-subtle rounded-xl p-4 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center shrink-0">
                    <i class="ph-fill ph-users"></i>
                </div>
                <div>
                    <div class="text-3xs text-muted uppercase tracking-wider font-bold mb-0.5">Active Users</div>
                    <div class="text-lg font-bold text-white leading-none">{{ number_format($stats['active_users']) }}</div>
                </div>
            </div>

            <div class="bg-surface border border-subtle rounded-xl p-4 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-blue/10 text-blue flex items-center justify-center shrink-0">
                    <i class="ph-fill ph-user-plus"></i>
                </div>
                <div>
                    <div class="text-3xs text-muted uppercase tracking-wider font-bold mb-0.5">New Today</div>
                    <div class="text-lg font-bold text-white leading-none">{{ number_format($trends['today_signups']) }}</div>
                </div>
            </div>

            <div class="bg-surface border border-subtle rounded-xl p-4 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-teal/10 text-teal flex items-center justify-center shrink-0">
                    <i class="ph-fill ph-currency-dollar"></i>
                </div>
                <div>
                    <div class="text-3xs text-muted uppercase tracking-wider font-bold mb-0.5">Today Paid</div>
                    <div class="text-lg font-bold text-primary leading-none">@money($stats['today_paid'])</div>
                </div>
            </div>

            <div class="bg-surface border border-subtle rounded-xl p-4 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-amber/10 text-amber flex items-center justify-center shrink-0">
                    <i class="ph-fill ph-clock-countdown"></i>
                </div>
                <div>
                    <div class="text-3xs text-muted uppercase tracking-wider font-bold mb-0.5">Pending $</div>
                    <div class="text-lg font-bold text-amber leading-none">@money($stats['pending_withdrawals_amount'])</div>
                </div>
            </div>

            <div class="bg-surface border border-subtle rounded-xl p-4 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-purple/10 text-purple flex items-center justify-center shrink-0">
                    <i class="ph-fill ph-lightning"></i>
                </div>
                <div>
                    <div class="text-3xs text-muted uppercase tracking-wider font-bold mb-0.5">Providers</div>
                    <div class="text-lg font-bold text-white leading-none">{{ $providerRev->count() }}</div>
                </div>
            </div>

        </div>
    </div>

@endsection

@push('styles')
{{-- jsvectormap CSS is bundled via Vite (resources/js/admin.js) --}}
<style>
    /* Dark theme overrides for jsvectormap */
    .jvm-tooltip { background: #1C212B !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.1) !important; font-family: 'Inter', sans-serif !important; font-size: 0.75rem !important; padding: 6px 10px !important; border-radius: 8px !important; }
    #world-map .jvm-zoomin, #world-map .jvm-zoomout { display: none; }
    .jvm-series-container { display: none !important; }
</style>
@endpush

@push('scripts')
@include('partials.flatpickr')
{{-- Chart.js + jsvectormap (+ world map) are bundled via Vite in resources/js/admin.js --}}
<script>
document.addEventListener('DOMContentLoaded', function() {

    Chart.defaults.color = '#8B949E';
    Chart.defaults.font.family = 'Inter';

    // ═══ SPARKLINES ═══
    const chartData = @json($revenueChart);
    const revenueValues = chartData.map(d => d.revenue);
    
    const createSparkline = (id, color, data) => {
        const ctx = document.getElementById(id);
        if(!ctx) return;
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.map((_, i) => i.toString()),
                datasets: [{
                    data: data,
                    borderColor: color,
                    borderWidth: 2,
                    tension: 0.4,
                    pointRadius: 0,
                    fill: {
                        target: 'origin',
                        above: color.replace(')', ', 0.1)').replace('rgb', 'rgba')
                    }
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false }, tooltip: { enabled: false } },
                scales: { x: { display: false }, y: { display: false, min: 0 } },
                layout: { padding: 0 }
            }
        });
    };

    // Real 7-day series per metric (from controller) — no longer derived from revenue.
    const spark = @json($sparklines);
    const cumulative = arr => arr.map((_, i) => arr.slice(0, i + 1).reduce((a, b) => a + b, 0));
    createSparkline('sparklineUsers', 'rgb(139, 92, 246)', spark.users);
    createSparkline('sparklineTodayRev', 'rgb(0, 242, 96)', spark.revenue);
    createSparkline('sparklineTotalRev', 'rgb(59, 130, 246)', cumulative(spark.revenue));
    createSparkline('sparklineCashouts', 'rgb(245, 158, 11)', spark.cashouts);
    createSparkline('sparklineTotalPaid', 'rgb(20, 184, 166)', cumulative(spark.paid));

    // ═══ REVENUE OVERVIEW CHART ═══
    let revenueChart = null;
    const revCtx = document.getElementById('revenueLineChart');

    function buildChart(data) {
        const labels = data.map(d => d.date);
        const values = data.map(d => d.revenue);

        if (revenueChart) {
            // Update existing chart — no flicker
            revenueChart.data.labels = labels;
            revenueChart.data.datasets[0].data = values;
            revenueChart.options.elements = { point: { radius: data.length > 15 ? 0 : 4 } };
            revenueChart.update('active');
            return;
        }

        const gradient = revCtx.getContext('2d').createLinearGradient(0, 0, 0, 300);
        gradient.addColorStop(0, 'rgba(0, 242, 96, 0.2)');
        gradient.addColorStop(1, 'rgba(0, 242, 96, 0)');

        revenueChart = new Chart(revCtx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Revenue',
                    data: values,
                    borderColor: '#00f260',
                    backgroundColor: gradient,
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#00f260',
                    pointBorderColor: '#12161E',
                    pointBorderWidth: 2,
                    pointRadius: data.length > 15 ? 0 : 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#1C212B',
                        titleColor: '#8B949E',
                        bodyColor: '#FFFFFF',
                        bodyFont: { weight: 'bold' },
                        padding: 10,
                        displayColors: false,
                        callbacks: { label: (ctx) => '$' + ctx.parsed.y.toFixed(2) }
                    }
                },
                scales: {
                    x: { 
                        grid: { display: false, drawBorder: false },
                        ticks: { maxTicksLimit: 10 }
                    },
                    y: { 
                        grid: { color: '#1C212B', drawBorder: false },
                        border: { dash: [5, 5] },
                        ticks: { callback: (val) => '$' + val }
                    }
                }
            }
        });
    }

    // Build initial chart
    if (revCtx) buildChart(chartData);

    // ═══ DATE PICKER — AJAX update (no page reload) ═══
    const totalEl = document.getElementById('chartTotal');
    const dateTextEl = document.getElementById('dateRangeText');
    const dateBtn = document.getElementById('dateRangeBtn');

    const fp = flatpickr('#dateRangeInput', {
        mode: 'range',
        dateFormat: 'Y-m-d',
        positionElement: dateBtn,
        locale: { firstDayOfWeek: 1 },
        onReady: function (sd, ds, fp) { window.solaMonthDropdown && window.solaMonthDropdown(fp); },
        defaultDate: ["{{ $startDate->format('Y-m-d') }}", "{{ $endDate->format('Y-m-d') }}"],
        onChange: function(selectedDates, dateStr, instance) {
            if (selectedDates.length === 2) {
                const start = instance.formatDate(selectedDates[0], 'Y-m-d');
                const end = instance.formatDate(selectedDates[1], 'Y-m-d');

                const url = new URL(window.location);
                url.searchParams.set('start_date', start);
                url.searchParams.set('end_date', end);
                window.history.replaceState({}, '', url);

                fetch("{{ route('admin.dashboard.chartData') }}?start_date=" + start + "&end_date=" + end, {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(r => r.json())
                .then(data => {
                    buildChart(data.chart);
                    if (totalEl) totalEl.textContent = '$' + data.total.toLocaleString('en-US', { minimumFractionDigits: 2 });
                    if (dateTextEl) dateTextEl.textContent = data.start + ' — ' + data.end;
                })
                .catch(err => console.error('Chart update failed:', err));
            }
        }
    });

    dateBtn.addEventListener('click', function() { fp.toggle(); });

    // ═══ REVENUE SOURCE DOUGHNUT (REAL DATA) ═══
    const sourceCtx = document.getElementById('revenueSourceChart');
    if(sourceCtx) {
        const sourceData = @json($providerRev->take(5)->map(fn($p) => ['name' => ucfirst($p->network_slug), 'value' => round($p->total_rev, 2)])->values());
        const sourceColors = ['#00f260', '#8b5cf6', '#3b82f6', '#14b8a6', '#f59e0b'];
        
        new Chart(sourceCtx, {
            type: 'doughnut',
            data: {
                labels: sourceData.map(s => s.name),
                datasets: [{
                    data: sourceData.map(s => s.value),
                    backgroundColor: sourceColors.slice(0, sourceData.length),
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '80%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: '#1C212B',
                        bodyColor: '#FFFFFF',
                        callbacks: { label: (ctx) => ' ' + ctx.label + ': $' + ctx.parsed.toFixed(2) }
                    }
                }
            }
        });
    }

    // ═══ SVG WORLD MAP (jsvectormap) ═══
    const mapEl = document.getElementById('world-map');
    if(mapEl) {
        const geoData = @json($geoStats->mapWithKeys(fn($g) => [strtoupper($g->country) => $g->users_count]));
        
        // Build markers & region colors
        const values = {};
        const markers = [];
        const markerCoords = {
            'US': [37.0902, -95.7129], 'IN': [20.5937, 78.9629], 'BR': [-14.235, -51.9253],
            'PH': [12.8797, 121.774], 'GB': [55.3781, -3.436], 'DE': [51.1657, 10.4515],
            'CA': [56.1304, -106.3468], 'AU': [-25.2744, 133.7751], 'FR': [46.2276, 2.2137],
            'ID': [-0.7893, 113.9213], 'MX': [23.6345, -102.5528], 'VN': [14.0583, 108.2772],
            'NG': [9.082, 8.6753], 'PK': [30.3753, 69.3451], 'BD': [23.685, 90.3563],
            'JP': [36.2048, 138.2529], 'KR': [35.9078, 127.7669], 'IT': [41.8719, 12.5674],
            'ES': [40.4637, -3.7492], 'TR': [38.9637, 35.2433]
        };

        Object.keys(geoData).forEach(code => {
            values[code] = geoData[code];
            if (markerCoords[code]) {
                markers.push({
                    name: code + ': ' + geoData[code] + ' users',
                    coords: markerCoords[code]
                });
            }
        });

        new jsVectorMap({
            selector: '#world-map',
            map: 'world',
            backgroundColor: 'transparent',
            zoomButtons: false,
            zoomOnScroll: false,
            draggable: false,
            regionStyle: {
                initial: { fill: '#1C212B', stroke: '#2b3341', strokeWidth: 0.5 },
                hover: { fill: '#2b3341', cursor: 'pointer' }
            },
            series: {
                regions: [{
                    attribute: 'fill',
                    scale: { low: '#0a4a2a', high: '#00f260' },
                    values: values,
                    legend: { title: '' }
                }]
            },
            markers: markers,
            markerStyle: {
                initial: { fill: '#00f260', stroke: '#0B0E14', r: 4, strokeWidth: 2 },
                hover: { fill: '#00f260', stroke: '#fff', r: 6 }
            },
            labels: { markers: { render: () => '' } },
            onRegionTooltipShow: function(event, tooltip, code) {
                const count = geoData[code] || 0;
                if (count > 0) {
                    tooltip.text(code + ': ' + count + ' users', true);
                }
            }
        });
    }
});
</script>
@endpush