<template>
  <div class="profile-panel">
    <div
      class="settings-content-header"
      :class="{
        'member-gold': memberCode === 'gold',
        'member-platinum': memberCode === 'platinum',
      }"
    >
      <div class="header-left">
        <h1>{{ $t("settings.profile.title") }}</h1>
        <p>{{ $t("settings.profile.desc") }}</p>
      </div>
      <div class="header-right" v-if="memberCode">
        <div class="member-type-wrapper">
          <img
            :src="memberTypeIcon"
            :alt="memberTypeDisplay"
            class="member-type-icon"
          />
          <div class="member-type-name" v-if="memberName">
            {{ memberTypeNameDisplay }}
          </div>
          <div class="member-expire-time" v-if="memberExpireTimeDisplay">
            有效期至{{ memberExpireTimeDisplay }}
          </div>
        </div>
      </div>
    </div>
    <div class="profile-list">
      <!-- 用户名 -->
      <div class="profile-item">
        <div class="item-content">
          <div class="item-title">
            {{ $t("settings.profile.username") }}
          </div>
          <div class="item-value">{{ username || "-" }}</div>
        </div>
        <el-button class="edit-btn" @click="editUsername" :disabled="loading">
          {{ $t("settings.profile.editUsername") }}
        </el-button>
      </div>

      <!-- 头像 -->
      <div class="profile-item">
        <div class="item-content">
          <div class="item-title">{{ $t("settings.profile.avatar") }}</div>
          <div class="item-avatar-wrapper">
            <img
              :src="displayAvatarUrl"
              class="item-avatar"
              @click="triggerUpload"
            />
            <div class="item-avatar-tip">
              {{ $t("settings.profile.avatarTip") }}
            </div>
          </div>
          <input
            ref="fileInputRef"
            type="file"
            accept="image/*"
            @change="onAvatarChange"
            style="display: none"
          />
        </div>
        <el-button class="edit-btn" @click="triggerUpload" :disabled="loading">
          {{ $t("settings.profile.editAvatar") }}
        </el-button>
      </div>

      <!-- 手机号 -->
      <div class="profile-item">
        <div class="item-content">
          <div class="item-title">{{ $t("settings.profile.phone") }}</div>
          <div class="item-value">{{ phone || "-" }}</div>
        </div>
        <el-button
          v-if="!phone"
          class="edit-btn"
          @click="editPhone"
          :disabled="loading"
        >
          <!-- {{
            phone
              ? $t("settings.profile.unbindPhone")
              : $t("settings.profile.bindPhone")
          }} -->
          {{ $t("settings.profile.bindPhone") }}
        </el-button>
      </div>

      <!-- 电子邮箱 -->
      <div class="profile-item">
        <div class="item-content">
          <div class="item-title">{{ $t("settings.profile.email") }}</div>
          <div class="item-desc" v-if="!email">
            {{ $t("settings.profile.emailDesc") }}
          </div>
          <div class="item-value">{{ email || "-" }}</div>
        </div>
        <el-button class="edit-btn" @click="editEmail" :disabled="loading">
          {{
            email
              ? $t("settings.profile.unbindEmail")
              : $t("settings.profile.bindEmail")
          }}
        </el-button>
      </div>

      <!-- 密码 -->
      <div class="profile-item">
        <div class="item-content">
          <div class="item-title">
            {{ $t("settings.profile.passwordTitle") }}
          </div>
          <div class="item-desc">
            {{ $t("settings.profile.passwordDesc") }}
          </div>
        </div>
        <el-button class="edit-btn" @click="setPassword" :disabled="loading">
          {{ $t("settings.profile.setPassword") }}
        </el-button>
      </div>

      <!-- 微信 -->
      <div class="profile-item">
        <div class="item-content">
          <div class="item-title">
            {{ $t("settings.profile.wechat") }}
            <img src="/weixin.svg" class="wechat-icon" />
          </div>
          <div class="item-desc">
            <template v-if="wechatBound">
              {{ $t("settings.profile.wechatDesc") }}
              <template v-if="wechatNickname"
                >（{{ wechatNickname }}）</template
              >
            </template>
            <template v-else>{{
              $t("settings.profile.wechatNotBound")
            }}</template>
          </div>
        </div>
        <el-button class="edit-btn" @click="unbindWechat">
          {{
            wechatBound
              ? $t("settings.profile.unbindWechat")
              : $t("settings.profile.bindWechat")
          }}
        </el-button>
      </div>

      <!-- 注销账号 -->
      <!-- <div class="profile-item">
        <div class="item-content">
          <div class="item-title">
            {{ $t("settings.profile.deactivateAccount") }}
          </div>
          <div class="item-desc">
            {{ $t("settings.profile.deactivateDesc") }}
            <el-link
              type="primary"
              class="deactivate-link"
              @click="viewDeactivateNotice"
            >
              {{ $t("settings.profile.deactivateNotice") }}
            </el-link>
          </div>
        </div>
        <el-button
          class="edit-btn danger-btn"
          @click="deactivateAccount"
          :disabled="loading"
        >
          {{ $t("settings.profile.deactivateAccount") }}
        </el-button>
      </div> -->
    </div>

    <!-- 编辑用户名弹窗 -->
    <el-dialog
      v-model="editUsernameDialogVisible"
      :title="$t('settings.profile.editUsername')"
      width="500px"
    >
      <el-form :model="editUsernameForm" label-width="100px">
        <el-form-item :label="$t('settings.profile.username')">
          <el-input
            v-model="editUsernameForm.name"
            :placeholder="$t('settings.profile.usernamePlaceholder')"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editUsernameDialogVisible = false">
            {{ $t("common.cancel") }}
          </el-button>
          <el-button
            type="primary"
            @click="submitEditUsername"
            :loading="loading"
          >
            {{ $t("common.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改密码弹窗 -->
    <el-dialog
      v-model="changePasswordDialogVisible"
      :title="$t('settings.profile.setPassword')"
      width="500px"
    >
      <el-form
        :model="changePasswordForm"
        label-width="120px"
        class="change-password-form"
      >
        <el-form-item :label="$t('settings.profile.oldPassword')">
          <el-input
            v-model="changePasswordForm.oldPassword"
            type="password"
            :placeholder="$t('settings.profile.oldPasswordPlaceholder')"
            show-password
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item :label="$t('settings.profile.newPassword')">
          <el-input
            v-model="changePasswordForm.newPassword"
            type="password"
            :placeholder="$t('settings.profile.newPasswordPlaceholder')"
            show-password
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item :label="$t('settings.profile.confirmPassword')">
          <el-input
            v-model="changePasswordForm.confirmPassword"
            type="password"
            :placeholder="$t('settings.profile.confirmPasswordPlaceholder')"
            show-password
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changePasswordDialogVisible = false">
            {{ $t("common.cancel") }}
          </el-button>
          <el-button
            type="primary"
            @click="submitChangePassword"
            :loading="loading"
          >
            {{ $t("common.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 绑定手机号弹窗 -->
    <el-dialog
      v-model="bindPhoneDialogVisible"
      :title="$t('settings.profile.bindPhone')"
      width="500px"
    >
      <el-form :model="bindPhoneForm" label-width="100px">
        <el-form-item :label="$t('settings.profile.phone')">
          <el-input
            v-model="bindPhoneForm.phoneNumber"
            :placeholder="$t('settings.profile.phonePlaceholder')"
            maxlength="11"
            @input="
              bindPhoneForm.phoneNumber = bindPhoneForm.phoneNumber.replace(
                /\D/g,
                '',
              )
            "
          />
        </el-form-item>
        <el-form-item :label="$t('settings.profile.smsCode')">
          <div style="display: flex; gap: 10px">
            <el-input
              v-model="bindPhoneForm.smsCode"
              :placeholder="$t('settings.profile.smsCodePlaceholder')"
              maxlength="6"
              @input="
                bindPhoneForm.smsCode = bindPhoneForm.smsCode.replace(/\D/g, '')
              "
            />
            <el-button
              @click="sendBindSmsCode"
              :disabled="smsCodeCountdown > 0 || loading"
              :loading="loading"
            >
              {{
                smsCodeCountdown > 0
                  ? `${smsCodeCountdown}秒后重试`
                  : $t("settings.profile.sendSmsCode")
              }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="bindPhoneDialogVisible = false">
            {{ $t("common.cancel") }}
          </el-button>
          <el-button type="primary" @click="submitBindPhone" :loading="loading">
            {{ $t("common.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 绑定邮箱弹窗 -->
    <el-dialog
      v-model="bindEmailDialogVisible"
      :title="$t('settings.profile.bindEmail')"
      width="500px"
    >
      <el-form :model="bindEmailForm" label-width="100px">
        <el-form-item :label="$t('settings.profile.email')">
          <el-input
            v-model="bindEmailForm.email"
            type="email"
            :placeholder="$t('settings.profile.emailPlaceholder')"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="bindEmailDialogVisible = false">
            {{ $t("common.cancel") }}
          </el-button>
          <el-button type="primary" @click="submitBindEmail" :loading="loading">
            {{ $t("common.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 解绑邮箱弹窗 -->
    <el-dialog
      v-model="unbindEmailDialogVisible"
      :title="$t('settings.profile.unbindEmail')"
      width="500px"
    >
      <el-form :model="unbindEmailForm" label-width="100px">
        <el-form-item :label="$t('settings.profile.email')">
          <el-input
            v-model="unbindEmailForm.email"
            type="email"
            :placeholder="$t('settings.profile.emailPlaceholder')"
            disabled
          />
        </el-form-item>
        <el-form-item :label="$t('settings.profile.passwordTitle')">
          <el-input
            v-model="unbindEmailForm.password"
            type="password"
            :placeholder="$t('settings.profile.passwordPlaceholder')"
            show-password
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="unbindEmailDialogVisible = false">
            {{ $t("common.cancel") }}
          </el-button>
          <el-button
            type="primary"
            @click="submitUnbindEmail"
            :loading="loading"
          >
            {{ $t("common.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import {
  getUserProfile,
  getMockUserProfile,
  apiGetUserAvatar,
  apiUpdateAvatar,
  apiUpdateProfile,
  apiChangePassword,
  apiBindPhone,
  apiSendBindSms,
  apiSendBindEmail,
  apiUnbindEmail,
} from "@/api/user";
import {
  getWechatBindStatus,
  unbindWechat as apiUnbindWechat,
} from "@/api/wechat";
import { useAuthStore } from "@/stores/auth";
import {
  getCurrentUserMemberType,
  getCurrentUserMemberExpireTime,
} from "@/api/pay";

const router = useRouter();
const { t } = useI18n();
const authStore = useAuthStore();

const avatarUrl = ref("");
const username = ref("");
const email = ref("");
const phone = ref("");
const userId = ref<number | null>(null);
const loading = ref(false);
const fileInputRef = ref<HTMLInputElement>();

// 会员类型
const memberCode = ref<string>("");
const memberName = ref<string>("");
const memberExpireTime = ref<string | null>(null);

// 微信绑定状态
const wechatBound = ref(false);
const wechatNickname = ref("");

// 编辑用户名弹窗相关
const editUsernameDialogVisible = ref(false);
const editUsernameForm = ref({
  name: "",
});

// 修改密码弹窗相关
const changePasswordDialogVisible = ref(false);
const changePasswordForm = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

// 绑定手机号弹窗相关
const bindPhoneDialogVisible = ref(false);
const bindPhoneForm = ref({
  phoneNumber: "",
  smsCode: "",
});
const smsCodeCountdown = ref(0);
const smsCodeTimer = ref<number | null>(null);

// 绑定邮箱弹窗相关
const bindEmailDialogVisible = ref(false);
const bindEmailForm = ref({
  email: "",
});

// 解绑邮箱弹窗相关
const unbindEmailDialogVisible = ref(false);
const unbindEmailForm = ref({
  email: "",
  password: "",
});

// 计算属性：确保头像 URL 始终有效
const displayAvatarUrl = computed(() => {
  if (!avatarUrl.value || avatarUrl.value.trim() === "") {
    return "/default_avatar.svg";
  }
  return avatarUrl.value;
});

// 计算属性：会员类型显示文本
const memberTypeDisplay = computed(() => {
  if (!memberCode.value) return "";
  const code = memberCode.value.toLowerCase();
  if (code === "gold") {
    return t("settingsSidebar.memberTypeGold");
  } else if (code === "platinum") {
    return t("settingsSidebar.memberTypePlatinum");
  }
  return "";
});

// 计算属性：会员类型图标
const memberTypeIcon = computed(() => {
  if (!memberCode.value) return "";
  const code = memberCode.value.toLowerCase();
  if (code === "gold") {
    return "/huiyuan3.png";
  } else if (code === "platinum") {
    return "/baijingkahuiyuan1.svg";
  }
  return "";
});

// 计算属性：会员类型名称（国际化处理）
const memberTypeNameDisplay = computed(() => {
  if (!memberName.value) return "";

  // 将后端返回的中文名称映射到国际化键
  const nameMap: Record<string, string> = {
    金卡: "settingsSidebar.memberTypeGold",
    白金卡: "settingsSidebar.memberTypePlatinum",
  };

  const i18nKey = nameMap[memberName.value];
  if (i18nKey) {
    return t(i18nKey);
  }

  // 如果没有匹配到，直接返回原值
  return memberName.value;
});

// 计算属性：会员有效期展示（格式：YYYY/MM/DD）
const memberExpireTimeDisplay = computed(() => {
  if (!memberExpireTime.value) return "";
  const date = new Date(memberExpireTime.value);
  if (Number.isNaN(date.getTime())) return "";
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}/${month}/${day}`;
});

const loadUserProfile = async () => {
  loading.value = true;
  try {
    // 尝试获取真实用户信息，如果失败则使用模拟数据
    let userData;
    try {
      userData = await getUserProfile();
    } catch (error) {
      console.warn("⚠️ 获取真实用户信息失败，使用模拟数据:", error);
      userData = getMockUserProfile();
    }

    username.value = userData.name || "";
    email.value = userData.email || "";
    phone.value = userData.phoneNumber?.toString() || "";
    userId.value = userData.id || null;

    // 获取用户头像
    if (userData.id) {
      try {
        const response = await apiGetUserAvatar(userData.id);
        // 如果返回的是 blob 数据，转换为 URL
        if (response.data instanceof Blob) {
          // 检查 Blob 是否有内容
          if (response.data.size > 0) {
            avatarUrl.value = URL.createObjectURL(response.data);
          } else {
            // 空 Blob，使用默认头像
            avatarUrl.value = "";
          }
        } else if (typeof response.data === "string") {
          // 检查字符串是否为空
          const dataStr = String(response.data);
          avatarUrl.value = dataStr.trim() || "";
        } else {
          // 其他情况，使用默认头像
          avatarUrl.value = "";
        }
      } catch (error: any) {
        // 如果是 404 错误，静默处理，不显示错误信息
        if (error?.response?.status === 404) {
          avatarUrl.value = "";
        } else {
          console.warn("获取用户头像失败:", error);
          avatarUrl.value = "";
        }
      }
    } else {
      avatarUrl.value = "";
    }
  } catch (error) {
    console.error("Failed to load user profile:", error);
    ElMessage.error("Failed to load user profile");
  } finally {
    loading.value = false;
  }
};

const triggerUpload = () => {
  fileInputRef.value?.click();
};

const onAvatarChange = async (e: Event) => {
  const target = e.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return;

  if (!file.type.startsWith("image/")) {
    ElMessage.error("请选择图片文件");
    return;
  }

  if (file.size > 2 * 1024 * 1024) {
    ElMessage.error("图片大小不能超过2MB");
    return;
  }

  try {
    loading.value = true;

    // 先预览图片
    const reader = new FileReader();
    reader.onload = (e2) => {
      if (e2.target?.result) {
        avatarUrl.value = e2.target.result as string;
      }
    };
    reader.readAsDataURL(file);

    // 上传头像到服务器
    await apiUpdateAvatar(file);

    // 上传成功后，重新获取头像 URL
    if (userId.value) {
      try {
        const response = await apiGetUserAvatar(userId.value);
        // 如果返回的是 blob 数据，转换为 URL
        if (response.data instanceof Blob) {
          // 如果之前有 blob URL，先释放它
          if (avatarUrl.value && avatarUrl.value.startsWith("blob:")) {
            URL.revokeObjectURL(avatarUrl.value);
          }
          // 检查 Blob 是否有内容
          if (response.data.size > 0) {
            avatarUrl.value = URL.createObjectURL(response.data);
          } else {
            avatarUrl.value = "";
          }
        } else if (typeof response.data === "string") {
          const dataStr = String(response.data);
          avatarUrl.value = dataStr.trim() || "";
        } else {
          avatarUrl.value = "";
        }
      } catch (error: any) {
        // 如果是 404 错误，静默处理
        if (error?.response?.status !== 404) {
          console.warn("获取更新后的头像失败:", error);
        }
        avatarUrl.value = "";
      }
    }

    ElMessage.success("头像更新成功");

    // 触发自定义事件，通知其他组件头像已更新
    window.dispatchEvent(
      new CustomEvent("avatar-updated", {
        detail: { userId: userId.value },
      }),
    );
  } catch (error) {
    console.error("上传头像失败:", error);
    ElMessage.error("上传头像失败，请重试");
    // 上传失败，恢复默认头像
    avatarUrl.value = "";
  } finally {
    loading.value = false;
  }
};

// 编辑用户名
const editUsername = () => {
  editUsernameForm.value.name = username.value;
  editUsernameDialogVisible.value = true;
};

// 提交编辑用户名
const submitEditUsername = async () => {
  if (!editUsernameForm.value.name?.trim()) {
    ElMessage.warning("请输入用户名");
    return;
  }

  try {
    loading.value = true;
    const { data } = await apiUpdateProfile({
      name: editUsernameForm.value.name.trim(),
    });

    // 更新本地显示的用户名
    username.value = data.name || editUsernameForm.value.name.trim();

    ElMessage.success("用户名更新成功");
    editUsernameDialogVisible.value = false;
  } catch (error) {
    console.error("更新用户名失败:", error);
    ElMessage.error("更新用户名失败，请重试");
  } finally {
    loading.value = false;
  }
};

// 编辑手机号
const editPhone = () => {
  if (phone.value) {
    // 已绑定，执行解绑操作
    // handleUnbindPhone();
  } else {
    // 未绑定，打开绑定弹窗
    bindPhoneForm.value = {
      phoneNumber: "",
      smsCode: "",
    };
    bindPhoneDialogVisible.value = true;
  }
};

// 发送绑定验证码
const sendBindSmsCode = async () => {
  if (!bindPhoneForm.value.phoneNumber?.trim()) {
    ElMessage.warning("请输入手机号");
    return;
  }

  // 验证手机号格式
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(bindPhoneForm.value.phoneNumber.trim())) {
    ElMessage.warning("请输入正确的手机号");
    return;
  }

  try {
    loading.value = true;
    await apiSendBindSms(bindPhoneForm.value.phoneNumber.trim());
    ElMessage.success("验证码已发送");

    // 开始倒计时
    smsCodeCountdown.value = 60;
    if (smsCodeTimer.value) {
      clearInterval(smsCodeTimer.value);
    }
    smsCodeTimer.value = window.setInterval(() => {
      smsCodeCountdown.value--;
      if (smsCodeCountdown.value <= 0) {
        if (smsCodeTimer.value) {
          clearInterval(smsCodeTimer.value);
          smsCodeTimer.value = null;
        }
      }
    }, 1000);
  } catch (error: any) {
    console.error("发送验证码失败:", error);
    const errorMessage =
      error?.response?.data?.message ||
      error?.message ||
      "发送验证码失败，请重试";
    ElMessage.error(errorMessage);
  } finally {
    loading.value = false;
  }
};

// 提交绑定手机号
const submitBindPhone = async () => {
  if (!bindPhoneForm.value.phoneNumber?.trim()) {
    ElMessage.warning("请输入手机号");
    return;
  }

  // 验证手机号格式
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(bindPhoneForm.value.phoneNumber.trim())) {
    ElMessage.warning("请输入正确的手机号");
    return;
  }

  if (!bindPhoneForm.value.smsCode?.trim()) {
    ElMessage.warning("请输入验证码");
    return;
  }

  try {
    loading.value = true;
    const { data } = await apiBindPhone({
      phoneNumber: bindPhoneForm.value.phoneNumber.trim(),
      smsCode: bindPhoneForm.value.smsCode.trim(),
      userId: userId.value || undefined,
    });

    // 更新本地显示的手机号
    phone.value = data.phoneNumber?.toString() || "";

    ElMessage.success("手机号绑定成功");
    bindPhoneDialogVisible.value = false;

    // 重置表单
    bindPhoneForm.value = {
      phoneNumber: "",
      smsCode: "",
    };

    // 清除倒计时
    if (smsCodeTimer.value) {
      clearInterval(smsCodeTimer.value);
      smsCodeTimer.value = null;
    }
    smsCodeCountdown.value = 0;
  } catch (error: any) {
    console.error("绑定手机号失败:", error);
  } finally {
    loading.value = false;
  }
};

// 解绑手机号
// const handleUnbindPhone = async () => {
//   if (!phone.value) {
//     ElMessage.warning("当前未绑定手机号");
//     return;
//   }

//   try {
//     // 显示确认提示
//     await ElMessageBox.confirm(
//       t("settings.profile.unbindPhoneConfirmMessage"),
//       t("settings.profile.unbindPhoneConfirm"),
//       {
//         confirmButtonText: t("common.confirm"),
//         cancelButtonText: t("common.cancel"),
//         type: "warning",
//       },
//     );

//     loading.value = true;
//     await apiUnbindPhone({
//       phoneNumber: phone.value,
//       userId: userId.value || undefined,
//     });

//     // 更新本地显示的手机号
//     phone.value = "";

//     ElMessage.success(t("settings.profile.unbindPhoneSuccess"));

//     // 检查是否有邮箱，如果没有则跳转到登录首页
//     if (!email.value || email.value.trim() === "") {
//       ElMessage.warning(t("settings.profile.unbindPhoneNoEmailWarning"));
//       // 跳转到登录首页
//       try {
//         // 先导航到登录页，避免路由守卫冲突
//         await router.replace("/auth");
//         // 然后清除认证状态
//         await authStore.logout();
//       } catch (error) {
//         console.error("登出失败:", error);
//         // 即使出错也要确保跳转到登录页
//         router.replace("/auth");
//       }
//     }
//   } catch (error: any) {
//     // 如果用户取消，不显示错误
//     if (error === "cancel" || error === "close") {
//       return;
//     }
//     console.error("解绑手机号失败:", error);
//     const errorMessage =
//       error?.response?.data?.message ||
//       error?.message ||
//       "解绑手机号失败，请重试";
//     ElMessage.error(errorMessage);
//   } finally {
//     loading.value = false;
//   }
// };

// 编辑邮箱
const editEmail = () => {
  if (email.value) {
    // 已绑定邮箱，打开解绑弹窗
    unbindEmailForm.value = {
      email: email.value,
      password: "",
    };
    unbindEmailDialogVisible.value = true;
  } else {
    // 未绑定邮箱，打开绑定弹窗
    bindEmailForm.value = {
      email: "",
    };
    bindEmailDialogVisible.value = true;
  }
};

// 提交绑定邮箱
const submitBindEmail = async () => {
  if (!bindEmailForm.value.email?.trim()) {
    ElMessage.warning("请输入邮箱地址");
    return;
  }

  // 验证邮箱格式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(bindEmailForm.value.email.trim())) {
    ElMessage.warning("请输入正确的邮箱地址");
    return;
  }

  try {
    loading.value = true;
    await apiSendBindEmail(bindEmailForm.value.email.trim());
    ElMessage.success("绑定邮件已发送，请查收邮箱并完成绑定");
    bindEmailDialogVisible.value = false;
    // 重置表单
    bindEmailForm.value = {
      email: "",
    };
  } catch (error: any) {
    console.error("发送绑定邮件失败:", error);
    const errorMessage =
      error?.response?.data?.message ||
      error?.message ||
      "发送绑定邮件失败，请重试";
    ElMessage.error(errorMessage);
  } finally {
    loading.value = false;
  }
};

// 提交解绑邮箱
const submitUnbindEmail = async () => {
  if (!unbindEmailForm.value.email?.trim()) {
    ElMessage.warning("邮箱地址不能为空");
    return;
  }

  if (!unbindEmailForm.value.password?.trim()) {
    ElMessage.warning("请输入密码");
    return;
  }

  try {
    loading.value = true;
    await apiUnbindEmail({
      email: unbindEmailForm.value.email.trim(),
      password: unbindEmailForm.value.password.trim(),
    });

    // 更新本地显示的邮箱
    email.value = "";

    ElMessage.success("邮箱解绑成功");
    unbindEmailDialogVisible.value = false;

    // 重置表单
    unbindEmailForm.value = {
      email: "",
      password: "",
    };

    // 检查是否有手机号，如果没有则跳转到登录页
    if (!phone.value || phone.value.trim() === "") {
      ElMessage.warning("您已解绑邮箱，且未绑定手机号，请重新登录");
      try {
        // 先导航到登录页，避免路由守卫冲突
        await router.replace("/auth");
        // 然后清除认证状态
        await authStore.logout();
      } catch (error) {
        console.error("登出失败:", error);
        // 即使出错也要确保跳转到登录页
        router.replace("/auth");
      }
    }
  } catch (error: any) {
    console.error("解绑邮箱失败:", error);
    const errorMessage =
      error?.response?.data?.message ||
      error?.message ||
      "解绑邮箱失败，请重试";
    ElMessage.error(errorMessage);
  } finally {
    loading.value = false;
  }
};

// 设置密码
const setPassword = () => {
  // 重置表单
  changePasswordForm.value = {
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
  };
  changePasswordDialogVisible.value = true;
};

// 提交修改密码
const submitChangePassword = async () => {
  // 验证输入
  if (!changePasswordForm.value.oldPassword?.trim()) {
    ElMessage.warning("请输入旧密码");
    return;
  }

  if (!changePasswordForm.value.newPassword?.trim()) {
    ElMessage.warning("请输入新密码");
    return;
  }

  if (changePasswordForm.value.newPassword.length < 6) {
    ElMessage.warning("新密码长度不能少于6位");
    return;
  }

  if (
    changePasswordForm.value.newPassword !==
    changePasswordForm.value.confirmPassword
  ) {
    ElMessage.warning("两次输入的新密码不一致");
    return;
  }

  if (
    changePasswordForm.value.oldPassword ===
    changePasswordForm.value.newPassword
  ) {
    ElMessage.warning("新密码不能与旧密码相同");
    return;
  }

  try {
    loading.value = true;
    await apiChangePassword({
      oldPassword: changePasswordForm.value.oldPassword.trim(),
      newPassword: changePasswordForm.value.newPassword.trim(),
    });

    ElMessage.success("密码修改成功");
    changePasswordDialogVisible.value = false;
    // 重置表单
    changePasswordForm.value = {
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    };
  } catch (error: any) {
    console.error("修改密码失败:", error);
    const errorMessage =
      error?.response?.data?.message ||
      error?.message ||
      "修改密码失败，请重试";
    ElMessage.error(errorMessage);
  } finally {
    loading.value = false;
  }
};

// 获取微信绑定状态
const refreshWechatBindStatus = async () => {
  try {
    const { data } = await getWechatBindStatus();
    wechatBound.value = !!data.bound;
    wechatNickname.value = data.wechatNickname || "";
  } catch (error) {
    console.warn("获取微信绑定状态失败:", error);
    // 静默失败，不影响其他功能
  }
};

// 解除/绑定微信
const unbindWechat = async () => {
  if (wechatBound.value) {
    // 已绑定，执行解绑操作
    try {
      loading.value = true;
      await apiUnbindWechat();
      ElMessage.success("微信解绑成功");
      await refreshWechatBindStatus();
    } catch (error: any) {
      console.error("解绑微信失败:", error);
      const errorMessage =
        error?.response?.data?.message ||
        error?.message ||
        "解绑微信失败，请重试";
      ElMessage.error(errorMessage);
    } finally {
      loading.value = false;
    }
  } else {
    // 未绑定，跳转到绑定页面
    router.push({ path: "/wechat-login", query: { mode: "bind" } });
  }
};

onMounted(() => {
  loadUserProfile();
  refreshWechatBindStatus();

  // 获取当前用户会员类型
  getCurrentUserMemberType()
    .then((response) => {
      console.log("当前用户会员类型:", response.data);
      if (response.data?.memberCode) {
        memberCode.value = response.data.memberCode;
      }
      if (response.data?.memberName) {
        memberName.value = response.data.memberName;
      }
    })
    .catch((error) => {
      console.error("获取当前用户会员类型失败:", error);
    });

  // 获取当前用户会员过期时间
  getCurrentUserMemberExpireTime()
    .then((response) => {
      memberExpireTime.value = response.data;
      console.log("当前用户会员过期时间:", memberExpireTime.value);
    })
    .catch((error) => {
      console.error("获取当前用户会员过期时间失败:", error);
    });
});

// 组件卸载时清理 blob URL 和定时器，避免内存泄漏
onUnmounted(() => {
  if (avatarUrl.value && avatarUrl.value.startsWith("blob:")) {
    URL.revokeObjectURL(avatarUrl.value);
  }
  // 清理验证码倒计时定时器
  if (smsCodeTimer.value) {
    clearInterval(smsCodeTimer.value);
    smsCodeTimer.value = null;
  }
});
</script>

<style scoped lang="scss">
.profile-panel {
  color: var(--color-text);
  background: var(--color-bg);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.settings-content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 18px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;

  // 默认背景（无会员）
  background: var(--color-bg);

  // 金卡会员渐变背景
  &.member-gold {
    background: linear-gradient(135deg, #fff8e8 0%, #ffe8b8 50%, #ffd89c 100%);
  }

  // 白金卡会员渐变背景
  &.member-platinum {
    background: linear-gradient(135deg, #f0f3ec 0%, #e0e6d8 50%, #d0d9c4 100%);
  }

  .header-left {
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 1;
  }

  .header-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 10px;
  }

  p {
    font-size: 16px;
    color: var(--color-secondary);
    font-weight: 400;
  }
}

.member-type-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.member-type-icon {
  width: 70px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.member-type-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}
.member-expire-time {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-secondary);
  text-align: center;
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg);
  border-radius: 8px;
  overflow: hidden;
}

.profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s;

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

  &:hover {
    background-color: var(--color-card);
  }
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-value {
  font-size: 14px;
  color: var(--color-text);
  margin-top: 4px;
}

.item-desc {
  font-size: 13px;
  color: var(--color-secondary);
  line-height: 1.5;
}

.item-avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.item-avatar {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: transform 0.2s;

  &:hover {
    transform: scale(1.05);
  }
}

.item-avatar-tip {
  font-size: 12px;
  color: var(--color-secondary);
}

.wechat-icon {
  width: 16px;
  height: 16px;
}

.edit-btn {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;

  &:hover:not(:disabled) {
    background: var(--color-bag-hover);
    border-color: var(--color-primary);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.danger-btn {
  color: #f56c6c;
  border-color: #f56c6c;

  &:hover:not(:disabled) {
    background: rgba(245, 108, 108, 0.1);
  }
}

.deactivate-link {
  font-size: 13px;
  margin-left: 4px;
}

// 修改密码表单样式
:deep(.change-password-form) {
  .el-form-item__label {
    line-height: 32px;
  }
}

@media (max-width: 1024px) {
  .profile-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .edit-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>