@php
    /**
     * AUTO-INTEGRATED DATA LOGIC
     * This section fetches real-time customer metrics directly to bypass server-side controller restrictions.
     */
    use App\Modules\Order\Models\Order;
    use App\Modules\Order\Models\OrderItem;
    use App\Modules\License\Models\License;
    use App\Modules\Support\Models\Ticket;
    use App\Models\Wishlist;
    use Illuminate\Support\Facades\Auth;

    $user = Auth::user();

    // Stats
    $purchasesCount = Order::where('user_id', $user->id)->where('status', 'paid')->count();
    $licensesCount = License::where('user_id', $user->id)->where('is_active', true)->count();
    $downloadsCount = OrderItem::whereHas('order', function ($q) use ($user) {
        $q->where('user_id', $user->id)->where('status', 'paid');
    })->count();
    $favoritesCount = Wishlist::where('user_id', $user->id)->count();

    // Recent Activity
    $recentPurchases = OrderItem::with(['product', 'order'])
        ->whereHas('order', function ($q) use ($user) {
            $q->where('user_id', $user->id)->where('status', 'paid');
        })
        ->orderBy('created_at', 'desc')
        ->take(5)
        ->get();

    $recentTickets = Ticket::where('user_id', $user->id)
        ->orderBy('updated_at', 'desc')
        ->take(5)
        ->get();
@endphp

<x-layouts.account.sidebar title="Dashboard">
    <div class="space-y-12">
        {{-- Header Section --}}
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div>
                <h2 class="text-[10px] font-black uppercase tracking-[0.5em] text-indigo-400 mb-2">User Terminal</h2>
                <h1 class="text-3xl md:text-5xl font-black text-white uppercase tracking-tighter">
                    Architect <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400 italic">Dashboard</span>
                </h1>
                <p class="text-neutral-500 mt-2 text-sm font-medium">Welcome back, {{ $user->name }}. System is synchronized.</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('account.purchases') }}" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-[10px] font-black uppercase tracking-widest rounded-lg transition-all shadow-lg shadow-indigo-600/20">Access Acquisitions</a>
            </div>
        </div>

        {{-- Neon Stats Grid --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @php
                $neonStats = [
                    ['label' => 'Total Acquisitions', 'value' => $purchasesCount, 'icon' => 'shopping-cart', 'color' => 'indigo'],
                    ['label' => 'Active Licenses', 'value' => $licensesCount, 'icon' => 'key', 'color' => 'purple'],
                    ['label' => 'Data Downloads', 'value' => $downloadsCount, 'icon' => 'download', 'color' => 'blue'],
                    ['label' => 'Favorites', 'value' => $favoritesCount, 'icon' => 'heart', 'color' => 'rose'],
                ];
            @endphp

            @foreach($neonStats as $stat)
                <div class="bg-[#12121c] p-6 rounded-2xl border border-white/5 hover:border-{{ $stat['color'] }}-500/30 transition-all group">
                    <div class="flex items-center justify-between mb-6">
                        <div class="w-10 h-10 rounded-xl bg-{{ $stat['color'] }}-500/10 border border-{{ $stat['color'] }}-500/20 flex items-center justify-center">
                            <i data-lucide="{{ $stat['icon'] }}" class="text-{{ $stat['color'] }}-400 w-5 h-5"></i>
                        </div>
                    </div>
                    <h4 class="text-[9px] font-black text-neutral-500 uppercase tracking-[0.2em] mb-1">{{ $stat['label'] }}</h4>
                    <p class="text-3xl font-black text-white tracking-tighter group-hover:text-{{ $stat['color'] }}-400 transition-colors">{{ $stat['value'] }}</p>
                </div>
            @endforeach
        </div>

        {{-- Tables & Side Info --}}
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
            {{-- Acquisition Log --}}
            <div class="xl:col-span-2">
                <div class="bg-[#12121c] rounded-2xl border border-white/5 overflow-hidden">
                    <div class="p-6 border-b border-white/5 flex items-center justify-between">
                        <h3 class="text-sm font-black text-white uppercase tracking-widest">Acquisition Log</h3>
                        <a href="{{ route('account.purchases') }}" class="text-[10px] font-bold text-indigo-400 hover:text-white transition-colors">View System History</a>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left">
                            <thead>
                                <tr class="bg-white/5">
                                    <th class="px-6 py-3 text-[9px] font-black text-neutral-500 uppercase tracking-widest">Node</th>
                                    <th class="px-6 py-3 text-[9px] font-black text-neutral-500 uppercase tracking-widest text-center">Value</th>
                                    <th class="px-6 py-3 text-[9px] font-black text-neutral-500 uppercase tracking-widest text-right">Timestamp</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-white/5">
                                @forelse($recentPurchases as $item)
                                    <tr class="hover:bg-white/[0.02] transition-colors">
                                        <td class="px-6 py-5">
                                            <div class="flex items-center gap-4">
                                                <div class="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 font-black text-[10px]">
                                                    {{ substr($item->product->title, 0, 1) }}
                                                </div>
                                                <div>
                                                    <p class="text-xs font-black text-white uppercase tracking-tight">{{ $item->product->title }}</p>
                                                    <p class="text-[9px] font-black text-neutral-500 uppercase tracking-widest">{{ $item->order->ulid ?? 'INTERNAL' }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-5 text-center text-xs font-black text-white">
                                            ${{ number_format($item->price, 2) }}
                                        </td>
                                        <td class="px-6 py-5 text-right text-[9px] font-black text-neutral-500 uppercase tracking-widest">
                                            {{ $item->created_at->diffForHumans() }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="px-6 py-10 text-center text-[10px] font-black text-neutral-500 uppercase tracking-widest opacity-40">
                                            NO ACTIVE NODES DETECTED.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Sidebar Cards --}}
            <div class="space-y-6">
                <div class="bg-[#12121c] p-6 rounded-2xl border border-white/5">
                    <h3 class="text-sm font-black text-white uppercase tracking-widest mb-6">System Protocols</h3>
                    <div class="space-y-3">
                        <a href="{{ route('account.tickets') }}" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/5 hover:border-indigo-500/50 transition-all group">
                            <span class="text-[10px] font-black uppercase tracking-widest text-neutral-500 group-hover:text-white">Support Uplink</span>
                            <i data-lucide="arrow-right" class="w-4 h-4 text-neutral-500 group-hover:text-indigo-400"></i>
                        </a>
                        <a href="{{ route('account.settings.profile') }}" class="flex items-center justify-between p-4 rounded-xl bg-white/[0.03] border border-white/5 hover:border-indigo-500/50 transition-all group">
                            <span class="text-[10px] font-black uppercase tracking-widest text-neutral-500 group-hover:text-white">Identity Matrix</span>
                            <i data-lucide="arrow-right" class="w-4 h-4 text-neutral-500 group-hover:text-indigo-400"></i>
                        </a>
                    </div>
                </div>

                <div class="bg-gradient-to-br from-indigo-600 to-purple-700 p-8 rounded-2xl text-white relative overflow-hidden group shadow-xl shadow-indigo-900/20">
                    <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-white/10 blur-3xl rounded-full"></div>
                    <h4 class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 opacity-70">Intelligence Status</h4>
                    <p class="text-xl font-black tracking-tighter mb-6 leading-tight uppercase italic">Your account is running at peak efficiency.</p>
                    <div class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest">
                        <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                        Encrypted Connection
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-layouts.account.sidebar>