{% extends "base.html" %}
{% load static %}

{% block title %}AI Accounting Chat - 3ncount{% endblock %}

{% block extra_css %}
<style>
#chat-container {
    height: calc(100vh - 280px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

#messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
}

.message {
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message-user {
    display: flex;
    justify-content: flex-end;
}

.message-assistant {
    display: flex;
    justify-content: flex-start;
}

.message-content {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message-user .message-content {
    background: #0066cc;
    color: white;
}

.message-assistant .message-content {
    background: white;
    color: #333;
    border: 1px solid #dee2e6;
}

.message-attachment {
    margin-top: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
}

.message-attachment img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 4px;
    cursor: pointer;
}

.message-attachment .file-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-attachment .file-icon {
    font-size: 24px;
}

.typing-indicator {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    border: 1px solid #dee2e6;
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    background: #90949c;
    border-radius: 50%;
    display: inline-block;
    margin: 0 2px;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-10px); }
}

#input-container {
    padding: 20px;
    background: white;
    border-top: 1px solid #dee2e6;
}

#message-input {
    resize: none;
    min-height: 24px;
    max-height: 200px;
    overflow-y: auto;
}

#file-upload-area {
    display: none;
    margin-bottom: 12px;
    padding: 20px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s;
}

#file-upload-area.drag-over {
    border-color: #0066cc;
    background: #e7f3ff;
}

#file-upload-area.active {
    display: block;
}

#file-preview {
    margin-bottom: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    display: none;
}

#file-preview.active {
    display: block;
}

#file-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 4px;
}

.file-preview-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-preview-icon {
    font-size: 32px;
}

.file-preview-details {
    flex: 1;
}

.file-preview-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.file-preview-size {
    font-size: 0.875rem;
    color: #6c757d;
}

.file-preview-remove {
    cursor: pointer;
    color: #dc3545;
}

#send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

#attach-button {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.2s;
}

#attach-button:hover {
    color: #0066cc;
}

#attach-button.active {
    color: #0066cc;
}

/* Simple Token Badge */
.token-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.875rem;
}

.token-badge i {
    color: #0066cc;
    font-size: 1.2rem;
}

.token-badge-main {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.token-badge-value {
    font-weight: 700;
    color: #333;
    font-size: 1.1rem;
}

.token-badge-label {
    color: #6c757d;
    font-size: 0.75rem;
}

.token-badge-detail {
    color: #6c757d;
    font-size: 0.75rem;
    margin-top: 2px;
}

.token-badge.low {
    border-color: #ffc107;
    background: #fff8e1;
}

.token-badge.critical {
    border-color: #dc3545;
    background: #ffe6e6;
}

.token-badge.critical i {
    color: #dc3545;
}

/* Token Footer Info */
.token-footer-info {
    padding: 12px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #6c757d;
}

.token-footer-left {
    display: flex;
    gap: 20px;
}

.token-footer-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.token-footer-item i {
    color: #0066cc;
}

.token-footer-item strong {
    color: #333;
}

.token-footer-item.low strong {
    color: #dc3545;
}
</style>
{% endblock %}

{% block page_header %}
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">
                    <i class="ti ti-message-chatbot me-2"></i>
                    AI Accounting Chat
                </h2>
                <div class="text-muted mt-1">Natural conversation with your accounting assistant</div>
            </div>
            <div class="col-auto">
                <!-- Enhanced Simple Token Badge -->
                {% if token_status and token_status.has_tokens %}
                <div class="token-badge {% if token_status.status == 'critical' %}critical{% elif token_status.status == 'warning' %}low{% endif %}">
                    <i class="ti ti-coin"></i>
                    <div class="token-badge-main">
                        <div class="token-badge-value">{{ token_status.remaining|default:0|floatformat:0 }}</div>
                        <div class="token-badge-label">tokens remaining</div>
                        <div class="token-badge-detail">{{ token_status.used|default:0|floatformat:0 }} / {{ token_status.limit|default:0|floatformat:0 }} used</div>
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="col-auto">
                <a href="{% url 'ai_documents:ai_chat' %}" class="btn btn-primary">
                    <i class="ti ti-plus"></i>
                    New Conversation
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card" id="chat-container">
            <!-- Messages Container -->
            <div id="messages-container">
                <div id="messages-list">
                    {% if conversation %}
                        <!-- Messages will be loaded via AJAX -->
                    {% else %}
                        <div class="empty-state">
                            <i class="ti ti-message-chatbot"></i>
                            <h3>Start a new conversation</h3>
                            <p>Ask me anything about accounting, transactions, or your finances</p>
                            <p class="text-muted mt-3">
                                <i class="ti ti-photo"></i> You can also attach images & PDFs!
                            </p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Token Footer Info -->
            {% if token_status and token_status.has_tokens %}
            <div class="token-footer-info">
                <div class="token-footer-left">
                    <div class="token-footer-item {% if token_status.status == 'critical' %}low{% endif %}">
                        <i class="ti ti-coins"></i>
                        <span>Balance: <strong>{{ token_status.remaining|default:0|floatformat:0 }}</strong> tokens</span>
                    </div>
                    <div class="token-footer-item">
                        <i class="ti ti-chart-line"></i>
                        <span>~{{ token_status.estimated_interactions|default:0 }} interactions left</span>
                    </div>
                </div>
                <div class="token-footer-item">
                    <i class="ti ti-currency-dollar"></i>
                    <span>RM {{ token_status.cost_per_1k|default:0.045 }} per 1K tokens</span>
                </div>
            </div>
            {% endif %}

            <!-- Input Container -->
            <div id="input-container">
                <!-- File Upload Area (Drag & Drop) -->
                <div id="file-upload-area">
                    <i class="ti ti-upload" style="font-size: 32px; color: #6c757d;"></i>
                    <p class="mb-0 mt-2">Drop file here or click to browse</p>
                    <small class="text-muted">Supports: Images (JPG, PNG, GIF) and PDFs (max 10MB)</small>
                </div>

                <!-- File Preview -->
                <div id="file-preview">
                    <div class="file-preview-info">
                        <div id="file-preview-content"></div>
                        <div class="file-preview-details" id="file-preview-details"></div>
                        <div class="file-preview-remove" id="file-preview-remove">
                            <i class="ti ti-x"></i>
                        </div>
                    </div>
                </div>

                <!-- Message Input -->
                <div class="input-group">
                    <button id="attach-button" type="button" title="Attach file">
                        <i class="ti ti-paperclip" style="font-size: 20px;"></i>
                    </button>
                    <textarea 
                        id="message-input" 
                        class="form-control" 
                        placeholder="Type your message here (or attach an image)..." 
                        rows="1"></textarea>
                    <button id="send-button" class="btn btn-primary px-4" type="button">
                        <i class="ti ti-send"></i>
                    </button>
                </div>
                
                <!-- Hidden file input -->
                <input type="file" id="file-input" accept="image/*,.pdf" style="display: none;">
                
                <!-- Quick Actions -->
                <div class="mt-3">
                    <small class="text-muted">Quick actions:</small>
                    <div class="btn-group ms-2" role="group">
                        <button type="button" class="btn btn-sm btn-outline-primary quick-action" 
                                data-message="Saya bayar bil TNB RM50 guna CIMB Bank hari ini">
                            Rekod Perbelanjaan
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-action"
                                data-message="Saya terima bayaran RM1000 masuk Maybank dari pelanggan">
                            Rekod Pendapatan
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary quick-action"
                                data-message="Tunjukkan status kewangan saya bulan ini">
                            Status Kewangan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const CONVERSATION_ID = {% if conversation %}"{{ conversation.conversation_id }}"{% else %}null{% endif %};
const API_SEND_URL = "{% url 'ai_documents:ai_chat_api' %}";
const API_HISTORY_URL = {% if conversation %}"{% url 'ai_documents:ai_chat_history_api' conversation.conversation_id %}"{% else %}null{% endif %};
const CSRF_TOKEN = getCookie('csrftoken');

let conversationId = CONVERSATION_ID;
let isProcessing = false;
let selectedFile = null;

// DOM Elements
const messagesList = document.getElementById('messages-list');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const messagesContainer = document.getElementById('messages-container');
const attachButton = document.getElementById('attach-button');
const fileInput = document.getElementById('file-input');
const fileUploadArea = document.getElementById('file-upload-area');
const filePreview = document.getElementById('file-preview');
const filePreviewContent = document.getElementById('file-preview-content');
const filePreviewDetails = document.getElementById('file-preview-details');
const filePreviewRemove = document.getElementById('file-preview-remove');

// Load conversation history if exists
if (API_HISTORY_URL) {
    loadConversationHistory();
}

// Auto-resize textarea
messageInput.addEventListener('input', function() {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
});

// Send on Enter (Shift+Enter for new line)
messageInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});

// Send button click
sendButton.addEventListener('click', sendMessage);

// Attach button click
attachButton.addEventListener('click', () => {
    fileInput.click();
});

// File input change
fileInput.addEventListener('change', handleFileSelect);

// File preview remove
filePreviewRemove.addEventListener('click', clearFileSelection);

// Drag and drop
fileUploadArea.addEventListener('click', () => {
    fileInput.click();
});

fileUploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    fileUploadArea.classList.add('drag-over');
});

fileUploadArea.addEventListener('dragleave', () => {
    fileUploadArea.classList.remove('drag-over');
});

fileUploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    fileUploadArea.classList.remove('drag-over');
    
    if (e.dataTransfer.files.length > 0) {
        handleFiles(e.dataTransfer.files);
    }
});

// Quick actions
document.querySelectorAll('.quick-action').forEach(btn => {
    btn.addEventListener('click', function() {
        messageInput.value = this.dataset.message;
        messageInput.focus();
    });
});

// Handle file selection
function handleFileSelect(e) {
    if (e.target.files.length > 0) {
        handleFiles(e.target.files);
    }
}

function handleFiles(files) {
    const file = files[0];
    
    // Validate file
    const maxSize = 10 * 1024 * 1024; // 10MB
    if (file.size > maxSize) {
        alert('File too large! Maximum size is 10MB.');
        return;
    }
    
    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'application/pdf'];
    if (!allowedTypes.includes(file.type)) {
        alert('File type not supported! Please upload an image (JPG, PNG, GIF) or PDF.');
        return;
    }
    
    selectedFile = file;
    showFilePreview(file);
    attachButton.classList.add('active');
}

function showFilePreview(file) {
    filePreview.classList.add('active');
    
    // Show preview based on file type
    if (file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = (e) => {
            filePreviewContent.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
        };
        reader.readAsDataURL(file);
    } else if (file.type === 'application/pdf') {
        filePreviewContent.innerHTML = `<div class="file-preview-icon"><i class="ti ti-file-text"></i></div>`;
    }
    
    // Show file details
    const sizeKB = (file.size / 1024).toFixed(2);
    filePreviewDetails.innerHTML = `
        <div class="file-preview-name">${file.name}</div>
        <div class="file-preview-size">${sizeKB} KB</div>
    `;
}

function clearFileSelection() {
    selectedFile = null;
    filePreview.classList.remove('active');
    fileInput.value = '';
    attachButton.classList.remove('active');
}

// Load conversation history
async function loadConversationHistory() {
    try {
        const response = await fetch(API_HISTORY_URL);
        const data = await response.json();
        
        if (data.success && data.messages) {
            messagesList.innerHTML = '';
            data.messages.forEach(msg => {
                addMessage(msg.role, msg.content, msg.attachment, false);
            });
            scrollToBottom();
        }
    } catch (error) {
        console.error('Error loading history:', error);
    }
}

// Send message function
async function sendMessage() {
    const message = messageInput.value.trim();
    
    if ((!message && !selectedFile) || isProcessing) return;
    
    // Disable input
    isProcessing = true;
    messageInput.disabled = true;
    sendButton.disabled = true;
    attachButton.disabled = true;
    
    // Clear empty state if exists
    const emptyState = messagesList.querySelector('.empty-state');
    if (emptyState) {
        emptyState.remove();
    }
    
    // Prepare FormData for file upload
    const formData = new FormData();
    formData.append('message', message || '(attached file)');
    if (conversationId) {
        formData.append('conversation_id', conversationId);
    }
    if (selectedFile) {
        formData.append('file', selectedFile);
    }
    
    // Add user message (with file preview if applicable)
    const attachmentInfo = selectedFile ? {
        filename: selectedFile.name,
        is_image: selectedFile.type.startsWith('image/')
    } : null;
    addMessage('user', message || '(attached file)', attachmentInfo);
    
    // Clear input and file
    messageInput.value = '';
    messageInput.style.height = 'auto';
    clearFileSelection();
    
    // Show typing indicator
    const typingDiv = showTypingIndicator();
    
    try {
        // Send to API
        const response = await fetch(API_SEND_URL, {
            method: 'POST',
            headers: {
                'X-CSRFToken': CSRF_TOKEN
            },
            body: formData
        });
        
        const data = await response.json();
        
        // Remove typing indicator
        typingDiv.remove();
        
        if (data.success) {
            // Update conversation ID if new
            if (!conversationId) {
                conversationId = data.conversation_id;
                // Update URL without reload
                const newUrl = `{% url 'ai_documents:ai_chat' %}?conversation_id=${conversationId}`;
                window.history.pushState({}, '', newUrl);
            }
            
            // Add AI response
            addMessage('assistant', data.response, null);
            
            // Reload page to refresh token count
            if (data.token_status) {
                setTimeout(() => location.reload(), 100);
            }
        } else {
            // Show error
            addMessage('assistant', `❌ Error: ${data.error || 'Unknown error'}`, null);
        }
        
    } catch (error) {
        console.error('Error:', error);
        typingDiv.remove();
        addMessage('assistant', `❌ Network error: ${error.message}`, null);
    } finally {
        // Re-enable input
        isProcessing = false;
        messageInput.disabled = false;
        sendButton.disabled = false;
        attachButton.disabled = false;
        messageInput.focus();
    }
}

// Add message to UI
function addMessage(role, content, attachment = null, scroll = true) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message message-${role}`;
    
    const contentDiv = document.createElement('div');
    contentDiv.className = 'message-content';
    contentDiv.textContent = content;
    
    // Add attachment if exists
    if (attachment) {
        const attachmentDiv = document.createElement('div');
        attachmentDiv.className = 'message-attachment';
        
        if (attachment.is_image && attachment.file_url) {
            attachmentDiv.innerHTML = `<img src="${attachment.file_url}" alt="${attachment.filename}" onclick="window.open('${attachment.file_url}', '_blank')">`;
        } else {
            attachmentDiv.innerHTML = `
                <div class="file-info">
                    <i class="ti ti-file-text file-icon"></i>
                    <span>${attachment.filename || 'Attached file'}</span>
                </div>
            `;
        }
        
        contentDiv.appendChild(attachmentDiv);
    }
    
    messageDiv.appendChild(contentDiv);
    messagesList.appendChild(messageDiv);
    
    if (scroll) {
        scrollToBottom();
    }
}

// Show typing indicator
function showTypingIndicator() {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message message-assistant';
    messageDiv.id = 'typing-indicator';
    
    const typingDiv = document.createElement('div');
    typingDiv.className = 'typing-indicator';
    typingDiv.innerHTML = '<span></span><span></span><span></span>';
    
    messageDiv.appendChild(typingDiv);
    messagesList.appendChild(messageDiv);
    
    scrollToBottom();
    
    return messageDiv;
}

// Scroll to bottom
function scrollToBottom() {
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

// Get CSRF token
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>
{% endblock %}