/* Kuchikomi Wall — Floating popup widget */
(function () {
    'use strict';

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.tmnl-floating-widget').forEach(function (widget) {
            var reviews    = JSON.parse(widget.dataset.reviews || '[]');
            var showPhoto  = widget.dataset.showPhoto  !== '0';
            var showDate   = widget.dataset.showDate   !== '0';
            var current    = 0;
            var total      = reviews.length;
            var autoTimer;

            if (total === 0) return;

            var contentEl  = widget.querySelector('.tmnl-floating-content');
            var counterEl  = widget.querySelector('.tmnl-floating-counter');
            var closeBtn   = widget.querySelector('.tmnl-floating-close');
            var prevBtn    = widget.querySelector('.tmnl-float-prev');
            var nextBtn    = widget.querySelector('.tmnl-float-next');

            function stars(n) {
                var s = '';
                for (var i = 1; i <= 5; i++) s += (i <= n) ? '★' : '☆';
                return '<span class="tmnl-stars">' + s + '</span>';
            }

            function render(idx) {
                var r = reviews[idx];
                var html = '';

                html += '<div class="tmnl-floating-author">';
                if (showPhoto && r.icon) {
                    html += '<img src="' + esc(r.icon) + '" alt="" class="tmnl-floating-avatar">';
                }
                html += '<div class="tmnl-floating-meta">';
                html += '<span class="tmnl-floating-name">' + esc(r.author) + '</span>';
                html += stars(r.rating);
                html += '</div></div>';

                html += '<p class="tmnl-floating-text">' + esc(r.text) + '</p>';
                if (showDate && r.date) {
                    html += '<span class="tmnl-floating-date">' + esc(r.date) + '</span>';
                }

                contentEl.innerHTML = html;
                if (counterEl) counterEl.textContent = (idx + 1) + ' / ' + total;
            }

            function esc(str) {
                var d = document.createElement('div');
                d.textContent = str;
                return d.innerHTML;
            }

            function goTo(idx) {
                current = ((idx % total) + total) % total;
                render(current);
            }

            function startAuto() {
                stopAuto();
                if (total > 1) {
                    autoTimer = setInterval(function () { goTo(current + 1); }, 6000);
                }
            }

            function stopAuto() {
                clearInterval(autoTimer);
            }

            // Init
            render(0);
            startAuto();

            if (prevBtn) {
                prevBtn.addEventListener('click', function () {
                    stopAuto(); goTo(current - 1); startAuto();
                });
            }
            if (nextBtn) {
                nextBtn.addEventListener('click', function () {
                    stopAuto(); goTo(current + 1); startAuto();
                });
            }

            // Close
            if (closeBtn) {
                closeBtn.addEventListener('click', function () {
                    stopAuto();
                    widget.classList.add('tmnl-float-hidden');
                });
            }
        });
    });
})();
