<template>
  <div class="personal-center table_form-container" v-loading="loading">
    <div class="page-header">
      <h2>{{ t('personalCenter.pageTitle') }}</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')">{{
                t('personalCenter.modify') }}</el-button>
            </div>
            <div class="login-time">{{ t('personalCenter.lastLogin') }}：{{ 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">{{ t('personalCenter.email') }}</span>
            <span class="value">{{ userInfo.email || t('personalCenter.notSet') }}</span>
            <template v-if="!userInfo.email">
              <el-button link type="primary" @click="showEditDialog('email')">{{ t('personalCenter.goToBind')
                }}</el-button>
            </template>
            <template v-else>
              <el-tag type="success" size="small">{{ t('personalCenter.bound') }}</el-tag>
            </template>
          </div>

          <div class="info-item">
            <span class="label">{{ t('personalCenter.mobile') }}</span>
            <span class="value">{{ userInfo.mobile || t('personalCenter.notBound') }}</span> {{ }}
            <template v-if="!userInfo.mobile">
              <el-button link type="primary" @click="showEditDialog('mobile')">{{ t('personalCenter.bind')
                }}</el-button>
            </template>
            <template v-else>
              <el-tag type="success" size="small">{{ t('personalCenter.bound') }}</el-tag>
            </template>
          </div>

          <div class="info-item">
            <span class="label">{{ t('personalCenter.password') }}</span>
            <el-button link type="primary" @click="showPasswordDialog">{{ t('personalCenter.modify') }}</el-button>
          </div>

          <div class="info-item">
            <span class="label">{{ t('personalCenter.language') }}</span>
            <span class="value">{{ t('personalCenter.languageDesc') }}</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" :button-loading="editLoading" @confirm="handleEditConfirm"
      @cancel="handleEditDialogReset" @close="handleEditDialogReset">
      <el-form ref="editFormRef" :model="editForm" :rules="getEditRules()" label-width="80px" label-position="top">
        <el-form-item v-if="editField === 'mobile'" :label="editForm.label" prop="value" class="phone-item">
          <el-select v-model="editForm.countryCode" :teleported="false" value-key="code" placeholder="国家" size="large">
            <el-option v-for="item in countryOptions" :key="item.code" :label="item.code" :value="item.code">
              <div class="country-option">
                <span class="country-name">{{ item.name }}</span>
                <span class="country-code">{{ item.code }}</span>
              </div>
            </el-option>
          </el-select>
          <el-input v-model="editForm.value" :placeholder="`${t('common.pleaseInput')}${editForm.label}`"
            size="large" />
        </el-form-item>
        <el-form-item v-else-if="editField !== 'language'" :label="editForm.label" prop="value">
          <el-input v-model="editForm.value" :placeholder="`${t('common.pleaseInput')}${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="t('personalCenter.modifyPassword')" width="500px"
      :button-loading="passwordLoading" @confirm="handlePasswordConfirm" @cancel="handlePasswordDialogReset" @close="handlePasswordDialogReset">
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordFormRules" label-width="100px"
        label-position="top">
        <!-- 选择验证方式 -->
        <el-form-item :label="t('personalCenter.verifyMethod')" prop="verifyType">
          <el-radio-group v-model="passwordForm.verifyType" @change="onVerifyTypeChange">
            <el-radio label="mobile" :disabled="!userInfo.mobile">{{ t('personalCenter.mobileVerify') }}</el-radio>
            <el-radio label="email" :disabled="!userInfo.email">{{ t('personalCenter.emailVerify') }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 验证账号 -->
        <el-form-item :label="t('personalCenter.verifyAccount')">
          <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="t('personalCenter.newPassword')" prop="login_password1">
          <el-input v-model="passwordForm.login_password1" type="password" show-password
            :placeholder="t('personalCenter.passwordPlaceholder')" size="large" />
        </el-form-item>

        <!-- 新密码2 -->
        <el-form-item :label="t('personalCenter.confirmPassword')" prop="login_password2">
          <el-input v-model="passwordForm.login_password2" type="password" show-password
            :placeholder="t('personalCenter.confirmPasswordPlaceholder')" size="large" />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: 'PersonalCenter'
})
import { ref, reactive, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { UserFilled } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';
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 { countryOptions } from '@/views/user/config/mock';

const { t, locale } = useI18n()
// 类型定义
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';

import { useButtonLoading, usePageLoading } from '@/composables/useLoading';

const { loading, startLoading, stopLoading } = usePageLoading(true);

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

const dialogVisible = ref(false);
const passwordDialogVisible = ref(false);
const { buttonLoading: editLoading, startButtonLoading: startEditLoading, stopButtonLoading: stopEditLoading } = useButtonLoading();
const { buttonLoading: passwordLoading, startButtonLoading: startPasswordLoading, stopButtonLoading: stopPasswordLoading } = useButtonLoading();
const editFormRef = ref<FormInstance>();
const passwordFormRef = ref<FormInstance>();
const editField = ref<string>('');
const dialogTitle = ref('');

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

// 密码表单
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', 60, 'center_phone');
const emailCaptchaState = initCaptchaState('email', 60, 'center_email');

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

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

// 判断是否可以绑定/重新绑定邮箱
const canBindEmail = computed(() => {
  return false
  // return userStore.userInfo?.reg_type === 2; // 手机注册用户可以绑定/重新绑定邮箱
});

// 判断是否可以绑定/重新绑定手机号
const canBindMobile = computed(() => {
  return false
  // return userStore.userInfo?.reg_type === 1; // 邮箱注册用户可以绑定/重新绑定手机号
});

// 校验规则
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: t('personalCenter.pleaseInputEmail'), trigger: 'blur' },
        { type: 'email', message: t('personalCenter.emailFormatError'), trigger: 'blur' }
      ];
      return rules;
    case 'mobile':
      rules.value = [
        { required: true, message: t('personalCenter.pleaseInputMobile'), trigger: 'blur' },
        { pattern: /^\+?\d{5,20}$/, message: t('personalCenter.mobileFormatError'), trigger: 'blur' }
      ];
      return rules;
    case 'username':
      rules.value = [
        { required: true, message: t('personalCenter.pleaseInputUsername'), trigger: 'blur' },
        { min: 2, max: 20, message: t('personalCenter.usernameLengthError'), trigger: 'blur' }
      ];
      return rules;
    default:
      return {};
  }
};

// 密码强度校验
const passwordFormRules = ref<FormRules>({
  verifyType: [{ required: true, message: t('personalCenter.pleaseSelectVerifyMethod'), trigger: 'change' }],
  code: codeRules().code,
  login_password1: [
    { required: true, message: t('personalCenter.pleaseInputNewPassword'), trigger: 'blur' },
    { min: 6, max: 12, message: t('personalCenter.passwordLengthError'), trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{6,12}$/,
      message: t('personalCenter.passwordComplexityError'), trigger: 'blur'
    }
  ],
  login_password2: [
    { required: true, message: t('personalCenter.pleaseConfirmNewPassword'), trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.login_password1) {
          callback(new Error(t('personalCenter.passwordMismatchError')));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

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

// 打开编辑弹窗
const showEditDialog = (field: 'email' | 'mobile' | 'username') => {
  editField.value = field;
  editForm.code = '';
  editForm.countryCode = '+86';
  switch (field) {
    case 'email':
      editForm.label = t('personalCenter.email');
      editForm.value = userInfo.email;
      dialogTitle.value = t('personalCenter.bindEmail');
      break;
    case 'mobile':
      editForm.label = t('personalCenter.mobile');
      editForm.value = '';
      dialogTitle.value = userInfo.mobile ? t('personalCenter.rebindMobile') : t('personalCenter.bindMobile');
      break;
    case 'username':
      editForm.label = t('personalCenter.username');
      editForm.value = userInfo.username;
      dialogTitle.value = t('personalCenter.modifyUsername');
      break;
  }
  dialogVisible.value = true;
  updateSendState();
};

// 发送绑定验证码
const handleSendCaptcha = async () => {
  const type = editField.value === 'email' ? 'email' : 'phone';
  let receiver = editForm.value?.trim();
  if (!receiver) {
    ElMessage.warning(t('personalCenter.pleaseInputReceiverAccount'));
    return;
  }
  // 如果是手机号，需要组合区号
  if (type === 'phone') {
    receiver = editForm.countryCode + receiver;
  }
  const currentState = type === 'email' ? emailCaptchaState : phoneCaptchaState;
  await sendCaptcha(type, receiver, currentState, () => {
    const params: any = {
      reg_type: userStore.userInfo!.reg_type,
      type: type === 'email' ? 'transfer_code' : 'bindMobile_code'
    };
    if (type === 'email') {
      params.email = receiver;
    } else {
      params.mobile = receiver;
      params.mobile_area = editForm.countryCode;
    }
    return userStore.sendCode(params);
  });
  updateSendState();
};

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

// 监听 editField 变化，实时更新 sendState
watch(
  () => editField.value,
  () => {
    nextTick(() => {
      updateSendState();
    });
  }
);

// 监听倒计时状态变化，实时同步到 sendState
watch(
  () => phoneCaptchaState.countdown.value,
  () => {
    if (editField.value === 'mobile') {
      updateSendState();
    }
  }
);

watch(
  () => emailCaptchaState.countdown.value,
  () => {
    if (editField.value === 'email') {
      updateSendState();
    }
  }
);

// 语言切换
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;
  startEditLoading();
  try {
    await editFormRef.value.validate();

    if (editField.value === 'username') {
      const params: EditUsernameParams = { username: editForm.value };
      await editUsernameApi(params);
      userInfo.username = editForm.value;
      // 更新全局用户信息
      userStore.updateUserInfo({ username: editForm.value });
    }
    if (editField.value === 'mobile') {
      const mobile = editForm.countryCode + editForm.value;
      const params: BindMobileParams = { mobile, code: editForm.code, mobile_area: editForm.countryCode };
      await bindMobileApi(params);
      userInfo.mobile = mobile;
    }
    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);
  } finally {
    stopEditLoading();
  }
};

// ==================== 密码修改逻辑 ====================
const showPasswordDialog = () => {
  if (!userInfo.mobile && !userInfo.email) {
    ElMessage.warning(t('personalCenter.pleaseBindMobileOrEmail'));
    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';
  let receiver = passwordForm.verifyType === 'email' ? userInfo.email : userInfo.mobile;
  if (!receiver) {
    ElMessage.warning(t('personalCenter.pleaseInputVerifyAccount'));
    return;
  }
  const currentState = passwordForm.verifyType === 'email' ? pwdEmailCaptchaState : pwdMobileCaptchaState;

  await sendCaptcha(type, receiver, currentState, () => {
    const params: any = {
      reg_type: userStore.userInfo!.reg_type,
      type: 'resetPass_code'
    };
    if (type === 'email') {
      params.email = receiver;
    } else {
      params.mobile = receiver;
      // 从手机号中提取区号（假设手机号格式为 +8613800138000）
      const match = receiver.match(/^\+(\d{1,4})/);
      params.mobile_area = match ? '+' + match[1] : '+86';
    }
    return userStore.sendCode(params);
  });
  updatePwdSendState();
};

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

// 监听倒计时状态变化（实时同步到UI）
watch(
  () => pwdMobileCaptchaState.countdown.value,
  () => {
    if (passwordForm.verifyType === 'mobile') {
      updatePwdSendState();
    }
  }
);
watch(
  () => pwdEmailCaptchaState.countdown.value,
  () => {
    if (passwordForm.verifyType === 'email') {
      updatePwdSendState();
    }
  }
);

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

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

    // 如果是手机验证，添加 mobile_area 参数
    if (passwordForm.verifyType === 'mobile' && userInfo.mobile) {
      const match = userInfo.mobile.match(/^\+(\d{1,4})/);
      params.mobile_area = match ? '+' + match[1] : '+86';
    }

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

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

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

// 监听语言切换，同步更新 i18n 的 locale
watch(
  () => languageStore.lang,
  (newLang) => {
    locale.value = newLang
  },
  { immediate: true }
)

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;
    }
  }
}

.phone-item {
  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
  }

  .el-select {
    width: 120px;
    margin-right: 10px;

    .country-option {
      width: 120px;
      display: flex;
      justify-content: space-between;
    }

    :deep(.el-select-dropdown__item) {
      padding: 0 16px 0 16px;
    }
  }
}
</style>