<template>
  <div class="settings-container">
    <div class="page-header">
      <h1 class="page-title">系统设置</h1>
    </div>

    <div class="settings-content">
      <el-tabs v-model="activeTab" class="settings-tabs">
        <!-- 通用设置 -->
        <el-tab-pane label="通用设置" name="general">
          <div class="tab-content">
            <div class="setting-group">
              <h3 class="group-title">界面设置</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>主题模式</span>
                  <span class="item-desc">选择系统的主题模式</span>
                </div>
                <el-radio-group v-model="settings.theme">
                  <el-radio label="light">浅色模式</el-radio>
                  <el-radio label="dark">深色模式</el-radio>
                  <el-radio label="auto">跟随系统</el-radio>
                </el-radio-group>
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>语言设置</span>
                  <span class="item-desc">选择系统显示语言</span>
                </div>
                <el-select v-model="settings.language" style="width: 200px">
                  <el-option label="简体中文" value="zh-CN" />
                  <el-option label="繁体中文" value="zh-TW" />
                  <el-option label="English" value="en-US" />
                </el-select>
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>字体大小</span>
                  <span class="item-desc">调整系统字体大小</span>
                </div>
                <el-slider
                  v-model="settings.fontSize"
                  :min="12"
                  :max="20"
                  :marks="fontSizeMarks"
                  style="width: 300px"
                />
              </div>
            </div>

            <div class="setting-group">
              <h3 class="group-title">学习设置</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>自动保存答案</span>
                  <span class="item-desc">练习时自动保存答案，防止丢失</span>
                </div>
                <el-switch v-model="settings.autoSave" />
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>显示答题时间</span>
                  <span class="item-desc">在练习时显示每道题的答题时间</span>
                </div>
                <el-switch v-model="settings.showTimer" />
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>错题自动收藏</span>
                  <span class="item-desc">自动将错题加入错题本</span>
                </div>
                <el-switch v-model="settings.autoCollectMistakes" />
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <div class="tab-content">
            <div class="setting-group">
              <h3 class="group-title">系统通知</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>考试提醒</span>
                  <span class="item-desc">考试开始前推送提醒</span>
                </div>
                <el-switch v-model="notifications.examReminder" />
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>成绩通知</span>
                  <span class="item-desc">考试成绩公布时推送通知</span>
                </div>
                <el-switch v-model="notifications.scoreNotice" />
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>学习报告</span>
                  <span class="item-desc">定期推送学习报告</span>
                </div>
                <el-switch v-model="notifications.studyReport" />
              </div>
            </div>

            <div class="setting-group">
              <h3 class="group-title">邮件通知</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>接收邮件通知</span>
                  <span class="item-desc">通过邮件接收重要通知</span>
                </div>
                <el-switch v-model="notifications.emailEnabled" />
              </div>
              <div class="setting-item" v-if="notifications.emailEnabled">
                <div class="item-label">
                  <span>通知频率</span>
                  <span class="item-desc">设置邮件通知的频率</span>
                </div>
                <el-select v-model="notifications.emailFrequency" style="width: 200px">
                  <el-option label="实时" value="realtime" />
                  <el-option label="每日汇总" value="daily" />
                  <el-option label="每周汇总" value="weekly" />
                </el-select>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 隐私设置 -->
        <el-tab-pane label="隐私设置" name="privacy">
          <div class="tab-content">
            <div class="setting-group">
              <h3 class="group-title">个人信息</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>公开个人资料</span>
                  <span class="item-desc">允许其他用户查看您的个人资料</span>
                </div>
                <el-switch v-model="privacy.profilePublic" />
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>显示学习排名</span>
                  <span class="item-desc">在排行榜中显示您的排名</span>
                </div>
                <el-switch v-model="privacy.showRanking" />
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>分享学习记录</span>
                  <span class="item-desc">允许分享您的学习记录</span>
                </div>
                <el-switch v-model="privacy.shareRecord" />
              </div>
            </div>

            <div class="setting-group">
              <h3 class="group-title">数据管理</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>导出个人数据</span>
                  <span class="item-desc">导出您的所有学习数据</span>
                </div>
                <el-button @click="exportData">导出数据</el-button>
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>清除缓存</span>
                  <span class="item-desc">清除本地缓存数据</span>
                </div>
                <el-button @click="clearCache">清除缓存</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 账号安全 -->
        <el-tab-pane label="账号安全" name="security">
          <div class="tab-content">
            <div class="setting-group">
              <h3 class="group-title">密码设置</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>修改密码</span>
                  <span class="item-desc">定期修改密码可以提高账号安全性</span>
                </div>
                <el-button @click="changePassword">修改密码</el-button>
              </div>
            </div>

            <div class="setting-group">
              <h3 class="group-title">登录设置</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>双因素认证</span>
                  <span class="item-desc">开启后需要验证码才能登录</span>
                </div>
                <el-switch v-model="security.twoFactor" />
              </div>
              <div class="setting-item">
                <div class="item-label">
                  <span>登录设备管理</span>
                  <span class="item-desc">查看和管理登录设备</span>
                </div>
                <el-button @click="manageDevices">管理设备</el-button>
              </div>
            </div>

            <div class="setting-group danger-zone">
              <h3 class="group-title">危险操作</h3>
              <div class="setting-item">
                <div class="item-label">
                  <span>注销账号</span>
                  <span class="item-desc">永久删除账号和所有数据</span>
                </div>
                <el-button type="danger" @click="deleteAccount">注销账号</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 保存按钮 -->
      <div class="save-actions">
        <el-button @click="resetSettings">重置</el-button>
        <el-button type="primary" @click="saveSettings">保存设置</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

// 当前标签页
const activeTab = ref('general')
const router = useRouter()

// 通用设置
const settings = reactive({
  theme: 'light',
  language: 'zh-CN',
  fontSize: 14,
  autoSave: true,
  showTimer: true,
  autoCollectMistakes: true
})

// 字体大小标记
const fontSizeMarks = {
  12: '小',
  14: '标准',
  16: '大',
  20: '特大'
}

// 通知设置
const notifications = reactive({
  examReminder: true,
  scoreNotice: true,
  studyReport: true,
  emailEnabled: false,
  emailFrequency: 'daily'
})

// 隐私设置
const privacy = reactive({
  profilePublic: true,
  showRanking: true,
  shareRecord: false
})

// 安全设置
const security = reactive({
  twoFactor: false
})

/**
 * 保存设置
 */
const saveSettings = () => {
  ElMessage.success('设置保存成功')
}

/**
 * 重置设置
 */
const resetSettings = async () => {
  try {
    await ElMessageBox.confirm('确定要重置所有设置吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    ElMessage.success('设置已重置')
  } catch {}
}

/**
 * 导出数据
 */
const exportData = () => {
  ElMessage.success('数据导出成功')
}

/**
 * 清除缓存
 */
const clearCache = async () => {
  try {
    await ElMessageBox.confirm('确定要清除所有缓存吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    ElMessage.success('缓存清除成功')
  } catch {}
}

/**
 * 修改密码
 * 跳转到独立的修改密码页面
 */
const changePassword = () => {
  router.push('/user/change-password')
}

/**
 * 管理设备
 */
const manageDevices = () => {
  ElMessage.info('打开设备管理页面')
}

/**
 * 注销账号
 */
const deleteAccount = async () => {
  try {
    await ElMessageBox.confirm(
      '注销账号后，您的所有数据将被永久删除且无法恢复。确定要继续吗？',
      '危险操作',
      {
        confirmButtonText: '确定注销',
        cancelButtonText: '取消',
        type: 'error'
      }
    )
    ElMessage.info('账号注销流程已启动')
  } catch {}
}
</script>

<style lang="scss" scoped>
.settings-container {
  max-width: 1000px;
  margin: 0 auto;

  .page-header {
    margin-bottom: 24px;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }
  }

  .settings-content {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .settings-tabs {
      :deep(.el-tabs__header) {
        margin-bottom: 32px;
      }

      .tab-content {
        .setting-group {
          margin-bottom: 48px;

          &:last-child {
            margin-bottom: 0;
          }

          .group-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 24px;
            padding-bottom: 12px;
            border-bottom: 1px solid #ebeef5;
          }

          &.danger-zone {
            .group-title {
              color: #f56c6c;
              border-bottom-color: #fde2e2;
            }
          }
        }

        .setting-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 0;

          &:not(:last-child) {
            border-bottom: 1px solid #f5f7fa;
          }

          .item-label {
            flex: 1;

            span {
              display: block;

              &:first-child {
                font-size: 14px;
                color: #333;
                margin-bottom: 4px;
              }

              &.item-desc {
                font-size: 12px;
                color: #909399;
              }
            }
          }
        }
      }
    }

    .save-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid #ebeef5;

      .el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
      }
    }
  }
}

// 响应式
@media (max-width: 768px) {
  .settings-container {
    .setting-item {
      flex-direction: column;
      align-items: flex-start !important;
      gap: 12px;

      .item-label {
        width: 100%;
      }
    }

    .save-actions {
      flex-direction: column;

      .el-button {
        width: 100%;
      }
    }
  }
}
</style>