{% load static %}
{# ─────────────────────────────────────────────────────────────────────── #}
{# _bud_add_panel.html — bottom-left handshake btn + slide-out add-     #}
{# bud field. Mirrors _bud_panel.html (post-share) but POSTs to       #}
{# add_bud and appends to #id_buds_list instead of #id_post_table.   #}
{# Included by my_buds.html only.                                      #}
{# ─────────────────────────────────────────────────────────────────────── #}

<button id="id_bud_btn" type="button" aria-label="Add a bud">
    <i class="fa-solid fa-handshake"></i>
</button>

<div id="id_bud_panel" data-add-url="{% url 'billboard:add_bud' %}">
    <input id="id_recipient"
           name="recipient"
           type="text"
           placeholder="friend@example.com or username"
           autocomplete="off">
    <button id="id_bud_ok" type="button" class="btn btn-confirm">OK</button>
</div>

{# Autocomplete suggestions list — sibling of #id_bud_panel because the  #}
{# panel has overflow:hidden for its scaleX slide animation.             #}
<div id="id_bud_suggestions" class="bud-suggestions" hidden></div>

<script src="{% static 'apps/billboard/bud-autocomplete.js' %}"></script>
<script>
    bindBudAutocomplete(
        document.getElementById('id_recipient'),
        document.getElementById('id_bud_suggestions'),
        { searchUrl: '{% url "billboard:search_buds" %}' }
    );
</script>

<script>
(function () {
    'use strict';

    var btn   = document.getElementById('id_bud_btn');
    var panel = document.getElementById('id_bud_panel');
    var input = document.getElementById('id_recipient');
    var ok    = document.getElementById('id_bud_ok');
    var html  = document.documentElement;
    if (!btn || !panel || !input || !ok) return;

    function _csrf() {
        var m = document.cookie.match(/csrftoken=([^;]+)/);
        return m ? m[1] : '';
    }

    function _open() {
        html.classList.add('bud-open');
        btn.classList.add('active');
        setTimeout(function () { input.focus(); }, 60);
    }

    function _close(opts) {
        opts = opts || {};
        html.classList.remove('bud-open');
        btn.classList.remove('active');
        if (opts.clear !== false) input.value = '';
    }

    btn.addEventListener('click', function () {
        if (html.classList.contains('bud-open')) {
            _close();
        } else {
            _open();
        }
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && html.classList.contains('bud-open')) _close();
    });

    document.addEventListener('click', function (e) {
        if (!html.classList.contains('bud-open')) return;
        if (panel.contains(e.target)) return;
        if (e.target === btn || btn.contains(e.target)) return;
        // Suggestions live outside the panel (panel has overflow:hidden
        // for its scaleX slide); a click inside them must NOT close+clear.
        var sg = document.getElementById('id_bud_suggestions');
        if (sg && sg.contains(e.target)) return;
        _close();
    });

    function _appendBudEntry(bud) {
        var list = document.getElementById('id_buds_list');
        if (!list || !bud) return;
        // Skip if already in DOM (server-side dedup ensures M2M idempotence;
        // this guards a fast double-click that races the post-add refresh).
        if (list.querySelector('[data-bud-id="' + bud.id + '"]')) return;
        // Drop the empty-state row if present
        var empty = list.querySelector('.bud-entry--empty');
        if (empty) empty.remove();

        var li = document.createElement('li');
        li.className = 'bud-entry';
        li.dataset.budId = bud.id;
        var name = document.createElement('span');
        name.className = 'bud-name';
        name.textContent = bud.username;
        li.appendChild(name);
        var buffer = list.querySelector('.bud-entry-buffer');
        if (buffer) list.insertBefore(li, buffer);
        else list.appendChild(li);
    }

    ok.addEventListener('click', function () {
        var email = input.value.trim();
        if (!email) return;

        var fd = new FormData();
        fd.set('recipient', email);

        fetch(panel.dataset.addUrl, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Accept':       'application/json',
                'X-CSRFToken':  _csrf(),
            },
            body: fd,
        })
            .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
            .then(function (data) {
                if (data.bud) _appendBudEntry(data.bud);
                _close({ clear: true });
            })
            .catch(function () {
                // Privacy-safe response shape — even an unregistered email is
                // a 200 w. {bud: null}. Network/5xx land here; just close.
            });
    });

    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            ok.click();
        }
    });
}());
</script>