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

{% block title %}Chat{% endblock %}

{% block content %}
<div class="chat-container">
    <!-- Sidebar -->
    <aside class="chat-sidebar">
        <form method="post" action="{% url 'core:chat' %}" class="new-chat-form">
            {% csrf_token %}
            <input type="text" name="title" placeholder="New conversation title" required>
            <button type="submit" class="new-chat-btn">+ New Chat</button>
        </form>
        
        <ul class="conversation-list">
            {% for conv in conversation_list %}
                <a href="{% url 'core:chat_detail' conv.id %}" class="{% if selected_conversation.id == conv.id %}active{% endif %}">
                    {{ conv.title }}
                </a>
            {% empty %}
                <li>No conversations yet.</li>
            {% endfor %}
        </ul>
    </aside>

    <!-- Main Chat Area -->
    <main class="chat-main">
        {% if selected_conversation %}
            <header class="chat-header">
                <h3>{{ selected_conversation.title }}</h3>
            </header>

            <div class="chat-messages" id="chat-messages">
                {% for message in selected_conversation.messages.all %}
                    <div class="message {{ message.sender }}">
                        <div class="message-content">
                            <div class="message-author">
                                {% if message.sender == 'user' %}
                                    You
                                {% elif message.sender == 'ai' %}
                                    AI
                                {% elif message.sender == 'system' %}
                                    System
                                {% elif message.sender == 'ai_command' %}
                                    AI Command
                                {% endif %}
                            </div>
                            {% if message.sender == 'ai_command' %}
                                <pre><code>{{ message.content|linebreaksbr }}</code></pre>
                            {% else %}
                                <p>{{ message.content|linebreaksbr }}</p>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>

            <div class="chat-form-container">
                <form method="post" action="{% url 'core:chat_detail' selected_conversation.id %}" class="chat-form" id="chat-form">
                    {% csrf_token %}
                    <textarea name="text" placeholder="Send a message..." rows="1" id="chat-textarea"></textarea>
                    <button type="submit">Send</button>
                </form>
            </div>

        {% else %}
            <div class="no-conversation-selected">
                <div>
                    <h2>Gemini Chat</h2>
                    <p>Select a conversation or start a new one.</p>
                </div>
            </div>
        {% endif %}
    <div class="loader-overlay" id="loader-overlay" style="display: none;">
            <div class="loader"></div>
        </div>
    </main>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const messagesContainer = document.getElementById('chat-messages');
        if (messagesContainer) {
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        const textarea = document.getElementById('chat-textarea');
        if (textarea) {
            textarea.addEventListener('input', () => {
                textarea.style.height = 'auto';
                textarea.style.height = (textarea.scrollHeight) + 'px';
            });
        }

        const chatTextarea = document.getElementById('chat-textarea');
        const chatForm = document.getElementById('chat-form');
        const loaderOverlay = document.getElementById('loader-overlay');

        if (chatForm) {
            chatForm.addEventListener('submit', function() {
                if (loaderOverlay) {
                    loaderOverlay.style.display = 'flex';
                }
            });
        }

        if (chatTextarea && chatForm) {
            chatTextarea.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    chatForm.submit();
                }
            });
        }
    });
</script>

{% endblock %}