{% extends "base.html" %}
{% block title %}Account — atboards{% endblock %}
{% block content %}
<div class="mb-6">
    <h1 class="text-lg text-neutral-200 mb-1">Account</h1>
    <p class="text-neutral-500">Logged in as <a href="https://pdsls.dev/at/{{ user.did }}" target="_blank" class="text-neutral-400 hover:text-neutral-300">{{ user.handle }}</a>.</p>
</div>

<!-- Tabs -->
<div class="flex gap-4 border-b border-neutral-800 mb-6">
    <button onclick="showTab('inbox')" id="tab-inbox" class="tab-btn py-2 text-neutral-200 border-b-2 border-neutral-200">Inbox</button>
    {% if has_bbs %}
    <button onclick="showTab('bbs')" id="tab-bbs" class="tab-btn py-2 text-neutral-500 hover:text-neutral-300 border-b-2 border-transparent">{{ bbs_name }}</button>
    {% else %}
    <button onclick="showTab('bbs')" id="tab-bbs" class="tab-btn py-2 text-neutral-500 hover:text-neutral-300 border-b-2 border-transparent">Your BBS</button>
    {% endif %}
</div>

<!-- Inbox tab -->
<div id="panel-inbox">
    <div id="inbox">
        <p id="inbox-loading" class="text-neutral-500">Loading...</p>
    </div>
    <div id="inbox-next" class="mt-4 text-center hidden">
        <button id="load-more" class="text-neutral-500 hover:text-neutral-300">next page →</button>
    </div>
</div>

<!-- BBS tab -->
<div id="panel-bbs" class="hidden">
    {% if has_bbs %}
    <div class="grid grid-cols-2 gap-3 max-w-md">
        <a href="/bbs/{{ user.handle }}" class="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700">
            <div class="text-neutral-200 mb-1">Browse</div>
            <div class="text-xs text-neutral-500">View your BBS.</div>
        </a>
        <a href="/account/edit" class="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700">
            <div class="text-neutral-200 mb-1">Edit</div>
            <div class="text-xs text-neutral-500">Name, boards, intro.</div>
        </a>
        <a href="/account/moderate" class="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700">
            <div class="text-neutral-200 mb-1">Moderate</div>
            <div class="text-xs text-neutral-500">Bans and hidden posts.</div>
        </a>
        <form method="post" action="/account/delete" onsubmit="return confirm('Are you sure? This will delete your site record, all board records, and all news records. Threads and replies from users will remain in their repos.')">
            <button type="submit" class="w-full text-left bg-neutral-900 border border-neutral-800 rounded px-4 py-3 hover:border-red-900">
                <div class="text-neutral-500 mb-1">Delete</div>
                <div class="text-xs text-neutral-600">Remove your BBS.</div>
            </button>
        </form>
    </div>
    {% else %}
    <p class="text-neutral-500 mb-4">You haven't set up a BBS yet.</p>
    <a href="/account/create" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded inline-block">
        create a bbs
    </a>
    {% endif %}
</div>

<script>
    function showTab(name) {
        document.querySelectorAll('.tab-btn').forEach(b => {
            b.classList.remove('text-neutral-200', 'border-neutral-200');
            b.classList.add('text-neutral-500', 'border-transparent');
        });
        document.getElementById('tab-' + name).classList.remove('text-neutral-500', 'border-transparent');
        document.getElementById('tab-' + name).classList.add('text-neutral-200', 'border-neutral-200');

        document.getElementById('panel-inbox').classList.add('hidden');
        document.getElementById('panel-bbs').classList.add('hidden');
        document.getElementById('panel-' + name).classList.remove('hidden');
    }

    let nextCursor = null;

    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 loadInbox(cursor) {
        let url = '/api/inbox';
        if (cursor) url += `?cursor=${encodeURIComponent(cursor)}`;

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

                data.inbox.forEach(m => {
                    const parts = m.thread_uri.split('/');
                    const threadDid = parts[2];
                    const threadRkey = parts[parts.length - 1];
                    const handle = "{{ user.handle }}";

                    const el = document.createElement('a');
                    el.href = `/bbs/${handle}/thread/${threadDid}/${threadRkey}`;
                    el.className = "block border border-neutral-800/50 rounded p-4 mb-2 hover:bg-neutral-900";
                    const label = m.type === 'quote' ? 'quoted your reply' : 'on: ' + escapeHtml(m.thread_title);
                    el.innerHTML = `<div class="flex items-baseline justify-between mb-1"><span class="text-neutral-300">${escapeHtml(m.handle)}</span><span class="text-xs text-neutral-500">${formatDate(m.created_at)}</span></div><p class="text-xs text-neutral-500 mb-1">${label}</p><p class="text-neutral-400">${escapeHtml(m.body)}</p>`;
                    container.appendChild(el);
                });

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

                if (container.children.length === 0) {
                    container.innerHTML = '<p class="text-neutral-500">No messages yet.</p>';
                }
            })
            .catch(() => {
                const loading = document.getElementById('inbox-loading');
                if (loading) loading.textContent = 'Failed to load inbox.';
            });
    }

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

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