"""7.67.0 — réactions emoji visibles dans le tiroir Comments + suppression."""

from pathlib import Path

ROOT = Path(__file__).resolve().parent.parent
SRC = (ROOT / "static" / "js" / "page_editor_scripts.js").read_text(encoding="utf-8")
TPL = (ROOT / "app" / "templates" / "_page_editor_content.html").read_text(encoding="utf-8")
CSS = (ROOT / "static" / "css" / "app.css").read_text(encoding="utf-8")


def test_drawer_lists_reactions():
    # section « Reactions » du tiroir : une ligne par plage × émoji
    assert 'class="ct-reactions"' in TPL
    assert 'x-for="r in reactionList()"' in TPL
    assert '<span class="ct-re-emoji" x-text="r.emoji"></span>' in TPL
    assert '<span class="ct-re-text" x-text="r.text"></span>' in TPL
    # l'état vide ne s'affiche plus s'il reste des réactions
    assert "comments.length === 0 && !reactionList().length" in TPL
    # méthode : groupes déjà prêts côté API, texte source lu dans le DOM
    assert "reactionList(){" in SRC
    assert "_anchorText(bid,start,end)" in SRC
    # le texte source ignore les pastilles (offsets identiques à sync())
    assert "closest('.fd-react-chip'))continue;" in SRC


def test_reaction_removable_from_the_drawer():
    assert 'title="Remove reaction"' in TPL
    # le ✕ n'apparaît que sur MA réaction (les autres comptes sont en lecture)
    assert 'x-show="r.mine" @click="removeReaction(r)"' in TPL
    # suppression = POST toggle (le backend DELETE si ma ligne existe déjà)
    assert "removeReaction(r){if(!r)return;this.toggleReaction(r.bid,r.start,r.end,r.emoji);}" in SRC
    for sel in (".ct-section-title {", ".ct-reaction {", ".ct-re-emoji {", ".ct-re-text {"):
        assert sel in CSS, sel


def test_reaction_removable_from_the_chip():
    # chaque émoji de la pastille porte son data-emoji, `is-mine` = j'ai réagi
    assert 'data-emoji="' in SRC
    assert "parseInt(i.mine,10)?' is-mine':''" in SRC
    assert ("d.removeReaction({bid:bid,start:start,end:end,"
            "emoji:emo.getAttribute('data-emoji')})") in SRC
    # la croix est un ::after (aucun nœud ajouté → offsets source inchangés)
    assert ".fd-react-emo.is-mine::after {" in CSS
    assert ".fd-react-chip:hover .fd-react-emo.is-mine::after { display: flex; }" in CSS