<template>
  <LoginBackground :show-logo="true">
    <!-- 内容区域 -->
    <view class="register-content">
      <!-- 头像 -->
      <view class="avatar-wrapper">
        <image
          class="avatar-image"
          src="/static/login/portal/register-avatar.png"
          mode="aspectFit"
        ></image>
      </view>

      <!-- 注册卡片 -->
      <view class="register-card">
        <!-- 标题 -->
        <view class="card-title-wrapper">
          <text class="card-title">手机号注册</text>
        </view>

        <!-- 表单 -->
        <view class="form-area">
          <!-- 手机号 -->
          <view class="input-group">
            <view class="input-outer">
              <view class="input-inner">
                <input
                  class="input-field"
                  type="number"
                  v-model="form.phone"
                  placeholder="输入您的手机号"
                  placeholder-class="input-placeholder"
                  maxlength="11"
                  @input="handlePhoneInput"
                />
              </view>
            </view>
          </view>

          <!-- 验证码 -->
          <view class="input-group code-group">
            <view class="input-outer code-outer">
              <view class="input-inner code-inner">
                <input
                  class="input-field"
                  type="number"
                  v-model="form.code"
                  placeholder="输入验证码"
                  placeholder-class="input-placeholder"
                  maxlength="6"
                  :disabled="codeStatus === 'verified'"
                />
              </view>
            </view>
            <view
              class="send-code-btn"
              :class="{
                countdown: codeStatus === 'countdown',
                verified: codeStatus === 'verified',
              }"
              @tap="handleSendCode"
            >
              <text v-if="codeStatus === 'unsent' || codeStatus === 'resend'"
                >发送验证码</text
              >
              <text v-else-if="codeStatus === 'countdown'"
                >{{ countdown }}秒</text
              >
              <text v-else-if="codeStatus === 'verified'">已验证</text>
            </view>
          </view>

          <!-- 验证码错误提示 -->
          <view v-if="codeError" class="error-message">
            <text>{{ codeError }}</text>
          </view>

          <!-- 创建密码 -->
          <view class="input-group">
            <view class="input-outer">
              <view class="input-inner">
                <input
                  class="input-field"
                  :type="showPassword ? 'text' : 'password'"
                  v-model="form.password"
                  placeholder="创建密码"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>
          </view>

          <!-- 确认密码 -->
          <view class="input-group">
            <view class="input-outer">
              <view class="input-inner">
                <input
                  class="input-field"
                  :type="showPassword ? 'text' : 'password'"
                  v-model="confirmPassword"
                  placeholder="确认密码"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>
          </view>

          <!-- 错误提示 -->
          <view v-if="errorMessage" class="error-message">
            <text>{{ errorMessage }}</text>
          </view>
        </view>

        <!-- 分割线 -->
        <view class="divider"></view>

        <!-- 下一步按钮 -->
        <view class="next-btn-wrapper">
          <view class="next-btn" @tap="handleRegister">
            <text class="next-btn-text">注册</text>
          </view>
        </view>
      </view>

    </view>
  </LoginBackground>
</template>

<script setup>
import { ref } from "vue";
import LoginBackground from "@/components/LoginBackground.vue";
import { validatePhone, validatePassword } from "@/utils/validator";
import { checkmobileApi, sendCodeApi, verifyCodeApi } from "@/utils/api";

// 响应式数据
const form = ref({
  phone: "",
  password: "",
  code: "",
});
const confirmPassword = ref("");
const showPassword = ref(false);
const errorMessage = ref("");
const phoneChecking = ref(false);
const showCodeInput = ref(true);
const codeStatus = ref("unsent"); // unsent, countdown, resend, verified
const countdown = ref(60);
const codeError = ref("");
const verifyToken = ref("");
const countdownTimer = ref(null);
const isVerifying = ref(false);

// 切换密码显示/隐藏
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

// 手机号输入处理
const handlePhoneInput = (e) => {
  const phone = e.detail.value;
  checkPhoneDuplicate(phone);
};

// 验证手机号是否已注册
let checkPhoneTimer = null;
const checkPhoneDuplicate = async (phone) => {
  if (checkPhoneTimer) {
    clearTimeout(checkPhoneTimer);
    checkPhoneTimer = null;
  }

  const phoneValidation = validatePhone(phone);
  if (!phoneValidation.valid || phone.length !== 11) {
    errorMessage.value = "";
    return;
  }

  checkPhoneTimer = setTimeout(async () => {
    phoneChecking.value = true;
    try {
      const res = await checkmobileApi(phone);
      if (res.code === 0 && res.data && res.data.exists) {
        errorMessage.value = "该手机号已被注册";
      } else {
        errorMessage.value = "";
      }
    } catch (error) {
      errorMessage.value = "";
    } finally {
      phoneChecking.value = false;
    }
  }, 300);
};

// 发送验证码
const handleSendCode = async () => {
  const phoneValidation = validatePhone(form.value.phone);
  if (!phoneValidation.valid) {
    errorMessage.value = phoneValidation.message;
    return;
  }

  try {
    const res = await sendCodeApi(form.value.phone, "register");
    if (res.code === 0) {
      codeStatus.value = "countdown";
      countdown.value = res.expires_in || 60;
      showCodeInput.value = true;
      startCountdown();
      uni.showToast({ title: "验证码已发送", icon: "success" });
    }
  } catch (error) {
    codeError.value = error.message || "发送失败，请重试";
  }
};

// 倒计时
const startCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value);
  }
  countdownTimer.value = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(countdownTimer.value);
      codeStatus.value = "resend";
    }
  }, 1000);
};

// 验证验证码
const handleVerifyCode = async () => {
  if (!form.value.code || form.value.code.length !== 6) {
    codeError.value = "请输入6位验证码";
    return;
  }

  isVerifying.value = true;
  codeError.value = "";
  try {
    const res = await verifyCodeApi(
      form.value.phone,
      form.value.code,
      "register",
    );
    if (res.code === 0 && res.data && res.data.verified) {
      verifyToken.value = res.data.verify_token;
      codeStatus.value = "verified";
      uni.showToast({ title: "验证成功", icon: "success" });
    }
  } catch (error) {
    codeError.value = error.message || "验证失败";
  } finally {
    isVerifying.value = false;
  }
};

// 注册
const handleRegister = async () => {
  const phoneValidation = validatePhone(form.value.phone);
  if (!phoneValidation.valid) {
    errorMessage.value = phoneValidation.message;
    uni.showToast({ title: phoneValidation.message, icon: "none" });
    return;
  }

  const passwordValidation = validatePassword(form.value.password);
  if (!passwordValidation.valid) {
    errorMessage.value = passwordValidation.message;
    uni.showToast({ title: passwordValidation.message, icon: "none" });
    return;
  }

  // 确认密码一致性
  if (form.value.password !== confirmPassword.value) {
    errorMessage.value = "两次密码输入不一致";
    uni.showToast({ title: "两次密码输入不一致", icon: "none" });
    return;
  }

  // 检查验证码
  if (!form.value.code || form.value.code.length !== 6) {
    errorMessage.value = "请输入6位验证码";
    return;
  }

  if (codeStatus.value !== "verified") {
    await handleVerifyCode();
    if (codeStatus.value !== "verified") return;
  }

  errorMessage.value = "";

  try {
    uni.setStorageSync("temp_register_mobile", form.value.phone);
    uni.setStorageSync("temp_register_password", form.value.password);
    uni.setStorageSync("temp_register_verify_token", verifyToken.value);

    uni.reLaunch({ url: "/pages/profile/setNickname" });
  } catch (error) {
    errorMessage.value = error.message || "操作失败，请重试";
    uni.showToast({ title: errorMessage.value, icon: "none" });
  }
};
</script>

<style scoped>
.register-content {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: -64rpx;
}

/* 头像 */
.avatar-wrapper {
  width: 296rpx;
  height: 274rpx;
  margin-top: 130rpx;
  filter: drop-shadow(2rpx 4rpx 98rpx rgba(0, 0, 0, 0.94));
  z-index: 11;
}

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

/* 卡片 */
.register-card {
  width: 710rpx;
  margin-top: -104rpx;
  padding: 30rpx 104rpx 30rpx;
  box-sizing: border-box;
  border-radius: 56rpx;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(64rpx);
  -webkit-backdrop-filter: blur(64rpx);
  box-shadow: 0 0 20.5px 0 rgba(0, 0, 0, 0.31);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 12;
}

/* 标题 */
.card-title-wrapper {
  position: relative;
  width: 324rpx;
  height: 84rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 56rpx;
  background:
    linear-gradient(240deg, #cdaffa 9.77%, rgba(205, 175, 250, 0) 62.44%),
    linear-gradient(108deg, #f7cbbf 13.91%, rgba(247, 203, 191, 0) 51.34%),
    linear-gradient(297deg, #81a9f8 31.28%, rgba(129, 169, 248, 0) 90.74%),
    linear-gradient(80deg, #69f4e9 39.86%, rgba(164, 252, 245, 0) 66.88%);

  border-radius: 84rpx;
}

.tab-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 124%;
}

.card-title {
  position: relative;
  z-index: 1;
  color: #fff9e7;
  text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.84);
  font-family: "Abhaya Libre Medium";
  font-size: 46rpx;
  font-style: normal;
  font-weight: 500;
}

/* 表单 */
.form-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  padding: 0 14rpx;
}

.input-group {
  width: 100%;
}

.input-outer {
  width: 100%;
  height: 74rpx;
  border-radius: 58rpx;
  background: linear-gradient(
    90deg,
    rgba(255, 222, 8, 0.06) 0%,
    rgba(252, 100, 102, 0.12) 64%,
    rgba(244, 88, 104, 0.12) 100%
  );
  box-shadow: 4rpx 4rpx 8rpx 0 rgba(242, 21, 21, 0.47);
  display: flex;
  align-items: center;
  padding: 4rpx;
  box-sizing: border-box;
}

.input-inner {
  width: 100%;
  height: 60rpx;
  border-radius: 58rpx;
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.input-field {
  width: 100%;
  height: 100%;
  font-size: 30rpx;
  color: #333;
}

.input-placeholder {
  font-size: 30rpx;
  color: #565656;
  font-family: "Abhaya Libre Medium", sans-serif;
}

/* 验证码行 */
.code-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12rpx;
}

.code-outer {
  flex: 1;
}

.code-inner {
  width: 100%;
}

.send-code-btn {
  width: 152rpx;
  height: 74rpx;
  border-radius: 36rpx;
  background: linear-gradient(
    90deg,
    rgba(255, 222, 8, 0.06) 0%,
    rgba(252, 100, 102, 0.12) 64%,
    rgba(244, 88, 104, 0.12) 100%
  );
  box-shadow: 4rpx 4rpx 8rpx 0 rgba(242, 21, 21, 0.47);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #fff9e7;
  text-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.84);
  font-family: "Abhaya Libre Medium", sans-serif;
  flex-shrink: 0;
}

.send-code-btn.countdown,
.send-code-btn.verified {
  opacity: 0.6;
}

/* 错误提示 */
.error-message {
  width: 100%;
  padding-left: 24rpx;
}

.error-message text {
  font-size: 24rpx;
  color: #ff6b6b;
}

/* 分割线 */
.divider {
  width: 612rpx;
  height: 4rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 100rpx;
  margin: 28rpx 0 24rpx;
}

/* 下一步按钮 */
.next-btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 64rpx 0;
}

.next-btn {
  width: 270rpx;
  height: 90rpx;
  border-radius: 58rpx;
  background: linear-gradient(
    90deg,
    rgba(255, 222, 8, 0.28) 0%,
    rgba(252, 100, 102, 0.58) 64%,
    rgba(244, 88, 104, 0.58) 100%
  );
  box-shadow: 4rpx 4rpx 8rpx 0 rgba(242, 21, 21, 0.47);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.96;
}

.next-btn-text {
  font-size: 36rpx;
  color: #fff9e7;
  text-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.84);
  font-family: "Abhaya Libre Medium", sans-serif;
}
</style>
