<template>
  <view class="login">
    <view class="logo-area">
      <text class="logo-text">宇之然 AI</text>
      <text class="logo-sub">让每个人都能用好 AI</text>
    </view>
    <view class="form">
      <input class="input" v-model="account" placeholder="手机号 / 邮箱" type="text" />
      <input class="input" v-model="password" placeholder="密码" type="password" password />
      <button class="btn-primary" @tap="handleLogin" :loading="loading">登录</button>
      <view class="links">
        <text class="link" @tap="goRegister">没有账号？去注册</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '../../store/user'

const userStore = useUserStore()
const account = ref('')
const password = ref('')
const loading = ref(false)

async function handleLogin() {
  if (!account.value || !password.value) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }
  loading.value = true
  try {
    await userStore.login(account.value, password.value)
    uni.showToast({ title: '登录成功', icon: 'success' })
    uni.switchTab({ url: '/pages/index/index' })
  } catch (e: any) {
    uni.showToast({ title: e.message || '登录失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const goRegister = () => uni.navigateTo({ url: '/pages/register/index' })
</script>

<style scoped>
.login { padding: 100rpx 40rpx; }
.logo-area { text-align: center; margin-bottom: 80rpx; }
.logo-text { font-size: 52rpx; font-weight: bold; color: var(--brand); display: block; }
.logo-sub { font-size: 28rpx; color: var(--muted-foreground); margin-top: 16rpx; display: block; }
.form { }
.input {
  background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
  margin-bottom: 24rpx; border: 1rpx solid var(--border);
}
.btn-primary {
  background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
  font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
}
.links { text-align: center; margin-top: 40rpx; }
.link { font-size: 26rpx; color: var(--brand); }
</style>
