<template>
  <div class="join-us-page">
    <div class="page-container">
      <div class="page-header">
        <h1 class="page-title">加入我们</h1>
        <p class="page-desc">成为Skill开发者，开启自由职业新篇章</p>
      </div>

      <div class="hero-section">
        <div class="hero-content">
          <h2>招募Skill开发者</h2>
          <p>移动办公 · 时间自由 · 收入可观</p>
          <div class="hero-tags">
            <el-tag effect="dark" size="large">远程办公</el-tag>
            <el-tag effect="dark" size="large" type="success">时间自由</el-tag>
            <el-tag effect="dark" size="large" type="warning">收入可观</el-tag>
            <el-tag effect="dark" size="large" type="danger">技术成长</el-tag>
          </div>
        </div>
      </div>

      <div class="benefits-section">
        <h2 class="section-title">开发者权益</h2>
        <div class="benefits-grid">
          <div class="benefit-card">
            <div class="benefit-icon">
              <el-icon :size="36" color="#409eff"><Wallet /></el-icon>
            </div>
            <h3>丰厚收益</h3>
            <p>每次下载获得收益分成<br/>优秀开发者月入过万</p>
          </div>
          <div class="benefit-card">
            <div class="benefit-icon">
              <el-icon :size="36" color="#67c23a"><Location /></el-icon>
            </div>
            <h3>移动办公</h3>
            <p>无需坐班，随时随地<br/>在家也能轻松赚钱</p>
          </div>
          <div class="benefit-card">
            <div class="benefit-icon">
              <el-icon :size="36" color="#e6a23c"><Clock /></el-icon>
            </div>
            <h3>时间自由</h3>
            <p>自己安排开发时间<br/>工作生活完美平衡</p>
          </div>
          <div class="benefit-card">
            <div class="benefit-icon">
              <el-icon :size="36" color="#f56c6c"><TrendCharts /></el-icon>
            </div>
            <h3>技术成长</h3>
            <p>实战项目经验积累<br/>提升技术能力</p>
          </div>
          <div class="benefit-card">
            <div class="benefit-icon">
              <el-icon :size="36" color="#909399"><Medal /></el-icon>
            </div>
            <h3>官方认证</h3>
            <p>获得平台官方认证<br/>提升个人品牌影响力</p>
          </div>
          <div class="benefit-card">
            <div class="benefit-icon">
              <el-icon :size="36" color="#9b59b6"><Connection /></el-icon>
            </div>
            <h3>社区资源</h3>
            <p>加入开发者社区<br/>与同行交流学习</p>
          </div>
        </div>
      </div>

      <div class="requirements-section">
        <h2 class="section-title">申请要求</h2>
        <div class="requirements-list">
          <div class="requirement-item">
            <el-icon :size="24" color="#67c23a"><Check /></el-icon>
            <div class="requirement-content">
              <h4>技术能力</h4>
              <p>熟练掌握至少一门编程语言，有实际项目开发经验</p>
            </div>
          </div>
          <div class="requirement-item">
            <el-icon :size="24" color="#67c23a"><Check /></el-icon>
            <div class="requirement-content">
              <h4>作品展示</h4>
              <p>需提供至少一个可演示的Skill作品或相关项目经验</p>
            </div>
          </div>
          <div class="requirement-item">
            <el-icon :size="24" color="#67c23a"><Check /></el-icon>
            <div class="requirement-content">
              <h4>责任心</h4>
              <p>对产品质量负责，能够及时响应和修复问题</p>
            </div>
          </div>
          <div class="requirement-item">
            <el-icon :size="24" color="#67c23a"><Check /></el-icon>
            <div class="requirement-content">
              <h4>持续维护</h4>
              <p>愿意持续维护和更新已发布的Skill产品</p>
            </div>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h2 class="section-title">申请成为开发者</h2>
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="apply-form"
        >
          <el-divider content-position="left">基本信息</el-divider>
          
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="form.realName" placeholder="请输入真实姓名" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入电子邮箱" />
          </el-form-item>
          <el-form-item label="所在城市" prop="city">
            <el-input v-model="form.city" placeholder="请输入所在城市" />
          </el-form-item>

          <el-divider content-position="left">专业信息</el-divider>

          <el-form-item label="技术栈" prop="techStack">
            <el-checkbox-group v-model="form.techStack">
              <el-checkbox label="Python">Python</el-checkbox>
              <el-checkbox label="JavaScript">JavaScript</el-checkbox>
              <el-checkbox label="Java">Java</el-checkbox>
              <el-checkbox label="Go">Go</el-checkbox>
              <el-checkbox label="C/C++">C/C++</el-checkbox>
              <el-checkbox label="Rust">Rust</el-checkbox>
              <el-checkbox label="TypeScript">TypeScript</el-checkbox>
              <el-checkbox label="其他">其他</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="工作年限" prop="experience">
            <el-select v-model="form.experience" placeholder="请选择工作年限" style="width: 100%">
              <el-option label="1年以下" value="0-1" />
              <el-option label="1-3年" value="1-3" />
              <el-option label="3-5年" value="3-5" />
              <el-option label="5-10年" value="5-10" />
              <el-option label="10年以上" value="10+" />
            </el-select>
          </el-form-item>
          <el-form-item label="擅长领域" prop="expertise">
            <el-select v-model="form.expertise" multiple placeholder="请选择擅长领域" style="width: 100%">
              <el-option label="办公自动化" value="office" />
              <el-option label="数据处理" value="data" />
              <el-option label="AI/机器学习" value="ai" />
              <el-option label="Web开发" value="web" />
              <el-option label="移动端开发" value="mobile" />
              <el-option label="爬虫/采集" value="crawler" />
              <el-option label="自动化测试" value="testing" />
              <el-option label="其他" value="other" />
            </el-select>
          </el-form-item>

          <el-divider content-position="left">简历与作品</el-divider>

          <el-form-item label="个人简介" prop="bio">
            <el-input
              v-model="form.bio"
              type="textarea"
              :rows="4"
              placeholder="请简单介绍一下自己，包括教育背景、工作经历等"
            />
          </el-form-item>
          <el-form-item label="简历上传" prop="resumeUrl">
            <el-input v-model="form.resumeUrl" placeholder="请输入简历网盘链接（支持百度网盘、腾讯微云等）">
              <template #prepend>
                <el-icon><Link /></el-icon>
              </template>
            </el-input>
            <div class="form-tip">请将简历上传至网盘后粘贴分享链接</div>
          </el-form-item>
          <el-form-item label="Skill演示视频" prop="demoVideoUrl">
            <el-input v-model="form.demoVideoUrl" placeholder="请输入Skill演示视频网盘链接">
              <template #prepend>
                <el-icon><VideoCamera /></el-icon>
              </template>
            </el-input>
            <div class="form-tip">请录制Skill演示视频并上传至网盘，展示您的作品功能</div>
          </el-form-item>
          <el-form-item label="作品链接" prop="portfolioUrl">
            <el-input v-model="form.portfolioUrl" placeholder="请输入个人作品集或GitHub链接（选填）">
              <template #prepend>
                <el-icon><Monitor /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="期望收益" prop="expectedIncome">
            <el-radio-group v-model="form.expectedIncome">
              <el-radio label="1000-3000">1,000-3,000元/月</el-radio>
              <el-radio label="3000-5000">3,000-5,000元/月</el-radio>
              <el-radio label="5000-10000">5,000-10,000元/月</el-radio>
              <el-radio label="10000+">10,000元以上/月</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="form.agreement">
              我已阅读并同意
              <el-button type="primary" text>《开发者协议》</el-button>
            </el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="large" :loading="submitting" @click="handleSubmit">
              提交申请
            </el-button>
            <el-button size="large" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="process-section">
        <h2 class="section-title">申请流程</h2>
        <div class="process-steps">
          <div class="process-step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h4>提交申请</h4>
              <p>填写申请表单<br/>上传简历和作品</p>
            </div>
          </div>
          <div class="step-arrow">
            <el-icon :size="24"><ArrowRight /></el-icon>
          </div>
          <div class="process-step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h4>资质审核</h4>
              <p>平台审核团队<br/>评估技术能力</p>
            </div>
          </div>
          <div class="step-arrow">
            <el-icon :size="24"><ArrowRight /></el-icon>
          </div>
          <div class="process-step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h4>技能测试</h4>
              <p>完成测试任务<br/>展示开发能力</p>
            </div>
          </div>
          <div class="step-arrow">
            <el-icon :size="24"><ArrowRight /></el-icon>
          </div>
          <div class="process-step">
            <div class="step-number">4</div>
            <div class="step-content">
              <h4>正式入驻</h4>
              <p>签署合作协议<br/>开始发布Skill</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="successDialogVisible"
      title="申请提交成功"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="success-content">
        <div class="success-icon">
          <el-icon :size="64" color="#67c23a"><CircleCheckFilled /></el-icon>
        </div>
        <h3>您的申请已提交成功！</h3>
        <p class="success-desc">我们将在3-5个工作日内完成审核，审核结果将通过邮件通知您</p>
        <div class="contact-info">
          <p>如有疑问，请联系：</p>
          <p>邮箱：developer@openclaw.com</p>
          <p>微信：OpenClawDev</p>
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="successDialogVisible = false">我知道了</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)
const submitting = ref(false)
const successDialogVisible = ref(false)

const form = reactive({
  realName: '',
  phone: '',
  email: '',
  city: '',
  techStack: [],
  experience: '',
  expertise: [],
  bio: '',
  resumeUrl: '',
  demoVideoUrl: '',
  portfolioUrl: '',
  expectedIncome: '',
  agreement: false
})

const rules = {
  realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  city: [{ required: true, message: '请输入所在城市', trigger: 'blur' }],
  techStack: [{ required: true, message: '请选择技术栈', trigger: 'change' }],
  experience: [{ required: true, message: '请选择工作年限', trigger: 'change' }],
  expertise: [{ required: true, message: '请选择擅长领域', trigger: 'change' }],
  bio: [
    { required: true, message: '请输入个人简介', trigger: 'blur' },
    { min: 50, message: '个人简介至少50个字符', trigger: 'blur' }
  ],
  resumeUrl: [{ required: true, message: '请输入简历网盘链接', trigger: 'blur' }],
  demoVideoUrl: [{ required: true, message: '请输入Skill演示视频链接', trigger: 'blur' }],
  expectedIncome: [{ required: true, message: '请选择期望收益', trigger: 'change' }]
}

const handleSubmit = async () => {
  if (!formRef.value) return

  await formRef.value.validate((valid) => {
    if (valid) {
      if (!form.agreement) {
        ElMessage.warning('请阅读并同意开发者协议')
        return
      }
      submitting.value = true
      setTimeout(() => {
        submitting.value = false
        successDialogVisible.value = true
        ElMessage.success('申请提交成功')
      }, 1500)
    }
  })
}

const resetForm = () => {
  formRef.value?.resetFields()
}
</script>

<style lang="scss" scoped>
.join-us-page {
  padding: 20px 0 60px;

  .page-header {
    text-align: center;
    margin-bottom: 30px;

    .page-title {
      font-size: 32px;
      color: #303133;
      margin-bottom: 12px;
    }

    .page-desc {
      font-size: 16px;
      color: #909399;
    }
  }

  .hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 50px 40px;
    margin-bottom: 40px;
    text-align: center;
    color: #fff;

    h2 {
      font-size: 28px;
      margin-bottom: 12px;
    }

    p {
      font-size: 18px;
      opacity: 0.9;
      margin-bottom: 20px;
    }

    .hero-tags {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
  }

  .section-title {
    font-size: 24px;
    color: #303133;
    text-align: center;
    margin-bottom: 30px;
  }

  .benefits-section {
    margin-bottom: 50px;

    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;

      .benefit-card {
        background: #fff;
        border-radius: 12px;
        padding: 30px 20px;
        text-align: center;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

        .benefit-icon {
          width: 64px;
          height: 64px;
          background: #f5f7fa;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16px;
        }

        h3 {
          font-size: 18px;
          color: #303133;
          margin-bottom: 8px;
        }

        p {
          font-size: 14px;
          color: #909399;
          line-height: 1.6;
        }
      }
    }
  }

  .requirements-section {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 50px;

    .requirements-list {
      max-width: 700px;
      margin: 0 auto;

      .requirement-item {
        display: flex;
        gap: 16px;
        padding: 20px 0;
        border-bottom: 1px solid #ebeef5;

        &:last-child {
          border-bottom: none;
        }

        .requirement-content {
          h4 {
            font-size: 16px;
            color: #303133;
            margin-bottom: 8px;
          }

          p {
            color: #909399;
            font-size: 14px;
          }
        }
      }
    }
  }

  .form-section {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 50px;

    .apply-form {
      max-width: 700px;
      margin: 0 auto;

      :deep(.el-checkbox-group) {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      :deep(.el-radio-group) {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .form-tip {
        font-size: 12px;
        color: #909399;
        margin-top: 4px;
      }
    }
  }

  .process-section {
    background: #fff;
    border-radius: 12px;
    padding: 40px;

    .process-steps {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 16px;

      .process-step {
        text-align: center;
        flex: 1;
        max-width: 180px;

        .step-number {
          width: 48px;
          height: 48px;
          background: linear-gradient(135deg, #409eff, #67c23a);
          border-radius: 50%;
          color: #fff;
          font-size: 20px;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16px;
        }

        .step-content {
          h4 {
            font-size: 16px;
            color: #303133;
            margin-bottom: 8px;
          }

          p {
            font-size: 13px;
            color: #909399;
            line-height: 1.6;
          }
        }
      }

      .step-arrow {
        padding-top: 12px;
        color: #c0c4cc;
      }
    }
  }

  .success-content {
    text-align: center;

    .success-icon {
      margin-bottom: 16px;
    }

    h3 {
      font-size: 20px;
      color: #303133;
      margin-bottom: 8px;
    }

    .success-desc {
      color: #909399;
      margin-bottom: 20px;
    }

    .contact-info {
      background: #f5f7fa;
      border-radius: 8px;
      padding: 16px;
      text-align: left;

      p {
        color: #606266;
        font-size: 14px;
        line-height: 1.8;
      }
    }
  }
}

@media (max-width: 992px) {
  .join-us-page {
    .benefits-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .process-steps {
      flex-wrap: wrap;

      .step-arrow {
        display: none;
      }

      .process-step {
        flex-basis: calc(50% - 12px);
      }
    }
  }
}

@media (max-width: 576px) {
  .join-us-page {
    .benefits-grid {
      grid-template-columns: 1fr !important;
    }

    .process-steps {
      .process-step {
        flex-basis: 100%;
      }
    }

    .form-section,
    .requirements-section,
    .process-section {
      padding: 24px 16px;
    }
  }
}
</style>
