@extends('layouts.app')

@section('title', 'WhatsApp Conversations')
@section('page-title', 'WhatsApp Conversations')

@section('content')
<div class="h-full flex" x-data="{ selectedConversation: null, showMobileChat: false }">
    <!-- Conversations List -->
    <div class="w-full md:w-1/3 bg-white border-r border-gray-200 flex flex-col" 
         :class="{ 'hidden md:flex': showMobileChat }">
        
        <!-- Header -->
        <div class="p-4 border-b border-gray-200">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-gray-900">Conversations</h2>
                <div class="flex items-center space-x-2">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <i class="fab fa-whatsapp mr-1"></i>
                        Connected
                    </span>
                </div>
            </div>
            
            <!-- Search -->
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-search text-gray-400"></i>
                </div>
                <input type="text" 
                       id="conversation-search" 
                       class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 text-sm"
                       placeholder="Search conversations..."
                       onkeyup="filterConversations()">
            </div>
        </div>

        <!-- Filters -->
        <div class="p-4 border-b border-gray-200 bg-gray-50">
            <div class="flex space-x-2 text-sm">
                <button onclick="filterByStatus('all')" 
                        class="filter-btn px-3 py-1 rounded-full bg-primary-100 text-primary-700 font-medium">
                    All
                </button>
                <button onclick="filterByStatus('unread')" 
                        class="filter-btn px-3 py-1 rounded-full text-gray-600 hover:bg-gray-200">
                    Unread
                </button>
                <button onclick="filterByStatus('business')" 
                        class="filter-btn px-3 py-1 rounded-full text-gray-600 hover:bg-gray-200">
                    Business
                </button>
                <button onclick="filterByStatus('assigned')" 
                        class="filter-btn px-3 py-1 rounded-full text-gray-600 hover:bg-gray-200">
                    Assigned
                </button>
            </div>
        </div>

        <!-- Conversations List -->
        <div class="flex-1 overflow-y-auto">
            <div id="conversations-list" class="divide-y divide-gray-200">
                <!-- Conversations will be loaded here -->
            </div>
            
            <!-- Loading State -->
            <div id="conversations-loading" class="flex items-center justify-center py-8">
                <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
                <span class="ml-2 text-gray-600 text-sm">Loading conversations...</span>
            </div>

            <!-- Empty State -->
            <div id="conversations-empty" class="text-center py-8 hidden">
                <i class="fab fa-whatsapp text-gray-400 text-4xl mb-3"></i>
                <p class="text-gray-500 text-sm">No conversations found</p>
            </div>
        </div>
    </div>

    <!-- Chat Area -->
    <div class="flex-1 flex flex-col" 
         :class="{ 'hidden md:flex': !showMobileChat }">
        
        <!-- Chat Header -->
        <div id="chat-header" class="p-4 border-b border-gray-200 bg-white hidden">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <!-- Mobile back button -->
                    <button @click="showMobileChat = false" 
                            class="md:hidden mr-3 p-2 text-gray-400 hover:text-gray-600">
                        <i class="fas fa-arrow-left"></i>
                    </button>
                    
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                            <i class="fab fa-whatsapp text-green-600"></i>
                        </div>
                        <div>
                            <h3 id="chat-contact-name" class="text-sm font-medium text-gray-900"></h3>
                            <p id="chat-contact-info" class="text-xs text-gray-500"></p>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center space-x-2">
                    <button onclick="assignConversation()" 
                            class="p-2 text-gray-400 hover:text-gray-600" 
                            title="Assign to agent">
                        <i class="fas fa-user-plus"></i>
                    </button>
                    <button onclick="closeConversation()" 
                            class="p-2 text-gray-400 hover:text-gray-600" 
                            title="Close conversation">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Messages Area -->
        <div id="messages-container" class="flex-1 overflow-y-auto p-4 bg-gray-50 hidden">
            <div id="messages-list" class="space-y-4">
                <!-- Messages will be loaded here -->
            </div>
        </div>

        <!-- Message Input -->
        <div id="message-input-area" class="p-4 border-t border-gray-200 bg-white hidden">
            <div class="flex items-end space-x-3">
                <div class="flex-1">
                    <textarea id="message-input" 
                              rows="1" 
                              class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 resize-none"
                              placeholder="Type a message..."
                              onkeypress="handleMessageKeyPress(event)"></textarea>
                </div>
                <button onclick="sendMessage()" 
                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>

        <!-- Welcome State -->
        <div id="welcome-state" class="flex-1 flex items-center justify-center bg-gray-50">
            <div class="text-center">
                <i class="fab fa-whatsapp text-gray-400 text-6xl mb-4"></i>
                <h3 class="text-lg font-medium text-gray-900 mb-2">WhatsApp Web</h3>
                <p class="text-gray-500">Select a conversation to start messaging</p>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions Modal -->
<div id="quick-actions-modal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Quick Actions</h3>
                <div class="space-y-3">
                    <button onclick="createRequirement()" 
                            class="w-full flex items-center px-4 py-3 text-left border border-gray-200 rounded-lg hover:bg-gray-50">
                        <i class="fas fa-clipboard-list text-blue-600 mr-3"></i>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Create Requirement</p>
                            <p class="text-xs text-gray-500">Convert this conversation to a requirement</p>
                        </div>
                    </button>
                    <button onclick="addToBuyers()" 
                            class="w-full flex items-center px-4 py-3 text-left border border-gray-200 rounded-lg hover:bg-gray-50">
                        <i class="fas fa-user-plus text-green-600 mr-3"></i>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Add to Buyers</p>
                            <p class="text-xs text-gray-500">Create a buyer profile from this contact</p>
                        </div>
                    </button>
                    <button onclick="sendTemplate()" 
                            class="w-full flex items-center px-4 py-3 text-left border border-gray-200 rounded-lg hover:bg-gray-50">
                        <i class="fas fa-file-alt text-purple-600 mr-3"></i>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Send Template</p>
                            <p class="text-xs text-gray-500">Send a pre-defined template message</p>
                        </div>
                    </button>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button onclick="closeQuickActionsModal()" 
                        class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let conversations = [];
let selectedConversationId = null;
let currentFilter = 'all';
let searchQuery = '';

// Load conversations on page load
document.addEventListener('DOMContentLoaded', function() {
    loadConversations();
    
    // Auto-refresh every 30 seconds
    setInterval(loadConversations, 30000);
});

// Load conversations
function loadConversations() {
    const params = new URLSearchParams({
        filter: currentFilter,
        search: searchQuery
    });

    fetch(`/api/whatsapp/conversations?${params}`)
        .then(response => response.json())
        .then(data => {
            conversations = data.data || [];
            renderConversations();
            document.getElementById('conversations-loading').classList.add('hidden');
        })
        .catch(error => {
            console.error('Error loading conversations:', error);
            document.getElementById('conversations-loading').classList.add('hidden');
            document.getElementById('conversations-empty').classList.remove('hidden');
        });
}

// Render conversations list
function renderConversations() {
    const container = document.getElementById('conversations-list');
    
    if (conversations.length === 0) {
        document.getElementById('conversations-empty').classList.remove('hidden');
        container.innerHTML = '';
        return;
    }

    document.getElementById('conversations-empty').classList.add('hidden');
    
    container.innerHTML = conversations.map(conversation => {
        const lastMessage = conversation.last_message_at ? new Date(conversation.last_message_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) : '';
        const isSelected = selectedConversationId === conversation.id;
        
        return `
            <div class="p-4 hover:bg-gray-50 cursor-pointer ${isSelected ? 'bg-blue-50 border-r-2 border-blue-500' : ''}" 
                 onclick="selectConversation(${conversation.id})">
                <div class="flex items-center space-x-3">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                            <i class="fab fa-whatsapp text-green-600"></i>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between">
                            <p class="text-sm font-medium text-gray-900 truncate">
                                ${conversation.contact_name || conversation.phone_number}
                            </p>
                            <p class="text-xs text-gray-500">${lastMessage}</p>
                        </div>
                        <div class="flex items-center justify-between mt-1">
                            <p class="text-sm text-gray-500 truncate">
                                ${conversation.buyer ? conversation.buyer.business_name : 'Unknown Buyer'}
                            </p>
                            <div class="flex items-center space-x-1">
                                ${conversation.unread_messages > 0 ? `<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">${conversation.unread_messages}</span>` : ''}
                                ${conversation.is_business_inquiry ? '<i class="fas fa-briefcase text-blue-500 text-xs" title="Business Inquiry"></i>' : ''}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

// Select conversation
function selectConversation(conversationId) {
    selectedConversationId = conversationId;
    const conversation = conversations.find(c => c.id === conversationId);
    
    if (!conversation) return;

    // Update UI
    renderConversations(); // Re-render to show selection
    showChatArea(conversation);
    loadMessages(conversationId);
    
    // Show mobile chat view
    if (window.innerWidth < 768) {
        document.querySelector('[x-data]').__x.$data.showMobileChat = true;
    }
}

// Show chat area
function showChatArea(conversation) {
    document.getElementById('welcome-state').classList.add('hidden');
    document.getElementById('chat-header').classList.remove('hidden');
    document.getElementById('messages-container').classList.remove('hidden');
    document.getElementById('message-input-area').classList.remove('hidden');
    
    // Update header
    document.getElementById('chat-contact-name').textContent = conversation.contact_name || conversation.phone_number;
    document.getElementById('chat-contact-info').textContent = conversation.buyer ? conversation.buyer.business_name : conversation.phone_number;
}

// Load messages for conversation
function loadMessages(conversationId) {
    fetch(`/api/whatsapp/conversations/${conversationId}/messages`)
        .then(response => response.json())
        .then(data => {
            renderMessages(data.data || []);
            markAsRead(conversationId);
        })
        .catch(error => {
            console.error('Error loading messages:', error);
        });
}

// Render messages
function renderMessages(messages) {
    const container = document.getElementById('messages-list');
    
    container.innerHTML = messages.map(message => {
        const isOutbound = message.direction === 'outbound';
        const time = new Date(message.sent_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        
        return `
            <div class="flex ${isOutbound ? 'justify-end' : 'justify-start'}">
                <div class="max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${isOutbound ? 'bg-green-500 text-white' : 'bg-white border border-gray-200'}">
                    <p class="text-sm">${message.content || '[Media]'}</p>
                    <p class="text-xs mt-1 ${isOutbound ? 'text-green-100' : 'text-gray-500'}">${time}</p>
                </div>
            </div>
        `;
    }).join('');
    
    // Scroll to bottom
    container.scrollTop = container.scrollHeight;
}

// Send message
function sendMessage() {
    const input = document.getElementById('message-input');
    const message = input.value.trim();
    
    if (!message || !selectedConversationId) return;
    
    fetch(`/api/whatsapp/conversations/${selectedConversationId}/messages`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ message: message })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            input.value = '';
            loadMessages(selectedConversationId);
            showToast('Message sent successfully', 'success');
        } else {
            showToast('Failed to send message', 'error');
        }
    })
    .catch(error => {
        console.error('Error sending message:', error);
        showToast('An error occurred', 'error');
    });
}

// Handle message input key press
function handleMessageKeyPress(event) {
    if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        sendMessage();
    }
}

// Mark conversation as read
function markAsRead(conversationId) {
    fetch(`/api/whatsapp/conversations/${conversationId}/mark-read`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    });
}

// Filter conversations
function filterConversations() {
    searchQuery = document.getElementById('conversation-search').value;
    loadConversations();
}

// Filter by status
function filterByStatus(status) {
    currentFilter = status;
    
    // Update filter buttons
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.className = 'filter-btn px-3 py-1 rounded-full text-gray-600 hover:bg-gray-200';
    });
    event.target.className = 'filter-btn px-3 py-1 rounded-full bg-primary-100 text-primary-700 font-medium';
    
    loadConversations();
}

// Quick actions
function createRequirement() {
    if (!selectedConversationId) return;
    
    window.location.href = `/requirements/create?conversation_id=${selectedConversationId}`;
}

function addToBuyers() {
    if (!selectedConversationId) return;
    
    const conversation = conversations.find(c => c.id === selectedConversationId);
    if (conversation) {
        window.location.href = `/buyers/create?phone=${encodeURIComponent(conversation.phone_number)}&name=${encodeURIComponent(conversation.contact_name || '')}`;
    }
}

function sendTemplate() {
    // Implementation for sending template messages
    showToast('Template feature coming soon', 'info');
}

function assignConversation() {
    // Implementation for assigning conversation to agent
    showToast('Assignment feature coming soon', 'info');
}

function closeConversation() {
    if (!selectedConversationId) return;
    
    if (confirm('Are you sure you want to close this conversation?')) {
        fetch(`/api/whatsapp/conversations/${selectedConversationId}/close`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('Conversation closed', 'success');
                loadConversations();
                selectedConversationId = null;
                document.getElementById('welcome-state').classList.remove('hidden');
                document.getElementById('chat-header').classList.add('hidden');
                document.getElementById('messages-container').classList.add('hidden');
                document.getElementById('message-input-area').classList.add('hidden');
            }
        });
    }
}

function closeQuickActionsModal() {
    document.getElementById('quick-actions-modal').classList.add('hidden');
}

// Auto-resize textarea
document.getElementById('message-input').addEventListener('input', function() {
    this.style.height = 'auto';
    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
});
</script>
@endpush