{% extends 'base.html' %}

{% block title %}提交任务 - 任务收集系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="card-title mb-0">
                    <i class="bi bi-plus-circle me-2"></i>提交新任务
                </h5>
            </div>
            <div class="card-body p-4">
                <form id="submitForm" data-is-admin="{{ 'true' if session.is_admin else 'false' }}">
                    <!-- 任务链接输入 -->
                    <div class="form-group mb-4">
                        <label for="taskUrl" class="form-label">抖音链接 <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
                            <textarea class="form-control" id="taskUrl" name="taskUrl" rows="3" 
                                placeholder="请粘贴抖音分享链接或完整分享文本" required></textarea>
                        </div>
                        <div class="invalid-feedback" id="taskUrlFeedback">请输入有效的抖音链接</div>
                        <div class="form-text small text-muted">
                            <i class="bi bi-info-circle me-1"></i>支持完整链接或从APP分享的文本，系统会自动提取有效链接
                        </div>
                    </div>

                    <!-- 任务类型选择 -->
                    <div class="form-group mb-4">
                        <label class="form-label d-block">任务类型 <span class="text-danger">*</span></label>
                        <div class="task-type-container">
                            <div class="form-check task-type-card">
                                <input class="form-check-input" type="radio" name="category" id="categoryLike" value="转赞评" checked>
                                <label class="form-check-label" for="categoryLike">
                                    <div class="task-type-icon">
                                        <i class="bi bi-hand-thumbs-up"></i>
                                    </div>
                                    <span>转赞评</span>
                                </label>
                            </div>
                            <div class="form-check task-type-card">
                                <input class="form-check-input" type="radio" name="category" id="categoryReport" value="投诉举报">
                                <label class="form-check-label" for="categoryReport">
                                    <div class="task-type-icon">
                                        <i class="bi bi-flag"></i>
                                    </div>
                                    <span>投诉举报</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- 任务说明 -->
                    <div class="form-group mb-4">
                        <label for="description" class="form-label">任务说明 <small class="text-muted">(选填)</small></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-card-text"></i></span>
                            <textarea class="form-control" id="description" name="description" rows="3" 
                                placeholder="请输入任务相关说明或要求"></textarea>
                        </div>
                        <div class="form-text small text-muted">
                            添加任务的详细说明，如特殊要求或注意事项
                        </div>
                    </div>

                    <!-- 团队选择 (仅管理员) -->
                    {% if session.is_admin %}
                        <div class="form-group mb-4">
                            <label class="form-label">分配团队 <span class="text-danger">*</span></label>
                            <div class="team-selection-container">
                                {% for team in teams %}
                                    <div class="form-check team-checkbox">
                                        <input class="form-check-input" type="checkbox" name="teams" id="team{{ team.id }}" value="{{ team.id }}">
                                        <label class="form-check-label" for="team{{ team.id }}">
                                            <span class="team-name">{{ team.name }}</span>
                                            {% if team.members.count() > 0 %}
                                                <span class="badge bg-info text-dark ms-2">{{ team.members.count() }}人</span>
                                            {% endif %}
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="text-danger small mt-2" id="teamFeedback" style="display: none;">
                                <i class="bi bi-exclamation-triangle me-1"></i>请至少选择一个团队
                            </div>
                        </div>
                    {% endif %}

                    <!-- 提交按钮 -->
                    <div class="form-group mb-3">
                        <button type="button" class="btn btn-primary py-2 px-4" id="submitBtn">
                            <i class="bi bi-cloud-arrow-up me-2"></i>提交任务
                        </button>
                        <a href="{{ url_for('index') }}" class="btn btn-outline-secondary py-2 px-4 ms-2">
                            <i class="bi bi-x-circle me-2"></i>取消
                        </a>
                    </div>
                </form>

                <!-- 提交结果提示 -->
                <div class="alert alert-success mt-4" id="submitResult" style="display: none;">
                    <h5 class="alert-heading">
                        <i class="bi bi-check-circle me-2"></i>任务提交成功
                    </h5>
                    <p>您的任务已成功提交到系统。</p>
                    
                    {% if not session.is_admin %}
                        <p class="mb-0">管理员将审核您的任务并分配给相应团队。</p>
                    {% else %}
                        <p class="mb-0">任务已自动审核通过并分配给选定团队。</p>
                    {% endif %}
                    
                    <hr>
                    <div class="d-flex align-items-center">
                        <div class="me-2">任务链接:</div>
                        <a href="#" id="viewTaskLink" class="text-break" target="_blank"></a>
                    </div>
                    <div class="mt-3">
                        <a href="#" class="btn btn-primary btn-sm" onclick="resetForm()">
                            <i class="bi bi-plus-circle me-1"></i>继续提交
                        </a>
                        <a href="{{ url_for('profile') }}" class="btn btn-outline-primary btn-sm ms-2">
                            <i class="bi bi-list-task me-1"></i>查看我的任务
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 提交帮助卡片 -->
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-header bg-light py-3">
                <h5 class="card-title mb-0">
                    <i class="bi bi-question-circle me-2"></i>如何提交任务
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="steps-container">
                    <div class="step-item">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h6>复制抖音链接</h6>
                            <p class="text-muted small">在抖音App中，点击分享按钮，选择"复制链接"或直接复制分享的文本内容</p>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h6>粘贴链接</h6>
                            <p class="text-muted small">将复制的链接或文本粘贴到上方"抖音链接"输入框中</p>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h6>选择任务类型</h6>
                            <p class="text-muted small">根据需求选择"转赞评"或"投诉举报"任务类型</p>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <h6>填写说明（可选）</h6>
                            <p class="text-muted small">添加任务说明，如特殊要求或注意事项</p>
                        </div>
                    </div>
                    {% if session.is_admin %}
                        <div class="step-item">
                            <div class="step-number">5</div>
                            <div class="step-content">
                                <h6>选择团队（管理员）</h6>
                                <p class="text-muted small">选择需要分配任务的团队</p>
                            </div>
                        </div>
                    {% else %}
                        <div class="step-item">
                            <div class="step-number">5</div>
                            <div class="step-content">
                                <h6>等待审核</h6>
                                <p class="text-muted small">提交后，管理员将审核您的任务并分配给相应团队</p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
/* 自定义样式 */
.task-type-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.task-type-card {
    position: relative;
    width: 130px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s;
    cursor: pointer;
    text-align: center;
}

.task-type-card:hover {
    background-color: #e9ecef;
}

.task-type-card .form-check-input {
    position: absolute;
    top: 10px;
    right: 10px;
}

.task-type-card .form-check-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.task-type-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #6c757d;
}

.task-type-card:has(.form-check-input:checked) {
    background-color: #e8f0fe;
    border: 1px solid #4e54c8;
}

.task-type-card:has(.form-check-input:checked) .task-type-icon {
    color: #4e54c8;
}

.team-selection-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.team-checkbox {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px 15px;
    transition: all 0.3s;
    margin: 0;
}

.team-checkbox:hover {
    background-color: #e9ecef;
}

.team-checkbox:has(.form-check-input:checked) {
    background-color: #e8f0fe;
    border: 1px solid #4e54c8;
}

.team-name {
    font-weight: 500;
}

.steps-container {
    padding-left: 20px;
}

.step-item {
    display: flex;
    margin-bottom: 20px;
    position: relative;
}

.step-item:not(:last-child):before {
    content: '';
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: -15px;
    width: 2px;
    background-color: #e9ecef;
}

.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #4e54c8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content {
    padding-top: 3px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const taskUrlInput = document.getElementById('taskUrl');
    const taskUrlFeedback = document.getElementById('taskUrlFeedback');
    const submitBtn = document.getElementById('submitBtn');
    const submitForm = document.getElementById('submitForm');
    const submitResult = document.getElementById('submitResult');
    const viewTaskLink = document.getElementById('viewTaskLink');
    const isAdmin = submitForm.dataset.isAdmin === 'true';
    
    // 切换任务类型卡片效果
    const categoryRadios = document.querySelectorAll('input[name="category"]');
    categoryRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            const cardLabel = this.closest('.task-type-card');
            if (cardLabel) {
                cardLabel.classList.add('selected');
            }
        });
    });
    
    // 监听提交按钮点击
    if (submitBtn) {
        submitBtn.addEventListener('click', function() {
            submitTask();
        });
    }
    
    // 监听输入字段变化，隐藏错误提示
    if (taskUrlInput) {
        taskUrlInput.addEventListener('input', function() {
            if (this.value.trim()) {
                this.classList.remove('is-invalid');
                taskUrlFeedback.style.display = 'none';
            }
        });
    }
    
    // 任务提交函数
    function submitTask() {
        // 表单验证
        let isValid = true;
        
        // 验证任务链接
        if (!taskUrlInput.value.trim()) {
            taskUrlInput.classList.add('is-invalid');
            taskUrlFeedback.style.display = 'block';
            isValid = false;
        } else {
            taskUrlInput.classList.remove('is-invalid');
            taskUrlFeedback.style.display = 'none';
        }
        
        // 验证任务类型（默认已选中，不需要验证）
        
        // 获取选中的任务类型
        let category = '';
        for (const radio of categoryRadios) {
            if (radio.checked) {
                category = radio.value;
                break;
            }
        }
        
        // 获取任务说明
        const description = document.getElementById('description').value;
        
        // 获取选中的团队（管理员）
        const teamIds = [];
        if (isAdmin) {
            const teamCheckboxes = document.querySelectorAll('input[name="teams"]:checked');
            teamCheckboxes.forEach(checkbox => {
                teamIds.push(parseInt(checkbox.value));
            });
            
            // 验证团队选择
            const teamFeedback = document.getElementById('teamFeedback');
            if (teamIds.length === 0) {
                teamFeedback.style.display = 'block';
                isValid = false;
            } else {
                teamFeedback.style.display = 'none';
            }
        }
        
        if (!isValid) {
            return;
        }
        
        // 显示提交中状态
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>提交中...';
        
        // 提交任务请求
        fetch('/api/tasks/submit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
                taskUrl: taskUrlInput.value, 
                category, 
                description, 
                teamIds 
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 设置查看链接
                viewTaskLink.href = data.viewUrl;
                viewTaskLink.textContent = window.location.origin + data.viewUrl;
                
                // 显示成功结果
                submitForm.style.display = 'none';
                submitResult.style.display = 'block';
                
                // 滚动到结果区域
                submitResult.scrollIntoView({ behavior: 'smooth' });
            } else {
                // 显示错误信息
                alert('提交失败：' + (data.error || '未知错误'));
                
                // 恢复按钮状态
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="bi bi-cloud-arrow-up me-2"></i>提交任务';
            }
        })
        .catch(error => {
            // 显示错误信息
            alert('提交出错：' + error);
            
            // 恢复按钮状态
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-cloud-arrow-up me-2"></i>提交任务';
        });
    }
    
    // 重置表单函数
    window.resetForm = function() {
        taskUrlInput.value = '';
        document.getElementById('description').value = '';
        
        // 重置任务类型（默认选中第一个）
        categoryRadios[0].checked = true;
        
        // 重置团队选择（如果是管理员）
        if (isAdmin) {
            const teamCheckboxes = document.querySelectorAll('input[name="teams"]:checked');
            teamCheckboxes.forEach(checkbox => {
                checkbox.checked = false;
            });
        }
        
        // 显示表单，隐藏结果
        submitForm.style.display = 'block';
        submitResult.style.display = 'none';
        
        // 恢复按钮状态
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="bi bi-cloud-arrow-up me-2"></i>提交任务';
        
        // 聚焦到任务链接输入框
        taskUrlInput.focus();
    }
});
</script>
{% endblock %}
这是前台代码，直接回复收到即可