{% load static %}
{% load lyric_extras %}
{# ─────────────────────────────────────────────────────────────────────── #}
{# _bud_invite_panel.html — bud btn + slide-out for the gatekeeper game- #}
{# invite flow. Replaces the legacy `<form action="invite_gamer">`        #}
{# inline panel inside _gatekeeper.html.                                  #}
{#                                                                         #}
{# Differences from the post-share variant (_bud_panel.html):              #}
{#   • POSTs to epic:invite_gamer instead of billboard:share_post.         #}
{#   • Server returns {brief, recipient_display} — no line_text (no Post     #}
{#     to append a Line to). JS just shows the Brief banner.               #}
{#                                                                         #}
{# Caller must pass `room` in context.                                    #}
{# ─────────────────────────────────────────────────────────────────────── #}

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

<div id="id_bud_panel"
     data-invite-url="{% url 'epic:invite_gamer' room.id %}"
     data-sharer-name="{% if request.user.is_authenticated %}{{ request.user|display_name }}{% endif %}">
    <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 — sibling because the panel has overflow:hidden #}
{# for the slide-in scaleX animation. Pulls from request.user.buds.        #}
<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; clicking inside them must
        // NOT close+clear the panel.
        var sg = document.getElementById('id_bud_suggestions');
        if (sg && sg.contains(e.target)) return;
        _close();
    });

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

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

        fetch(panel.dataset.inviteUrl, {
            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 (window.Brief && data.brief) Brief.showBanner(data.brief);
                _close({ clear: true });
            })
            .catch(function () {
                // Privacy-safe: even unregistered/self resolves to 200
                // {brief: null}; only network/5xx land here. Just close.
            });
    });

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