(function() {
    'use strict';

    document.addEventListener('DOMContentLoaded', function() {
        var toggles = document.querySelectorAll('.probonoseo-toggle');

        toggles.forEach(function(toggle) {
            if (toggle.classList.contains('is-locked')) {
                toggle.addEventListener('mouseenter', function() {
                    var tooltip = this.querySelector('.probonoseo-toggle-tooltip');
                    var msg = this.dataset.offMessage || 'Pro版で利用可能';
                    if (tooltip) {
                        tooltip.textContent = msg;
                        tooltip.classList.add('show');
                    }
                });
                toggle.addEventListener('mouseleave', function() {
                    var tooltip = this.querySelector('.probonoseo-toggle-tooltip');
                    if (tooltip) {
                        tooltip.classList.remove('show');
                    }
                });
                return;
            }

            toggle.addEventListener('click', function(e) {
                e.preventDefault();

                var input = this.querySelector('input[type="hidden"]');
                if (!input) return;

                var isOn = this.classList.contains('is-on');

                if (isOn) {
                    this.classList.remove('is-on');
                    input.value = '0';
                } else {
                    this.classList.add('is-on');
                    input.value = '1';
                }
            });
        });

        var pickers = document.querySelectorAll('.probonoseo-media-picker');

        pickers.forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();

                if (typeof wp === 'undefined' || !wp.media) {
                    return;
                }

                var targetId = this.dataset.target;
                if (!targetId) return;

                var target = document.getElementById(targetId);
                if (!target) return;

                var fieldWrap = this.parentNode;
                var preview = fieldWrap ? fieldWrap.querySelector('.probonoseo-image-url-preview') : null;

                var frame = wp.media({
                    title: '画像を選択',
                    button: { text: '選択' },
                    library: { type: 'image' },
                    multiple: false
                });

                frame.on('select', function() {
                    var selection = frame.state().get('selection');
                    if (!selection) return;
                    var attachment = selection.first();
                    if (!attachment) return;
                    var data = attachment.toJSON();
                    if (data && data.url) {
                        target.value = data.url;
                        if (preview) {
                            preview.innerHTML = '<img src="' + data.url + '" alt="" class="probonoseo-image-url-thumb">';
                        }
                    }
                });

                frame.open();
            });
        });

        var urlInputs = document.querySelectorAll('.probonoseo-image-url-input');
        urlInputs.forEach(function(input) {
            input.addEventListener('change', function() {
                var fieldWrap = this.closest('.probonoseo-image-url-field');
                if (!fieldWrap) return;
                var preview = fieldWrap.querySelector('.probonoseo-image-url-preview');
                if (!preview) return;
                var value = this.value.trim();
                if (value) {
                    preview.innerHTML = '<img src="' + value + '" alt="" class="probonoseo-image-url-thumb">';
                } else {
                    preview.innerHTML = '';
                }
            });
        });
    });
})();