(function($){

// Show modal on Insert Menu click and hide iframe
$('#vmo-insert-menu-btn').on('click', function () {
    $('#vmo-menu-modal').show();
    $('#vmo-preview-iframe').css('visibility', 'hidden');
});

// Close modal and show iframe
$('#vmo-menu-modal-close').on('click', function () {
    $('#vmo-menu-modal').hide();
    $('#vmo-preview-iframe').css('visibility', 'visible');
});

// Add another menu item
$('#vmo-add-menu-item').on('click', function (e) {
    e.preventDefault();
    $('#vmo-menu-items').append(
        '<div><input type="text" class="vmo-menu-item-name" placeholder="Name"><input type="text" class="vmo-menu-item-link" placeholder="Link"></div>'
    );
});

// Insert menu prompt into main prompt input (preset prompt with submenu rules)
$('#vmo-insert-menu-prompt').on('click', function () {
    const type = $('#vmo-menu-type').val();
    const position = $('#vmo-menu-position').val();
    const logo = $('#vmo-menu-logo').val();
    const extra = $('#vmo-menu-extra').val();

    // Collect menu items
    let items = [];
    $('#vmo-menu-items').find('div').each(function () {
        const name = $(this).find('.vmo-menu-item-name').val();
        const link = $(this).find('.vmo-menu-item-link').val();
        if (name && link) items.push(`${name} (${link})`);
    });

    // Preset prompt with submenu width and transparency rules
    let prompt = `Create a floating, always-visible ${type} menu positioned at the ${position}. `;
    if (logo) prompt += `Include this logo: ${logo}. `;
    prompt += `Menu items: ${items.join(', ')}. `;
    if (extra) prompt += `Style/behavior: ${extra}. `;
    prompt += `If there are submenus, make sure they do not stay open after the mouse leaves. Style all submenus so their background is at least 55% transparent and their width is always at least one-sixth (1/6) of the website width. The color and other submenu styles can be left for the user to customize. Menu should have a higher z-index than all other elements and remain visible on scroll. Return only the HTML and CSS, no <html> or <body> tags.`;

    // Insert prompt into the input box for user to send/edit
    $('#vmo-prompt-input').val(prompt).focus();

    // Store config for editing
    const config = { type, position, logo, extra, items };
    const configJSON = JSON.stringify(config);

    // Hide modal and show iframe
    $('#vmo-menu-modal').hide();
    $('#vmo-preview-iframe').css('visibility', 'visible');

    // Store config for later use (e.g., after AI response)
    window.vmoMenuConfigJSON = configJSON;
});

// When the AI response is received and the user clicks SEND (or however you handle inserting the menu into the builder):
function insertMenuFromPromptResponse(newMenuHTML) {
    // Remove any existing menu block before inserting the new one
    $('.vmo-menu-block').remove();

    // Insert the new menu block
    $('#builder-canvas').append(
        `<div class="vmo-menu-block" data-menu-config='${window.vmoMenuConfigJSON}'>${newMenuHTML}</div>`
    );
    // Optionally clear the stored config
    window.vmoMenuConfigJSON = null;
}

// Edit menu: open modal with existing config and hide iframe
$(document).on('click', '.vmo-menu-block', function () {
    const config = JSON.parse($(this).attr('data-menu-config') || '{}');
    if (!config) return;

    // Fill modal fields
    $('#vmo-menu-type').val(config.type || 'Hamburger');
    $('#vmo-menu-position').val(config.position || 'Top Left');
    $('#vmo-menu-logo').val(config.logo || '');
    $('#vmo-menu-extra').val(config.extra || '');

    // Clear and refill menu items
    $('#vmo-menu-items').empty();
    (config.items || []).forEach(item => {
        $('#vmo-menu-items').append(
            `<div>
                <input type="text" class="vmo-menu-item-name" placeholder="Name" value="${item.name}">
                <input type="text" class="vmo-menu-item-link" placeholder="Link" value="${item.link}">
            </div>`
        );
    });

    // Show modal and hide iframe
    $('#vmo-menu-modal').show();
    $('#vmo-preview-iframe').css('visibility', 'hidden');
});
})(jQuery);