<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const auth = useAuthStore()

const loginFormRef = ref<FormInstance>()
const loading = ref(false)

const loginForm = reactive({
  username: 'admin',
  password: 'admin',
})

const rules: FormRules = {
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

async function handleLogin() {
  if (!loginFormRef.value) return
  await loginFormRef.value.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    try {
      await auth.login(loginForm.username, loginForm.password)
      ElMessage.success('登录成功')
      router.push('/dashboard')
    } catch {
      // 拦截器已提示错误
    } finally {
      loading.value = false
    }
  })
}
</script>

<template>
  <div class="login-page">
    <div class="login-card">
      <!-- LOGO 和标题 -->
      <div class="login-header">
        <img src="/logo.png" alt="Logo" class="login-logo" />
        <h1 class="login-title">远光软件微调平台</h1>
        <p class="login-subtitle">模型管理平台</p>
      </div>

      <!-- 登录表单 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules"
        size="large"
        @keyup.enter="handleLogin"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入账号/手机号/邮箱"
            clearable
          >
            <template #prefix><i class="fa fa-user-o" /></template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          >
            <template #prefix><i class="fa fa-lock-o" /></template>
          </el-input>
        </el-form-item>

        <div class="login-options">
          <el-checkbox>记住密码</el-checkbox>
          <el-link type="primary" :underline="false">忘记密码？</el-link>
        </div>

        <el-button
          type="primary"
          class="login-btn"
          :loading="loading"
          @click="handleLogin"
        >
          <i class="fa fa-sign-in login-btn-icon" />
          登 录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: #f8fafc;
  /* Beautiful light mesh gradient for AI platform */
  background-image: 
    radial-gradient(at 10% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
    radial-gradient(at 40% 60%, rgba(56, 189, 248, 0.15) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}

/* Add some dynamic floating orbs for extra premium feel */
.login-page::before,
.login-page::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  animation: float 20s infinite ease-in-out alternate;
}

.login-page::before {
  width: 400px;
  height: 400px;
  background: rgba(99, 102, 241, 0.1);
  top: -100px;
  left: -100px;
}

.login-page::after {
  width: 500px;
  height: 500px;
  background: rgba(236, 72, 153, 0.08);
  bottom: -150px;
  right: -150px;
  animation-delay: -10s;
}

@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(50px, 50px) rotate(10deg); }
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: 
    0 20px 40px -10px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  /* Entrance animation */
  transform: translateY(30px);
  opacity: 0;
  animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpFade {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

  .login-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
  }

  .login-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 8px;
    /* Gradient text */
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .login-subtitle {
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
    margin: 0;
  }
}

/* Custom Input Styling */
:deep(.el-form-item) {
  margin-bottom: 24px;
}

:deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.5) inset !important;
  padding: 0 16px;
  transition: all 0.3s ease;

  &:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.6) inset !important;
  }
  
  &.is-focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) inset, 0 0 0 1px #4f46e5 inset !important;
  }
}

:deep(.el-input__inner) {
  height: 48px;
  font-size: 15px;
  color: #1e293b;
  &::placeholder {
    color: #94a3b8;
  }
}

:deep(.el-input__prefix) {
  color: #94a3b8;
  font-size: 16px;
  margin-right: 8px;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  margin-top: -8px;

  :deep(.el-checkbox__label) {
    color: #64748b;
  }
  :deep(.el-link) {
    font-weight: 500;
    color: #4f46e5;
    &:hover {
      color: #4338ca;
    }
  }
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  transition: all 0.3s ease;

  .login-btn-icon {
    margin-right: 8px;
    font-size: 18px;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
  }
  
  &:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
  }
}
</style>
