{% extends "base.html" %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
<script src="{{ url_for('static', path='/artifact-viewer.js') }}"></script>
{% endblock %}

{% 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>

<!-- Artifact viewer modal (shared) -->
<div id="artifact-modal" class="artifact-modal" hidden>
    <div class="artifact-modal-backdrop"></div>
    <div class="artifact-modal-box">
        <div class="artifact-modal-header">
            <div>
                <strong id="artifact-modal-key"></strong>
                <span id="artifact-modal-meta" style="color:var(--muted);font-size:0.82rem;margin-left:10px"></span>
            </div>
            <div style="display:flex;gap:8px">
                <a id="artifact-modal-download" class="btn-ghost" style="padding:6px 14px;font-size:0.82rem" download>Download</a>
                <button class="btn-ghost" id="artifact-modal-close" style="padding:6px 14px;font-size:0.82rem">Close</button>
            </div>
        </div>
        <div id="artifact-modal-body" class="artifact-modal-body"></div>
    </div>
</div>

<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>
            {% if msg.author_type == 'user' %}
            <p class="chat-plain">{{ msg.content }}</p>
            {% else %}
            <div class="chat-md" data-md="{{ msg.content | e }}"></div>
            {% endif %}
        </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');

    // Track the latest message timestamp for polling
    let lastMessageTs = {{ (messages[-1].message_ts if messages else '') | tojson }};
    let typingEl = null;

    // Configure marked
    marked.setOptions({ breaks: true, gfm: true });

    // Render all server-side markdown bubbles on load
    document.querySelectorAll('.chat-md[data-md]').forEach(el => {
        const raw = el.dataset.md;
        // Extract artifact refs
        const ARTIFACT_RE = /<!--\s*artifact:([\w]+)\s*-->/g;
        const artifactIds = [];
        let m;
        while ((m = ARTIFACT_RE.exec(raw)) !== null) artifactIds.push(m[1]);
        const clean = raw.replace(/<!--\s*artifact:[\w]+\s*-->/g, '').trim();
        el.innerHTML = marked.parse(clean);
        delete el.dataset.md;

        if (artifactIds.length > 0) {
            const wrap = document.createElement('div');
            wrap.className = 'chat-artifact-cards';
            el.parentElement.appendChild(wrap);
            artifactIds.forEach(aid => appendArtifactCard(wrap, aid));
        }
    });

    // Show typing indicator if the last message on load is from the user
    {% if messages and messages[-1].author_type == 'user' %}
    showTyping();
    {% endif %}

    // 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);
        showTyping();

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

    // Poll for agent replies every 2 seconds
    async function pollMessages() {
        try {
            const qs = lastMessageTs ? `?after=${encodeURIComponent(lastMessageTs)}` : '';
            const res = await fetch(`/api/projects/${PROJECT_ID}/messages${qs}`);
            if (!res.ok) return;
            const { messages } = await res.json();
            for (const msg of messages) {
                if (msg.author_type !== 'user') {
                    hideTyping();
                    appendBubble(msg.author_type, msg.content);
                    lastMessageTs = msg.message_ts;
                }
            }
        } catch (_) { /* network hiccup, ignore */ }
    }

    setInterval(pollMessages, 2000);

    function showTyping() {
        if (typingEl) return;
        const empty = messagesEl.querySelector('.chat-empty');
        if (empty) empty.remove();
        typingEl = document.createElement('div');
        typingEl.className = 'chat-bubble chat-bubble-system chat-typing';
        typingEl.innerHTML = '<span class="chat-author">openDAGent</span><span class="typing-dots"><span></span><span></span><span></span></span>';
        messagesEl.appendChild(typingEl);
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }

    function hideTyping() {
        if (typingEl) {
            typingEl.remove();
            typingEl = null;
        }
    }

    function appendBubble(authorType, content) {
        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;
        div.appendChild(author);

        if (authorType === 'user') {
            const p = document.createElement('p');
            p.className = 'chat-plain';
            p.textContent = content;
            div.appendChild(p);
        } else {
            // Extract artifact refs before rendering markdown
            const ARTIFACT_RE = /<!--\s*artifact:([\w]+)\s*-->/g;
            const artifactIds = [];
            let match;
            while ((match = ARTIFACT_RE.exec(content)) !== null) {
                artifactIds.push(match[1]);
            }
            const cleanContent = content.replace(/<!--\s*artifact:[\w]+\s*-->/g, '').trim();

            const md = document.createElement('div');
            md.className = 'chat-md';
            md.innerHTML = marked.parse(cleanContent);
            div.appendChild(md);

            // Render artifact inline cards
            if (artifactIds.length > 0) {
                const cardsWrap = document.createElement('div');
                cardsWrap.className = 'chat-artifact-cards';
                div.appendChild(cardsWrap);
                artifactIds.forEach(aid => appendArtifactCard(cardsWrap, aid));
            }
        }

        messagesEl.appendChild(div);
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }

    async function appendArtifactCard(container, artifactId) {
        // Placeholder while loading
        const card = document.createElement('div');
        card.className = 'chat-artifact-card';
        card.innerHTML = '<span style="color:var(--muted);font-size:0.82rem">Loading artifact…</span>';
        container.appendChild(card);

        let meta;
        try {
            const res = await fetch(`/api/artifacts/${artifactId}`);
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            meta = await res.json();
        } catch (e) {
            card.innerHTML = `<span style="color:#ffc4cf;font-size:0.82rem">Artifact unavailable</span>`;
            return;
        }

        const isImage    = meta.preview_kind === 'image';
        const isText     = meta.preview_kind === 'text';
        const contentUrl = `/api/artifacts/${artifactId}/content`;

        if (isImage) {
            card.innerHTML = '';
            const label = document.createElement('span');
            label.className = 'chat-artifact-label';
            label.textContent = `${meta.artifact_key} · v${meta.version}`;
            card.appendChild(label);

            const img = document.createElement('img');
            img.src   = contentUrl;
            img.alt   = meta.artifact_key;
            img.className = 'chat-artifact-image';
            card.appendChild(img);

        } else {
            // Text or download — show compact card with actions
            card.innerHTML = '';
            const info = document.createElement('div');
            info.innerHTML = `<strong style="font-size:0.88rem">${meta.artifact_key}</strong>
                <span style="color:var(--muted);font-size:0.78rem;margin-left:8px">${meta.type} · v${meta.version} · ${meta.status}</span>`;

            const actions = document.createElement('div');
            actions.style.cssText = 'display:flex;gap:8px;margin-top:8px';

            if (isText) {
                const viewBtn = document.createElement('button');
                viewBtn.className = 'btn-ghost';
                viewBtn.style.cssText = 'padding:5px 12px;font-size:0.78rem';
                viewBtn.textContent = 'View';
                viewBtn.addEventListener('click', () => openArtifactModal(artifactId));
                actions.appendChild(viewBtn);
            }

            const dlLink = document.createElement('a');
            dlLink.href     = contentUrl;
            dlLink.download = meta.file_name || meta.artifact_key;
            dlLink.className = 'btn-ghost';
            dlLink.style.cssText = 'padding:5px 12px;font-size:0.78rem';
            dlLink.textContent = 'Download';
            actions.appendChild(dlLink);

            card.appendChild(info);
            card.appendChild(actions);
        }
    }
</script>
{% endblock %}