@extends('astrologer.layouts.app')

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

@section('content')
    <style>
        .cursor-pen {
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3l4 4L7 21H3v-4L17 3z'%3E%3C/path%3E%3C/svg%3E") 0 24, crosshair;
        }

        .cursor-eraser {
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20H7L3 16C2 15 2 13 3 12L13 2L22 11L20 13L12 5L5 12L7 14L15 6L22 13L20 15V20Z'%3E%3C/path%3E%3C/svg%3E") 0 24, cell;
        }
    </style>
    <div class="max-w-4xl mx-auto h-[calc(100vh-140px)] flex flex-col" x-data="chatRoom()">
        <!-- Chat Header -->
        <header
            class="bg-slate-900/50 backdrop-blur-md border border-white/5 rounded-t-2xl px-6 py-4 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div class="relative">
                    <div class="w-10 h-10 rounded-full overflow-hidden border border-white/10">
                        @if($session->user->avatar)
                            <img src="{{ asset('storage/' . $session->user->avatar) }}" class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                                <span class="text-xs font-bold text-slate-500">{{ substr($session->user->name, 0, 2) }}</span>
                            </div>
                        @endif
                    </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">{{ $session->user->name }}</h3>
                    <p class="text-[10px] text-slate-400 font-medium uppercase tracking-wider">
                        Earning: ₹<span x-text="(elapsedSeconds / 60 * ratePerMinute).toFixed(2)">0.00</span>
                    </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">Duration</p>
                    <div class="text-xl font-mono font-bold text-yellow-500" x-text="formatTime(elapsedSeconds)">00:00</div>
                </div>

                <div class="flex items-center gap-2">
                    <button @click="toggleKundli" x-show="isActive"
                        class="bg-yellow-500/10 hover:bg-yellow-500/20 text-yellow-500 border border-yellow-500/20 px-4 py-2 rounded-xl text-xs font-bold transition-colors flex items-center gap-2">
                        <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                        Kundli Notepad
                    </button>

                    <button @click="endChat" x-show="isActive"
                        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 Session
                    </button>
                </div>
            </div>
        </header>

        <!-- Chat Messages Area -->
        <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-900/30 border-x border-white/5 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-[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, hidden if inactive -->
        <div class="bg-slate-900/50 backdrop-blur-md border border-white/5 rounded-b-2xl p-4" x-show="isActive">
            <form @submit.prevent="sendMessage" class="flex items-end gap-2">
                <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>

        <!-- Kundli Notepad Modal -->
        <div x-show="showKundli" 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="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm"
            @keydown.escape.window="showKundli = false" style="display: none;">

            <div class="bg-slate-900 border border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl">
                <div class="p-4 border-b border-white/5 flex items-center justify-between">
                    <h3 class="text-white font-bold flex items-center gap-2">
                        <i data-lucide="edit-3" class="w-4 h-4 text-yellow-500"></i>
                        Kundli Notepad
                    </h3>
                    <div class="flex items-center gap-2">
                        <button @click="shareNotepad" :disabled="sharing"
                            class="text-xs font-bold transition-all px-3 py-1.5 rounded-lg mr-2 flex items-center gap-2"
                            :class="shared ? 'bg-green-500 text-white' : 'bg-yellow-500 text-slate-900 hover:bg-yellow-400'">
                            <span x-text="shared ? 'Shared!' : (sharing ? 'Sharing...' : 'Share with Client')"></span>
                            <i x-show="shared" data-lucide="check" class="w-3.5 h-3.5"></i>
                        </button>
                        <button @click="clearCanvas"
                            class="text-xs text-slate-400 hover:text-white transition-colors px-3 py-1 rounded-lg hover:bg-white/5">
                            Clear All
                        </button>
                        <button @click="showKundli = false" class="text-slate-400 hover:text-white transition-colors p-1">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>

                <div class="p-6 flex flex-col items-center gap-4">
                    <div class="relative bg-white rounded-xl overflow-hidden shadow-inner"
                        style="width: 500px; height: 500px;">
                        <img src="{{ asset('images/blank_kundli.png') }}"
                            class="absolute inset-0 w-full h-full object-contain pointer-events-none opacity-50">
                        <canvas id="kundliCanvas" width="500" height="500" class="relative z-10"
                            :class="tool === 'pen' ? 'cursor-pen' : 'cursor-eraser'"></canvas>
                    </div>

                    <div class="flex items-center gap-4 bg-slate-800/50 p-3 rounded-2xl border border-white/5">
                        <div class="flex items-center gap-2">
                            <button @click="setTool('pen')"
                                :class="tool === 'pen' ? 'bg-yellow-500 text-slate-900' : 'text-slate-400 hover:text-white'"
                                class="p-2 rounded-xl transition-all">
                                <i data-lucide="pen-tool" class="w-5 h-5"></i>
                            </button>
                            <button @click="setTool('eraser')"
                                :class="tool === 'eraser' ? 'bg-yellow-500 text-slate-900' : 'text-slate-400 hover:text-white'"
                                class="p-2 rounded-xl transition-all">
                                <i data-lucide="eraser" class="w-5 h-5"></i>
                            </button>
                        </div>
                        <div class="h-6 w-px bg-white/10"></div>
                        <div class="flex items-center gap-2">
                            <template x-for="c in colors">
                                <button @click="color = c" :style="`background-color: ${c}`"
                                    :class="color === c ? 'ring-2 ring-white ring-offset-2 ring-offset-slate-900' : ''"
                                    class="w-6 h-6 rounded-full transition-all"></button>
                            </template>
                        </div>
                    </div>
                </div>
            </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>
    </div>

    @push('scripts')
        <script>
            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()) }},
                    isActive: {{ $session->status === 'active' ? 'true' : 'false' }},
                    timerInterval: null,
                    messageInput: '',
                    newMessages: [],
                    ratePerMinute: {{ $session->rate_per_minute }},

                    // Kundli Notepad State
                    showKundli: false,
                    previewUrl: null,
                    tool: 'pen',
                    sharing: false,
                    shared: false,
                    color: '#ef4444',
                    colors: ['#000000', '#ef4444', '#3b82f6', '#10b981', '#f59e0b'],
                    canvas: null,
                    ctx: null,
                    isDrawing: false,

                    init() {
                        if (this.isActive) {
                            this.timerInterval = setInterval(() => {
                                this.elapsedSeconds++;
                            }, 1000);
                        }

                        this.scrollToBottom();

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

                        this.$watch('showKundli', value => {
                            if (value) {
                                this.shared = false;
                                this.sharing = false;
                                this.$nextTick(() => {
                                    this.initCanvas();
                                    lucide.createIcons();
                                });
                            }
                        });
                    },

                    toggleKundli() {
                        this.showKundli = !this.showKundli;
                    },

                    initCanvas() {
                        this.canvas = document.getElementById('kundliCanvas');
                        this.ctx = this.canvas.getContext('2d');
                        this.ctx.lineCap = 'round';
                        this.ctx.lineJoin = 'round';
                        this.ctx.lineWidth = 3;

                        const startDrawing = (e) => {
                            this.isDrawing = true;
                            const rect = this.canvas.getBoundingClientRect();
                            const x = (e.clientX || e.touches[0].clientX) - rect.left;
                            const y = (e.clientY || e.touches[0].clientY) - rect.top;
                            this.ctx.beginPath();
                            this.ctx.moveTo(x, y);
                        };

                        const draw = (e) => {
                            if (!this.isDrawing) return;
                            e.preventDefault();
                            const rect = this.canvas.getBoundingClientRect();
                            const x = (e.clientX || e.touches[0].clientX) - rect.left;
                            const y = (e.clientY || e.touches[0].clientY) - rect.top;

                            this.ctx.strokeStyle = this.tool === 'eraser' ? '#ffffff' : this.color;
                            this.ctx.globalCompositeOperation = this.tool === 'eraser' ? 'destination-out' : 'source-over';
                            this.ctx.lineWidth = this.tool === 'eraser' ? 20 : 3;

                            this.ctx.lineTo(x, y);
                            this.ctx.stroke();
                        };

                        const stopDrawing = () => {
                            this.isDrawing = false;
                        };

                        this.canvas.addEventListener('mousedown', startDrawing);
                        this.canvas.addEventListener('mousemove', draw);
                        this.canvas.addEventListener('mouseup', stopDrawing);
                        this.canvas.addEventListener('mouseleave', stopDrawing);

                        this.canvas.addEventListener('touchstart', startDrawing);
                        this.canvas.addEventListener('touchmove', draw);
                        this.canvas.addEventListener('touchend', stopDrawing);
                    },

                    setTool(tool) {
                        this.tool = tool;
                    },

                    clearCanvas() {
                        if (confirm('Clear all drawings?')) {
                            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                        }
                    },

                    shareNotepad() {
                        if (this.sharing) return;
                        this.sharing = true;
                        this.shared = false;

                        const tempCanvas = document.createElement('canvas');
                        tempCanvas.width = 500;
                        tempCanvas.height = 500;
                        const tempCtx = tempCanvas.getContext('2d');

                        // Draw white background
                        tempCtx.fillStyle = '#ffffff';
                        tempCtx.fillRect(0, 0, 500, 500);

                        // Draw the blank kundli image
                        const img = new Image();
                        img.src = "{{ asset('images/blank_kundli.png') }}";
                        img.onload = () => {
                            tempCtx.globalAlpha = 0.5;
                            tempCtx.drawImage(img, 0, 0, 500, 500);
                            tempCtx.globalAlpha = 1.0;

                            // Draw the sketch canvas
                            tempCtx.drawImage(this.canvas, 0, 0);

                            const dataUrl = tempCanvas.toDataURL('image/png');
                            this.sendImageMessage(dataUrl);
                        };
                    },

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

                                    // Show success state
                                    this.sharing = false;
                                    this.shared = true;
                                    this.$nextTick(() => lucide.createIcons());

                                    // Reset button after 3 seconds
                                    setTimeout(() => {
                                        this.shared = false;
                                    }, 3000);
                                }
                            })
                            .catch(err => {
                                console.error(err);
                                this.sharing = false;
                            });
                    },

                    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 session with client?')) 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('astrologer.dashboard') }}";
                        });
                    },

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

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