<template>
  <div class="login-form">
    <!-- 标题 -->
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-900 mb-2">欢迎回来</h2>
      <p class="text-gray-600">登录您的账户继续使用</p>
    </div>
    
    <!-- 登录表单 -->
    <el-form
      ref="loginFormRef"
      :model="loginForm"
      :rules="loginRules"
      size="large"
      @submit.prevent="handleLogin"
    >
      <!-- 用户名 -->
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名/邮箱/手机号"
          clearable
          :prefix-icon="User"
          @keyup.enter="handleLogin"
        />
      </el-form-item>
      
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          show-password
          clearable
          :prefix-icon="Lock"
          @keyup.enter="handleLogin"
        />
      </el-form-item>
      
      <!-- 验证码 -->
      <el-form-item v-if="showCaptcha" prop="captcha">
        <div class="flex space-x-2">
          <el-input
            v-model="loginForm.captcha"
            placeholder="请输入验证码"
            clearable
            class="flex-1"
            @keyup.enter="handleLogin"
          />
          <div 
            class="w-24 h-10 bg-gray-100 rounded cursor-pointer flex items-center justify-center"
            @click="refreshCaptcha"
          >
            <img 
              v-if="captchaImage" 
              :src="captchaImage" 
              alt="验证码"
              class="w-full h-full object-contain"
            />
            <span v-else class="text-xs text-gray-500">点击刷新</span>
          </div>
        </div>
      </el-form-item>
      
      <!-- 记住我和忘记密码 -->
      <div class="flex items-center justify-between mb-6">
        <el-checkbox v-model="loginForm.rememberMe">
          记住我
        </el-checkbox>
        <el-link type="primary" @click="showForgotPassword">
          忘记密码？
        </el-link>
      </div>
      
      <!-- 登录按钮 -->
      <el-form-item>
        <el-button
          type="primary"
          size="large"
          class="w-full"
          :loading="isLoggingIn"
          @click="handleLogin"
        >
          {{ isLoggingIn ? '登录中...' : '登录' }}
        </el-button>
      </el-form-item>
    </el-form>
    
    <!-- 第三方登录 -->
    <div class="mt-6">
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white text-gray-500">或使用以下方式登录</span>
        </div>
      </div>
      
      <div class="mt-6 grid grid-cols-3 gap-3">
        <el-button
          v-for="provider in oauthProviders"
          :key="provider.name"
          class="oauth-button"
          @click="handleOAuthLogin(provider.name)"
        >
          <el-icon :size="20">
            <component :is="provider.icon" />
          </el-icon>
        </el-button>
      </div>
    </div>
    
    <!-- 注册链接 -->
    <div class="text-center mt-6">
      <span class="text-gray-600">还没有账户？</span>
      <router-link to="/auth/register" class="text-blue-600 hover:text-blue-500 ml-1">
        立即注册
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Lock, ChatDotRound, Share, Link } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import { authApi } from '@/api/auth'
import type { LoginRequest } from '@/types/api'
import { validateUsername, validatePassword } from '@/utils/validation'

// 状态管理
const authStore = useAuthStore()

// 响应式数据
const loginFormRef = ref<FormInstance>()
const isLoggingIn = computed(() => authStore.isLoggingIn)
const showCaptcha = ref(false)
const captchaImage = ref('')
const captchaId = ref('')

// 登录表单
const loginForm = reactive<LoginRequest>({
  username: '',
  password: '',
  captcha: '',
  captchaId: '',
  rememberMe: false
})

// 表单验证规则
const loginRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 50, message: '用户名长度在 3 到 50 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  captcha: [
    { 
      required: true, 
      message: '请输入验证码', 
      trigger: 'blur',
      validator: (rule: any, value: string, callback: any) => {
        if (showCaptcha.value && !value) {
          callback(new Error('请输入验证码'))
        } else {
          callback()
        }
      }
    }
  ]
}

// 第三方登录提供商
const oauthProviders = [
  { name: 'wechat', icon: ChatDotRound, title: '微信' },
  { name: 'qq', icon: Share, title: 'QQ' },
  { name: 'github', icon: Link, title: 'GitHub' }
]

// 方法
const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    await loginFormRef.value.validate()
    
    // 设置验证码ID
    if (showCaptcha.value) {
      loginForm.captchaId = captchaId.value
    }
    
    await authStore.login(loginForm)
  } catch (error: any) {
    console.error('登录失败:', error)
    
    // 如果是验证码错误，刷新验证码
    if (error.message?.includes('验证码')) {
      await refreshCaptcha()
    }
    
    // 连续登录失败后显示验证码
    if (!showCaptcha.value && error.code === 'LOGIN_FAILED_TOO_MANY') {
      showCaptcha.value = true
      await refreshCaptcha()
    }
  }
}

const refreshCaptcha = async () => {
  try {
    const response = await authApi.getCaptcha()
    captchaImage.value = response.captchaImage
    captchaId.value = response.captchaId
    loginForm.captcha = ''
  } catch (error) {
    console.error('获取验证码失败:', error)
    ElMessage.error('获取验证码失败，请稍后重试')
  }
}

const handleOAuthLogin = async (provider: string) => {
  try {
    ElMessage.info(`${provider} 登录功能开发中...`)
    
    // 这里实现第三方登录逻辑
    // 1. 跳转到第三方授权页面
    // 2. 获取授权码
    // 3. 调用后端接口完成登录
    
  } catch (error) {
    console.error('第三方登录失败:', error)
    ElMessage.error('第三方登录失败，请稍后重试')
  }
}

const showForgotPassword = () => {
  ElMessage.info('忘记密码功能开发中...')
}

// 生命周期
onMounted(() => {
  // 如果已登录，跳转到首页
  if (authStore.isLoggedIn) {
    router.push('/home')
    return
  }
  
  // 检查是否需要显示验证码
  const loginAttempts = localStorage.getItem('login_attempts')
  if (loginAttempts && parseInt(loginAttempts) >= 3) {
    showCaptcha.value = true
    refreshCaptcha()
  }
})

// 监听登录失败次数
let loginFailCount = 0
watch(() => authStore.isLoggingIn, (isLogging) => {
  if (!isLogging && !authStore.isLoggedIn) {
    loginFailCount++
    localStorage.setItem('login_attempts', loginFailCount.toString())
    
    // 失败3次后显示验证码
    if (loginFailCount >= 3 && !showCaptcha.value) {
      showCaptcha.value = true
      refreshCaptcha()
    }
  }
})
</script>

<style scoped>
.oauth-button {
  @apply w-full h-12 border border-gray-300 rounded-lg hover:border-gray-400 transition-colors;
}

.oauth-button:hover {
  @apply bg-gray-50;
}

:deep(.el-input__inner) {
  @apply h-12;
}

:deep(.el-button--large) {
  @apply h-12;
}
</style>
