<script setup lang="ts">
import type { LoginRequest } from '@/service/types'
import { computed, reactive, ref } from 'vue'
import VerificationCode from './VerificationCode.vue'

interface Props {
  mode: 'login' | 'reset'
}

interface Emits {
  (e: 'login', data: LoginRequest): void
  (e: 'reset', data: { phone: string, code: string, password: string }): void
  (e: 'switchMode', mode: 'login' | 'reset'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 表单数据
const loginForm = reactive<LoginRequest>({
  username_or_phone: '',
  password: '',
})

const resetForm = reactive({
  phone: '',
  code: '',
  password: '',
  confirmPassword: '',
})

// 状态管理
const loading = ref(false)
const agreed = ref(false)

// 计算属性
const isLogin = computed(() => props.mode === 'login')
const isReset = computed(() => props.mode === 'reset')

// 表单验证
function validateLoginForm() {
  if (!loginForm.username_or_phone) {
    uni.showToast({
      title: '请输入手机号或用户名',
      icon: 'none',
    })
    return false
  }

  if (!loginForm.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none',
    })
    return false
  }

  if (loginForm.password.length < 6) {
    uni.showToast({
      title: '密码不能少于6位',
      icon: 'none',
    })
    return false
  }

  if (!agreed.value) {
    uni.showToast({
      title: '请先同意用户协议',
      icon: 'none',
    })
    return false
  }

  return true
}

function validateResetForm() {
  if (!resetForm.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
    })
    return false
  }

  if (!/^1[3-9]\d{9}$/.test(resetForm.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    })
    return false
  }

  if (!resetForm.code) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none',
    })
    return false
  }

  if (!resetForm.password) {
    uni.showToast({
      title: '请输入新密码',
      icon: 'none',
    })
    return false
  }

  if (resetForm.password.length < 8) {
    uni.showToast({
      title: '密码不能少于8位',
      icon: 'none',
    })
    return false
  }

  if (resetForm.password !== resetForm.confirmPassword) {
    uni.showToast({
      title: '两次密码输入不一致',
      icon: 'none',
    })
    return false
  }

  if (!agreed.value) {
    uni.showToast({
      title: '请先同意用户协议',
      icon: 'none',
    })
    return false
  }

  return true
}

// 事件处理
function handleSubmit() {
  if (isLogin.value) {
    if (validateLoginForm()) {
      emit('login', loginForm)
    }
  }
  else {
    if (validateResetForm()) {
      emit('reset', {
        phone: resetForm.phone,
        code: resetForm.code,
        password: resetForm.password,
      })
    }
  }
}

function handleSwitchMode() {
  const newMode = isLogin.value ? 'reset' : 'login'
  emit('switchMode', newMode)
}

// 验证码回调
function handleCodeUpdate(code: string) {
  resetForm.code = code
}
</script>

<template>
  <view class="w-full px-6 py-8">
    <!-- 表单标题 -->
    <view class="mb-6 text-center">
      <text class="text-2xl text-gray-900 font-bold">{{ isLogin ? '欢迎回来' : '重置密码' }}</text>
      <text class="mt-2 block text-sm text-gray-500">{{ isLogin ? '登录您的教师账号' : '请设置新的登录密码' }}</text>
    </view>

    <!-- 表单内容 -->
    <view class="space-y-4">
      <!-- 登录表单 -->
      <view v-if="isLogin" class="space-y-4">
        <!-- 手机号输入 -->
        <view class="space-y-2">
          <view class="flex items-center space-x-2">
            <text class="i-carbon-user text-lg text-blue-600" />
            <text class="text-sm text-gray-700 font-medium">手机号/用户名</text>
          </view>
          <view class="border-2 border-gray-200 rounded-xl bg-gray-50 px-4 py-3 transition-all focus-within:border-blue-500 focus-within:bg-white">
            <input
              v-model="loginForm.username_or_phone"
              type="text"
              placeholder="请输入手机号或用户名"
              maxlength="11"
              class="h-8 w-full border-none bg-transparent text-base text-gray-900 outline-none placeholder:text-gray-400"
            >
          </view>
        </view>

        <!-- 密码输入 -->
        <view class="space-y-2">
          <view class="flex items-center space-x-2">
            <text class="i-carbon-locked text-lg text-blue-600" />
            <text class="text-sm text-gray-700 font-medium">密码</text>
          </view>
          <view class="border-2 border-gray-200 rounded-xl bg-gray-50 px-4 py-3 transition-all focus-within:border-blue-500 focus-within:bg-white">
            <input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              class="h-8 w-full border-none bg-transparent text-base text-gray-900 outline-none placeholder:text-gray-400"
            >
          </view>
        </view>
      </view>

      <!-- 重置密码表单 -->
      <view v-else class="space-y-4">
        <!-- 手机号输入 -->
        <view class="space-y-2">
          <view class="flex items-center space-x-2">
            <text class="i-carbon-phone text-lg text-blue-600" />
            <text class="text-sm text-gray-700 font-medium">电话号码</text>
          </view>
          <view class="border-2 border-gray-200 rounded-xl bg-gray-50 px-4 py-3 transition-all focus-within:border-blue-500 focus-within:bg-white">
            <input
              v-model="resetForm.phone"
              type="number"
              placeholder="请输入手机号"
              maxlength="11"
              class="h-8 w-full border-none bg-transparent text-base text-gray-900 outline-none placeholder:text-gray-400"
            >
          </view>
        </view>

        <!-- 验证码输入 -->
        <view class="space-y-2">
          <view class="flex items-center space-x-2">
            <text class="i-carbon-password text-lg text-blue-600" />
            <text class="text-sm text-gray-700 font-medium">验证码</text>
          </view>
          <verification-code
            :phone="resetForm.phone"
            @update:code="handleCodeUpdate"
          />
        </view>

        <!-- 新密码输入 -->
        <view class="space-y-2">
          <view class="flex items-center space-x-2">
            <text class="i-carbon-locked text-lg text-blue-600" />
            <text class="text-sm text-gray-700 font-medium">新密码</text>
          </view>
          <view class="border-2 border-gray-200 rounded-xl bg-gray-50 px-4 py-3 transition-all focus-within:border-blue-500 focus-within:bg-white">
            <input
              v-model="resetForm.password"
              type="password"
              placeholder="请输入新密码（至少8位）"
              class="h-8 w-full border-none bg-transparent text-base text-gray-900 outline-none placeholder:text-gray-400"
            >
          </view>
        </view>

        <!-- 确认密码输入 -->
        <view class="space-y-2">
          <view class="flex items-center space-x-2">
            <text class="i-carbon-locked text-lg text-blue-600" />
            <text class="text-sm text-gray-700 font-medium">确认密码</text>
          </view>
          <view class="border-2 border-gray-200 rounded-xl bg-gray-50 px-4 py-3 transition-all focus-within:border-blue-500 focus-within:bg-white">
            <input
              v-model="resetForm.confirmPassword"
              type="password"
              placeholder="请再次输入密码"
              class="h-8 w-full border-none bg-transparent text-base text-gray-900 outline-none placeholder:text-gray-400"
            >
          </view>
          <!-- 密码提示 -->
          <view class="mt-2 flex items-start rounded-lg bg-blue-50 px-3 py-2 space-x-1">
            <text class="i-carbon-information mt-0.5 text-sm text-blue-600" />
            <text class="text-xs text-blue-700 leading-relaxed">
              密码应不少于8位，至少包含数字、字母，且不能包含中文
            </text>
          </view>
        </view>
      </view>

      <!-- 用户协议 -->
      <view class="mt-4 flex items-start space-x-2" @click="agreed = !agreed">
        <wd-checkbox :model-value="agreed" class="mt-0.5" />
        <text class="text-xs text-gray-600 leading-relaxed">
          我已阅读并同意《用户协议》、《隐私政策》，以及《个人信息处理规则》
        </text>
      </view>
    </view>

    <!-- 表单按钮 -->
    <view class="mt-6 space-y-3">
      <!-- 提交按钮 -->
      <view
        class="h-13 w-full flex items-center justify-center rounded-xl bg-blue-600 text-base text-white font-semibold shadow-blue-500/30 shadow-lg transition-all active:scale-98"
        :class="{ 'cursor-not-allowed bg-blue-400 opacity-70': loading }"
        @click="loading ? null : handleSubmit()"
      >
        <view v-if="loading" class="flex items-center justify-center space-x-2">
          <text class="i-carbon-loading animate-spin text-lg" />
          <text>处理中...</text>
        </view>
        <text v-else>{{ isLogin ? '立即登录' : '重置密码' }}</text>
      </view>

      <!-- 切换模式 -->
      <view class="text-center">
        <text class="cursor-pointer text-sm text-blue-600 font-medium transition-colors active:text-blue-700" @click="handleSwitchMode">
          {{ isLogin ? '忘记密码？' : '← 返回登录' }}
        </text>
      </view>
    </view>
  </view>
</template>
