<template>
  <AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
    <div
      style="transform: translateY(25px)"
      class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
      dark:bg-dark
    >
      <div w-750 px-20 style="height: 480px; padding-top: 50px; text-align: center;">
        <img style="width: 371px; height: 60px; margin: auto;" src="@/assets/images/logo.png" alt="">
        <div mt-50 style="text-align: center; font-size: 48px; color: #303133; line-height: 48px; font-weight: 600; ">
          非遗IP价值评估系统
        </div>
        <div style="text-align: center; margin-top: 16px; color: #606266;">
          基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务
        </div>
        <div mt-30>
          <n-input
            v-model:value="loginInfo.phone"
            style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
            placeholder="请输入手机号"
            :maxlength="11"
            @keypress.enter="handleLogin"
          >
           <template #prefix>
            <img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
          </template>
          </n-input>

          <n-button
            w-126
            h-42
            rounded-5
            type="primary"
            style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
            @click="handleLogin"
          >
            立即登录
            <img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
          </n-button>
        </div>
        
        <div mt-20 style="display: flex; justify-content: center; align-items: center;">
          <n-input
            v-model:value="loginInfo.verifyCode"
            style="width: 260px; height: 42px;"
            placeholder="验证码"
            :maxlength="6"
            @keypress.enter="handleLogin"
          />
          <n-button
            style="width: 126px; height: 42px; margin-left: 12px; font-size: 14px;"
            :disabled="countdown > 0"
            @click="handleSendCode"
          >
            {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
          </n-button>
        </div>
      </div>
    </div>
  </AppPage>
</template>

<script setup>
import { lStorage, setToken } from '@/utils'
import bgImg from '@/assets/images/login_bg.png'
import api from '@/api'
import { addDynamicRoutes } from '@/router'
import { useI18n } from 'vue-i18n'

const router = useRouter()
const { query } = useRoute()
const { t } = useI18n({ useScope: 'global' })

const loginInfo = ref({
  phone: '',
  verifyCode: '',
})

const countdown = ref(0)
let countdownTimer = null

initLoginInfo()

function initLoginInfo() {
  if(localStorage.getItem('phone')){
    loginInfo.value.phone = localStorage.getItem('phone')
  }
  // const localLoginInfo = lStorage.get('loginInfo')
  // if (localLoginInfo) {
  //   loginInfo.value.phone = localLoginInfo.phone || ''
  //   loginInfo.value.password = localLoginInfo.password || ''
  // }
}

const loading = ref(false)

// 验证手机号格式
function validatePhone(phone) {
  const phoneReg = /^1[3-9]\d{9}$/
  return phoneReg.test(phone)
}

// 发送验证码
async function handleSendCode() {
  const { phone } = loginInfo.value
  
  if (!phone) {
    $message.warning('请输入手机号')
    return
  }
  
  if (!validatePhone(phone)) {
    $message.warning('请输入正确的手机号')
    return
  }
  
  try {
    // TODO: 调用发送验证码接口
    // await api.sendVerifyCode({ phone })
    
    // 模拟发送成功
    $message.success('验证码已发送')
    
    // 开始倒计时
    countdown.value = 60
    countdownTimer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(countdownTimer)
        countdownTimer = null
      }
    }, 1000)
  } catch (error) {
    $message.error('验证码发送失败，请重试')
  }
}

// 登录
async function handleLogin() {
  const { phone, verifyCode } = loginInfo.value
  
  if (!phone) {
    $message.warning('请输入手机号')
    return
  }
  
  if (!validatePhone(phone)) {
    $message.warning('请输入正确的手机号')
    return
  }
  
  // TODO: 等待后端接口完成后再启用验证码验证
  // if (!verifyCode) {
  //   $message.warning('请输入验证码')
  //   return
  // }
  // 
  // if (verifyCode.length < 4) {
  //   $message.warning('请输入完整的验证码')
  //   return
  // }
  
  loading.value = true
  
  try {
    // TODO: 调用登录接口，传入手机号和验证码
    // const res = await api.loginWithVerifyCode({ phone, verifyCode })
    // setToken(res.access_token)
    
    // 模拟登录成功（暂时使用原有的注册+登录逻辑）
    await api.registerPhone({ phone })
      .then(res => {
        return api.loginPhone({ phone, password: phone.slice(5, 11) })
      })
      .catch(res => {
        if (res.error && res.error.access_token) {
          setToken(res.error.access_token)
          localStorage.setItem('phone', phone)
          
          if (query.redirect) {
            const path = query.redirect
            Reflect.deleteProperty(query, 'redirect')
            router.push({ path, query })
          } else {
            router.push('/home')
          }
        }
      })
  } catch (error) {
    $message.error('登录失败，请重试')
  } finally {
    loading.value = false
  }
}

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
})
</script>
