<script setup lang="ts">
import { useRouter } from 'vue-router'
import { login } from '@/api/user'
import { showToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { isNativeApp, getEncryptString } from '@/core/mxApi'

const router = useRouter()
const userStore = useUserStore()
const isNative = isNativeApp()

const form = ref({
  username: '',
  password: '',
})

const loading = ref(false)

// 原生环境：从客户端获取密钥，直接交换 token
onMounted(async () => {
  if (!isNativeApp()) return

  loading.value = true
  try {
    const secret = await getEncryptString()
  console.log(secret)
  } catch {
    // 错误已由 request.ts 拦截器统一处理
  } finally {
    loading.value = false
  }
})

async function onSubmit() {
  loading.value = true
  try {
    const res = await login(form.value) as any
    userStore.setToken(res.data.token)
    showToast('登录成功')
    router.push('/')
  } catch {
    // 错误已由 request.ts 拦截器统一处理
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="login-page">
    <!-- 原生环境：自动登录，只显示加载状态 -->
    <van-loading v-if="isNative" vertical class="native-loading">
      正在登录...
    </van-loading>

    <!-- 浏览器环境：显示登录表单 -->
    <template v-else>
      <section class="login-header">
        <p class="login-eyebrow">Welcome back</p>
        <h1 class="login-title">账号登录</h1>
        <p class="login-subtitle">请输入账号信息继续访问</p>
      </section>

      <van-form class="login-form" @submit="onSubmit">
        <van-cell-group inset class="form-panel">
          <van-field
            v-model="form.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
        </van-cell-group>
        <div class="btn-wrap">
          <van-button block round type="primary" native-type="submit" :loading="loading">
            登录
          </van-button>
        </div>
      </van-form>
    </template>
  </div>
</template>

<style scoped>
.login-page {
  min-height: 100vh;
  padding: 72px 24px 24px;
  background:
    radial-gradient(circle at 18% 8%, rgba(25, 137, 250, 0.16), transparent 110px),
    linear-gradient(180deg, #f6f9ff 0%, #ffffff 44%, #f7f8fa 100%);
  box-sizing: border-box;
}

.login-header {
  margin-bottom: 36px;
}

.login-eyebrow {
  margin: 0 0 10px;
  color: #1989fa;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.login-title {
  margin: 0;
  color: #1f2937;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.18;
}

.login-subtitle {
  margin: 10px 0 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.5;
}

.login-form {
  --van-cell-font-size: 15px;
  --van-cell-line-height: 24px;
  --van-cell-vertical-padding: 15px;
  --van-cell-horizontal-padding: 16px;
  --van-field-label-width: 66px;
  --van-field-label-margin-right: 8px;
  --van-field-placeholder-text-color: #b6bdc8;
  --van-button-large-height: 48px;
  --van-button-default-height: 48px;
  --van-button-default-font-size: 17px;
}

.form-panel {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.08);
}

.btn-wrap {
  margin-top: 28px;
}

.btn-wrap :deep(.van-button) {
  border: 0;
  background: linear-gradient(135deg, #1989fa 0%, #1268e5 100%);
  box-shadow: 0 9px 18px rgba(25, 137, 250, 0.26);
  font-weight: 600;
}

.native-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}
</style>
