{% extends "base.html" %}
{% block title %}{{ thread.title }} — {{ bbs.site.name }}{% endblock %}
{% block breadcrumb %}
<span>/</span>
<a href="/bbs/{{ handle }}" class="text-neutral-500 hover:text-neutral-300">{{ bbs.site.name }}</a>
<span>/</span>
<a href="/bbs/{{ handle }}/board/{{ board.slug }}" class="text-neutral-500 hover:text-neutral-300">{{ board.name }}</a>
<span>/</span>
<span class="text-neutral-400 truncate">{{ thread.title }}</span>
{% endblock %}
{% block content %}
<article class="bg-neutral-900 border border-neutral-800 rounded p-4 mb-4">
    <div class="flex items-baseline justify-between mb-3">
        <span class="text-neutral-200">{{ thread.author.handle }}</span>
        <div class="flex items-center gap-3">
            <span class="text-xs text-neutral-500">{{ thread.created_at | datetime }}</span>
            {% if g.user and g.user.did == thread.author.did %}
            <form method="post" action="/bbs/{{ handle }}/thread/{{ thread.author.did }}/{{ thread.uri.split('/')[-1] }}/delete" class="inline" onsubmit="return confirm('Delete this thread?')">
                <button type="submit" class="text-xs text-neutral-500 hover:text-red-400">delete</button>
            </form>
            {% endif %}
            {% if g.user and g.user.did == bbs.identity.did and g.user.did != thread.author.did %}
            <form method="post" action="/bbs/{{ handle }}/ban/{{ thread.author.did }}" class="inline" onsubmit="return confirm('Ban this user from your BBS?')">
                <button type="submit" class="text-xs text-neutral-500 hover:text-red-400">ban</button>
            </form>
            <form method="post" action="/bbs/{{ handle }}/hide" class="inline" onsubmit="return confirm('Hide this post?')">
                <input type="hidden" name="uri" value="{{ thread.uri }}">
                <button type="submit" class="text-xs text-neutral-500 hover:text-red-400">hide</button>
            </form>
            {% endif %}
        </div>
    </div>
    <h1 class="text-base text-neutral-200 font-bold mb-3">{{ thread.title }}</h1>
    <p class="text-neutral-400 whitespace-pre-wrap leading-relaxed">{{ thread.body }}</p>
    {% if thread.attachments %}
    <div class="mt-3 space-y-1">
        {% for att in thread.attachments %}
        <a href="{{ thread.author.pds }}/xrpc/com.atproto.sync.getBlob?did={{ thread.author.did }}&cid={{ att.file.ref['$link'] }}" target="_blank" class="text-xs text-neutral-500 hover:text-neutral-300 block">[{{ att.name }}]</a>
        {% endfor %}
    </div>
    {% endif %}
</article>

<div id="replies" class="space-y-2">
    <p id="replies-loading" class="text-neutral-500">Loading replies...</p>
</div>
<div id="replies-next" class="mt-6 text-center hidden">
    <button id="load-more" class="text-neutral-500 hover:text-neutral-300">next page →</button>
</div>

{% if g.user %}
<form method="post" action="/bbs/{{ handle }}/thread/{{ thread.author.did }}/{{ thread.uri.split('/')[-1] }}/reply" enctype="multipart/form-data" class="mt-6 border border-neutral-800 rounded p-4">
    <input type="hidden" name="quote" id="quote-uri" value="">
    <div id="quote-preview" class="text-xs text-neutral-500 mb-2 hidden">
        <span id="quote-preview-text"></span>
        <button type="button" onclick="document.getElementById('quote-uri').value=''; document.getElementById('quote-preview').classList.add('hidden');" class="text-neutral-500 hover:text-red-400 ml-2">x</button>
    </div>
    <textarea
        name="body"
        placeholder="Write a reply..."
        id="reply-body"
        required
        rows="3"
        class="w-full bg-neutral-900 border border-neutral-800 rounded px-3 py-2 text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-neutral-600 resize-y mb-3"
    ></textarea>
    <label class="text-xs text-neutral-500 hover:text-neutral-300 cursor-pointer block mb-3">
        attach files
        <input type="file" name="attachments" multiple class="hidden" onchange="this.nextElementSibling.textContent = this.files.length ? [...this.files].map(f => f.name).join(', ') : ''">
        <span class="text-neutral-400 ml-2"></span>
    </label>
    <button type="submit" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded">
        reply
    </button>
</form>
{% endif %}

<script>
    const threadDid = "{{ thread.author.did }}";
    const threadTid = "{{ thread.uri.split('/')[-1] }}";
    const handle = "{{ handle }}";
    const userDid = "{{ g.user.did if g.user else '' }}";
    const sysopDid = "{{ bbs.identity.did }}";
    let nextCursor = null;
    const allReplies = {};

    function formatDate(iso) {
        const d = new Date(iso);
        const pad = n => String(n).padStart(2, '0');
        return `${d.getUTCFullYear()}-${pad(d.getUTCMonth()+1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())} UTC`;
    }

    function escapeHtml(s) {
        const el = document.createElement('span');
        el.textContent = s;
        return el.innerHTML;
    }

    function renderReply(r) {
        let deleteBtn = '';
        let banBtn = '';
        if (userDid && userDid === r.did) {
            deleteBtn = `<form method="post" action="/bbs/${handle}/thread/${threadDid}/${threadTid}/reply/${r.rkey}/delete" class="inline" onsubmit="return confirm('Delete this reply?')"><button type="submit" class="text-xs text-neutral-500 hover:text-red-400">delete</button></form>`;
        }
        if (userDid && userDid === sysopDid && userDid !== r.did) {
            banBtn = `<form method="post" action="/bbs/${handle}/ban/${r.did}" class="inline" onsubmit="return confirm('Ban this user from your BBS?')"><button type="submit" class="text-xs text-neutral-500 hover:text-red-400">ban</button></form>`;
        }
        let hideBtn = '';
        if (userDid && userDid === sysopDid) {
            hideBtn = `<form method="post" action="/bbs/${handle}/hide" class="inline" onsubmit="return confirm('Hide this post?')"><input type="hidden" name="uri" value="${r.uri}"><button type="submit" class="text-xs text-neutral-500 hover:text-red-400">hide</button></form>`;
        }
        let quoteBlock = '';
        if (r.quote && allReplies[r.quote]) {
            const q = allReplies[r.quote];
            quoteBlock = `<div class="border-l-2 border-neutral-700 pl-3 mb-3 py-1 text-xs text-neutral-500"><span class="text-neutral-400">${escapeHtml(q.handle)}:</span> ${escapeHtml(q.body.substring(0, 200))}${q.body.length > 200 ? '...' : ''}</div>`;
        }
        return `<div class="border border-neutral-800/50 rounded p-4">
            <div class="flex items-baseline justify-between mb-2">
                <span class="text-neutral-300">${escapeHtml(r.handle)}</span>
                <div class="flex items-center gap-3">
                    <span class="text-xs text-neutral-500">${formatDate(r.created_at)}</span>
                    ${userDid ? `<button type="button" onclick="document.getElementById('quote-uri').value='${r.uri}'; document.getElementById('quote-preview-text').textContent='quoting ${escapeHtml(r.handle)}'; document.getElementById('quote-preview').classList.remove('hidden'); document.getElementById('reply-body').focus();" class="text-xs text-neutral-500 hover:text-neutral-300">quote</button>` : ''}
                    ${deleteBtn}
                    ${banBtn}
                    ${hideBtn}
                </div>
            </div>
            ${quoteBlock}
            <p class="text-neutral-400 whitespace-pre-wrap leading-relaxed">${escapeHtml(r.body)}</p>
            ${(r.attachments || []).map(a => `<a href="${r.pds_url}/xrpc/com.atproto.sync.getBlob?did=${r.did}&cid=${a.file.ref['$link']}" target="_blank" class="text-xs text-neutral-500 hover:text-neutral-300 block mt-1">[${escapeHtml(a.name)}]</a>`).join('')}
        </div>`;
    }

    function loadReplies(cursor) {
        let url = `/api/replies/${threadDid}/${threadTid}?handle=${encodeURIComponent(handle)}`;
        if (cursor) url += `&cursor=${encodeURIComponent(cursor)}`;

        fetch(url)
            .then(r => r.json())
            .then(data => {
                const container = document.getElementById('replies');
                const loading = document.getElementById('replies-loading');

                // Store all replies for quote lookup
                data.replies.forEach(r => { allReplies[r.uri] = r; });
                if (loading) loading.remove();

                data.replies.forEach(r => {
                    container.insertAdjacentHTML('beforeend', renderReply(r));
                });

                if (data.cursor) {
                    nextCursor = data.cursor;
                    document.getElementById('replies-next').classList.remove('hidden');
                } else {
                    nextCursor = null;
                    document.getElementById('replies-next').classList.add('hidden');
                }

                if (container.children.length === 0 && !userDid) {
                    container.innerHTML = '<p class="text-neutral-500">No replies yet.</p>';
                }
            })
            .catch(() => {
                const loading = document.getElementById('replies-loading');
                if (loading) loading.textContent = 'Could not fetch replies.';
            });
    }

    document.getElementById('load-more').addEventListener('click', () => {
        if (nextCursor) loadReplies(nextCursor);
    });

    loadReplies(null);
</script>
{% endblock %}