@extends('user.layouts.app')

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

@section('content')
    <div class="h-[calc(100vh-120px)] flex flex-col" x-data="chatRoom()">
        <!-- Chat Header -->
        <header class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between rounded-t-xl">
            <div class="flex items-center gap-4">
                <div class="relative">
                    <div class="w-12 h-12 rounded-full overflow-hidden border border-gray-200 shadow-sm">
                        @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-xs font-bold text-slate-500">{{ substr($session->astrologer->name, 0, 2) }}</span>
                            </div>
                        @endif
                    </div>
                    <div
                        class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-500 rounded-full border-2 border-white">
                    </div>
                </div>
                <div>
                    <h3 class="font-bold text-slate-800 text-base">{{ $session->astrologer->name }}</h3>
                    <p class="text-xs text-slate-500 font-medium uppercase tracking-wide">
                        Rate: ₹{{ $session->rate_per_minute }}/min
                    </p>
                </div>
            </div>

            <div class="flex items-center gap-6">
                <div class="text-right">
                    <p class="text-[10px] text-slate-400 uppercase font-bold tracking-widest mb-0.5">Time Elapsed</p>
                    <div class="text-xl font-mono font-bold text-purple-600" x-text="formatTime(elapsedSeconds)">00:00</div>
                </div>

                <button @click="endChat" :disabled="!isActive"
                    class="bg-red-50 hover:bg-red-100 text-red-600 border border-red-200 px-5 py-2.5 rounded-xl text-xs font-bold transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
                    End Chat
                </button>
            </div>
        </header>

        <!-- Chat Messages Area -->
        <div class="flex-1 overflow-y-auto p-6 space-y-6 bg-slate-50 border-x border-gray-200 scroll-smooth"
            id="chat-messages">
            @foreach($session->messages as $message)
                <div class="flex {{ $message->sender_id === auth()->id() ? 'justify-end' : 'justify-start' }}">
                    <div
                        class="max-w-[75%] {{ $message->sender_id === auth()->id() ? 'bg-purple-600 text-white rounded-tr-none shadow-purple-500/20' : 'bg-white text-slate-700 rounded-tl-none border border-gray-100 shadow-sm' }} px-6 py-4 rounded-2xl text-sm font-medium leading-relaxed shadow-lg">
                        <p>{{ $message->message }}</p>
                        <p
                            class="text-[10px] mt-1.5 opacity-80 {{ $message->sender_id === auth()->id() ? 'text-purple-100' : 'text-slate-400' }} text-right font-medium">
                            {{ $message->created_at->format('h:i A') }}
                        </p>
                    </div>
                </div>
            @endforeach

            <template x-for="msg in newMessages" :key="msg.id">
                <div class="flex" :class="msg.sender_id === {{ auth()->id() }} ? 'justify-end' : 'justify-start'">
                    <div class="max-w-[75%] px-6 py-4 rounded-2xl text-sm font-medium leading-relaxed shadow-lg"
                        :class="msg.sender_id === {{ auth()->id() }} ? 'bg-purple-600 text-white rounded-tr-none shadow-purple-500/20' : 'bg-white text-slate-700 rounded-tl-none border border-gray-100 shadow-sm'">
                        <p x-text="msg.message"></p>
                        <p class="text-[10px] mt-1.5 opacity-80 text-right font-medium"
                            :class="msg.sender_id === {{ auth()->id() }} ? 'text-purple-100' : 'text-slate-400'"
                            x-text="new Date(msg.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})">
                        </p>
                    </div>
                </div>
            </template>
        </div>

        <!-- Input Area, shown when active -->
        <div class="bg-white border border-gray-200 rounded-b-xl p-5 shadow-sm" x-show="isActive" x-cloak
            style="display: {{ $session->status === 'active' ? 'block' : 'none' }};">
            <form @submit.prevent="sendMessage" class="flex items-end gap-3">
                <div
                    class="flex-1 bg-slate-50 rounded-2xl p-2 border border-gray-200 focus-within:border-purple-500 focus-within:ring-4 focus-within:ring-purple-500/10 transition-all">
                    <textarea x-model="messageInput" @keydown.enter.prevent="sendMessage"
                        placeholder="Type your message here..."
                        class="w-full bg-transparent border-none text-slate-700 focus:ring-0 placeholder:text-slate-400 resize-none h-12 py-3 px-3 text-sm font-medium"></textarea>
                </div>
                <button type="submit" :disabled="!messageInput.trim()"
                    class="w-14 h-14 bg-purple-600 hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl flex items-center justify-center text-white transition-all shadow-lg shadow-purple-600/20 hover:scale-105 active:scale-95">
                    <i data-lucide="send" class="w-6 h-6 -ml-0.5 mt-0.5"></i>
                </button>
            </form>
        </div>

        <!-- Chat Ended Message -->
        <div class="bg-slate-100 border border-gray-200 rounded-b-xl p-6 text-center" x-show="!isActive" x-cloak
            style="display: {{ $session->status !== 'active' ? 'block' : 'none' }};">
            <div class="flex items-center justify-center gap-3 text-slate-500">
                <i data-lucide="message-square-off" class="w-5 h-5"></i>
                <p class="font-semibold">This chat session has ended</p>
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
    @endpush

    <script>
        // This script must run BEFORE Alpine.js initializes
        document.addEventListener('alpine:init', () => {
            Alpine.data('chatRoom', () => ({
                sessionId: {{ $session->id }},
                // Calculate based on end_time if set, otherwise relative to now
                elapsedSeconds: {{ $session->end_time ? $session->start_time->diffInSeconds($session->end_time) : $session->start_time->diffInSeconds(now()) }},
                timerInterval: null,
                messageInput: '',
                newMessages: [],
                walletBalance: {{ auth()->user()->wallet_balance }},
                ratePerMinute: {{ $session->rate_per_minute }},
                maxDurationSeconds: 0,
                isActive: {{ $session->status === 'active' ? 'true' : 'false' }},

                init() {
                    console.log('=== Chat Room Initialized ===');
                    console.log('Chat Status:', this.isActive);
                    console.log('Session ID:', this.sessionId);
                    console.log('Session Status from Server:', '{{ $session->status }}');
                    console.log('Elapsed Seconds:', this.elapsedSeconds);
                    console.log('Rate Per Minute:', this.ratePerMinute);

                    if (this.isActive) {
                        console.log('Starting timer...');
                        this.timerInterval = setInterval(() => {
                            this.elapsedSeconds++;
                            this.checkBalance();
                        }, 1000);
                    } else {
                        console.log('Chat is not active, timer not started');
                    }

                    this.maxDurationSeconds = (this.walletBalance / this.ratePerMinute) * 60;
                    this.scrollToBottom();

                    // Reinitialize Lucide icons after Alpine renders
                    this.$nextTick(() => {
                        if (typeof lucide !== 'undefined') {
                            lucide.createIcons();
                            console.log('Lucide icons reinitialized');
                        }
                    });

                    if (window.Echo) {
                        window.Echo.private(`chat.${this.sessionId}`)
                            .listen('ChatMessageSent', (e) => {
                                this.newMessages.push(e.message);
                                this.$nextTick(() => this.scrollToBottom());
                            });
                    }
                },

                checkBalance() {
                    if (this.elapsedSeconds >= this.maxDurationSeconds) {
                        // alert('Wallet balance exhausted. Ending chat.');
                        this.endChat();
                    }
                },

                formatTime(totalSeconds) {
                    const hours = Math.floor(totalSeconds / 3600);
                    const minutes = Math.floor((totalSeconds % 3600) / 60);
                    const seconds = Math.floor(totalSeconds % 60);
                    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
                },

                sendMessage() {
                    if (!this.messageInput.trim()) return;
                    const msg = this.messageInput;
                    this.messageInput = '';

                    fetch(`/chat/${this.sessionId}/send`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                        body: JSON.stringify({ message: msg })
                    })
                        .then(res => res.json())
                        .then(data => {
                            if (data.status === 'sent') {
                                this.newMessages.push(data.message);
                                this.$nextTick(() => this.scrollToBottom());
                            }
                        })
                        .catch(err => console.error(err));
                },

                endChat() {
                    if (!confirm('End chat?')) return;
                    fetch(`/chat/${this.sessionId}/end`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': "{{ csrf_token() }}" }
                    }).then(res => res.json()).then(data => {
                        window.location.href = "{{ route('user.dashboard') }}";
                    });
                },

                scrollToBottom() {
                    const container = document.getElementById('chat-messages');
                    container.scrollTop = container.scrollHeight;
                }
            }));
        });
    </script>
@endsection