{% extends "base.html" %}

{% block content %}
<section class="hero">
    <div>
        <p class="eyebrow">Project &middot; <span class="pill pill-{{ project.state }}" style="font-size:0.68rem;padding:3px 8px">{{ project.state }}</span></p>
        <h1>{{ project.title }}</h1>
        {% if project.description %}<p class="subtitle">{{ project.description }}</p>{% endif %}
    </div>
    <a href="{{ url_for('project_detail', project_id=project.project_id) }}" class="btn-ghost">View DAG</a>
</section>

<section class="chat-panel">
    <div class="chat-messages" id="chat-messages">
        {% if not messages %}
        <div class="chat-empty">
            <p>No messages yet. Say something to get started.</p>
        </div>
        {% endif %}
        {% for msg in messages %}
        <div class="chat-bubble chat-bubble-{{ msg.author_type }}">
            <span class="chat-author">{{ msg.author_type }}</span>
            <p>{{ msg.content }}</p>
        </div>
        {% endfor %}
    </div>
    <div class="chat-input-area">
        <form id="chat-form">
            <textarea
                id="chat-input"
                placeholder="Message openDAGent… (Enter to send, Shift+Enter for newline)"
                rows="2"
            ></textarea>
            <button type="submit" class="btn-primary">Send</button>
        </form>
    </div>
</section>

<script>
    const PROJECT_ID = {{ project.project_id | tojson }};
    const messagesEl = document.getElementById('chat-messages');
    const inputEl = document.getElementById('chat-input');

    // Scroll to bottom on load
    messagesEl.scrollTop = messagesEl.scrollHeight;

    // Enter to send, Shift+Enter for newline
    inputEl.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            document.getElementById('chat-form').requestSubmit();
        }
    });

    document.getElementById('chat-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const content = inputEl.value.trim();
        if (!content) return;

        inputEl.value = '';
        inputEl.disabled = true;

        appendBubble('user', content);

        try {
            await fetch(`/api/projects/${PROJECT_ID}/messages`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ content }),
            });
        } finally {
            inputEl.disabled = false;
            inputEl.focus();
        }
    });

    function appendBubble(authorType, content) {
        // Remove empty-state placeholder if present
        const empty = messagesEl.querySelector('.chat-empty');
        if (empty) empty.remove();

        const div = document.createElement('div');
        div.className = `chat-bubble chat-bubble-${authorType}`;
        const author = document.createElement('span');
        author.className = 'chat-author';
        author.textContent = authorType;
        const p = document.createElement('p');
        p.textContent = content;
        div.appendChild(author);
        div.appendChild(p);
        messagesEl.appendChild(div);
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }
</script>
{% endblock %}