/**
 * Translation with AI - JavaScript Handler
 */

(function ($) {
    'use strict';

    let translationModal = null;

    /**
     * Create and show translation modal
     */
    function showTranslationModal(postId, nonce) {
        // Remove existing modal if any
        if (translationModal) {
            translationModal.remove();
        }

        // Create modal HTML
        const modalHTML = `
            <div id="aibui-translation-modal" class="aibui-modal-overlay">
                <div class="aibui-modal-content">
                    <div class="aibui-modal-header">
                        <h2>✨ Translate with AI</h2>
                        <button class="aibui-modal-close" aria-label="Close">&times;</button>
                    </div>
                    <div class="aibui-modal-body">
                        <p>Select the target language for translation:</p>
                        <div class="aibui-form-group">
                            <label for="aibui-target-lang">Target Language:</label>
                            <select id="aibui-target-lang" class="aibui-select">
                                <option value="">-- Select Language --</option>
                                ${Object.entries(aibuiTranslation.languages).map(([code, name]) =>
            `<option value="${code}">${name}</option>`
        ).join('')}
                            </select>
                        </div>
                        <div class="aibui-modal-message" id="aibui-modal-message" style="display: none;"></div>
                    </div>
                    <div class="aibui-modal-footer">
                        <button type="button" class="button button-secondary aibui-modal-cancel">Cancel</button>
                        <button type="button" class="button button-primary aibui-modal-translate" data-post-id="${postId}" data-nonce="${nonce}">
                            <span class="aibui-translate-text">Translate</span>
                            <span class="aibui-loading-spinner" style="display: none;">
                                <span class="spinner is-active" style="float: none; margin: 0;"></span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        `;

        // Append to body
        $('body').append(modalHTML);
        translationModal = $('#aibui-translation-modal');

        // Show modal with fade-in
        setTimeout(() => {
            translationModal.addClass('aibui-modal-visible');
        }, 10);

        // Close handlers
        translationModal.find('.aibui-modal-close, .aibui-modal-cancel').on('click', closeModal);
        translationModal.on('click', function (e) {
            if ($(e.target).hasClass('aibui-modal-overlay')) {
                closeModal();
            }
        });

        // Escape key handler
        $(document).on('keydown.aibuiTranslation', function (e) {
            if (e.key === 'Escape' && translationModal && translationModal.hasClass('aibui-modal-visible')) {
                closeModal();
            }
        });

        // Translate button handler
        translationModal.find('.aibui-modal-translate').on('click', function () {
            const $button = $(this);
            const targetLang = $('#aibui-target-lang').val();

            if (!targetLang) {
                showMessage('Please select a target language.', 'error');
                return;
            }

            handleTranslation($button, postId, targetLang, nonce);
        });
    }

    /**
     * Close modal
     */
    function closeModal() {
        if (translationModal) {
            translationModal.removeClass('aibui-modal-visible');
            setTimeout(() => {
                translationModal.remove();
                translationModal = null;
                $(document).off('keydown.aibuiTranslation');
            }, 300);
        }
    }

    /**
     * Show message in modal
     */
    function showMessage(message, type) {
        const $messageEl = $('#aibui-modal-message');
        $messageEl
            .removeClass('aibui-message-error aibui-message-success')
            .addClass('aibui-message-' + type)
            .text(message)
            .fadeIn();

        if (type === 'success') {
            setTimeout(() => {
                $messageEl.fadeOut();
            }, 3000);
        }
    }

    /**
     * Handle translation AJAX request
     */
    function handleTranslation($button, postId, targetLang, nonce) {
        const $translateText = $button.find('.aibui-translate-text');
        const $spinner = $button.find('.aibui-loading-spinner');

        // Disable button and show loading
        $button.prop('disabled', true);
        $translateText.hide();
        $spinner.show();

        // Clear previous messages
        $('#aibui-modal-message').hide();

        // Make AJAX request
        $.ajax({
            url: aibuiTranslation.ajaxurl,
            type: 'POST',
            timeout: 180000, // 5 minutes - AI translation can take longer for large pages
            data: {
                action: 'aibui_translate_post',
                nonce: aibuiTranslation.nonce,
                post_id: postId,
                target_lang: targetLang,
            },
            success: function (response) {
                if (response.success) {
                    showMessage('Translation created successfully! Redirecting...', 'success');

                    // Redirect to edit page after short delay
                    setTimeout(() => {
                        if (response.data && response.data.edit_url) {
                            window.location.href = response.data.edit_url;
                        } else {
                            window.location.reload();
                        }
                    }, 1500);
                } else {
                    showMessage(response.data?.message || 'Translation failed. Please try again.', 'error');
                    $button.prop('disabled', false);
                    $translateText.show();
                    $spinner.hide();
                }
            },
            error: function (xhr, status, error) {
                showMessage('Network error. Please try again.', 'error');
                $button.prop('disabled', false);
                $translateText.show();
                $spinner.hide();
            }
        });
    }

    /**
     * Initialize on document ready
     */
    $(document).ready(function () {
        // Handle click on translate link
        $(document).on('click', '.aibui-translate-link', function (e) {
            e.preventDefault();
            const postId = $(this).data('post-id');
            const nonce = $(this).data('nonce');
            showTranslationModal(postId, nonce);
        });
    });

})(jQuery);