//Dosya adı: ft_react.js 
// Tepki menüsünü aç / kapa 
function ft_toggle_react_menu(postid) {
    var menu = document.getElementById('ft_react_menu_' + postid);
    if (!menu) return;

    if (menu.style.display == 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
}

// Tepki gönder
function ft_send_reaction(type, postid, reactionid) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'ft_react.php', true); // dosya adın react.php ise burayı react.php yap
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    var params =
        'type='       + encodeURIComponent(type) +
        '&postid='    + encodeURIComponent(postid) +
        '&reactionid='+ encodeURIComponent(reactionid);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                if (!xhr.responseText) return;

                var data;
                try {
                    data = JSON.parse(xhr.responseText);
                } catch (e) {
                    if (window.console) console.log('ft_react JSON error:', xhr.responseText);
                    return;
                }

                if (data.success) {
                    // Menü kapanır
                    var menu = document.getElementById('ft_react_menu_' + postid);
                    if (menu) menu.style.display = 'none';

                    // Buton ikonu anında güncellensin
                    if (typeof data.user_reactionid != 'undefined') {
                        ft_update_like_button(postid, data.user_reactionid);
                    } else if (typeof data.reaction != 'undefined') {
                        ft_update_like_button(postid, data.reaction);
                    }

                    // Özet satırını yenile
                    ft_reload_reaction_summary(postid);
                } else {
                    // Kendi mesajına tepki vs.
                    if (data.error == 'own_post') {
                        alert('Kendi mesajınıza tepki bırakamazsınız.');
                    }
                }
            }
        }
    };

    xhr.send(params);
}

// Özet ve butonu yenile
function ft_reload_reaction_summary(postid) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'ft_reaction_summary.php?postid=' + encodeURIComponent(postid), true);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (!xhr.responseText) return;

            var data;
            try {
                data = JSON.parse(xhr.responseText);
            } catch (e) {
                if (window.console) console.log('ft_reaction_summary JSON error:', xhr.responseText);
                return;
            }

            // Özet HTML
            if (typeof data.html != 'undefined') {
                var span = document.getElementById('ft_react_summary_' + postid);
                if (span) span.innerHTML = data.html;
            }

            // Beğen düğmesinin ikonu
            if (typeof data.user_reactionid != 'undefined') {
                ft_update_like_button(postid, data.user_reactionid);
            }
        }
    };

    xhr.send(null);
}

// Beğen düğmesi ikonunu değiştir
function ft_update_like_button(postid, reactionid) {
    var img = document.getElementById('ft_like_btn_img_' + postid);
    if (!img) return;

    // 0 veya boş ise varsayılan "Beğen" ikonuna dön
    if (!reactionid || reactionid == 0) {
        img.src = 'images/reactions/begen.png';
        img.alt = 'Beğen';
        return;
    }

    var map = {
        1: 'like.png',
        2: 'heart.png',
        3: 'haha.png',
        4: 'wow.png',
        5: 'sad.png',
        6: 'angry.png',
        7: 'care.png'
    };

    var file = map[reactionid] || 'begen.png';
    img.src = 'images/reactions/' + file;
    img.alt = '';
}

// Sayfa yüklenince tüm postlar için özetleri çek
document.addEventListener('DOMContentLoaded', function () {
    var summaries = document.querySelectorAll('.ft-reaction-summary[data-postid]');
    for (var i = 0; i < summaries.length; i++) {
        var pid = summaries[i].getAttribute('data-postid');
        if (pid) {
            ft_reload_reaction_summary(pid);
        }
    }
});

// =========================
//  Tepki verenler MODAL'ı
//  (sekme + avatar + tarih)
// =========================

function ft_open_react_modal(postid, reactionid) {
    var xhr = new XMLHttpRequest();
    xhr.open(
        'GET',
        'ft_reaction_modal.php?postid=' + encodeURIComponent(postid) +
        '&reactionid=' + encodeURIComponent(reactionid || 0),
        true
    );

    xhr.onreadystatechange = function () {
        if (xhr.readyState !== 4) return;

        if (xhr.status !== 200) {
            alert('Tepki listesi alınamadı (HTTP ' + xhr.status + ').');
            return;
        }

        // Bazı PHP dosyalarında BOM olabiliyor, baştaki gizli karakteri temizle
        var raw = xhr.responseText || '';
        raw = raw.replace(/^\uFEFF/, '');

        var data;
        try {
            data = JSON.parse(raw);
        } catch (e) {
            if (window.console) console.error('JSON parse hatası:', raw, e);
            alert('Tepki listesi çözümlenemedi.');
            return;
        }

        if (!data || !data.groups || !data.groups.length) {
            alert('Bu mesaja henüz ifade yok.');
            return;
        }

        // --- Tüm kullanıcıları tek listede topla (Tümü sekmesi için)
        var allUsers = [];
        for (var g = 0; g < data.groups.length; g++) {
            var grp = data.groups[g];
            var users = grp.users || [];
            for (var u = 0; u < users.length; u++) {
                var usr = users[u];
                allUsers.push({
                    reactionid: grp.reactionid,
                    icon:       grp.icon,
                    label:      grp.label,
                    userid:     usr.userid,
                    username:   usr.username,
                    posts:      usr.posts || 0,
                    avatar:     usr.avatar || '',
                    date:       usr.date || '',
                    rawdate:    usr.rawdate || 0
                });
            }
        }

        var totalCount = allUsers.length;

        // Modal kapsayıcısı
        var wrapper = document.getElementById('ft_react_modal');
        if (!wrapper) {
            wrapper = document.createElement('div');
            wrapper.id = 'ft_react_modal';
            document.body.appendChild(wrapper);
        }

        // -------------------------
        //  HTML iskeletini oluştur
        // -------------------------
        var html = '';

        // Karanlık arka plan
        html += '<div class="ft-react-modal-overlay" onclick="ft_close_react_modal()"></div>';

        // Kutunun kendisi
        html += '<div class="ft-react-modal-box">';
        html += '  <div class="ft-react-modal-header">';
        html += '    <span>' + (data.title || ('İfade bırakanlar #' + postid)) + '</span>';
        html += '    <a href="#" class="ft-react-modal-close" onclick="ft_close_react_modal(); return false;">×</a>';
        html += '  </div>';

        // Sekme barı
        html += '  <div class="ft-react-modal-tabs">';
        html += '    <a href="#" class="ft-react-tab" data-filter="all">Tümü (' + totalCount + ')</a>';
        for (var g2 = 0; g2 < data.groups.length; g2++) {
            var grp2 = data.groups[g2];
            html += '    <a href="#" class="ft-react-tab" data-filter="' + grp2.reactionid + '">';
            html += '      <img src="images/reactions/' + grp2.icon + '" class="ft-tab-icon" alt="" /> ';
            html +=          grp2.label + ' (' + grp2.count + ')';
            html += '    </a>';
        }
        html += '  </div>';

        // Gövde
        html += '  <div class="ft-react-modal-body">';

        if (!allUsers.length) {
            html += '<div class="ft-react-empty">Bu mesaja tepki yok.</div>';
        } else {
            for (var i = 0; i < allUsers.length; i++) {
                var info = allUsers[i];

                html += '<div class="ft-react-user-row" data-reaction="' + info.reactionid + '">';

                // Avatar
                html += '  <div class="ft-react-user-avatar">';
                if (info.avatar) {
                    html += '    <img src="' + info.avatar + '" alt="' + info.username + '" />';
                } else {
                    html += '    <div class="ft-avatar-placeholder"></div>';
                }
                html += '  </div>';

                // Kullanıcı adı + meta
                html += '  <div class="ft-react-user-main">';
                html += '    <div class="ft-react-username">';
                html += '      <a href="member.php?u=' + info.userid + '">' + info.username + '</a>';
                html += '    </div>';
                html += '    <div class="ft-react-user-meta">';
                html += '      Mesajlar: ' + info.posts;
                if (info.date) {
                    html += ' • ' + info.date;
                }
                html += '    </div>';
                html += '  </div>';

                // Sağda tepki ikonu
                html += '  <div class="ft-react-user-reaction">';
                html += '    <img src="images/reactions/' + info.icon + '" class="ft-react-icon-small" alt="' + info.label + '" />';
                html += '  </div>';

                html += '</div>'; // .ft-react-user-row
            }
        }

        html += '  </div>'; // .ft-react-modal-body
        html += '</div>';   // .ft-react-modal-box

        wrapper.innerHTML = html;
        wrapper.style.display = 'block';

        // -------------------------
        //  Sekme davranışı (filtre)
        // -------------------------
        var tabsContainer = wrapper.querySelector('.ft-react-modal-tabs');
        if (!tabsContainer) return;

        var tabs = tabsContainer.getElementsByClassName('ft-react-tab');
        var rows = wrapper.getElementsByClassName('ft-react-user-row');

        function setActiveTab(tab, filter) {
            // aktif sınıf
            for (var t = 0; t < tabs.length; t++) {
                tabs[t].className = tabs[t].className.replace(/\bft-react-tab-active\b/g, '').replace(/\s+$/, '');
            }
            tab.className += ' ft-react-tab-active';

            // satırları filtrele
            for (var r = 0; r < rows.length; r++) {
                var rid = rows[r].getAttribute('data-reaction');
                if (filter === 'all' || filter === rid) {
                    rows[r].style.display = '';
                } else {
                    rows[r].style.display = 'none';
                }
            }
        }

        for (var t2 = 0; t2 < tabs.length; t2++) {
            tabs[t2].onclick = function (ev) {
                ev = ev || window.event;
                if (ev.preventDefault) ev.preventDefault();
                ev.returnValue = false;

                var filter = this.getAttribute('data-filter');
                setActiveTab(this, filter);
                return false;
            };
        }

        // İlk açılışta hangi sekme aktif?
        var initialFilter = reactionid ? String(reactionid) : 'all';
        var initialTab = null;

        for (var t3 = 0; t3 < tabs.length; t3++) {
            if (tabs[t3].getAttribute('data-filter') === initialFilter) {
                initialTab = tabs[t3];
                break;
            }
        }
        if (!initialTab && tabs.length) {
            initialTab = tabs[0];
        }
        if (initialTab) {
            setActiveTab(initialTab, initialFilter);
        }
    };

    xhr.send(null);
}

function ft_close_react_modal() {
    var wrapper = document.getElementById('ft_react_modal');
    if (wrapper) {
        wrapper.style.display = 'none';
        wrapper.innerHTML = '';
    }
}