<template>
  <div class="personal-center">
    <div class="page-header">
      <h2>账户信息</h2>
    </div>

    <div class="content-wrapper">
      <el-card class="card avatar-card">
        <div class="avatar-box">
          <div class="avatar-wrapper">
            <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar-image" alt="用户头像" />
            <el-icon v-else class="avatar-icon">
              <UserFilled />
            </el-icon>
          </div>

          <div class="info-text">
            <div class="username-row">
              <span class="username-text">{{ userInfo.username }}</span>
              <el-button link type="primary" size="small" @click="showEditDialog('username')">修改</el-button>
            </div>
            <div class="login-time">最后登录：{{ userInfo.last_login }}</div>
          </div>
        </div>
      </el-card>

      <el-card class="card info-card">
        <div class="info-list">
          <div class="info-item">
            <span class="label">邮箱</span>
            <span class="value">{{ userInfo.email || '未设置' }}</span>
            <template v-if="!userInfo.email">
              <el-button link type="primary" @click="showEditDialog('email')">去绑定</el-button>
            </template>
            <template v-else>
              <el-tag type="success" size="small">已绑定</el-tag>
            </template>
          </div>

          <div class="info-item">
            <span class="label">手机号</span>
            <span class="value">{{ userInfo.mobile || '未绑定' }}</span>
            <el-button v-if="!userInfo.mobile" link type="primary" @click="showEditDialog('mobile')">
              绑定
            </el-button>
            <template v-else>
              <el-tag type="success" size="small">已绑定</el-tag>
            </template>
          </div>

          <div class="info-item">
            <span class="label">密码</span>
            <el-button link type="primary" @click="showPasswordDialog">修改</el-button>
          </div>

          <div class="info-item">
            <span class="label">语言</span>
            <span class="value">选择您偏好的通讯语言</span>
            <el-select v-model="userInfo.lang_type" @change="handleLanguageChange" style="width: 130px" size="small">
              <el-option label="简体中文" :value="1" />
              <el-option label="English" :value="2" />
            </el-select>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 编辑弹窗 -->
    <Dialog :visible="dialogVisible" :title="dialogTitle" width="500px" @confirm="handleEditConfirm"
      @cancel="handleEditDialogReset" @close="handleEditDialogReset">
      <el-form ref="editFormRef" :model="editForm" :rules="getEditRules()" label-width="80px" label-position="top">
        <el-form-item :label="editForm.label" prop="value">
          <el-input v-if="editField !== 'language'" v-model="editForm.value" :placeholder="`请输入${editForm.label}`"
            size="large" />
        </el-form-item>

        <UserCaptcha v-if="['email', 'mobile'].includes(editField)" v-model="editForm.code"
          @sendCode="handleSendCaptcha" :show-send-button="showSendButton" :send-state="sendState" />
      </el-form>
    </Dialog>

    <!-- 密码修改弹窗 → 验证码模式 -->
    <Dialog :visible="passwordDialogVisible" title="修改密码" width="500px" @confirm="handlePasswordConfirm"
      @cancel="handlePasswordDialogReset" @close="handlePasswordDialogReset">
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordFormRules" label-width="100px"
        label-position="top">
        <!-- 选择验证方式 -->
        <el-form-item label="验证方式" prop="verifyType">
          <el-radio-group v-model="passwordForm.verifyType" @change="onVerifyTypeChange">
            <el-radio label="mobile" :disabled="!userInfo.mobile">手机验证</el-radio>
            <el-radio label="email" :disabled="!userInfo.email">邮箱验证</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 验证账号 -->
        <el-form-item label="验证账号">
          <span style="font-weight:500;color:#333">
            {{ passwordForm.verifyType === 'mobile' ? userInfo.mobile : userInfo.email }}
          </span>
        </el-form-item>

        <!-- 验证码 -->
        <UserCaptcha prop="code" v-model="passwordForm.code" @sendCode="handleSendPwdCaptcha"
          :show-send-button="showPwdSendButton" :send-state="pwdSendState" />

        <!-- 新密码1 -->
        <el-form-item label="新密码" prop="login_password1">
          <el-input v-model="passwordForm.login_password1" type="password" show-password placeholder="6-12位，含大小写+特殊字符"
            size="large" />
        </el-form-item>

        <!-- 新密码2 -->
        <el-form-item label="确认密码" prop="login_password2">
          <el-input v-model="passwordForm.login_password2" type="password" show-password placeholder="请再次输入新密码"
            size="large" />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { UserFilled } from '@element-plus/icons-vue';
import Dialog from '@/components/common/Dialog.vue';
import UserCaptcha from '@/views/user/components/Captcha.vue';
import { useUserStore } from '@/stores/modules/user';
import { useLanguageStore } from '@/stores/modules/language';
import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCaptcha';
import { codeRules } from '@/views/user/config/rules';

// 类型定义
import type {
  UserInfo,
  EditForm,
  PasswordForm,
  EditLangTypeParams,
  BindMobileParams,
  BindEmailParams,
  EditUsernameParams,
  UpdatePwdByCaptchaParams
} from '@/api/types/profile';

// 接口
import {
  getUserInfoApi,
  editLangTypeApi,
  bindMobileApi,
  bindEmailApi,
  editUsernameApi,
  updatePwdByCaptchaApi
} from '@/api/modules/profile/personalCenter';

const userInfo = reactive<UserInfo>({
  id: 0,
  username: '',
  email: '',
  mobile: '',
  lang_type: 1,
  avatar: '',
  last_login: ''
});

const dialogVisible = ref(false);
const passwordDialogVisible = ref(false);
const editFormRef = ref<FormInstance>();
const passwordFormRef = ref<FormInstance>();
const editField = ref<string>('');
const dialogTitle = ref('');

const editForm = reactive<EditForm>({ label: '', value: '', code: '' });

// 密码表单
const passwordForm = reactive<PasswordForm>({
  verifyType: 'mobile',
  code: '',
  login_password1: '',
  login_password2: ''
});

// 验证码状态
const showSendButton = ref(true);
const sendState = ref({ isCounting: false, countdown: 0 });
const phoneCaptchaState = initCaptchaState('phone');
const emailCaptchaState = initCaptchaState('email');

const showPwdSendButton = ref(true);
const pwdSendState = ref({ isCounting: false, countdown: 0 });
const pwdMobileCaptchaState = initCaptchaState('phone');
const pwdEmailCaptchaState = initCaptchaState('email');

const userStore = useUserStore();
const languageStore = useLanguageStore();

// 校验规则
const getEditRules = (): FormRules => {
  const rules: FormRules = {};
  if (['email', 'mobile'].includes(editField.value)) {
    rules.code = codeRules().code;
  }
  switch (editField.value) {
    case 'email':
      rules.value = [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
      ];
      return rules;
    case 'mobile':
      rules.value = [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^\+?\d{5,20}$/, message: '手机号格式不正确', trigger: 'blur' }
      ];
      return rules;
    case 'username':
      rules.value = [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 20, message: '用户名长度 2-20 位', trigger: 'blur' }
      ];
      return rules;
    default:
      return {};
  }
};

// 密码强度校验
const passwordFormRules = ref<FormRules>({
  verifyType: [{ required: true, message: '请选择验证方式', trigger: 'change' }],
  code: codeRules().code,
  login_password1: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 12, message: '长度 6-12 位', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{6,12}$/,
      message: '必须包含大小写+特殊字符', trigger: 'blur'
    }
  ],
  login_password2: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.login_password1) {
          callback(new Error('两次密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

// 获取用户信息
const fetchUserProfile = async () => {
  try {
    const res = await getUserInfoApi();
    Object.assign(userInfo, res);
    languageStore.changeLang(res.lang_type === 1 ? 'zh-CN' : 'en-US');
  } catch (error) {
    ElMessage.error('获取用户信息失败');
    console.error('获取用户信息失败:', error);
  }
};

// 打开编辑弹窗
const showEditDialog = (field: 'email' | 'mobile' | 'username') => {
  editField.value = field;
  editForm.code = '';
  switch (field) {
    case 'email':
      editForm.label = '邮箱';
      editForm.value = userInfo.email;
      dialogTitle.value = '绑定邮箱';
      break;
    case 'mobile':
      editForm.label = '手机号';
      editForm.value = userInfo.mobile;
      dialogTitle.value = userInfo.mobile ? '重新绑定手机号' : '绑定手机号';
      break;
    case 'username':
      editForm.label = '用户名';
      editForm.value = userInfo.username;
      dialogTitle.value = '修改用户名';
      break;
  }
  dialogVisible.value = true;
  updateSendState();
};

// 发送绑定验证码
const handleSendCaptcha = async () => {
  const type = editField.value === 'email' ? 'email' : 'phone';
  const receiver = editForm.value?.trim();
  if (!receiver) {
    ElMessage.warning('请输入接收验证码的账号');
    return;
  }
  const currentState = type === 'email' ? emailCaptchaState : phoneCaptchaState;
  await sendCaptcha(type, receiver, currentState, () => {
    return userStore.sendCode({
      reg_type: type === 'email' ? 1 : 2,
      [type === 'email' ? 'email' : 'mobile']: receiver,
      type: type === 'email' ? 'transfer_code' : 'bindMobile_code'
    });
  });
  updateSendState();
};

const updateSendState = () => {
  const t = editField.value === 'email' ? emailCaptchaState : phoneCaptchaState;
  sendState.value = { isCounting: t.isCounting.value, countdown: t.countdown.value };
};

// 语言切换
const handleLanguageChange = async (val: number) => {
  try {
    await editLangTypeApi({ lang_type: val });
    userInfo.lang_type = val;
    languageStore.changeLang(val === 1 ? 'zh-CN' : 'en-US');
  } catch (error) {
    console.error('语言切换失败:', error);
  }
};

// 提交修改
const handleEditConfirm = async () => {
  if (!editFormRef.value) return;
  try {
    await editFormRef.value.validate();

    if (editField.value === 'username') {
      const params: EditUsernameParams = { username: editForm.value };
      await editUsernameApi(params);
      userInfo.username = editForm.value;
    }
    if (editField.value === 'mobile') {
      const params: BindMobileParams = { mobile: editForm.value, code: editForm.code };
      await bindMobileApi(params);
      userInfo.mobile = editForm.value;
    }
    if (editField.value === 'email') {
      const params: BindEmailParams = { email: editForm.value, code: editForm.code };
      await bindEmailApi(params);
      userInfo.email = editForm.value;
    }
    dialogVisible.value = false;
    editFormRef.value.resetFields();
  } catch (err) {
    // 表单验证失败或API调用失败时，不显示错误消息，因为ElMessage已经在其他地方处理
    console.error('操作失败:', err);
  }
};

// ==================== 密码修改逻辑 ====================
const showPasswordDialog = () => {
  if (!userInfo.mobile && !userInfo.email) {
    ElMessage.warning('请先绑定手机或邮箱');
    return;
  }
  passwordForm.verifyType = userInfo.mobile ? 'mobile' : 'email';
  passwordForm.code = '';
  passwordForm.login_password1 = '';
  passwordForm.login_password2 = '';
  passwordDialogVisible.value = true;
  updatePwdSendState();

  // 修复：打开弹窗后清除验证状态，避免一进入就触发验证
  nextTick(() => {
    passwordFormRef.value?.clearValidate();
  });
};

const onVerifyTypeChange = () => {
  passwordForm.code = '';
  updatePwdSendState();

  // 切换验证方式时清除验证状态
  nextTick(() => {
    passwordFormRef.value?.clearValidate(['code']);
  });
};

// 发送修改密码验证码
const handleSendPwdCaptcha = async () => {
  const type = passwordForm.verifyType === 'email' ? 'email' : 'phone';
  const receiver = passwordForm.verifyType === 'email' ? userInfo.email : userInfo.mobile;
  if (!receiver) {
    ElMessage.warning('请先绑定验证账号');
    return;
  }
  const currentState = passwordForm.verifyType === 'email' ? pwdEmailCaptchaState : pwdMobileCaptchaState;

  await sendCaptcha(type, receiver, currentState, () => {
    return userStore.sendCode({
      reg_type: passwordForm.verifyType === 'email' ? 1 : 2,
      [passwordForm.verifyType]: receiver,
      type: 'resetPass_code'
    });
  });
  updatePwdSendState();
};

const updatePwdSendState = () => {
  const t = passwordForm.verifyType === 'email' ? pwdEmailCaptchaState : pwdMobileCaptchaState;
  pwdSendState.value = { isCounting: t.isCounting.value, countdown: t.countdown.value };
};

// 提交修改密码
const handlePasswordConfirm = async () => {
  if (!passwordFormRef.value) return;
  try {
    await passwordFormRef.value.validate();

    const params: UpdatePwdByCaptchaParams = {
      reg_type: passwordForm.verifyType === 'email' ? 1 : 2,
      email: passwordForm.verifyType === 'email' ? userInfo.email : undefined,
      mobile: passwordForm.verifyType === 'mobile' ? userInfo.mobile : undefined,
      code: passwordForm.code,
      login_password1: passwordForm.login_password1,
      login_password2: passwordForm.login_password2
    };

    await updatePwdByCaptchaApi(params);
    passwordDialogVisible.value = false;
    passwordFormRef.value.resetFields();
  } catch (err) {
    // 表单验证失败或API调用失败时，不显示错误消息，因为ElMessage已经在其他地方处理
    console.error('密码修改失败:', err);
  }
};

const handleEditDialogReset = () => {
  dialogVisible.value = false;
  editFormRef.value?.resetFields();
};

const handlePasswordDialogReset = () => {
  passwordDialogVisible.value = false;
  passwordFormRef.value?.resetFields();
};

onMounted(() => {
  fetchUserProfile();
});

onUnmounted(() => {
  clearCaptchaTimer(phoneCaptchaState);
  clearCaptchaTimer(emailCaptchaState);
  clearCaptchaTimer(pwdMobileCaptchaState);
  clearCaptchaTimer(pwdEmailCaptchaState);
});
</script>

<style scoped lang="scss">
.personal-center {
  padding: 24px;

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

    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #1f2329;
      margin: 0;
    }
  }
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  border: none;
}

.avatar-card {
  .avatar-box {
    display: flex;
    align-items: center;
    gap: 20px;

    .avatar-wrapper {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #f2f3f5;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .avatar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .avatar-icon {
        font-size: 48px;
        color: #909399;
      }
    }

    .info-text {
      display: flex;
      flex-direction: column;
      gap: 6px;

      .username-row {
        display: flex;
        align-items: flex-end;
        gap: 8px;

        .username-text {
          font-size: 20px;
          font-weight: 600;
          color: #1f2329;
          line-height: 1.2;
        }
      }

      .login-time {
        font-size: 14px;
        color: #909399;
      }
    }
  }
}

.info-card {
  .info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f2f3f5;

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

    .label {
      font-size: 14px;
      font-weight: 500;
      color: #606266;
      min-width: 70px;
    }

    .value {
      flex: 1;
      padding: 0 12px;
      color: #303133;
      font-size: 14px;
    }
  }
}
</style>