# frontend/js_collectors.py
"""
JavaScript code snippets for collecting form data on the client side.
"""

# JavaScript to collect MOS ratings from the page
COLLECT_MOS_DATA_JS = """
(session_data, current_mos_data) => {
    window.scrollTo(0, 0);
    
    // Collect MOS data from the current page
    const ratings = {};
    
    const selects = document.querySelectorAll('select[data-clip-id]');
    const checkboxes = document.querySelectorAll('input[type="checkbox"][data-clip-id]');
    const textareas = document.querySelectorAll('textarea[data-clip-id]');
    
    console.log('[DEBUG] Found selects:', selects.length);
    console.log('[DEBUG] Found checkboxes:', checkboxes.length);
    console.log('[DEBUG] Found textareas:', textareas.length);
    
    selects.forEach(select => {
        const clipId = select.getAttribute('data-clip-id');
        const dimension = select.getAttribute('data-dimension');
        if (!ratings[clipId]) ratings[clipId] = {};
        ratings[clipId][dimension] = select.value;
        console.log('[DEBUG] Select:', clipId, dimension, select.value);
    });
    
    checkboxes.forEach(checkbox => {
        const clipId = checkbox.getAttribute('data-clip-id');
        const dimension = checkbox.getAttribute('data-dimension');
        if (!ratings[clipId]) ratings[clipId] = {};
        ratings[clipId][dimension] = checkbox.checked;
        console.log('[DEBUG] Checkbox:', clipId, dimension, checkbox.checked);
    });
    
    textareas.forEach(textarea => {
        const clipId = textarea.getAttribute('data-clip-id');
        const dimension = textarea.getAttribute('data-dimension');
        if (!ratings[clipId]) ratings[clipId] = {};
        ratings[clipId][dimension] = textarea.value;
        console.log('[DEBUG] Textarea:', clipId, dimension, textarea.value);
    });
    
    console.log('[DEBUG] Final ratings object:', ratings);
    const ratingsJson = JSON.stringify(ratings);
    console.log('[DEBUG] Ratings JSON:', ratingsJson);
    
    return [session_data, ratingsJson];
}
"""

# JavaScript to collect A/B comparison data from the page
COLLECT_AB_DATA_JS = """
(session_data, current_ab_data) => {
    window.scrollTo(0, 0);
    
    // Collect A/B data from the current page
    const ratings = {};
    
    const radios = document.querySelectorAll('input[type="radio"]:checked');
    const checkboxes = document.querySelectorAll('input[type="checkbox"][data-comparison-id]');
    const textareas = document.querySelectorAll('textarea[data-comparison-id]');
    
    console.log('[DEBUG] Found radios:', radios.length);
    console.log('[DEBUG] Found checkboxes:', checkboxes.length);
    console.log('[DEBUG] Found textareas:', textareas.length);
    
    radios.forEach(radio => {
        const compId = radio.getAttribute('data-comparison-id');
        const clipAId = radio.getAttribute('data-clip-a-id');
        const clipBId = radio.getAttribute('data-clip-b-id');
        const compType = radio.getAttribute('data-type');
        
        if (!ratings[compId]) ratings[compId] = {};
        ratings[compId].clip_a_id = clipAId;
        ratings[compId].clip_b_id = clipBId;
        ratings[compId].comparison_type = compType;
        ratings[compId].choice = radio.value;
        console.log('[DEBUG] Radio:', compId, radio.value);
    });
    
    checkboxes.forEach(checkbox => {
        const compId = checkbox.getAttribute('data-comparison-id');
        const dimension = checkbox.getAttribute('data-dimension');
        const clipAId = checkbox.getAttribute('data-clip-a-id');
        const clipBId = checkbox.getAttribute('data-clip-b-id');
        const compType = checkbox.getAttribute('data-type');
        
        if (!ratings[compId]) ratings[compId] = {};
        
        // Set the metadata if not already set (from a radio button)
        if (clipAId && !ratings[compId].clip_a_id) ratings[compId].clip_a_id = clipAId;
        if (clipBId && !ratings[compId].clip_b_id) ratings[compId].clip_b_id = clipBId;
        if (compType && !ratings[compId].comparison_type) ratings[compId].comparison_type = compType;
        
        ratings[compId][dimension] = checkbox.checked;
        console.log('[DEBUG] Checkbox:', compId, dimension, checkbox.checked);
    });
    
    textareas.forEach(textarea => {
        const compId = textarea.getAttribute('data-comparison-id');
        const dimension = textarea.getAttribute('data-dimension');
        const clipAId = textarea.getAttribute('data-clip-a-id');
        const clipBId = textarea.getAttribute('data-clip-b-id');
        const compType = textarea.getAttribute('data-type');
        
        if (!ratings[compId]) ratings[compId] = {};
        
        // Set the metadata if not already set (from a radio button)
        if (clipAId && !ratings[compId].clip_a_id) ratings[compId].clip_a_id = clipAId;
        if (clipBId && !ratings[compId].clip_b_id) ratings[compId].clip_b_id = clipBId;
        if (compType && !ratings[compId].comparison_type) ratings[compId].comparison_type = compType;
        
        ratings[compId][dimension] = textarea.value;
        console.log('[DEBUG] Textarea:', compId, dimension, textarea.value);
    });
    
    console.log('[DEBUG] Final A/B ratings object:', ratings);
    const ratingsJson = JSON.stringify(ratings);
    console.log('[DEBUG] A/B Ratings JSON:', ratingsJson);
    
    return [session_data, ratingsJson];
}
"""

# JavaScript to collect overall feedback from conclusion page
COLLECT_CONCLUSION_DATA_JS = """
(session_data, overall_feedback, final_comments, mos_data, ab_data) => {
    window.scrollTo(0, 0);
    
    console.log('[DEBUG] Export button clicked');
    console.log('[DEBUG] overall_feedback from Gradio:', overall_feedback);
    console.log('[DEBUG] final_comments from Gradio:', final_comments);
    
    // Get actual values from the DOM elements
    const radioInputs = document.querySelectorAll('input[type="radio"]');
    let selectedRadio = null;
    radioInputs.forEach(radio => {
        if (radio.checked) {
            selectedRadio = radio.value;
            console.log('[DEBUG] Found checked radio:', selectedRadio);
        }
    });
    
    const textareas = document.querySelectorAll('textarea');
    let commentsValue = '';
    textareas.forEach(textarea => {
        // Skip hidden textboxes (MOS/AB data stores)
        if (textarea.parentElement.style.display !== 'none' && !textarea.parentElement.classList.contains('hide')) {
            if (textarea.value && textarea.value.trim() !== '') {
                commentsValue = textarea.value;
                console.log('[DEBUG] Found comments textarea:', commentsValue);
            }
        }
    });
    
    console.log('[DEBUG] Final selected radio:', selectedRadio);
    console.log('[DEBUG] Final comments:', commentsValue);
    
    // Return with actual values from DOM
    return [session_data, selectedRadio, commentsValue, mos_data, ab_data];
}
"""

# Simple scroll to top JavaScript
SCROLL_TO_TOP_JS = "() => { window.scrollTo(0, 0); }"