<script setup lang="ts">
import type { LoginRequest } from '@/service/types'
import { ref } from 'vue'
import AuthForm from '@/components/auth/AuthForm.vue'
import { authGetCodeUsingGet } from '@/service/renzheng'
import { sysUsersResetPasswordUsingPost } from '@/service/xitongyonghu'
import { useUserStore } from '@/store/user'
import { tabbarStore } from '@/tabbar/store'

const userStore = useUserStore()

// 当前模式：登录或重置密码
const currentMode = ref<'login' | 'reset'>('login')
const loading = ref(false)

// 处理发送验证码
async function handleSendCode(payload: { phone: string, type: 'login' | 'reset' }) {
  try {
    await authGetCodeUsingGet({
      params: {
        phone: payload.phone,
        type: payload.type,
      },
    })

    uni.showToast({
      title: '验证码已发送',
      icon: 'success',
    })
  }
  catch (error) {
    console.error('发送验证码失败:', error)
    uni.showToast({
      title: '发送失败，请重试',
      icon: 'none',
    })
  }
}

// 处理登录
async function handleLogin(payload: { type: 'password' | 'code', data: LoginRequest | { phone: string, code: string } }) {
  try {
    loading.value = true

    if (payload.type === 'password') {
      // 密码登录
      await userStore.login(payload.data as LoginRequest)
    }
    else {
      // 验证码登录
      await userStore.codeLogin(payload.data as { phone: string, code: string })
    }

    uni.showToast({
      title: '登录成功',
      icon: 'success',
    })

    // 登录成功，跳转到首页
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/index/index',
      })

      tabbarStore.setCurIdx(0)
    }, 1500)
  }
  catch (error) {
    console.error('登录失败:', error)
  }
  finally {
    loading.value = false
  }
}

// 处理重置密码
async function handleReset(data: { phone: string, code: string, password: string }) {
  try {
    loading.value = true

    // 调用重置密码API
    await sysUsersResetPasswordUsingPost({
      body: {
        phone: data.phone,
        new_password: data.password,
        confirm_password: data.password,
      },
    })

    uni.showToast({
      title: '密码重置成功',
      icon: 'success',
    })

    // 延迟切换到登录模式
    setTimeout(() => {
      currentMode.value = 'login'
    }, 1500)
  }
  catch (error) {
    console.error('重置密码失败:', error)
    uni.showToast({
      title: '重置失败，请重试',
      icon: 'none',
    })
  }
  finally {
    loading.value = false
  }
}

// 切换模式
function handleSwitchMode(mode: 'login' | 'reset') {
  currentMode.value = mode
}
</script>

<template>
  <view class="relative h-screen w-full overflow-hidden bg-slate-50">
    <view class="absolute h-96 w-96 rounded-full bg-blue-200/50 blur-[80px] -left-24 -top-24" />

    <view class="absolute h-96 w-96 rounded-full bg-purple-200/40 blur-[80px] -bottom-24 -right-24" />

    <scroll-view scroll-y class="relative z-10 h-full">
      <view class="min-h-full flex flex-col items-center px-6 py-10">
        <view class="mb-8 animate-fade-in-down text-center">
          <view class="mb-2 flex items-end justify-center text-4xl text-slate-800 font-bold tracking-tight">
            象乐学
            <view class="mb-1 ml-2 rounded-md bg-blue-600 px-1.5 py-0.5 text-xs text-white font-medium shadow-sm">
              教师端
            </view>
          </view>
          <text class="text-sm text-slate-500 font-medium tracking-wide">乐学未来 · 向学而行</text>
        </view>

        <view class="max-w-500px w-70vw w-full overflow-hidden rounded-2xl bg-white/80 shadow-slate-200 shadow-xl ring-1 ring-white/60 backdrop-blur-sm">
          <auth-form
            :mode="currentMode"
            @login="handleLogin"
            @reset="handleReset"
            @switch-mode="handleSwitchMode"
            @send-code="handleSendCode"
          />
        </view>

        <view class="mt-10 text-xs text-slate-400">
          &copy; 2025 象乐学技术支持
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<route lang="json5">
{
    "name": "auth",
    "style": {
        "navigationStyle": "custom",
    }
}
</route>
