document.addEventListener('DOMContentLoaded', function () {
    var data = document.getElementById('pc-data');
    if (!data) return;

    var defaultTitle = data.dataset.defaultTitle;
    var defaultDesc  = data.dataset.defaultDesc;
    var baseUrl      = data.dataset.baseUrl;

    function initCounter(inputId, counterId, max) {
        var el = document.getElementById(inputId);
        var ct = document.getElementById(counterId);
        if (!el || !ct) return;
        function upd() {
            var n = el.value.length;
            ct.textContent = n + ' / ' + max;
            ct.className = n > max ? 'text-danger' : 'text-muted';
        }
        el.addEventListener('input', upd);
        upd();
    }
    initCounter('seo_title', 'seo_title_counter', 60);
    initCounter('seo_description', 'seo_desc_counter', 155);

    function updatePreview() {
        var seoTitle = document.getElementById('seo_title').value.trim();
        var seoDesc  = document.getElementById('seo_description').value.trim();
        var slug     = document.getElementById('confirm-slug').value.trim();
        document.getElementById('preview-title').textContent = seoTitle || defaultTitle;
        document.getElementById('preview-desc').textContent  = seoDesc  || defaultDesc;
        document.getElementById('preview-url').textContent   = baseUrl + slug;
    }

    ['seo_title', 'seo_description', 'confirm-slug'].forEach(function (id) {
        var el = document.getElementById(id);
        if (el) el.addEventListener('input', updatePreview);
    });

    var slugInput   = document.getElementById('confirm-slug');
    var slugDisplay = document.getElementById('slug-display');

    var btnSuggest = document.getElementById('slug-btn-suggest');
    if (btnSuggest) {
        btnSuggest.addEventListener('click', function () {
            var val = btnSuggest.dataset.slugSuggest;
            slugInput.value = val;
            slugDisplay.textContent = val;
            updatePreview();
        });
    }

    var btnKeep = document.getElementById('slug-btn-keep');
    if (btnKeep) {
        btnKeep.addEventListener('click', function () {
            var val = btnKeep.dataset.slugKeep;
            slugInput.value = val;
            slugDisplay.textContent = val;
            updatePreview();
        });
    }

    updatePreview();
});