@extends('user.layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-slate-800">Hello, {{ Auth::user()->name }}!</h1>
                <p class="text-slate-500 text-sm mt-1">Welcome back to your dashboard.</p>
            </div>
            <div class="hidden sm:block">
                <span
                    class="text-xs font-bold px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full uppercase tracking-wide">User
                    Account</span>
            </div>
        </div>

        <!-- Stats Grid -->
        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center mb-4 text-indigo-600">
                    <i data-lucide="wallet" class="w-5 h-5"></i>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Wallet Balance</p>
                <h3 class="text-2xl font-black text-slate-800">₹{{ number_format(Auth::user()->wallet_balance, 2) }}</h3>
            </div>

            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <div class="w-10 h-10 bg-pink-50 rounded-xl flex items-center justify-center mb-4 text-pink-600">
                    <i data-lucide="heart" class="w-5 h-5"></i>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Favorite Astrologers</p>
                <h3 class="text-2xl font-black text-slate-800">{{ Auth::user()->favouriteAstrologers()->count() }}</h3>
            </div>

            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <div class="w-10 h-10 bg-emerald-50 rounded-xl flex items-center justify-center mb-4 text-emerald-600">
                    <i data-lucide="message-circle" class="w-5 h-5"></i>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Total Consultations</p>
                <h3 class="text-2xl font-black text-slate-800">
                    {{ auth()->user()->chatRequests()->where('status', 'accepted')->count() }}
                </h3>
            </div>

            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <div class="w-10 h-10 bg-amber-50 rounded-xl flex items-center justify-center mb-4 text-amber-600">
                    <i data-lucide="shopping-bag" class="w-5 h-5"></i>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Shop Orders</p>
                <h3 class="text-2xl font-black text-slate-800">{{ auth()->user()->orders()->count() }}</h3>
                <a href="{{ route('user.orders.index') }}"
                    class="text-xs font-bold text-amber-600 hover:text-amber-800 mt-2 block">View All &rarr;</a>
            </div>

            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center mb-4 text-blue-600">
                    <i data-lucide="ticket" class="w-5 h-5"></i>
                </div>
                <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Support Tickets</p>
                <h3 class="text-2xl font-black text-slate-800">{{ auth()->user()->tickets()->count() }}</h3>
                <a href="{{ route('user.tickets.index') }}"
                    class="text-xs font-bold text-blue-600 hover:text-blue-800 mt-2 block">View My Tickets &rarr;</a>
            </div>
        </div>

        <!-- Recent Transactions -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-6 border-b border-slate-100 flex justify-between items-center">
                <h2 class="text-lg font-bold text-slate-800">Recent Transactions</h2>
                <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Wallet History</span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-slate-50 text-slate-500 text-xs uppercase font-semibold">
                        <tr>
                            <th class="px-6 py-4">Date</th>
                            <th class="px-6 py-4">Chat ID</th>
                            <th class="px-6 py-4">Description</th>
                            <th class="px-6 py-4">Amount</th>
                            <th class="px-6 py-4">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse(Auth::user()->transactions()->latest()->take(5)->get() as $transaction)
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="px-6 py-4 text-slate-600">{{ $transaction->created_at->format('M d, Y h:i A') }}</td>
                                <td class="px-6 py-4">
                                    @php
                                        $meta = is_array($transaction->meta_data) ? $transaction->meta_data : json_decode($transaction->meta_data, true);
                                        $sessionId = $meta['session_id'] ?? null;
                                    @endphp
                                    @if($sessionId)
                                        <span
                                            class="inline-flex items-center px-2.5 py-1 rounded-lg bg-purple-50 text-purple-700 font-mono text-xs font-bold">
                                            #{{ $sessionId }}
                                        </span>
                                    @else
                                        <span class="text-slate-400 text-xs">-</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4">
                                    <div class="font-medium text-slate-800">{{ $transaction->description }}</div>
                                    <div class="text-xs text-slate-500">{{ strtoupper($transaction->gateway) }} •
                                        {{ $transaction->payment_id }}
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span
                                        class="font-bold {{ $transaction->type == 'credit' ? 'text-green-600' : 'text-red-600' }}">
                                        {{ $transaction->type == 'credit' ? '+' : '-' }}
                                        ₹{{ number_format($transaction->amount, 2) }}
                                    </span>
                                    @php
                                        $meta = is_array($transaction->meta_data) ? $transaction->meta_data : json_decode($transaction->meta_data, true);
                                    @endphp
                                    @if(($meta['cashback'] ?? 0) > 0)
                                        <div class="text-xs text-green-500 font-bold">+ ₹{{ $meta['cashback'] }} Cashback</div>
                                    @endif
                                </td>
                                <td class="px-6 py-4">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $transaction->status == 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                        {{ ucfirst($transaction->status) }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-8 text-center text-slate-500">No transactions found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div
            class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 text-center text-white shadow-xl shadow-indigo-500/20">
            <h2 class="text-2xl font-bold mb-3">Start your first consultation!</h2>
            <p class="text-indigo-100 mb-6 max-w-lg mx-auto">Connect with top astrologers and get instant answers to your
                questions.</p>
            <a href="{{ route('home') }}"
                class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 font-bold rounded-xl hover:bg-indigo-50 transition-colors shadow-lg">
                Browse Astrologers
                <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
            </a>
        </div>
    </div>
@endsection