<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="login-background">
      <div class="background-shape shape-1"></div>
      <div class="background-shape shape-2"></div>
      <div class="background-shape shape-3"></div>
    </div>

    <!-- 登录卡片 -->
    <el-card class="login-card" shadow="always">
      <!-- 头部Logo和标题 -->
      <div class="login-header">
        <h1 class="title">餐厅管理系统</h1>
        <p class="subtitle">欢迎登录</p>
      </div>

      <!-- 用户类型选择器 -->
      <el-tabs v-model="activeUserType" class="user-type-tabs" @tab-change="handleUserTypeChange">
        <el-tab-pane label="客户登录" name="customer">
          <el-icon><User /></el-icon>
        </el-tab-pane>
        <el-tab-pane label="商户登录" name="manager">
          <el-icon><Shop /></el-icon>
        </el-tab-pane>
        <el-tab-pane label="管理员" name="admin">
          <el-icon><Setting /></el-icon>
        </el-tab-pane>
      </el-tabs>

      <!-- 登录表单 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        @submit.prevent="handleLogin"
      >
        <!-- 用户名输入 -->
        <el-form-item prop="accountName">
          <el-input
            v-model="loginForm.accountName"
            placeholder="请输入用户名"
            size="large"
            clearable
            :prefix-icon="User"
            @keyup.enter="handleLogin"
          />
        </el-form-item>

        <!-- 密码输入 -->
        <el-form-item prop="accountPassword">
          <el-input
            v-model="loginForm.accountPassword"
            type="password"
            placeholder="请输入密码"
            size="large"
            show-password
            clearable
            :prefix-icon="Lock"
            @keyup.enter="handleLogin"
          />
        </el-form-item>

        <!-- 记住登录和忘记密码 -->
        <div class="login-options">
          <el-checkbox v-model="rememberLogin">记住登录</el-checkbox>
          <el-link type="primary" @click="handleForgotPassword">忘记密码？</el-link>
        </div>

        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            class="login-button"
            :loading="loginLoading"
            @click="handleLogin"
          >
            {{ loginLoading ? '登录中...' : '登录' }}
          </el-button>
        </el-form-item>

        <!-- 注册链接 -->
        <div class="register-link">
          <span>还没有账号？</span>
          <el-link type="primary" @click="goToRegister">立即注册</el-link>
        </div>
      </el-form>
    </el-card>

    <!-- 页脚信息 -->
    <div class="login-footer">
      <p>&copy; 2024 餐厅管理系统. All rights reserved.</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { User, Lock, Shop, Setting } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import type { UserType } from '@/types/auth'

const router = useRouter()
const authStore = useAuthStore()

// 响应式数据
const loginFormRef = ref<FormInstance>()
const activeUserType = ref<UserType>('customer')
const loginLoading = ref(false)
const rememberLogin = ref(false)

// 登录表单数据
const loginForm = reactive({
  accountName: '',
  accountPassword: '',
})

// 表单验证规则
const loginRules: FormRules = {
  accountName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' },
  ],
  accountPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' },
  ],
}

// 用户类型切换
const handleUserTypeChange = (type: UserType) => {
  activeUserType.value = type
  // 可以根据不同用户类型调整UI或验证规则
}

// 处理登录
const handleLogin = async () => {
  if (!loginFormRef.value) return

  try {
    // 表单验证
    await loginFormRef.value.validate()

    loginLoading.value = true

    // 调用登录API
    const result = await authStore.login({
      accountName: loginForm.accountName,
      accountPassword: loginForm.accountPassword,
    })

    if (result.success) {
      ElMessage.success(result.message)

      // 验证用户类型是否匹配
      if (authStore.userType === activeUserType.value) {
        // 跳转到对应的模块
        const redirectPath = authStore.getRedirectPath()
        router.push(redirectPath)
      } else {
        ElMessage.error('用户类型不匹配，请选择正确的登录类型')
        authStore.logout()
      }
    } else {
      ElMessage.error(result.message)
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loginLoading.value = false
  }
}

// 忘记密码
const handleForgotPassword = () => {
  ElMessageBox.alert('请联系系统管理员重置密码', '忘记密码', {
    confirmButtonText: '确定',
    type: 'info',
  })
}

// 跳转注册页面
const goToRegister = () => {
  router.push('/register')
}

// 页面加载时初始化
onMounted(() => {
  // 如果已经登录，直接跳转
  if (authStore.isAuthenticated) {
    const redirectPath = authStore.getRedirectPath()
    router.push(redirectPath)
  }
})
</script>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.login-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  .background-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;

    &.shape-1 {
      width: 300px;
      height: 300px;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    &.shape-2 {
      width: 200px;
      height: 200px;
      top: 70%;
      right: 15%;
      animation-delay: 2s;
    }

    &.shape-3 {
      width: 150px;
      height: 150px;
      bottom: 20%;
      left: 20%;
      animation-delay: 4s;
    }
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.login-card {
  width: 100%;
  max-width: 400px;
  z-index: 2;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;

  .logo {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }

  .title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
  }

  .subtitle {
    margin: 0;
    color: #7f8c8d;
    font-size: 14px;
  }
}

.user-type-tabs {
  margin-bottom: 25px;

  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__item) {
    padding: 8px 20px;
    font-size: 14px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }
}

.login-form {
  .el-form-item {
    margin-bottom: 20px;
  }

  .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
  }

  .login-button {
    width: 100%;
    height: 45px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
  }

  .register-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #7f8c8d;

    .el-link {
      margin-left: 5px;
    }
  }
}

.login-footer {
  position: absolute;
  bottom: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  z-index: 2;
}

// 响应式设计
@media (max-width: 768px) {
  .login-card {
    margin: 20px;
    padding: 16px;
  }

  .login-header .title {
    font-size: 20px;
  }

  .background-shape {
    &.shape-1 {
      width: 200px;
      height: 200px;
    }

    &.shape-2 {
      width: 150px;
      height: 150px;
    }

    &.shape-3 {
      width: 100px;
      height: 100px;
    }
  }
}
</style>
