@extends('user.layouts.app')

@section('title', 'Review ' . $session->astrologer->name)

@section('content')
    <div class="max-w-3xl mx-auto">
        <div class="mb-6">
            <a href="{{ route('user.chats.index') }}"
                class="inline-flex items-center gap-2 text-sm font-bold text-slate-600 hover:text-slate-800 transition-colors">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                Back to Chat History
            </a>
        </div>

        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-r from-yellow-50 to-orange-50 border-b border-gray-200 p-6">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white shadow-lg">
                        @if($session->astrologer->astrologerDetail && $session->astrologer->astrologerDetail->profile_pic)
                            <img src="{{ asset('storage/' . $session->astrologer->astrologerDetail->profile_pic) }}"
                                class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full bg-slate-100 flex items-center justify-center">
                                <span
                                    class="text-lg font-bold text-slate-500">{{ substr($session->astrologer->name, 0, 2) }}</span>
                            </div>
                        @endif
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-slate-800">Rate Your Experience</h1>
                        <p class="text-slate-600 mt-1">with {{ $session->astrologer->name }}</p>
                    </div>
                </div>
            </div>

            <!-- Review Form -->
            <form action="{{ route('user.review.store', $session->id) }}" method="POST" class="p-8" x-data="reviewForm()">
                @csrf

                <!-- Star Rating -->
                <div class="mb-8">
                    <label class="block text-sm font-bold text-slate-700 mb-3">
                        Overall Satisfaction <span class="text-red-500">*</span>
                    </label>
                    <div class="flex items-center gap-2">
                        <template x-for="star in 5" :key="star">
                            <button type="button" @click="rating = star"
                                class="transition-all hover:scale-110 outline-none focus:outline-none">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    :fill="star <= rating ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="w-10 h-10"
                                    :class="star <= rating ? 'text-yellow-400' : 'text-slate-300'">
                                    <polygon
                                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                                    </polygon>
                                </svg>
                            </button>
                        </template>
                        <span class="ml-3 text-lg font-bold text-slate-700" x-text="ratingText"></span>
                    </div>
                    <input type="hidden" name="rating" :value="rating" required>
                    @error('rating')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Written Review -->
                <div class="mb-8">
                    <label for="review" class="block text-sm font-bold text-slate-700 mb-3">
                        Share Your Experience (Optional)
                    </label>
                    <textarea id="review" name="review" rows="5" maxlength="1000" x-model="reviewText"
                        placeholder="Tell us about your consultation... What did you like? Were the predictions accurate? How was the astrologer's behavior?"
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none text-slate-700"></textarea>
                    <div class="flex justify-between items-center mt-2">
                        <p class="text-xs text-slate-500">Help others by sharing detailed feedback</p>
                        <p class="text-xs text-slate-400" x-text="`${reviewText.length}/1000`"></p>
                    </div>
                    @error('review')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Quick Feedback Tags -->
                <div class="mb-8">
                    <label class="block text-sm font-bold text-slate-700 mb-3">
                        Quick Feedback Tags (Optional)
                    </label>
                    <p class="text-xs text-slate-500 mb-4">Select all that apply</p>
                    <div class="flex flex-wrap gap-3">
                        @foreach($availableTags as $key => $label)
                            <button type="button" @click="toggleTag('{{ $key }}')"
                                class="px-4 py-2 rounded-full text-sm font-bold border-2 transition-all" :class="selectedTags.includes('{{ $key }}') 
                                                    ? 'border-purple-500 bg-purple-50 text-purple-700' 
                                                    : 'border-slate-200 text-slate-600 hover:border-purple-300'">
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                    <!-- Hidden inputs for active tags -->
                    <template x-for="tag in selectedTags" :key="tag">
                        <input type="hidden" name="tags[]" :value="tag">
                    </template>
                    @error('tags')
                        <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Submit Button -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                    <a href="{{ route('user.chats.index') }}"
                        class="px-6 py-3 text-slate-600 hover:text-slate-800 font-bold rounded-xl hover:bg-slate-50 transition-colors">
                        Cancel
                    </a>
                    <button type="submit" :disabled="rating === 0" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 
                                           text-white font-bold rounded-xl shadow-lg shadow-purple-500/30 
                                           disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:scale-105">
                        Submit Review
                    </button>
                </div>
            </form>
        </div>

        <!-- Info Box -->
        <div class="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-4">
            <div class="flex gap-3">
                <i data-lucide="info" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                <div class="text-sm text-blue-800">
                    <p class="font-bold mb-1">Your review helps others</p>
                    <p class="text-blue-700">Honest feedback helps other users make informed decisions and helps astrologers
                        improve their services.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('reviewForm', () => ({
                rating: 0,
                reviewText: '',
                selectedTags: [],

                get ratingText() {
                    const texts = {
                        0: 'Select rating',
                        1: 'Poor',
                        2: 'Fair',
                        3: 'Good',
                        4: 'Very Good',
                        5: 'Excellent'
                    };
                    return texts[this.rating] || '';
                },

                toggleTag(tag) {
                    if (this.selectedTags.includes(tag)) {
                        this.selectedTags = this.selectedTags.filter(t => t !== tag);
                    } else {
                        this.selectedTags.push(tag);
                    }
                }
            }));
        });
    </script>
@endsection