let questionCount = 0;
let currentQuestionnaireId = null;

function toggleQueType() {
    const queType = document.querySelector('.quetype');
    const addButton = document.querySelector('.but');
    
    if (queType.style.display === 'none') {
        queType.style.display = 'flex';
        addButton.style.marginTop = '0';
    } 
}

// 添加单选题
function addRadioQuestion(existingQuestion = null) {
    questionCount++;
    const questionHtml = `
        <div class="question-item" id="question-${questionCount}">
            <div class="question-header">
                <div class="question-title-area">
                    <span>${questionCount}. </span>
                    <input type="text" placeholder="请输入问题" value="${existingQuestion ? existingQuestion.title : ''}">
                    <button onclick="addOption(${questionCount})">添加选项</button>
                    <label style="margin-left: 20px;">
                        <input type="checkbox" class="required-checkbox" ${existingQuestion && existingQuestion.required ? 'checked' : ''}> 此题为必答题
                    </label>
                </div>
            </div>
            <div class="question-content" id="options-${questionCount}">
                ${existingQuestion ? 
                    existingQuestion.options.map(option => `
                        <div class="option-item">
                            <input type="radio" name="question${questionCount}" disabled>
                            <input type="text" placeholder="选项内容" value="${option.content}">
                            <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                        </div>
                    `).join('') :
                    Array(4).fill(`
                        <div class="option-item">
                            <input type="radio" name="question${questionCount}" disabled>
                            <input type="text" placeholder="选项内容">
                            <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                        </div>
                    `).join('')
                }
            </div>
            <div class="ctrl-btns">
                <button onclick="moveUp(${questionCount})">上移</button>
                <button onclick="moveDown(${questionCount})">下移</button>
                <button onclick="copyQuestion(${questionCount})">复用</button>
                <button class="delete-btn" onclick="deleteQuestion(${questionCount})">删除</button>
            </div>
        </div>
    `;
    document.querySelector('.quelist').insertAdjacentHTML('beforeend', questionHtml);
    toggleQueType();
}

// 添加多选题
function addCheckboxQuestion(existingQuestion = null) {
    questionCount++;
    const questionHtml = `
        <div class="question-item" id="question-${questionCount}">
            <div class="question-header">
                <div class="question-title-area">
                    <span>${questionCount}. </span>
                    <input type="text" placeholder="请输入问题" value="${existingQuestion ? existingQuestion.title : ''}">
                    <button onclick="addCheckboxOption(${questionCount})">添加选项</button>
                    <label style="margin-left: 20px;">
                        <input type="checkbox" class="required-checkbox" ${existingQuestion && existingQuestion.required ? 'checked' : ''}> 此题为必答题
                    </label>
                </div>
            </div>
            <div class="question-content" id="options-${questionCount}">
                ${existingQuestion ? 
                    existingQuestion.options.map(option => `
                        <div class="option-item">
                            <input type="checkbox" name="question${questionCount}" disabled>
                            <input type="text" placeholder="选项内容" value="${option.content}">
                            <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                        </div>
                    `).join('') :
                    Array(4).fill(`
                        <div class="option-item">
                            <input type="checkbox" name="question${questionCount}" disabled>
                            <input type="text" placeholder="选项内容">
                            <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                        </div>
                    `).join('')
                }
            </div>
            <div class="ctrl-btns">
                <button onclick="moveUp(${questionCount})">上移</button>
                <button onclick="moveDown(${questionCount})">下移</button>
                <button onclick="copyQuestion(${questionCount})">复用</button>
                <button class="delete-btn" onclick="deleteQuestion(${questionCount})">删除</button>
            </div>
        </div>
    `;
    document.querySelector('.quelist').insertAdjacentHTML('beforeend', questionHtml);
    toggleQueType();
}

// 添加文本题
function addTextQuestion(existingQuestion = null) {
    questionCount++;
    const questionHtml = `
        <div class="question-item" id="question-${questionCount}">
            <div class="question-header">
                <div class="question-title-area">
                    <span>${questionCount}. </span>
                    <input type="text" placeholder="请输入问题" value="${existingQuestion ? existingQuestion.title : ''}">
                    <label style="margin-left: 20px;">
                        <input type="checkbox" class="required-checkbox" ${existingQuestion && existingQuestion.required ? 'checked' : ''}> 此题为必答题
                    </label>
                </div>
            </div>
            <div class="question-content" id="options-${questionCount}">
                <textarea disabled placeholder="此处供填写者输入文本答案" 
                    style="width: 100%; min-height: 100px; padding: 8px; margin-top: 10px; resize: vertical;"></textarea>
            </div>
            <div class="ctrl-btns">
                <button onclick="moveUp(${questionCount})">上移</button>
                <button onclick="moveDown(${questionCount})">下移</button>
                <button onclick="copyQuestion(${questionCount})">复用</button>
                <button class="delete-btn" onclick="deleteQuestion(${questionCount})">删除</button>
            </div>
        </div>
    `;
    document.querySelector('.quelist').insertAdjacentHTML('beforeend', questionHtml);
    toggleQueType();
}

// 其他辅助函数
function addOption(questionId) {
    const optionHtml = `
        <div class="option-item">
            <input type="radio" name="question${questionId}" disabled>
            <input type="text" placeholder="选项内容">
            <button class="delete-btn" onclick="deleteOption(this)">删除</button>
        </div>
    `;
    document.querySelector(`#options-${questionId}`).insertAdjacentHTML('beforeend', optionHtml);
}

function addCheckboxOption(questionId) {
    const optionHtml = `
        <div class="option-item">
            <input type="checkbox" name="question${questionId}" disabled>
            <input type="text" placeholder="选项内容">
            <button class="delete-btn" onclick="deleteOption(this)">删除</button>
        </div>
    `;
    document.querySelector(`#options-${questionId}`).insertAdjacentHTML('beforeend', optionHtml);
}

function deleteOption(btn) {
    btn.parentElement.remove();
}

function deleteQuestion(questionId) {
    document.querySelector(`#question-${questionId}`).remove();
}

function copyQuestion(questionId) {
    const original = document.querySelector(`#question-${questionId}`);
    const clone = original.cloneNode(true);
    questionCount++;
    clone.id = `question-${questionCount}`;
    original.after(clone);
}

function moveUp(questionId) {
    const question = document.querySelector(`#question-${questionId}`);
    const prev = question.previousElementSibling;
    if (prev) {
        prev.before(question);
    }
}

function moveDown(questionId) {
    const question = document.querySelector(`#question-${questionId}`);
    const next = question.nextElementSibling;
    if (next) {
        next.after(question);
    }
}

// 获取问卷数据
function getQuestionnaireData(isPublished = false) {
    const now = new Date().getTime();
    const questionnaire = {
        title: document.querySelector('.question-title').value,
        createTime: now,
        endTime: document.querySelector('#endtime').value,
        publishTime: isPublished ? now : null,
        status: isPublished ? '已发布' : '未发布',
        questions: []
    };

    const questionItems = document.querySelectorAll('.question-item');
    questionItems.forEach((item, index) => {
        let questionType;
        if (item.querySelector('.question-content textarea')) {
            questionType = 'text';
        } else if (item.querySelector('input[type="radio"]')) {
            questionType = 'radio';
        } else {
            questionType = 'checkbox';
        }

        const question = {
            id: index + 1,
            type: questionType,
            title: item.querySelector('.question-title-area input[type="text"]').value,
            required: item.querySelector('.required-checkbox').checked,
            options: []
        };

        if (questionType === 'radio' || questionType === 'checkbox') {
            const options = item.querySelectorAll('.option-item input[type="text"]');
            options.forEach((option, optionIndex) => {
                question.options.push({
                    id: optionIndex + 1,
                    content: option.value
                });
            });
        }

        questionnaire.questions.push(question);
    });

    return questionnaire;
}

// 加载问卷数据
function loadQuestionnaireData() {
    const urlParams = new URLSearchParams(window.location.search);
    const questionnaireId = urlParams.get('id');
    
    if (!questionnaireId) {
        alert('问卷ID不存在！');
        window.location.href = 'myQuestion.html';
        return;
    }

    currentQuestionnaireId = questionnaireId;
    const questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]');
    const questionnaire = questionnaireList.find(q => q.id === questionnaireId);

    if (!questionnaire) {
        alert('问卷不存在！');
        window.location.href = 'myQuestion.html';
        return;
    }

    // 填充问卷数据
    document.querySelector('.question-title').value = questionnaire.title;
    document.querySelector('#endtime').value = questionnaire.data.endTime;

    // 渲染问题列表
    questionnaire.data.questions.forEach(question => {
        if (question.type === 'radio') {
            addRadioQuestion(question);
        } else if (question.type === 'checkbox') {
            addCheckboxQuestion(question);
        } else {
            addTextQuestion(question);
        }
    });
}

// 更新问卷
function updateQuestionnaire() {
    if (!validateQuestionnaire()) return;

    const questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]');
    const index = questionnaireList.findIndex(q => q.id === currentQuestionnaireId);

    if (index === -1) {
        alert('问卷不存在！');
        return;
    }

    const updatedData = getQuestionnaireData(false);
    questionnaireList[index].title = updatedData.title;
    questionnaireList[index].data = updatedData;

    localStorage.setItem('questionnaireList', JSON.stringify(questionnaireList));
    alert('问卷修改成功！');
    window.location.href = 'myQuestion.html';
}

// 验证问卷
function validateQuestionnaire() {
    const title = document.querySelector('.question-title').value.trim();
    if (!title) {
        alert('请输入问卷标题！');
        return false;
    }

    const endTime = document.querySelector('#endtime').value;
    if (!endTime) {
        alert('请设置问卷截止日期！');
        return false;
    }

    const questions = document.querySelectorAll('.question-item');
    if (questions.length === 0) {
        alert('请至少添加一个问题！');
        return false;
    }

    for (let question of questions) {
        const questionTitle = question.querySelector('.question-title-area input[type="text"]').value.trim();
        if (!questionTitle) {
            alert('请填写所有问题的标题！');
            return false;
        }

        const questionType = question.querySelector('input[type="radio"]') ? 'radio' : 
                           question.querySelector('input[type="checkbox"]') ? 'checkbox' : 'text';
        
        if (questionType !== 'text') {
            const options = question.querySelectorAll('.option-item input[type="text"]');
            for (let option of options) {
                if (!option.value.trim()) {
                    alert('请填写所有选项的内容！');
                    return false;
                }
            }
        }
    }

    return true;
}

// 初始化页面
window.onload = function() {
    // 为题型按钮添加点击事件
    const buttons = document.querySelectorAll('.quetype button');
    buttons[0].onclick = addRadioQuestion;
    buttons[1].onclick = addCheckboxQuestion;
    buttons[2].onclick = addTextQuestion;

    // 加载问卷数据
    loadQuestionnaireData();
}