<template>
  <view class="login-page">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <view class="bg-decoration">
      <view class="orb orb-primary"></view>
      <view class="orb orb-secondary"></view>
      <view class="star-field"></view>
    </view>

    <view class="content" :style="{ paddingTop: safeAreaTop + 'px', paddingBottom: safeAreaBottom + 24 + 'px' }">
      <view class="brand-lockup">
        <text class="brand-kicker">EMOTION MUSEUM</text>
        <text class="brand-title">数字生命档案</text>
      </view>

      <view class="login-card">
        <view class="header">
          <text class="title font-serif">欢迎回来</text>
          <text class="subtitle">开启你的数字生命档案</text>
        </view>

        <view
          class="btn-primary wechat-login-btn"
          :class="{ disabled: loading }"
          @click="handleWechatLogin"
        >
          <text class="wechat-mark">微</text>
          <text v-if="loading && activeMethod === 'wechat'">微信登录中...</text>
          <text v-else>微信一键登录</text>
        </view>

        <view class="login-divider" v-if="loginConfig.smsLoginEnabled">
          <view></view>
          <text>或使用手机号登录</text>
          <view></view>
        </view>

        <view class="form" v-if="loginConfig.smsLoginEnabled">
          <view class="input-group">
            <text class="input-label">手机号码</text>
            <input
              class="glass-input"
              type="number"
              maxlength="11"
              placeholder="输入手机号"
              placeholder-class="input-placeholder"
              v-model="phone"
            />
          </view>

          <view class="input-group">
            <text class="input-label">验证码</text>
            <view class="code-row">
              <input
                class="glass-input code-input"
                type="number"
                maxlength="6"
                placeholder="请输入验证码"
                placeholder-class="input-placeholder"
                v-model="code"
              />
              <view
                class="code-btn"
                :class="{ disabled: isCountingDown || phone.length !== 11 }"
                @click="handleGetCode"
              >
                <text v-if="isCountingDown" class="countdown">{{ countdown }}s</text>
                <text v-else>获取验证码</text>
              </view>
            </view>
          </view>
        </view>

        <view
          v-if="loginConfig.smsLoginEnabled"
          class="btn-primary login-btn"
          :class="{ disabled: !canSubmit || loading }"
          @click="handleLogin"
        >
          <text v-if="loading">登录中...</text>
          <text v-else>开启旅程</text>
        </view>

        <text class="agreement">
          登录即代表同意《用户协议》与《隐私政策》
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '../../stores/app.js'
import { getSmsCode, getLoginConfig } from '../../services/auth.js'

const store = useAppStore()

const statusBarHeight = ref(uni.getStorageSync('statusBarHeight') || 20)
const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)

const phone = ref('')
const code = ref('')
const loading = ref(false)
const activeMethod = ref('')
const countdown = ref(60)
const isCountingDown = ref(false)

const loginConfig = ref({ wechatLoginEnabled: true, smsLoginEnabled: false })

onMounted(async () => {
  const windowInfo = uni.getWindowInfo()
  statusBarHeight.value = windowInfo.statusBarHeight || 20
  safeAreaTop.value = windowInfo.safeAreaInsets?.top || windowInfo.statusBarHeight || 20
  safeAreaBottom.value = windowInfo.safeAreaInsets?.bottom || 0

  try {
    const res = await getLoginConfig()
    if (res.data) {
      loginConfig.value = res.data
    }
  } catch (e) {
    // 接口失败时默认只显示微信登录
    loginConfig.value = { wechatLoginEnabled: true, smsLoginEnabled: false }
  }
})

const canSubmit = computed(() => {
  return phone.value.length === 11 && code.value.length === 6
})

const handleGetCode = async () => {
  if (isCountingDown.value || loading.value) return

  if (phone.value.length !== 11) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    return
  }

  try {
    await getSmsCode(phone.value)
    uni.showToast({ title: '验证码已发送', icon: 'success' })
    startCountdown()
  } catch (error) {
    uni.showToast({ title: '验证码已发送（模拟: 888888）', icon: 'none' })
    startCountdown()
  }
}

const startCountdown = () => {
  isCountingDown.value = true
  countdown.value = 60

  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isCountingDown.value = false
    }
  }, 1000)
}

const routeAfterLogin = () => {
  uni.redirectTo({ url: '/pages/main/index?tab=script' })
}

const getWechatLoginCode = () => {
  return new Promise((resolve, reject) => {
    uni.login({
      provider: 'weixin',
      success: (res) => {
        if (res.code) {
          resolve(res.code)
        } else {
          reject(new Error('未获取到微信登录凭证'))
        }
      },
      fail: reject
    })
  })
}

const handleWechatLogin = async () => {
  if (loading.value) return

  loading.value = true
  activeMethod.value = 'wechat'

  try {
    const loginCode = await getWechatLoginCode()
    const result = await store.loginWithWechat({ code: loginCode })

    if (result.success) {
      routeAfterLogin()
    } else {
      uni.showToast({ title: result.error || '微信登录失败', icon: 'none' })
    }
  } catch (error) {
    uni.showToast({ title: error.message || '微信登录失败', icon: 'none' })
  } finally {
    loading.value = false
    activeMethod.value = ''
  }
}

const handleLogin = async () => {
  if (!canSubmit.value || loading.value) return

  loading.value = true
  activeMethod.value = 'phone'

  try {
    const result = await store.login(phone.value, code.value)

    if (result.success) {
      routeAfterLogin()
    } else {
      uni.showToast({ title: result.error || '登录失败', icon: 'none' })
    }
  } catch (error) {
    uni.showToast({ title: '登录失败', icon: 'none' })
  } finally {
    loading.value = false
    activeMethod.value = ''
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -8%, rgba(180, 129, 255, 0.28), transparent 28%),
    linear-gradient(180deg, #13091f 0%, #1b0b31 46%, #100719 100%);
  position: relative;
  overflow: visible;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.title.font-serif {
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif;
}

.status-bar {
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
  width: 100%;
  background: transparent;
  flex-shrink: 0;
}

.bg-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 999rpx;
  filter: blur(72rpx);
}

.orb-primary {
  top: 96rpx;
  right: -120rpx;
  width: 360rpx;
  height: 360rpx;
  background: rgba(162, 91, 255, 0.24);
}

.orb-secondary {
  left: -180rpx;
  bottom: 18%;
  width: 420rpx;
  height: 420rpx;
  background: rgba(62, 98, 255, 0.14);
}

.star-field {
  position: absolute;
  top: 132rpx;
  left: 64rpx;
  right: 64rpx;
  height: 360rpx;
  opacity: 0.42;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1rpx, transparent 2rpx),
    radial-gradient(circle, rgba(219, 196, 255, 0.38) 0 1rpx, transparent 2rpx);
  background-size: 108rpx 96rpx, 148rpx 132rpx;
}

.content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 32rpx;
  padding-right: 32rpx;
  box-sizing: border-box;
}

.brand-lockup {
  margin-top: 136rpx;
  margin-bottom: 50rpx;
  text-align: center;
}

.brand-kicker {
  display: block;
  margin-bottom: 14rpx;
  color: rgba(219, 200, 255, 0.58);
  font-size: 18rpx;
  font-weight: 600;
  letter-spacing: 5rpx;
}

.brand-title {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 34rpx;
  font-weight: 500;
  letter-spacing: 3rpx;
}

.login-card {
  width: 100%;
  max-width: 686rpx;
  margin: 0 auto;
  padding: 46rpx 32rpx 36rpx;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(58, 29, 91, 0.76), rgba(31, 15, 52, 0.82)),
    rgba(34, 15, 57, 0.86);
  border: 1rpx solid rgba(217, 190, 255, 0.22);
  border-radius: 40rpx;
  box-shadow:
    0 28rpx 72rpx rgba(0, 0, 0, 0.32),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(34rpx);
}

.header {
  text-align: center;
  margin-bottom: 42rpx;
}

.title {
  display: block;
  margin-bottom: 12rpx;
  color: rgba(255, 255, 255, 0.94);
  font-size: 42rpx;
  font-weight: 500;
  letter-spacing: 5rpx;
  line-height: 1.25;
}

.subtitle {
  display: block;
  color: rgba(225, 209, 255, 0.66);
  font-size: 24rpx;
  line-height: 1.45;
}

.form {
  margin-bottom: 36rpx;
}

.wechat-login-btn {
  gap: 16rpx;
  margin-bottom: 26rpx;
  background: linear-gradient(135deg, #35c76f 0%, #159552 100%);
  box-shadow:
    0 14rpx 36rpx rgba(21, 149, 82, 0.26),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.22);
}

.wechat-mark {
  width: 42rpx;
  height: 42rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #159552;
  font-size: 24rpx;
  line-height: 42rpx;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.94);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 18rpx;
  margin-bottom: 30rpx;
}

.login-divider view {
  flex: 1;
  height: 1rpx;
  background: rgba(224, 205, 255, 0.16);
}

.login-divider text {
  color: rgba(225, 209, 255, 0.48);
  font-size: 22rpx;
  line-height: 1;
}

.input-group {
  margin-bottom: 24rpx;
}

.input-group:last-child {
  margin-bottom: 0;
}

.input-label {
  display: block;
  margin-bottom: 12rpx;
  color: rgba(234, 223, 255, 0.64);
  font-size: 22rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.glass-input {
  width: 100%;
  height: 84rpx;
  padding: 0 28rpx;
  box-sizing: border-box;
  color: #fff7ff;
  font-size: 27rpx;
  background: rgba(255, 255, 255, 0.085);
  border: 1rpx solid rgba(255, 255, 255, 0.14);
  border-radius: 24rpx;
}

.input-placeholder {
  color: rgba(230, 213, 255, 0.38);
}

.code-row {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.code-input {
  flex: 1;
  width: auto;
  min-width: 0;
}

.code-btn {
  width: 196rpx;
  height: 84rpx;
  color: rgba(255, 255, 255, 0.94);
  font-size: 22rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 24rpx;
  background: rgba(132, 72, 204, 0.58);
  border: 1rpx solid rgba(217, 190, 255, 0.28);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.code-btn:active {
  transform: scale(0.97);
  opacity: 0.86;
}

.code-btn.disabled {
  color: rgba(226, 213, 255, 0.36);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.09);
}

.countdown {
  color: rgba(235, 224, 255, 0.7);
  font-size: 26rpx;
  font-weight: 500;
}

.btn-primary {
  width: 100%;
  height: 88rpx;
  margin-bottom: 24rpx;
  padding: 0;
  box-sizing: border-box;
  color: white;
  font-weight: 700;
  font-size: 28rpx;
  letter-spacing: 1rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 28rpx;
  background: linear-gradient(135deg, #a855f7 0%, #6d3be8 100%);
  box-shadow:
    0 14rpx 36rpx rgba(133, 68, 255, 0.34),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.22);
  transition: all 0.2s ease;
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow:
    0 8rpx 24rpx rgba(133, 68, 255, 0.24),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.18);
}

.btn-primary.disabled {
  opacity: 0.48;
}

.agreement {
  display: block;
  text-align: center;
  color: rgba(220, 205, 246, 0.44);
  font-size: 22rpx;
  line-height: 1.6;
}

@media screen and (max-height: 700px) {
  .brand-lockup {
    margin-top: 76rpx;
    margin-bottom: 34rpx;
  }

  .login-card {
    padding-top: 38rpx;
    padding-bottom: 30rpx;
  }

  .header {
    margin-bottom: 32rpx;
  }
}
</style>
