@extends('astrologer.layouts.app')

@section('title', 'My Reviews')

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-white mb-2">My Reviews & Ratings</h1>
        <p class="text-slate-500 font-medium">Read what users have to say about their experience with you.</p>
    </div>

    @if(session('success'))
        <div
            class="bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 px-4 py-3 rounded-2xl mb-6 text-sm font-bold flex items-center gap-3">
            <i data-lucide="check-circle" class="w-5 h-5"></i>
            {{ session('success') }}
        </div>
    @endif

    <div class="space-y-6" x-data="reviewManager()">
        @forelse($reviews as $review)
            <div class="glass-card p-8 rounded-3xl border border-white/5 hover:border-white/10 transition-all">
                <div class="flex flex-col md:flex-row justify-between items-start gap-6">
                    <div class="flex-1">
                        <div class="flex items-center gap-4 mb-4">
                            <div
                                class="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-500 font-bold border border-indigo-500/10">
                                {{ substr($review->user->name, 0, 1) }}
                            </div>
                            <div>
                                <h4 class="font-bold text-white text-lg">{{ $review->user->name }}</h4>
                                <div class="flex items-center gap-2">
                                    <div class="flex gap-0.5">
                                        @for($i = 1; $i <= 5; $i++)
                                            <i data-lucide="star"
                                                class="w-3.5 h-3.5 {{ $i <= $review->rating ? 'text-yellow-500 fill-yellow-500' : 'text-slate-700' }}"></i>
                                        @endfor
                                    </div>
                                    <span class="text-[11px] text-slate-500 font-bold uppercase tracking-wider">•
                                        {{ $review->created_at->diffForHumans() }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-slate-900/50 p-6 rounded-2xl mb-6">
                            <p class="text-slate-300 font-medium leading-relaxed italic">
                                "{{ $review->review ?: 'No written feedback provided.' }}"
                            </p>

                            @if($review->tags && count($review->tags) > 0)
                                <div class="flex flex-wrap gap-2 mt-4">
                                    @foreach($review->tags as $tag)
                                        <span
                                            class="px-3 py-1 bg-purple-500/10 text-purple-400 text-[10px] font-bold rounded-full border border-purple-500/10">
                                            {{ ucwords(str_replace('_', ' ', $tag)) }}
                                        </span>
                                    @endforeach
                                </div>
                            @endif
                        </div>

                        @if($review->reply)
                            <div class="ml-6 border-l-2 border-indigo-500/30 pl-6 py-2">
                                <div class="flex items-center gap-2 mb-2">
                                    <i data-lucide="reply" class="w-3.5 h-3.5 text-indigo-400"></i>
                                    <span class="text-xs font-bold text-indigo-400 uppercase tracking-widest">Your Reply</span>
                                    <span
                                        class="text-[10px] text-slate-600 font-bold">{{ $review->replied_at->diffForHumans() }}</span>
                                </div>
                                <p class="text-slate-400 font-medium leading-relaxed">
                                    {{ $review->reply }}
                                </p>
                            </div>
                        @else
                            <button @click="openReplyModal({{ $review->id }}, '{{ addslashes($review->user->name) }}')"
                                class="flex items-center gap-2 text-xs font-bold text-indigo-400 hover:text-indigo-300 transition-colors">
                                <i data-lucide="message-square" class="w-3.5 h-3.5"></i>
                                Reply to this review
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-20 glass-card rounded-3xl">
                <div class="w-20 h-20 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i data-lucide="star" class="w-10 h-10 text-slate-600 opacity-20"></i>
                </div>
                <h3 class="text-xl font-bold text-white mb-2">No Reviews Yet</h3>
                <p class="text-slate-500">Provide great consultations to start receiving reviews from your users.</p>
            </div>
        @endforelse

        <div class="mt-8">
            {{ $reviews->links() }}
        </div>

        <!-- Reply Modal -->
        <div x-show="replyModalOpen" x-cloak
            class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-6">
            <div class="bg-slate-900 border border-white/10 rounded-[2.5rem] w-full max-w-lg p-10 overflow-hidden relative shadow-2xl"
                @click.away="replyModalOpen = false">

                <h3 class="text-2xl font-bold text-white mb-2">Reply to Review</h3>
                <p class="text-slate-400 text-sm mb-8">Replying to <span class="text-white font-bold"
                        x-text="replyingTo"></span>'s feedback.</p>

                <form :action="replyUrl" method="POST">
                    @csrf
                    <div class="mb-8">
                        <label class="text-[10px] uppercase font-bold text-slate-500 tracking-widest block mb-3">Your
                            Message</label>
                        <textarea name="reply" rows="5" maxlength="1000" required
                            class="w-full bg-slate-800/50 border border-white/10 rounded-2xl p-4 text-white text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all placeholder:text-slate-600"
                            placeholder="Type your response here..."></textarea>
                    </div>

                    <div class="flex gap-4">
                        <button type="button" @click="replyModalOpen = false"
                            class="flex-1 py-4 rounded-2xl border border-white/5 text-sm font-bold text-slate-400 hover:text-white hover:bg-white/5 transition-all">
                            Cancel
                        </button>
                        <button type="submit"
                            class="flex-2 px-10 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-2xl shadow-xl shadow-indigo-600/20 transition-all text-sm">
                            Post Reply
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function reviewManager() {
            return {
                replyModalOpen: false,
                replyingTo: '',
                reviewId: null,

                get replyUrl() {
                    return this.reviewId ? `/astrologer/reviews/${this.reviewId}/reply` : '#';
                },

                openReplyModal(id, name) {
                    this.reviewId = id;
                    this.replyingTo = name;
                    this.replyModalOpen = true;
                }
            }
        }
    </script>
@endsection