@extends('user.layouts.app')

@section('title', 'My Favourite Astrologers')

@section('content')
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-slate-900 mb-2">My Favourites</h1>
        <p class="text-slate-500 font-medium">Quickly connect with your preferred astrologers.</p>
    </div>

    @if($favourites->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($favourites as $astrologer)
                <div id="astrologer-card-{{ $astrologer->id }}"
                    class="bg-white rounded-[2rem] border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition-all group relative">
                    <!-- Unfavourite Button -->
                    <button onclick="toggleFavourite({{ $astrologer->id }})" id="fav-btn-{{ $astrologer->id }}"
                        class="absolute top-4 right-4 z-20 w-8 h-8 rounded-full flex items-center justify-center transition-all bg-white border border-slate-100 shadow-sm hover:scale-110">
                        <i data-lucide="heart" class="w-4 h-4 text-red-500 fill-red-500"></i>
                    </button>

                    <div class="p-6">
                        <div class="flex flex-col items-center mb-6">
                            <div class="relative mb-4">
                                <div
                                    class="w-20 h-20 rounded-full overflow-hidden border-2 {{ $astrologer->isOnline() ? 'border-green-500' : 'border-slate-200' }}">
                                    <img src="{{ $astrologer->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode($astrologer->name) . '&background=1e293b&color=eab308' }}"
                                        alt="{{ $astrologer->name }}" class="w-full h-full object-cover">
                                </div>
                                @if($astrologer->isOnline())
                                    <div
                                        class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-white flex items-center justify-center border border-slate-100">
                                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                    </div>
                                @endif
                            </div>

                            <h3 class="font-bold text-slate-900 text-lg text-center leading-tight mb-1">{{ $astrologer->name }}</h3>
                            <div class="flex items-center gap-1 text-yellow-500 text-xs font-bold">
                                <i data-lucide="star" class="w-3 h-3 fill-current"></i>
                                <span>{{ number_format($astrologer->average_rating, 1) }}</span>
                                <span class="text-slate-400 font-normal">({{ $astrologer->total_reviews }})</span>
                            </div>
                        </div>

                        <div class="space-y-3 mb-6">
                            <div class="flex items-center gap-2 text-xs text-slate-600">
                                <i data-lucide="award" class="w-3 h-3 text-purple-500"></i>
                                <span class="truncate">{{ $astrologer->skills->pluck('name')->take(2)->implode(', ') }}</span>
                            </div>
                            <div class="flex items-center gap-2 text-xs text-slate-600">
                                <i data-lucide="languages" class="w-3 h-3 text-emerald-500"></i>
                                <span class="truncate">{{ $astrologer->languages->pluck('name')->take(2)->implode(', ') }}</span>
                            </div>
                        </div>

                        <div class="pt-4 border-t border-slate-100 flex items-center justify-between">
                            <div>
                                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Price</p>
                                <p class="text-sm font-bold text-slate-900">
                                    ₹{{ $astrologer->astrologerDetail->price_chat ?? 0 }}/min</p>
                            </div>
                            <a href="{{ route('astrologer.public_profile', $astrologer->slug) }}"
                                class="bg-slate-900 hover:bg-slate-800 text-white text-[10px] font-bold px-4 py-2 rounded-xl transition-colors">
                                View Profile
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-8">
            {{ $favourites->links() }}
        </div>
    @else
        <div class="text-center py-20 bg-white rounded-[2rem] border border-slate-200">
            <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
                <i data-lucide="heart" class="w-8 h-8 text-slate-300"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-900 mb-2">No Favourites Yet</h3>
            <p class="text-slate-500 max-w-xs mx-auto mb-8">Mark astrologers as favourites to quickly find them here later.</p>
            <a href="{{ route('front.astrologers.index') }}"
                class="inline-block bg-yellow-500 hover:bg-yellow-400 text-slate-900 font-bold px-8 py-3 rounded-2xl transition-all shadow-lg shadow-yellow-500/20">
                Browse Astrologers
            </a>
        </div>
    @endif

    <!-- Toast Notification -->
    <div id="toast-notification"
        class="fixed top-24 right-6 z-50 transform transition-all duration-300 translate-x-full opacity-0">
        <div class="bg-emerald-500 text-white px-6 py-4 rounded-2xl shadow-xl flex items-center gap-3">
            <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
                <i data-lucide="check" class="w-5 h-5 text-white"></i>
            </div>
            <div>
                <h4 class="font-bold text-sm">Success</h4>
                <p class="text-xs text-white/90" id="toast-message">Operation successful</p>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function toggleFavourite(astrologerId) {
            fetch(`{{ url('user/favourites') }}/${astrologerId}/toggle`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Remove card
                        const card = document.getElementById(`astrologer-card-${astrologerId}`);
                        if (card) {
                            card.style.transition = 'all 0.3s ease-out';
                            card.style.opacity = '0';
                            card.style.transform = 'scale(0.9)';
                            setTimeout(() => {
                                card.remove();
                                // Check if no cards left, reload to show empty state
                                if (document.querySelectorAll('[id^="astrologer-card-"]').length === 0) {
                                    window.location.reload();
                                }
                            }, 300);
                        }

                        // Show toast
                        showToast(data.message);
                    }
                })
                .catch(error => console.error('Error:', error));
        }

        function showToast(message) {
            const toast = document.getElementById('toast-notification');
            const messageEl = document.getElementById('toast-message');

            messageEl.textContent = message;
            toast.classList.remove('translate-x-full', 'opacity-0');

            setTimeout(() => {
                toast.classList.add('translate-x-full', 'opacity-0');
            }, 3000);
        }
    </script>
@endpush