<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="min-h-40vh w-full p-8 pt-4">
    <!-- 表单标题 -->
    <view class="mb-4 text-center">
      <text class="text-xl text-gray-900 font-bold">{{ isLogin ? '登录' : '重置密码' }}</text>
    </view>

    <!-- 表单内容 -->
    <view class="space-y-4">
      <!-- 登录表单 -->
      <view v-if="isLogin" class="mb-24 space-y-4">
        <!-- 手机号输入 -->
        <view class="space-y-2">
          <text class="block text-sm text-gray-700 font-medium">手机号/用户名</text>
          <wd-input
            v-model="loginForm.username_or_phone"
            placeholder="请输入手机号或用户名"
            :maxlength="11"
            clearable
            class="w-full"
          />
        </view>

        <!-- 密码输入 -->
        <view class="space-y-2">
          <text class="block text-sm text-gray-700 font-medium">密码</text>
          <wd-input
            v-model="loginForm.password"
            type="text"
            show-password
            placeholder="请输入密码"
            clearable
            class="w-full"
          />
        </view>
      </view>

      <!-- 重置密码表单 -->
      <view v-else class="space-y-2">
        <!-- 手机号输入 -->
        <view class="space-y-2">
          <text class="block text-sm text-gray-700 font-medium">电话号码</text>
          <wd-input
            v-model="resetForm.phone"
            placeholder="请输入手机号"
            type="number"
            :maxlength="11"
            clearable
            class="w-full"
          />
        </view>

        <!-- 验证码输入 -->
        <verification-code
          :phone="resetForm.phone"
          @update:code="handleCodeUpdate"
        />

        <!-- 新密码输入 -->
        <view class="space-y-2">
          <text class="block text-sm text-gray-700 font-medium">新密码</text>
          <wd-input
            v-model="resetForm.password"
            type="text"
            show-password
            placeholder="请输入新密码"
            clearable
            class="w-full"
          />
        </view>

        <!-- 确认密码输入 -->
        <view class="space-y-2">
          <text class="block text-sm text-gray-700 font-medium">确认密码</text>
          <wd-input
            v-model="resetForm.confirmPassword"
            type="text"
            show-password
            placeholder="请再次输入密码"
            clearable
            class="w-full"
          />
          <!-- 密码提示 -->
          <text class="block text-0.6rem text-gray-500">
            密码应不少于8位，至少包含数字、字母，且不能包含中文。
          </text>
        </view>
      </view>

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

    <!-- 表单按钮 -->
    <view class="mt-4 space-y-4">
      <!-- 提交按钮 -->
      <wd-button
        type="primary"
        size="large"
        block
        :loading="loading"
        class="rounded-lg !h-12"
        @click="handleSubmit"
      >
        {{ isLogin ? '登录' : '重置密码' }}
      </wd-button>

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