let questionCount = 0;

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() {
    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="请输入问题">
                    <button onclick="addOption(${questionCount})">添加选项</button>
                    <label style="margin-left: 20px;">
                        <input type="checkbox" class="required-checkbox"> 此题为必答题
                    </label>
                </div>
            </div>
            <div class="question-content" id="options-${questionCount}">
                <div class="option-item">
                    <input type="radio" name="question${questionCount}" disabled>
                    <input type="text" placeholder="选项内容">
                    <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                </div>
                <div class="option-item">
                    <input type="radio" name="question${questionCount}" disabled>
                    <input type="text" placeholder="选项内容">
                    <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                </div>
                <div class="option-item">
                    <input type="radio" name="question${questionCount}" disabled>
                    <input type="text" placeholder="选项内容">
                    <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                </div>
                <div class="option-item">
                    <input type="radio" name="question${questionCount}" disabled>
                    <input type="text" placeholder="选项内容">
                    <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                </div>
            </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" 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 addCheckboxQuestion() {
    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="请输入问题">
                    <button onclick="addCheckboxOption(${questionCount})">添加选项</button>
                    <label style="margin-left: 20px;">
                        <input type="checkbox" class="required-checkbox"> 此题为必答题
                    </label>
                </div>
            </div>
            <div class="question-content" id="options-${questionCount}">
                <div class="option-item">
                    <input type="checkbox" name="question${questionCount}" disabled>
                    <input type="text" placeholder="选项内容">
                    <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                </div>
                <div class="option-item">
                    <input type="checkbox" name="question${questionCount}" disabled>
                    <input type="text" placeholder="选项内容">
                    <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                </div>
                <div class="option-item">
                    <input type="checkbox" name="question${questionCount}" disabled>
                    <input type="text" placeholder="选项内容">
                    <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                </div>
                <div class="option-item">
                    <input type="checkbox" name="question${questionCount}" disabled>
                    <input type="text" placeholder="选项内容">
                    <button class="delete-btn" onclick="deleteOption(this)">删除</button>
                </div>
            </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 addCheckboxOption(questionId) {
    const optionHtml = `
        <div class="option-item">
            <input type="checkbox" disabled>
            <input type="text" placeholder="选项内容">
            <button class="delete-btn" onclick="deleteOption(this)">删除</button>
        </div>
    `;
    document.querySelector(`#options-${questionId}`).insertAdjacentHTML('beforeend', optionHtml);
}

// 添加文本题
function addTextQuestion() {
    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="请输入问题">
                    <label style="margin-left: 20px;">
                        <input type="checkbox" class="required-checkbox"> 此题为必答题
                    </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 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;
}

// 保存问卷到 localStorage
function saveQuestionnaire() {
    // 验证问卷
    if (!validateQuestionnaire()) {
        return;
    }

    const questionnaire = getQuestionnaireData(false);
    const questionnaireId = `questionnaire_${questionnaire.createTime}`;
    
    // 获取已有的问卷列表
    let questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]');
    
    // 添加新问卷
    questionnaireList.push({
        id: questionnaireId,
        title: questionnaire.title,
        createTime: questionnaire.createTime,
        publishTime: questionnaire.publishTime,
        status: questionnaire.status,
        data: questionnaire
    });

    // 保存更新后的问卷列表
    localStorage.setItem('questionnaireList', JSON.stringify(questionnaireList));

    alert('问卷保存成功！');
    window.location.href = 'myQuestion.html';  // 添加返回功能
}

// 发布问卷
function publishQuestionnaire() {
    // 验证问卷
    if (!validateQuestionnaire()) {
        return;
    }

    const questionnaire = getQuestionnaireData(true);
    const questionnaireId = `questionnaire_${questionnaire.createTime}`;
    
    // 获取已有的问卷列表
    let questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]');
    
    // 添加新问卷
    questionnaireList.push({
        id: questionnaireId,
        title: questionnaire.title,
        createTime: questionnaire.createTime,
        publishTime: questionnaire.publishTime,
        status: questionnaire.status,
        data: questionnaire
    });

    // 保存更新后的问卷列表
    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() {
    document.querySelector('.but').style.marginTop = '20px';
    
    // 为题型按钮添加点击事件
    const buttons = document.querySelectorAll('.quetype button');
    buttons[0].onclick = addRadioQuestion;
    buttons[1].onclick = addCheckboxQuestion;
    buttons[2].onclick = addTextQuestion;

    // 为保存和发布按钮添加点击事件
    const pushbutButtons = document.querySelectorAll('.pushbut button');
    pushbutButtons[0].onclick = saveQuestionnaire; // 保存按钮
    pushbutButtons[1].onclick = publishQuestionnaire; // 发布按钮
}