let questionIndex = 0;

// Initialize SortableJS
document.addEventListener("DOMContentLoaded", function() {
    var canvas = document.getElementById('builder-canvas');
    if (canvas) {
        new Sortable(canvas, {
            animation: 150,
            handle: '.builder-handle',
            ghostClass: 'sortable-ghost',
        });
    }
});

function addQuestion(type) {
    const canvas = document.getElementById('builder-canvas');
    const emptyState = document.getElementById('empty-state');
    if (emptyState) {
        emptyState.remove();
    }

    questionIndex++;
    const id = 'q_' + Date.now() + '_' + questionIndex;
    
    let typeLabel = '';
    const needsOptions = ['single_choice', 'multiple_choice', 'dropdown'].includes(type);
    const supportsFreeText = ['single_choice', 'multiple_choice'].includes(type);
    
    switch(type) {
        case 'text': typeLabel = 'Textfeld'; break;
        case 'textarea': typeLabel = 'Textbereich'; break;
        case 'single_choice': typeLabel = 'Einzelauswahl'; break;
        case 'multiple_choice': typeLabel = 'Mehrfachauswahl'; break;
        case 'dropdown': typeLabel = 'Dropdown'; break;
    }
    
    const div = document.createElement('div');
    div.className = 'builder-item';
    div.dataset.id = id;
    div.dataset.type = type;
    
    let html = `
        <div class="builder-handle">
            <span>☰ ${typeLabel}</span>
            <button type="button" class="modal-close" style="position:relative; top:0; right:0;" onclick="removeQuestion(this)">&times;</button>
        </div>
        <div class="form-group" style="margin-bottom:0;">
            <label>Fragetext</label>
            <input type="text" class="question-label" required placeholder="Gib hier deine Frage ein">
        </div>
        <div class="form-group mt-1 mb-0" style="flex-direction:row; align-items:center;">
            <input type="checkbox" class="question-required" id="req_${id}" checked style="width:auto; margin-right:8px;">
            <label for="req_${id}" style="margin:0; font-weight:normal;">Pflichtfrage</label>
        </div>
    `;

    if (needsOptions) {
        html += `
        <div class="form-group mt-2 mb-0">
            <label>Optionen (eine pro Zeile)</label>
            <textarea class="question-options" rows="3" required placeholder="Option 1\nOption 2\nOption 3"></textarea>
        </div>
        `;
        if (supportsFreeText) {
            html += `
            <div class="form-group mt-1 mb-0" style="flex-direction:row; align-items:center;">
                <input type="checkbox" class="question-freetext" id="freetext_${id}" style="width:auto; margin-right:8px;">
                <label for="freetext_${id}" style="margin:0; font-weight:normal;">Freitext erlauben ("Sonstiges")</label>
            </div>
            `;
        }
    }

    div.innerHTML = html;
    canvas.appendChild(div);
}

function removeQuestion(btn) {
    btn.closest('.builder-item').remove();
    const canvas = document.getElementById('builder-canvas');
    if (canvas.children.length === 0) {
        canvas.innerHTML = '<div class="alert alert-info" id="empty-state">Noch keine Fragen hinzugefügt. Verwende die Schaltflächen oben.</div>';
    }
}

function prepareSubmission(e) {
    const questions = [];
    const items = document.querySelectorAll('.builder-item');
    
    if (items.length === 0) {
        e.preventDefault();
        alert("Bitte füge mindestens eine Frage hinzu.");
        return;
    }

    let hasEmptyLabel = false;
    let hasEmptyOptions = false;

    items.forEach((item) => {
        let labelInput = item.querySelector('.question-label');
        let optionsInput = item.querySelector('.question-options');
        let freetextInput = item.querySelector('.question-freetext');
        let requiredInput = item.querySelector('.question-required');
        
        let label = labelInput ? labelInput.value.trim() : '';
        if (!label) {
            hasEmptyLabel = true;
        }

        let options = [];
        if (optionsInput) {
            options = optionsInput.value.split('\n').map(o => o.trim()).filter(o => o);
            if (options.length === 0) {
                hasEmptyOptions = true;
            }
        }
        
        let allowFreeText = false;
        if (freetextInput && freetextInput.checked) {
            allowFreeText = true;
        }
        
        let isRequired = true;
        if (requiredInput && !requiredInput.checked) {
            isRequired = false;
        }

        questions.push({
            id: item.dataset.id,
            type: item.dataset.type,
            label: label,
            options: options,
            allow_free_text: allowFreeText,
            required: isRequired
        });
    });

    if (hasEmptyLabel) {
        e.preventDefault();
        alert("Bitte fülle alle Fragetexte aus.");
        return;
    }

    if (hasEmptyOptions) {
        e.preventDefault();
        alert("Bitte gib mindestens eine Option für deine Auswahlfragen an.");
        return;
    }
    
    document.getElementById('questions_input').value = JSON.stringify(questions);
}