{% extends "base.html" %}

{% block title %}Inbox{% endblock %}
{% block page_title %}Inbox{% endblock %}

{% block header_actions %}
<button onclick="markAllRead()" class="text-xs px-2.5 py-1 rounded-md bg-slate-800 text-slate-400 hover:bg-slate-700 transition-colors">Mark all read</button>
{% endblock %}

{% block content %}
<div class="flex flex-col" style="height: calc(100vh - 8.5rem);">
    <div id="chat-area" class="flex-1 overflow-y-auto space-y-3">
        <div class="flex items-center justify-center h-full">
            <p class="text-slate-500 text-sm">Loading messages...</p>
        </div>
    </div>

    <!-- Reply indicator -->
    <div id="reply-bar" class="hidden border-t border-violet-500/30 bg-violet-500/5 px-6 py-2 flex-shrink-0">
        <div class="flex items-center gap-2 max-w-3xl mx-auto">
            <div class="w-0.5 h-8 bg-violet-500 rounded-full flex-shrink-0"></div>
            <div class="flex-1 min-w-0">
                <span class="text-xs text-violet-400 font-display font-medium" id="reply-author"></span>
                <p class="text-xs text-slate-400 truncate" id="reply-preview"></p>
            </div>
            <button onclick="cancelReply()" class="text-slate-500 hover:text-slate-300 text-lg leading-none flex-shrink-0">&times;</button>
        </div>
    </div>

    <div class="border-t border-slate-800/50 pt-4 flex-shrink-0">
        <div class="flex gap-3 max-w-3xl mx-auto">
            <textarea id="inbox-msg" placeholder="Leave a note for NEXO..." rows="2"
                class="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-violet-500 resize-none"
                onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendNote()}"></textarea>
            <button onclick="sendNote()" class="px-4 py-2 bg-violet-600 text-white rounded-lg text-sm hover:bg-violet-500 transition-colors self-end font-display font-medium">Send</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    let messages = [];
    let pollTimer = null;
    let replyingTo = null;

    function inboxEscapeHtml(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function authorName(direction) {
        return direction === 'to_nexo' ? 'User' : 'NEXO';
    }

    function renderMessage(msg) {
        const isFromUser = msg.direction === 'to_nexo';
        const time = new Date(msg.created_at).toLocaleString('es-ES', {
            day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit'
        });
        const unreadDot = (!msg.read && !isFromUser)
            ? '<span class="inline-block w-1.5 h-1.5 rounded-full bg-violet-400 ml-1.5 align-middle"></span>'
            : '';

        let quoteHtml = '';
        if (msg.reply_to) {
            const parent = messages.find(m => m.id === msg.reply_to);
            if (parent) {
                const parentAuthor = authorName(parent.direction);
                const parentPreview = inboxEscapeHtml((parent.content || '').slice(0, 120));
                quoteHtml = `
                    <div class="flex items-start gap-2 mb-2 cursor-pointer opacity-70 hover:opacity-100 transition-opacity" onclick="scrollToMsg(${parent.id})">
                        <div class="w-0.5 self-stretch bg-violet-500/50 rounded-full flex-shrink-0"></div>
                        <div class="min-w-0">
                            <span class="text-xs font-display font-medium ${parent.direction === 'to_nexo' ? 'text-slate-400' : 'text-pink-400/70'}">${parentAuthor}</span>
                            <p class="text-xs text-slate-500 truncate">${parentPreview}</p>
                        </div>
                    </div>`;
            }
        }

        const replyBtn = `<button onclick="startReply(${msg.id})" class="text-slate-600 hover:text-violet-400 transition-colors text-xs font-mono ml-2" title="Reply">&#8617;</button>`;

        if (isFromUser) {
            return `
                <div class="flex justify-end" data-id="${msg.id}" id="msg-${msg.id}">
                    <div class="max-w-lg bg-violet-600/20 border border-violet-500/20 rounded-lg px-4 py-3">
                        ${quoteHtml}
                        <div class="text-xs text-slate-500 mb-1 font-display">User</div>
                        <div class="text-sm text-slate-200 leading-relaxed">${inboxEscapeHtml(msg.content).replace(/\n/g, '<br>')}</div>
                        <div class="flex items-center justify-end mt-1">
                            <span class="text-xs text-slate-500 font-mono">${time}</span>
                            ${replyBtn}
                        </div>
                    </div>
                </div>`;
        } else {
            return `
                <div class="flex justify-start" data-id="${msg.id}" id="msg-${msg.id}">
                    <div class="max-w-lg bg-slate-800 border border-slate-700 rounded-lg px-4 py-3">
                        ${quoteHtml}
                        <div class="text-xs text-pink-400 mb-1 font-display font-medium">NEXO${unreadDot}</div>
                        <div class="text-sm text-slate-200 leading-relaxed">${inboxEscapeHtml(msg.content).replace(/\n/g, '<br>')}</div>
                        <div class="flex items-center mt-1">
                            <span class="text-xs text-slate-500 font-mono">${time}</span>
                            ${replyBtn}
                        </div>
                    </div>
                </div>`;
        }
    }

    function startReply(msgId) {
        const msg = messages.find(m => m.id === msgId);
        if (!msg) return;
        replyingTo = msg;
        document.getElementById('reply-bar').classList.remove('hidden');
        document.getElementById('reply-author').textContent = authorName(msg.direction);
        document.getElementById('reply-preview').textContent = (msg.content || '').slice(0, 150);
        document.getElementById('inbox-msg').focus();
    }

    function cancelReply() {
        replyingTo = null;
        document.getElementById('reply-bar').classList.add('hidden');
    }

    function scrollToMsg(msgId) {
        const el = document.getElementById('msg-' + msgId);
        if (el) {
            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            el.firstElementChild.classList.add('ring-1', 'ring-violet-500/50');
            setTimeout(() => el.firstElementChild.classList.remove('ring-1', 'ring-violet-500/50'), 2000);
        }
    }

    function renderMessages() {
        const area = document.getElementById('chat-area');
        if (messages.length === 0) {
            area.innerHTML = `
                <div class="flex items-center justify-center h-full">
                    <p class="text-slate-500 text-sm">No messages yet. Leave a note for NEXO.</p>
                </div>`;
            return;
        }
        area.innerHTML = `<div class="space-y-3">${messages.map(renderMessage).join('')}</div>`;
        area.scrollTop = area.scrollHeight;
    }

    async function loadMessages() {
        try {
            const res = await fetch('/api/inbox?limit=200');
            if (!res.ok) {
                let detail = `HTTP ${res.status}`;
                try { const b = await res.json(); detail = b.error || b.detail || detail; } catch {}
                throw new Error(detail);
            }
            const data = await res.json();
            messages = data.notes || [];
            messages.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
            renderMessages();
            markIncomingRead();
        } catch (e) {
            document.getElementById('chat-area').innerHTML =
                `<div class="flex items-center justify-center h-full"><p class="text-red-400 text-sm">Error loading messages: ${inboxEscapeHtml(e.message)}</p></div>`;
        }
    }

    async function markIncomingRead() {
        const unread = messages.filter(m => m.direction === 'to_user' && !m.read);
        for (const msg of unread) {
            try {
                await fetch(`/api/inbox/${msg.id}/read`, { method: 'PUT' });
                msg.read = true;
            } catch (e) { /* ignore */ }
        }
    }

    async function sendNote() {
        const textarea = document.getElementById('inbox-msg');
        const content = textarea.value.trim();
        if (!content) return;

        const body = { direction: 'to_nexo', content };
        if (replyingTo) body.reply_to = replyingTo.id;

        try {
            const res = await fetch('/api/inbox', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body)
            });
            if (!res.ok) {
                let detail = `HTTP ${res.status}`;
                try { const b = await res.json(); detail = b.error || b.detail || detail; } catch {}
                throw new Error(detail);
            }
            const data = await res.json();
            textarea.value = '';
            cancelReply();
            messages.push({
                id: data.note?.id || Date.now(),
                direction: 'to_nexo',
                content,
                reply_to: body.reply_to || null,
                created_at: data.note?.created_at || new Date().toISOString(),
                read: true
            });
            renderMessages();
            showToast('Note sent');
        } catch (e) {
            showToast('Error: ' + e.message);
        }
    }

    async function markAllRead() {
        const unread = messages.filter(m => !m.read);
        for (const msg of unread) {
            try {
                await fetch(`/api/inbox/${msg.id}/read`, { method: 'PUT' });
                msg.read = true;
            } catch (e) { /* ignore */ }
        }
        renderMessages();
        showToast('All messages marked as read');
    }

    async function pollNewMessages() {
        try {
            const res = await fetch('/api/inbox?limit=200');
            const data = await res.json();
            const newMessages = data.notes || [];
            newMessages.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
            const prevIds = messages.map(m => m.id).join(',');
            const newIds = newMessages.map(m => m.id).join(',');
            if (prevIds !== newIds || newMessages.length !== messages.length) {
                messages = newMessages;
                renderMessages();
                markIncomingRead();
            }
        } catch (e) { /* silent */ }
    }

    // Initial load + polling
    loadMessages();
    pollTimer = setInterval(pollNewMessages, 10000);
</script>
{% endblock %}