@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('AI ჩატბოტი') }}</div>

                <div class="card-body">
                    <div id="chat-messages" class="chat-container mb-4">
                        <div class="message system">
                            <p>გამარჯობა! მე ვარ თქვენი AI ასისტენტი. როგორ შემიძლია დაგეხმაროთ დღეს?</p>
                        </div>
                    </div>
                    
                    <form id="chat-form" class="chat-form">
                        @csrf
                        <div class="form-group mb-3">
                            <label for="method-select"><b>ანალიზის მეთოდი:</b></label>
                            <select id="method-select" class="form-control" name="method">
                                <option value="combined">შერეული (ცოდნის გრაფი + ვექტორული ემბედინგები)</option>
                                <option value="knowledge_graph">მხოლოდ ცოდნის გრაფი</option>
                                <option value="vector">მხოლოდ ვექტორული ემბედინგები (RAG)</option>
                            </select>
                            <div id="method-explanation" class="alert alert-info mt-2" style="font-size: 0.95em;"></div>
                        </div>
                        <div class="input-group">
                            <input type="text" id="message-input" class="form-control" placeholder="შეიყვანეთ თქვენი შეტყობინება აქ..." required>
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fa fa-paper-plane"></i> გაგზავნა
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .chat-container {
        height: 400px;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 15px;
    }
    
    .message {
        margin-bottom: 15px;
        padding: 10px 15px;
        border-radius: 10px;
        max-width: 80%;
    }
    
    .message p {
        margin: 0;
    }
    
    .user {
        background-color: #007bff;
        color: white;
        margin-left: auto;
        border-bottom-right-radius: 0;
    }
    
    .bot {
        background-color: #f1f1f1;
        margin-right: auto;
        border-bottom-left-radius: 0;
    }
    
    .system {
        background-color: #e8f4ff;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .typing-indicator {
        display: inline-block;
        width: 50px;
    }
    
    .typing-indicator span {
        height: 10px;
        width: 10px;
        float: left;
        margin: 0 1px;
        background-color: #9E9EA1;
        display: block;
        border-radius: 50%;
        opacity: 0.4;
    }
    
    .typing-indicator span:nth-of-type(1) {
        animation: 1s blink infinite 0.3333s;
    }
    
    .typing-indicator span:nth-of-type(2) {
        animation: 1s blink infinite 0.6666s;
    }
    
    .typing-indicator span:nth-of-type(3) {
        animation: 1s blink infinite 0.9999s;
    }
    
    @keyframes blink {
        50% {
            opacity: 1;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chatForm = document.getElementById('chat-form');
        const messageInput = document.getElementById('message-input');
        const chatMessages = document.getElementById('chat-messages');
        const methodSelect = document.getElementById('method-select');
        
        // Function to add a message to the chat
        function addMessage(content, type) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message', type);
            
            const messagePara = document.createElement('p');
            messagePara.textContent = content;
            
            messageDiv.appendChild(messagePara);
            chatMessages.appendChild(messageDiv);
            
            // Scroll to bottom
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        // Show typing indicator
        function showTypingIndicator() {
            const indicatorDiv = document.createElement('div');
            indicatorDiv.classList.add('message', 'bot', 'typing-indicator-container');
            indicatorDiv.id = 'typing-indicator';
            
            const indicator = document.createElement('div');
            indicator.classList.add('typing-indicator');
            
            for (let i = 0; i < 3; i++) {
                const dot = document.createElement('span');
                indicator.appendChild(dot);
            }
            
            indicatorDiv.appendChild(indicator);
            chatMessages.appendChild(indicatorDiv);
            
            // Scroll to bottom
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        // Remove typing indicator
        function removeTypingIndicator() {
            const indicator = document.getElementById('typing-indicator');
            if (indicator) {
                indicator.remove();
            }
        }
        
        // Handle chat form submission
        chatForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const message = messageInput.value.trim();
            if (!message) return;
            
            // Add user message to chat
            addMessage(message, 'user');
            
            // Clear input
            messageInput.value = '';
            
            // Show typing indicator
            showTypingIndicator();
            
            // Send to server
            fetch('/chatbot/query', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    message: message,
                    language: 'ka', // Always use Georgian
                    method: methodSelect ? methodSelect.value : 'combined'
                })
            })
            .then(response => response.json())
            .then(data => {
                // Remove typing indicator
                removeTypingIndicator();
                
                // Add bot response
                if (data.success) {
                    addMessage(data.message, 'bot');
                } else {
                    addMessage('უკაცრავად, დაფიქსირდა შეცდომა. გთხოვთ სცადოთ თავიდან.', 'bot');
                }
            })
            .catch(error => {
                // Remove typing indicator
                removeTypingIndicator();
                
                // Add error message
                addMessage('უკაცრავად, დაფიქსირდა შეცდომა. გთხოვთ სცადოთ თავიდან.', 'bot');
                console.error('Error:', error);
            });
        });

        // Method explanations for each method
        const methodExplanations = {
            'combined': '<b>შერეული მეთოდი:</b> იყენებს როგორც ცოდნის გრაფს, ასევე ვექტორულ ემბედინგებს. რეკომენდებულია რთული ან კომპლექსური კითხვებისთვის.',
            'knowledge_graph': '<b>ცოდნის გრაფი:</b> ეყრდნობა მხოლოდ კატეგორიებსა და სტრუქტურულ კავშირებს. სწრაფი და სტაბილური პასუხებისთვის.',
            'vector': '<b>ვექტორული ემბედინგები (RAG):</b> ეძებს მნიშვნელობით მსგავს წესებს. კარგია ბუნდოვანი ან არაზუსტი კითხვებისთვის.'
        };
        const methodSelect = document.getElementById('method-select');
        const methodExplanation = document.getElementById('method-explanation');
        if (methodSelect && methodExplanation) {
            function updateExplanation() {
                const val = methodSelect.value;
                methodExplanation.innerHTML = methodExplanations[val] || '';
            }
            methodSelect.addEventListener('change', updateExplanation);
            updateExplanation();
        }
    });
</script>
@endpush