@extends('astrologer.layouts.app')

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

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-2xl font-bold text-white mb-1">My Chats</h1>
            <p class="text-slate-400 text-sm">History of all your consultations</p>
        </div>
    </div>

    @if($chats->count() > 0)
        <div class="glass-card rounded-2xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="border-b border-white/5 bg-white/5">
                            <th class="py-4 px-6 text-xs font-bold text-slate-400 uppercase tracking-widest">Chat ID</th>
                            <th class="py-4 px-6 text-xs font-bold text-slate-400 uppercase tracking-widest">Client</th>
                            <th class="py-4 px-6 text-xs font-bold text-slate-400 uppercase tracking-widest">Date</th>
                            <th class="py-4 px-6 text-xs font-bold text-slate-400 uppercase tracking-widest">Duration</th>
                            <th class="py-4 px-6 text-xs font-bold text-slate-400 uppercase tracking-widest">Earnings</th>
                            <th class="py-4 px-6 text-xs font-bold text-slate-400 uppercase tracking-widest">Status</th>
                            <th class="py-4 px-6 text-xs font-bold text-slate-400 uppercase tracking-widest text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
                        @foreach($chats as $chat)
                            <tr class="hover:bg-white/5 transition-colors">
                                <td class="py-4 px-6">
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-yellow-500/10 text-yellow-500 font-mono text-xs font-bold">
                                        #{{ $chat->id }}
                                    </span>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-full overflow-hidden bg-slate-800 border border-white/10">
                                            @if($chat->user->avatar)
                                                <img src="{{ asset('storage/' . $chat->user->avatar) }}" class="w-full h-full object-cover">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center text-slate-500 font-bold text-xs">
                                                    {{ substr($chat->user->name, 0, 2) }}
                                                </div>
                                            @endif
                                        </div>
                                        <span class="font-bold text-slate-200">{{ $chat->user->name }}</span>
                                    </div>
                                </td>
                                <td class="py-4 px-6">
                                    <span class="text-sm font-medium text-slate-400">
                                        {{ $chat->created_at->format('d M, Y h:i A') }}
                                    </span>
                                </td>
                                <td class="py-4 px-6">
                                    <span class="text-sm font-medium text-slate-400">
                                        @if($chat->end_time)
                                            {{ $chat->start_time->diff($chat->end_time)->format('%I:%S') }} mins
                                        @else
                                            -
                                        @endif
                                    </span>
                                </td>
                                <td class="py-4 px-6">
                                    <span class="font-bold text-emerald-400">₹{{ number_format($chat->total_cost, 2) }}</span>
                                </td>
                                <td class="py-4 px-6">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide
                                        {{ $chat->status === 'ended' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-yellow-500/10 text-yellow-500' }}">
                                        {{ ucfirst($chat->status) }}
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="{{ route('astrologer.chat.room', $chat->id) }}" 
                                            class="p-2.5 rounded-xl bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500 hover:text-slate-950 transition-all shadow-lg shadow-yellow-500/5"
                                            title="View Chat">
                                            <i data-lucide="message-square" class="w-5 h-5"></i>
                                        </a>
                                        
                                        @if($chat->review)
                                            <button 
                                                @click="$dispatch('open-review-modal', { review: {{ json_encode([
                                                    'rating' => $chat->review->rating,
                                                    'review' => $chat->review->review,
                                                    'user_name' => $chat->user->name,
                                                    'created_at' => $chat->review->created_at->format('d M, Y')
                                                ]) }} })"
                                                class="p-2.5 rounded-xl bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500 hover:text-white transition-all shadow-lg shadow-emerald-500/5"
                                                title="View Review">
                                                <i data-lucide="star" class="w-5 h-5"></i>
                                            </button>
                                        @else
                                            <span class="text-xs text-slate-500 italic px-2">No Review</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="mt-6">
            {{ $chats->links() }}
        </div>
    @else
        <div class="glass-card rounded-2xl p-12 text-center border-white/5">
            <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4">
                <i data-lucide="message-square" class="w-8 h-8 text-slate-500"></i>
            </div>
            <h3 class="text-lg font-bold text-white mb-2">No Chats Yet</h3>
            <p class="text-slate-500">Chats with clients will appear here.</p>
        </div>
    @endif

    <!-- Review Modal -->
    <div x-data="{ 
        open: false, 
        review: null,
        init() {
            this.$watch('open', value => {
                if (value) {
                    document.body.style.overflow = 'hidden';
                } else {
                    document.body.style.overflow = '';
                }
            });
        }
    }" 
    @open-review-modal.window="review = $event.detail.review; open = true"
    @keydown.escape.window="open = false"
    x-show="open" 
    x-cloak
    class="fixed inset-0 z-50 overflow-y-auto" 
    style="display: none;">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity" @click="open = false"></div>
        
        <!-- Modal -->
        <div class="flex min-h-full items-center justify-center p-4">
            <div @click.away="open = false" 
                x-show="open"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                class="relative glass-card rounded-3xl p-8 w-full max-w-md border border-white/10 shadow-2xl">
                
                <!-- Close Button -->
                <button @click="open = false" class="absolute top-4 right-4 p-2 rounded-xl hover:bg-white/5 text-slate-400 hover:text-white transition-colors">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>

                <!-- Modal Content -->
                <div class="space-y-6">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 rounded-full bg-emerald-500/10 flex items-center justify-center">
                            <i data-lucide="star" class="w-6 h-6 text-emerald-500"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-white">Client Review</h3>
                            <p class="text-sm text-slate-400" x-text="review?.user_name"></p>
                        </div>
                    </div>

                    <!-- Rating -->
                    <div class="flex items-center gap-2">
                        <template x-for="i in 5" :key="i">
                            <i data-lucide="star" 
                                class="w-5 h-5 transition-colors"
                                :class="i <= (review?.rating || 0) ? 'text-yellow-500 fill-yellow-500' : 'text-slate-700'"></i>
                        </template>
                        <span class="text-lg font-bold text-white ml-2" x-text="review?.rating + '/5'"></span>
                    </div>

                    <!-- Review Text -->
                    <div class="bg-white/5 rounded-2xl p-6 border border-white/5">
                        <p class="text-slate-300 leading-relaxed" x-text="review?.review || 'No review text provided.'"></p>
                    </div>

                    <!-- Date -->
                    <div class="flex items-center gap-2 text-sm text-slate-500">
                        <i data-lucide="calendar" class="w-4 h-4"></i>
                        <span x-text="review?.created_at"></span>
                    </div>

                    <!-- Close Button -->
                    <button @click="open = false" 
                        class="w-full py-3 px-4 bg-yellow-500 hover:bg-yellow-400 text-slate-900 font-bold rounded-xl transition-all shadow-lg shadow-yellow-500/20">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection