@extends('admin.layouts.app')

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

@section('content')
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-xl font-bold text-white tracking-tight">Manage Reviews</h1>
            <p class="text-xs text-slate-500 mt-1">Moderate and manage user reviews for astrologers.</p>
        </div>
    </div>

    @if(session('success'))
        <div
            class="bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-2.5 rounded-lg mb-6 text-xs font-medium flex items-center gap-2">
            <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-[#101828] border border-white/5 rounded-xl overflow-hidden shadow-sm">
        <table class="w-full text-left">
            <thead>
                <tr class="bg-white/[0.02] border-b border-white/5">
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">User</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Astrologer
                    </th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Rating</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Review</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Status</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Date</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider text-right">
                        Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse($reviews as $review)
                    <tr class="hover:bg-white/[0.01] transition-colors group">
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="text-xs font-semibold text-white">{{ $review->user->name }}</span>
                                <span class="text-[10px] text-slate-500">UID: #{{ $review->user_id }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex flex-col">
                                <span class="text-xs font-semibold text-yellow-500">{{ $review->astrologer->name }}</span>
                                <span class="text-[10px] text-slate-500">Chat Session: #{{ $review->chat_session_id }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-0.5">
                                @for($i = 1; $i <= 5; $i++)
                                    <i data-lucide="star"
                                        class="w-2.5 h-2.5 {{ $i <= $review->rating ? 'text-yellow-500 fill-yellow-500' : 'text-slate-700' }}"></i>
                                @endfor
                            </div>
                        </td>
                        <td class="px-6 py-4 max-w-xs">
                            <p class="text-[11px] text-slate-400 line-clamp-2" title="{{ $review->review }}">
                                {{ $review->review ?: 'No comment' }}
                            </p>
                            @if($review->tags && count($review->tags) > 0)
                                <div class="flex flex-wrap gap-1 mt-1">
                                    @foreach($review->tags as $tag)
                                        <span class="px-1.5 py-0.5 bg-purple-500/10 text-purple-400 text-[9px] font-bold rounded">
                                            {{ ucwords(str_replace('_', ' ', $tag)) }}
                                        </span>
                                    @endforeach
                                </div>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <span
                                class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase {{ $review->is_approved ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400' }}">
                                {{ $review->is_approved ? 'Approved' : 'Pending/Rejected' }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-[10px] text-slate-500">
                            {{ $review->created_at->format('M d, Y') }}
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-2">
                                <form action="{{ route('admin.reviews.toggle-approval', $review->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                        class="p-1.5 {{ $review->is_approved ? 'text-amber-400 hover:bg-amber-500/10' : 'text-green-400 hover:bg-green-500/10' }} rounded-md transition-all"
                                        title="{{ $review->is_approved ? 'Reject/Unapprove' : 'Approve' }}">
                                        <i data-lucide="{{ $review->is_approved ? 'x-circle' : 'check-circle' }}"
                                            class="w-3.5 h-3.5"></i>
                                    </button>
                                </form>

                                <form action="{{ route('admin.reviews.destroy', $review->id) }}" method="POST"
                                    onsubmit="return confirm('Are you sure you want to delete this review?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        class="p-1.5 text-red-400 hover:bg-red-500/10 rounded-md transition-all"
                                        title="Delete Review">
                                        <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-slate-500">
                            <div class="flex flex-col items-center gap-2">
                                <i data-lucide="star" class="w-8 h-8 opacity-20"></i>
                                <p class="text-xs">No reviews found yet.</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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