{% extends "base.html" %}

{% block title %}Conversations - SMS Campaign Manager{% endblock %}

{% block content %}
<div x-data="conversationsApp" x-init="init()" class="p-6">
    <div class="flex h-[calc(100vh-200px)]">

        <!-- Left Panel: Conversation List -->
        <div class="w-1/3 border-r border-gray-200 overflow-hidden flex flex-col">

            <!-- Search and Controls Header -->
            <div class="p-4 border-b border-gray-200 bg-white">
                <div class="flex items-center gap-2 mb-3">
                    <div class="flex-1 relative">
                        <input
                            type="text"
                            x-model="conversationSearch"
                            @input="searchConversations()"
                            placeholder="Search conversations..."
                            class="w-full pl-10 pr-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                        >
                        <svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                    <button
                        @click="syncAllConversations()"
                        class="p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                        title="Sync All Conversations"
                        :disabled="syncing"
                    >
                        <svg class="w-4 h-4" :class="{'animate-spin': syncing}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                    </button>
                </div>

                <!-- Filter Tabs -->
                <div class="flex gap-1">
                    <button
                        @click="setFilter('all')"
                        :class="conversationFilter === 'all' ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 hover:bg-gray-200'"
                        class="px-3 py-1.5 rounded-full text-xs font-medium transition-colors"
                    >
                        All
                    </button>
                    <button
                        @click="setFilter('unread')"
                        :class="conversationFilter === 'unread' ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 hover:bg-gray-200'"
                        class="px-3 py-1.5 rounded-full text-xs font-medium transition-colors"
                    >
                        Unread
                        <span x-show="unreadCount > 0" x-text="unreadCount"
                              class="ml-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5"></span>
                    </button>
                    <button
                        @click="setFilter('starred')"
                        :class="conversationFilter === 'starred' ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 hover:bg-gray-200'"
                        class="px-3 py-1.5 rounded-full text-xs font-medium transition-colors"
                    >
                        Starred
                    </button>
                </div>
            </div>

            <!-- Conversation List -->
            <div class="flex-1 overflow-y-auto">
                <div class="divide-y divide-gray-100">
                    <template x-for="conversation in filteredConversations" :key="conversation.phone">
                        <div
                            @click="selectConversation(conversation.phone)"
                            :class="selectedConversation?.phone === conversation.phone ? 'bg-blue-50 border-r-2 border-blue-500' : 'hover:bg-gray-50'"
                            class="p-4 cursor-pointer transition-colors"
                        >
                            <div class="flex items-start gap-3">
                                <!-- Avatar -->
                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center flex-shrink-0 text-white font-semibold">
                                    <span x-text="getInitials(conversation)"></span>
                                </div>

                                <!-- Conversation Info -->
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center justify-between mb-1">
                                        <h4 class="font-semibold text-gray-900 truncate text-sm"
                                            x-text="conversation.contact_name || formatPhone(conversation.phone)">
                                        </h4>
                                        <span class="text-xs text-gray-500" x-text="formatTime(conversation.last_message_time)"></span>
                                    </div>

                                    <div class="flex items-center justify-between">
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm text-gray-600 truncate"
                                               x-text="conversation.message_count + ' messages'"></p>
                                        </div>
                                        <div class="flex items-center gap-1 ml-2">
                                            <!-- Star Icon -->
                                            <svg x-show="conversation.is_starred" class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                            </svg>

                                            <!-- Unread Badge -->
                                            <span x-show="conversation.unread_count > 0"
                                                  x-text="conversation.unread_count"
                                                  class="bg-red-500 text-white text-xs rounded-full px-2 py-0.5 min-w-[18px] text-center">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                    <!-- Empty State -->
                    <div x-show="filteredConversations.length === 0" class="p-8 text-center">
                        <div class="text-gray-400 mb-2">
                            <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                        </div>
                        <p class="text-gray-500">No conversations found</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Panel: Message View -->
        <div class="flex-1 flex flex-col">
            <!-- Chat Header -->
            <div x-show="selectedConversation" class="border-b border-gray-200 p-4 bg-white">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <!-- Avatar -->
                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-semibold text-sm">
                            <span x-text="selectedConversation ? getInitials(selectedConversation) : ''"></span>
                        </div>

                        <!-- Contact Info -->
                        <div>
                            <h3 class="font-semibold text-gray-900"
                                x-text="selectedConversation?.contact_name || formatPhone(selectedConversation?.phone)">
                            </h3>
                            <p class="text-sm text-gray-500" x-text="formatPhone(selectedConversation?.phone)"></p>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center gap-2">
                        <button
                            @click="toggleStar(selectedConversation?.phone)"
                            class="p-2 rounded-full hover:bg-gray-100 transition-colors"
                            :class="selectedConversation?.is_starred ? 'text-yellow-500' : 'text-gray-400'"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </button>

                        <button
                            @click="syncConversation(selectedConversation?.phone)"
                            class="p-2 rounded-full hover:bg-gray-100 text-gray-400 transition-colors"
                            :disabled="syncing"
                        >
                            <svg class="w-5 h-5" :class="{'animate-spin': syncing}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Messages Area -->
            <div class="flex-1 overflow-y-auto p-4 bg-gray-50" x-ref="messagesContainer">
                <div x-show="!selectedConversation" class="flex items-center justify-center h-full">
                    <div class="text-center">
                        <div class="text-gray-400 mb-4">
                            <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Select a conversation</h3>
                        <p class="text-gray-500">Choose a conversation from the left to start messaging</p>
                    </div>
                </div>

                <!-- Message List -->
                <div x-show="selectedConversation" class="space-y-4">
                    <template x-for="message in messages" :key="message.id">
                        <div :class="message.direction === 'outbound' ? 'flex justify-end' : 'flex justify-start'">
                            <div :class="message.direction === 'outbound'
                                         ? 'bg-blue-500 text-white max-w-xs lg:max-w-md rounded-l-2xl rounded-br-2xl'
                                         : 'bg-white border max-w-xs lg:max-w-md rounded-r-2xl rounded-bl-2xl'"
                                 class="px-4 py-2 shadow-sm">
                                <p class="text-sm" x-text="message.message"></p>
                                <div class="flex items-center justify-between mt-1">
                                    <span :class="message.direction === 'outbound' ? 'text-blue-100' : 'text-gray-500'"
                                          class="text-xs" x-text="formatMessageTime(message.sent_at || message.timestamp)">
                                    </span>
                                    <span x-show="message.direction === 'outbound'"
                                          :class="getStatusColor(message.status)"
                                          class="text-xs ml-2" x-text="getStatusIcon(message.status)">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </template>

                    <!-- Load More Messages Button -->
                    <div x-show="hasMoreMessages && !loadingMessages" class="text-center py-2">
                        <button
                            @click="loadMoreMessages()"
                            class="text-blue-500 hover:text-blue-600 text-sm font-medium"
                        >
                            Load older messages
                        </button>
                    </div>

                    <!-- Loading Messages -->
                    <div x-show="loadingMessages" class="text-center py-2">
                        <span class="text-gray-500 text-sm">Loading messages...</span>
                    </div>
                </div>
            </div>

            <!-- Message Input -->
            <div x-show="selectedConversation" class="border-t border-gray-200 p-4 bg-white">
                <div class="flex items-end gap-2">
                    <div class="flex-1">
                        <textarea
                            x-model="newMessage"
                            @keydown.enter.prevent="sendMessage()"
                            @keydown.shift.enter="newMessage += '\n'"
                            placeholder="Type a message..."
                            class="w-full resize-none border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                            rows="1"
                            x-ref="messageInput"
                        ></textarea>
                    </div>
                    <button
                        @click="sendMessage()"
                        :disabled="!newMessage.trim() || sendingMessage"
                        class="p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/conversations.js?v={{ cache_version }}"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('conversationsApp', () => conversationsApp());
    });
</script>
{% endblock %}