{% extends "base.html" %}

{% block content %}
<div id="prompt-container">
    <p id="prompt">Loading...</p>
</div>

<div id="options-container">
    <p>Loading options...</p>
</div>

<div id="debug-container" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0; display: none;">
    <h3>Debug Information</h3>
    <pre id="debug-output">Loading...</pre>
</div>

<div id="error-message" class="error"></div>
{% endblock %}

{% block scripts %}
<script>
    // Enable debug mode
    const DEBUG = true;
    
    // Show debug container if debug mode is enabled
    if (DEBUG) {
        document.getElementById('debug-container').style.display = 'block';
    }
    
    // Debug log function
    function debugLog(message) {
        if (DEBUG) {
            console.log(message);
            const debugOutput = document.getElementById('debug-output');
            debugOutput.textContent = debugOutput.textContent + '\n' + message;
        }
    }
    
    const socket = io();
    let currentRequest = null;
    const requestId = "{{ request_id }}";
    
    debugLog(`Request ID: ${requestId}`);
    
    // Socket.io connection events
    socket.on('connect', () => {
        debugLog('Socket.io connected');
    });
    
    socket.on('disconnect', () => {
        debugLog('Socket.io disconnected');
    });
    
    socket.on('connect_error', (error) => {
        debugLog(`Socket.io connection error: ${error.message}`);
    });
    
    // Fetch request data
    async function fetchRequestData() {
        try {
            debugLog(`Fetching request data for ID: ${requestId}`);
            const response = await fetch(`/api/request/${requestId}`);
            
            if (!response.ok) {
                const errorText = await response.text();
                debugLog(`Error response: ${response.status} - ${errorText}`);
                document.getElementById('prompt-container').innerHTML = '<p>Request not found</p>';
                document.getElementById('options-container').innerHTML = '<p>Invalid request ID</p>';
                return;
            }
            
            const data = await response.json();
            debugLog(`Received request data: ${JSON.stringify(data)}`);
            
            if (data.type !== 'select_option') {
                // Wrong request type
                debugLog(`Wrong request type: ${data.type}`);
                document.getElementById('prompt-container').innerHTML = '<p>Wrong request type</p>';
                document.getElementById('options-container').innerHTML = '<p>Please navigate to the correct page</p>';
                return;
            }
            
            currentRequest = data;
            renderSelectOptions(data);
        } catch (error) {
            debugLog(`Error fetching request: ${error.message}`);
            console.error('Error fetching request:', error);
            document.getElementById('error-message').textContent = 'Error loading request data';
        }
    }
    
    // Render select options
    function renderSelectOptions(data) {
        debugLog('Rendering select options');
        // Set prompt
        document.getElementById('prompt-container').innerHTML = `<p>${data.prompt}</p>`;
        
        // Create options
        let optionsHtml = '';
        
        data.options.forEach((option, index) => {
            let optionText = '';
            let description = '';
            
            if (typeof option === 'string') {
                optionText = option;
            } else {
                optionText = option.title || option.name || option.description || `Option ${index + 1}`;
                description = option.description || '';
            }
            
            optionsHtml += `
                <div class="option-container">
                    <label>
                        <input type="radio" name="option" value="${index}">
                        ${optionText}
                    </label>
                    ${description ? `<p>${description}</p>` : ''}
                </div>
            `;
        });
        
        // Add custom option if allowed
        if (data.allow_custom) {
            optionsHtml += `
                <div class="option-container custom-option">
                    <label>
                        <input type="radio" name="option" value="custom">
                        Custom answer:
                    </label>
                    <input type="text" id="custom-input" disabled>
                </div>
            `;
        }
        
        // Add submit button
        optionsHtml += `
            <button id="submit-btn" type="button">Submit</button>
        `;
        
        document.getElementById('options-container').innerHTML = optionsHtml;
        
        // Add event listeners
        document.querySelectorAll('input[name="option"]').forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'custom') {
                    document.getElementById('custom-input').disabled = false;
                    document.getElementById('custom-input').focus();
                } else {
                    document.getElementById('custom-input').disabled = true;
                }
            });
        });
        
        document.getElementById('submit-btn').addEventListener('click', submitSelection);
    }
    
    // Submit selection
    function submitSelection() {
        debugLog('Submit button clicked');
        const selectedOption = document.querySelector('input[name="option"]:checked');
        
        if (!selectedOption) {
            document.getElementById('error-message').textContent = 'Please select an option';
            debugLog('No option selected');
            return;
        }
        
        const result = {
            request_id: requestId,
            selected_index: -1,
            selected_option: null,
            custom_input: '',
            is_custom: false
        };
        
        if (selectedOption.value === 'custom') {
            const customInput = document.getElementById('custom-input').value.trim();
            
            if (!customInput) {
                document.getElementById('error-message').textContent = 'Please enter your custom answer';
                debugLog('No custom input provided');
                return;
            }
            
            debugLog(`Custom option selected with input: ${customInput}`);
            result.custom_input = customInput;
            result.is_custom = true;
        } else {
            const index = parseInt(selectedOption.value);
            debugLog(`Option selected with index: ${index}`);
            result.selected_index = index;
            result.selected_option = currentRequest.options[index];
        }
        
        // Send result to server
        debugLog(`Sending selection to server: ${JSON.stringify(result)}`);
        socket.emit('submit_selection', result);
        
        // Show confirmation
        document.getElementById('options-container').innerHTML = '<p>Your selection has been submitted.</p>';
        document.getElementById('error-message').textContent = '';
        debugLog('Selection submitted, waiting for confirmation');
        
        // Close the window after a short delay
        setTimeout(() => {
            debugLog('Closing window after timeout');
            window.close();
        }, 3000);
    }
    
    // Listen for server confirmation
    socket.on(`selection_received_${requestId}`, () => {
        // Close the window after confirmation
        debugLog('Received confirmation from server, closing window');
        window.close();
    });
    
    // Initialize
    fetchRequestData();
</script>
{% endblock %}