@extends('astrologer.layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="glass-card p-6 rounded-2xl">
            <div class="flex items-center gap-4 mb-3">
                <div class="w-10 h-10 bg-blue-500/10 rounded-xl flex items-center justify-center">
                    <i data-lucide="shopping-bag" class="text-blue-500 w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Total Bookings</p>
                    <h3 class="text-2xl font-bold text-white leading-none">
                        {{ ($totalChats ?? 0) + ($totalPoojaOrders ?? 0) }}</h3>
                </div>
            </div>
            <p class="text-[11px] text-slate-500">{{ $totalChats ?? 0 }} Chats &bull; {{ $totalPoojaOrders ?? 0 }} Poojas
            </p>
        </div>

        <div class="glass-card p-6 rounded-2xl">
            <div class="flex items-center gap-4 mb-3">
                <div class="w-10 h-10 bg-emerald-500/10 rounded-xl flex items-center justify-center">
                    <i data-lucide="star" class="text-emerald-500 w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Average Rating</p>
                    <h3 class="text-2xl font-bold text-white leading-none">{{ number_format($avgRating, 1) }}</h3>
                </div>
            </div>
            <p class="text-[11px] text-slate-500">Based on {{ $totalReviews }} reviews.</p>
        </div>

        <div class="glass-card p-6 rounded-2xl">
            <div class="flex items-center gap-4 mb-3">
                <div class="w-10 h-10 bg-yellow-500/10 rounded-xl flex items-center justify-center">
                    <i data-lucide="indian-rupee" class="text-yellow-500 w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Wallet Balance</p>
                    <h3 class="text-2xl font-bold text-white leading-none">₹{{ number_format($walletBalance ?? 0, 2) }}</h3>
                </div>
            </div>
            <p class="text-[11px] text-slate-500">Payout threshold: ₹1000</p>
        </div>

        <div class="glass-card p-6 rounded-2xl">
            <div class="flex items-center gap-4 mb-3">
                <div class="w-10 h-10 bg-purple-500/10 rounded-xl flex items-center justify-center">
                    <i data-lucide="banknote" class="text-purple-500 w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Last Settled</p>
                    <h3 class="text-2xl font-bold text-white leading-none">₹{{ number_format($lastSettledAmount ?? 0, 2) }}
                    </h3>
                </div>
            </div>
            <p class="text-[11px] text-slate-500 truncate">Next: {{ $nextSettlementDate->format('M d') }}
                ({{ now()->diffInDays($nextSettlementDate) }}d)</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        {{-- Pending Chat Requests Section --}}
        <div>
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-xl font-bold text-white mb-1">Active Requests</h3>
                </div>
                @if(isset($pendingRequests) && $pendingRequests->count() > 0)
                    <div class="bg-yellow-500/10 border border-yellow-500/20 px-3 py-1 rounded-lg">
                        <span class="text-yellow-500 font-bold text-xs">{{ $pendingRequests->count() }} Pending</span>
                    </div>
                @endif
            </div>

            @if(isset($pendingRequests) && $pendingRequests->count() > 0)
                <div class="space-y-4" x-data="pendingRequestsHandler()">
                    @foreach($pendingRequests as $request)
                        <div
                            class="glass-card p-5 rounded-2xl flex items-center justify-between hover:border-yellow-500/20 transition-all">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-full overflow-hidden border border-white/5">
                                    @if($request->user->avatar)
                                        <img src="{{ asset('storage/' . $request->user->avatar) }}" class="w-full h-full object-cover">
                                    @else
                                        <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                                            <span
                                                class="text-sm font-bold text-slate-500">{{ substr($request->user->name, 0, 1) }}</span>
                                        </div>
                                    @endif
                                </div>
                                <div>
                                    <h4 class="text-sm font-bold text-white">{{ $request->user->name }}</h4>
                                    <p class="text-[10px] text-slate-500">{{ $request->created_at->diffForHumans() }}</p>
                                </div>
                            </div>

                            <div class="flex gap-2">
                                <button @click="rejectRequest({{ $request->id }})"
                                    class="p-2 rounded-lg bg-slate-800 text-slate-400 hover:text-red-400 border border-white/5">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                </button>
                                <button @click="acceptRequest({{ $request->id }})"
                                    class="p-2 rounded-lg bg-yellow-500 text-slate-900 shadow-lg shadow-yellow-500/20">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="glass-card p-10 rounded-2xl text-center">
                    <div class="w-12 h-12 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="coffee" class="text-slate-600 w-6 h-6"></i>
                    </div>
                    <p class="text-slate-500 text-sm">No new requests. Take a break!</p>
                </div>
            @endif
        </div>

        {{-- Latest Reviews Section --}}
        <div>
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-white">Latest Reviews</h3>
                <a href="{{ route('astrologer.reviews') }}"
                    class="text-xs font-bold text-yellow-500 hover:text-yellow-400 transition-colors uppercase tracking-widest">View
                    All</a>
            </div>

            <div class="space-y-4">
                @forelse($latestReviews as $review)
                    <div class="glass-card p-5 rounded-2xl border border-white/5 group">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-3">
                                <div
                                    class="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-xs font-bold text-slate-400">
                                    {{ substr($review->user->name, 0, 1) }}
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-slate-200">{{ $review->user->name }}</p>
                                    <p class="text-[9px] text-slate-500">{{ $review->created_at->format('M d, Y') }}</p>
                                </div>
                            </div>
                            <div class="flex">
                                @for($i = 1; $i <= 5; $i++)
                                    <i data-lucide="star"
                                        class="w-3 h-3 {{ $i <= $review->rating ? 'text-yellow-500 fill-yellow-500' : 'text-slate-700' }}"></i>
                                @endfor
                            </div>
                        </div>
                        <p class="text-xs text-slate-400 italic line-clamp-2">"{{ $review->review }}"</p>
                    </div>
                @empty
                    <div class="glass-card p-10 rounded-2xl text-center">
                        <div class="w-12 h-12 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="star-off" class="text-slate-600 w-6 h-6"></i>
                        </div>
                        <p class="text-slate-500 text-sm">No reviews yet. Deliver great service!</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    @if(!auth()->user()->astrologerDetail || !auth()->user()->astrologerDetail->bio)
        <div class="bg-yellow-500/5 border border-yellow-500/10 p-6 rounded-2xl flex items-center justify-between">
            <div class="flex items-center gap-5">
                <div class="w-12 h-12 bg-yellow-500/10 rounded-full flex items-center justify-center animate-pulse">
                    <i data-lucide="alert-circle" class="text-yellow-500 w-6 h-6"></i>
                </div>
                <div>
                    <h4 class="text-base font-bold text-slate-100 mb-0.5">Complete Your Profile!</h4>
                    <p class="text-slate-500 text-sm">Receive consultations by listing your expertise and services.</p>
                </div>
            </div>
            <a href="{{ route('astrologer.profile.edit') }}"
                class="bg-yellow-500 hover:bg-yellow-400 text-slate-900 font-bold px-6 py-2.5 rounded-xl transition-all shadow-lg shadow-yellow-500/10 text-sm">
                Update Now
            </a>
        </div>
    @endif

    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('pendingRequestsHandler', () => ({
                    acceptRequest(requestId) {
                        fetch(`/chat/request/${requestId}/update`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                            body: JSON.stringify({ status: 'accepted' })
                        })
                            .then(res => res.json())
                            .then(data => {
                                if (data.session_id) {
                                    window.location.href = `/astrologer/chat/${data.session_id}`;
                                }
                            })
                            .catch(err => {
                                console.error('Error accepting request:', err);
                                alert('Failed to accept request. Please try again.');
                            });
                    },

                    rejectRequest(requestId) {
                        const reason = prompt("Enter rejection reason (optional):");
                        if (reason === null) return; // User cancelled

                        fetch(`/chat/request/${requestId}/update`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                            body: JSON.stringify({ status: 'rejected', reason: reason })
                        })
                            .then(res => res.json())
                            .then(() => {
                                // Reload page to refresh the pending requests list
                                window.location.reload();
                            })
                            .catch(err => {
                                console.error('Error rejecting request:', err);
                                alert('Failed to reject request. Please try again.');
                            });
                    }
                }));
            });
        </script>
    @endpush
@endsection