@extends('front.layouts.app')

@section('title', 'Chat Room')

@section('content')
    <div class="min-h-screen bg-slate-950 flex flex-col pt-16" x-data="chatRoom()">
        <!-- Chat Header -->
        <header class="bg-slate-900 border-b border-white/5 px-6 py-4 flex items-center justify-between sticky top-16 z-20">
            <div class="flex items-center gap-4">
                <div class="relative">
                    <div class="w-10 h-10 rounded-full overflow-hidden border border-white/10">
                        <img src="{{ asset('storage/' . ($isAstrologer ? $session->user->avatar : $session->astrologer->astrologerDetail->profile_pic)) }}"
                            class="w-full h-full object-cover">
                    </div>
                    <div
                        class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900">
                    </div>
                </div>
                <div>
                    <h3 class="font-bold text-white text-sm">
                        {{ $isAstrologer ? $session->user->name : $session->astrologer->name }}
                    </h3>
                    <p class="text-[10px] text-slate-400 font-medium uppercase tracking-wider">
                        {{ $isAstrologer ? 'Client' : 'Astrologer' }} • ₹{{ $session->rate_per_minute }}/min
                    </p>
                </div>
            </div>

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

                <button @click="endChat"
                    class="bg-red-500/10 hover:bg-red-500/20 text-red-500 border border-red-500/20 px-4 py-2 rounded-xl text-xs font-bold transition-colors">
                    End Chat
                </button>
            </div>
        </header>

        <!-- Chat Messages Area -->
        <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-messages">
            @foreach($session->messages as $message)
                <div class="flex {{ $message->sender_id === auth()->id() ? 'justify-end' : 'justify-start' }}">
                    <div
                        class="max-w-[80%] {{ $message->sender_id === auth()->id() ? 'bg-yellow-500 text-slate-900 rounded-tr-none' : 'bg-slate-800 text-slate-200 rounded-tl-none' }} px-5 py-3 rounded-2xl text-sm font-medium leading-relaxed shadow-lg">
                        @if(str_starts_with($message->message, 'IMAGE:'))
                            <img src="{{ substr($message->message, 6) }}"
                                class="rounded-lg max-w-full cursor-zoom-in hover:opacity-90 transition-opacity"
                                @click="previewImage('{{ substr($message->message, 6) }}')">
                        @else
                            <p>{{ $message->message }}</p>
                        @endif
                        <p
                            class="text-[10px] mt-1 opacity-70 {{ $message->sender_id === auth()->id() ? 'text-slate-800' : 'text-slate-400' }} text-right">
                            {{ $message->created_at->format('h:i A') }}
                        </p>
                    </div>
                </div>
            @endforeach

            <!-- Template for new messages -->
            <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-[80%] px-5 py-3 rounded-2xl text-sm font-medium leading-relaxed shadow-lg"
                        :class="msg.sender_id === {{ auth()->id() }} ? 'bg-yellow-500 text-slate-900 rounded-tr-none' : 'bg-slate-800 text-slate-200 rounded-tl-none'">
                        <template x-if="msg.message.startsWith('IMAGE:')">
                            <img :src="msg.message.substring(6)"
                                class="rounded-lg max-w-full cursor-zoom-in hover:opacity-90 transition-opacity"
                                @click="previewImage(msg.message.substring(6))">
                        </template>
                        <template x-if="!msg.message.startsWith('IMAGE:')">
                            <p x-text="msg.message"></p>
                        </template>
                        <p class="text-[10px] mt-1 opacity-70 text-right"
                            :class="msg.sender_id === {{ auth()->id() }} ? 'text-slate-800' : 'text-slate-400'"
                            x-text="new Date(msg.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})">
                        </p>
                    </div>
                </div>
            </template>
        </div>

        <!-- Input Area -->
        <div class="bg-slate-900 border-t border-white/5 p-4">
            <form @submit.prevent="sendMessage" class="flex items-end gap-2 max-w-4xl mx-auto">
                <div
                    class="flex-1 bg-slate-800 rounded-2xl p-2 border border-white/5 focus-within:border-yellow-500/50 transition-colors">
                    <textarea x-model="messageInput" @keydown.enter.prevent="sendMessage" placeholder="Type your message..."
                        class="w-full bg-transparent border-none text-slate-200 focus:ring-0 placeholder:text-slate-500 resize-none h-12 py-3 px-2"></textarea>
                </div>
                <button type="submit" :disabled="!messageInput.trim()"
                    class="w-12 h-12 bg-yellow-500 hover:bg-yellow-400 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl flex items-center justify-center text-slate-900 transition-all shadow-lg shadow-yellow-500/10">
                    <i data-lucide="send" class="w-5 h-5 -ml-0.5 mt-0.5"></i>
                </button>
            </form>
        </div>
        <!-- Image Preview Modal (Lightbox) -->
        <div x-show="previewUrl" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/95 backdrop-blur-md"
            @click="previewUrl = null" @keydown.escape.window="previewUrl = null" style="display: none;">

            <div class="relative max-w-5xl w-full h-full flex items-center justify-center">
                <button @click="previewUrl = null"
                    class="absolute top-0 right-0 m-4 text-white/50 hover:text-white transition-colors bg-white/10 rounded-full p-2">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
                <img :src="previewUrl"
                    class="max-w-full max-h-full object-contain rounded-xl shadow-2xl border border-white/10">
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('chatRoom', () => ({
                    sessionId: {{ $session->id }},
                    previewUrl: null,
                    elapsedSeconds: {{ now()->diffInSeconds($session->start_time) }},
                    timerInterval: null,
                    messageInput: '',
                    newMessages: [],
                    walletBalance: {{ $isAstrologer ? 999999 : auth()->user()->wallet_balance }},
                    ratePerMinute: {{ $session->rate_per_minute }},
                    maxDurationSeconds: 0,
                    isAstrologer: {{ $isAstrologer ? 'true' : 'false' }},

                    init() {
                        // Initialize Timer
                        this.timerInterval = setInterval(() => {
                            this.elapsedSeconds++;
                            this.checkBalance();
                        }, 1000);

                        // Calculate Max Duration for User
                        if (!this.isAstrologer) {
                            this.maxDurationSeconds = (this.walletBalance / this.ratePerMinute) * 60;
                        }

                        // Scroll to bottom
                        this.scrollToBottom();

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

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

                        // Warn if 1 minute left
                        if (!this.isAstrologer && (this.maxDurationSeconds - this.elapsedSeconds) === 60) {
                            // Could show a toast warning here
                            console.log('Low Balance Warning');
                        }
                    },

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

                    sendMessage() {
                        if (!this.messageInput.trim()) return;

                        const msg = this.messageInput;
                        this.messageInput = ''; // Clear early

                        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 => {
                            //    // Message is added via Echo listener, but we could add optimistically here too
                            // })
                            .catch(err => console.error(err));
                    },

                    endChat() {
                        if (!confirm('Are you sure you want to end this 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 => {
                                if (this.isAstrologer) {
                                    window.location.href = "{{ route('astrologer.dashboard') }}";
                                } else {
                                    window.location.href = "{{ route('home') }}";
                                }
                            });
                    },

                    previewImage(url) {
                        this.previewUrl = url;
                        this.$nextTick(() => lucide.createIcons());
                    },

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