{% extends 'base.html' %}
{% block content %}

<style>
    .chat-container {
        max-width: 800px;
        margin: 40px auto;
        background: white;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        overflow: hidden;
        height: 75vh;
        display: flex;
        flex-direction: column;
    }
    
    .chat-header {
        background: linear-gradient(135deg, #6a0dad, #9f7aea);
        color: white;
        padding: 1.2rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .chat-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        background: #f8fafc;
    }
    
    .message {
        margin-bottom: 15px;
        max-width: 75%;
    }
    
    .message.user {
        margin-left: auto;
    }
    
    .message.support {
        margin-right: auto;
    }
    
    .message-bubble {
        padding: 12px 18px;
        border-radius: 18px;
        font-size: 1.02rem;
    }
    
    .message.user .message-bubble {
        background: #6a0dad;
        color: white;
        border-bottom-right-radius: 4px;
    }
    
    .message.support .message-bubble {
        background: #e2e8f0;
        color: #1e2937;
        border-bottom-left-radius: 4px;
    }
    
    .chat-footer {
        padding: 15px;
        background: white;
        border-top: 1px solid #e2e8f0;
    }
    
    .typing-indicator {
        font-style: italic;
        color: #64748b;
        font-size: 0.9rem;
    }
</style>

<div class="container">
    <div class="chat-container">
        <!-- Header -->
        <div class="chat-header">
            <i class="fas fa-headset fa-2x"></i>
            <div>
                <h4 class="mb-0">Live Support</h4>
                <small>Usually replies in &lt; 60 seconds</small>
            </div>
            <div class="ms-auto">
                <span class="badge bg-success">Online</span>
            </div>
        </div>

        <!-- Messages -->
        <div id="chat-body" class="chat-body">
            <!-- Messages loaded via JS -->
        </div>

        <!-- Input -->
        <div class="chat-footer">
            <form id="chat-form" class="input-group">
                <input type="text" id="message-input" 
                       class="form-control form-control-lg" 
                       placeholder="Type your message..." 
                       autocomplete="off">
                <button class="btn btn-primary px-4" type="submit">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
    const chatBody = document.getElementById('chat-body');
    const form = document.getElementById('chat-form');
    const input = document.getElementById('message-input');

    // Load chat history
    async function loadHistory() {
        const res = await fetch("{% url 'core:get_chat_history' %}");
        const data = await res.json();
        
        chatBody.innerHTML = '';
        data.messages.forEach(msg => {
            appendMessage(msg.text, msg.is_from_support, msg.timestamp);
        });
        chatBody.scrollTop = chatBody.scrollHeight;
    }

    function appendMessage(text, isSupport, time = '') {
        const div = document.createElement('div');
        div.className = `message ${isSupport ? 'support' : 'user'}`;
        div.innerHTML = `
            <div class="message-bubble">
                ${text}
                <small class="d-block text-end mt-1 opacity-75">${time}</small>
            </div>
        `;
        chatBody.appendChild(div);
        chatBody.scrollTop = chatBody.scrollHeight;
    }

    // Send message
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const text = input.value.trim();
        if (!text) return;

        appendMessage(text, false);
        input.value = '';

        const res = await fetch("{% url 'core:send_chat_message' %}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({ message: text })
        });

        const data = await res.json();
        if (data.success) {
            // Simulate support reply after 1.5s
            setTimeout(() => {
                appendMessage("Thank you for your message. Our team will assist you shortly!", true);
            }, 1500);
        }
    });

    // Initial load
    window.onload = loadHistory;
</script>

{% endblock %}