<template>
  <form @submit.prevent="handleLogin" class="flex flex-col gap-6 text-base text-black md:text-2xl">
    <div class="overflow-hidden rounded-[20px] bg-[#78788029] px-4">
      <div class="relative">
        <Input
          v-model="email"
          type="email"
          name="email"
          autocomplete="email"
          placeholder="Email"
          class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0 md:text-2xl"
        />
        <div class="absolute bottom-0 left-0 h-[1px] w-full bg-gray-400/30"></div>
      </div>

      <div class="relative flex items-center">
        <div class="flex-1">
          <Input
            v-model="code"
            type="text"
            name="code"
            autocomplete="one-time-code"
            placeholder="验证码"
            class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0 md:text-2xl"
          />
        </div>
        <Button
          type="button"
          @click="handleGetCode"
          :disabled="countdown > 0"
          class="h-10 rounded-full bg-[#4B94E6] px-[32px] text-base font-bold text-white hover:bg-[#4B94E6]/90 md:px-[45px] md:text-[18px]"
        >
          {{ countdown > 0 ? `${countdown}s` : '获取' }}
        </Button>
      </div>
    </div>

    <div class="flex gap-4 pt-2">
      <Button
        type="button"
        variant="secondary"
        @click="emit('close')"
        class="h-[48px] flex-1 cursor-pointer rounded-[25px] bg-[#D1D1D1] text-lg font-medium text-[#757575] hover:bg-[#C1C1C1]"
      >
        取消
      </Button>
      <Button
        type="submit"
        class="h-[48px] flex-1 cursor-pointer rounded-[25px] bg-[#A8FF53] text-lg font-medium text-black hover:bg-[#96E64A]"
      >
        登录/注册
      </Button>
    </div>
    <CodeSentTip ref="CodeSentTipRef" />
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { toast } from 'vue-sonner'
import CodeSentTip from '@/pages/Home/components/CodeSentTip.vue'
import request from '@/utils/request'
import { useRouter } from 'vue-router'

const CodeSentTipRef = ref<InstanceType<typeof CodeSentTip> | null>(null)
const email = ref('')
const code = ref('')
const countdown = ref(0)

const emit = defineEmits(['close'])
const handleGetCode = () => {
  if (!email.value) {
    toast('请输入邮箱')
    return
  }
  CodeSentTipRef.value?.show()

  request
    .get<{ exist: boolean }>('/api/v1/auth/check', {
      email: email.value,
    })
    .then(({ exist }) => {
      console.log(exist)
      request
        .post('/api/v1/common/send_code', {
          //  1=登录, 2=注册,
          email: email.value,
          type: exist ? 2 : 1,
        })
        .then(() => {
          countdown.value = 60
          const timer = setInterval(() => {
            countdown.value--
            if (countdown.value <= 0) clearInterval(timer)
          }, 1000)
        })
    })
}
const router = useRouter()
const handleLogin = () => {
  request
    .post<any, { token: string }>('/api/v1/auth/login/email', {
      email: email.value,
      code: code.value,
    })
    .then((res) => {
      localStorage.setItem('Authorization', res.token)
      localStorage.setItem('UserEmail', email.value)
      router.push({ path: '/user-center' })
    })
}
</script>

<style scoped>
/* 移除 Shadcn Input 的默认边框阴影，保持纯净感 */
input:focus {
  outline: none;
}
</style>
