/**
 * JSON Popup for ACF Field Copy/Paste
 */
(function ($) {
    'use strict';

    window.ACFFieldJSONPopup = {
        /**
         * Show popup with JSON for copying
         */
        showCopyPopup: function (fieldJSON) {
            var html = `
                <div class="acf-json-popup-overlay">
                    <div class="acf-json-popup">
                        <div class="acf-json-popup-header">
                            <h3>Copy Field JSON</h3>
                            <button class="acf-json-popup-close">&times;</button>
                        </div>
                        <div class="acf-json-popup-body">
                            <textarea class="acf-json-textarea" readonly>${fieldJSON}</textarea>
                            <button class="acf-json-copy-btn">Copy to Clipboard</button>
                        </div>
                    </div>
                </div>
            `;

            $('body').append(html);

            // Close handlers
            $('.acf-json-popup-close, .acf-json-popup-overlay').on('click', function (e) {
                if (e.target === this) {
                    $('.acf-json-popup-overlay').remove();
                }
            });

            // Copy button
            $('.acf-json-copy-btn').on('click', function () {
                var $textarea = $('.acf-json-textarea');
                $textarea.select();
                document.execCommand('copy');
                $(this).text('✓ Copied!');
                setTimeout(function () {
                    $('.acf-json-popup-overlay').remove();
                }, 500);
            });

            // Select text on click
            $('.acf-json-textarea').on('click', function () {
                $(this).select();
            });
        },

        /**
         * Show popup for pasting JSON
         */
        showPastePopup: function (callback) {
            var html = `
                <div class="acf-json-popup-overlay">
                    <div class="acf-json-popup">
                        <div class="acf-json-popup-header">
                            <h3>Paste Field JSON</h3>
                            <button class="acf-json-popup-close">&times;</button>
                        </div>
                        <div class="acf-json-popup-body">
                            <textarea class="acf-json-textarea" placeholder="Paste your field JSON here..."></textarea>
                            <button class="acf-json-paste-btn">Import Field</button>
                        </div>
                    </div>
                </div>
            `;

            $('body').append(html);

            // Close handlers
            $('.acf-json-popup-close, .acf-json-popup-overlay').on('click', function (e) {
                if (e.target === this) {
                    $('.acf-json-popup-overlay').remove();
                }
            });

            // Paste button
            $('.acf-json-paste-btn').on('click', function () {
                var json = $('.acf-json-textarea').val().trim();
                if (json) {
                    $('.acf-json-popup-overlay').remove();
                    callback(json);
                }
            });

            // Focus textarea
            $('.acf-json-textarea').focus();
        }
    };

})(jQuery);
