<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user.js'
import { ElMessage } from 'element-plus'
import { Icon } from '@iconify/vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const formRef = ref(null)
const loading = ref(false)

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

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 50, message: '用户名长度为 2-50 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不少于 6 位', trigger: 'blur' }
  ]
}

async function handleLogin() {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
  } catch {
    return // validation failed
  }
  loading.value = true
  try {
    await userStore.login({ username: form.username, password: form.password })
    const redirect = route.query.redirect || '/'
    await router.push(redirect)
    ElMessage.success('登录成功，欢迎回来！')
  } catch {
    // Error already handled by request interceptor
  } finally {
    loading.value = false
  }
}

function handleKeydown(e) {
  if (e.key === 'Enter') {
    handleLogin()
  }
}
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-rose-50 relative overflow-hidden">
    <!-- BG blobs -->
    <div class="absolute w-96 h-96 rounded-full opacity-20 pointer-events-none" style="background: radial-gradient(circle, #f43f5e, transparent); top:-120px; right:-80px;"></div>
    <div class="absolute w-72 h-72 rounded-full opacity-20 pointer-events-none" style="background: radial-gradient(circle, #fb7185, transparent); bottom:-80px; left:-60px;"></div>

    <div class="relative z-10 w-[420px] bg-white rounded-3xl p-12 shadow-2xl text-center">
      <!-- Logo -->
      <div class="flex justify-center mb-6">
        <div class="w-20 h-20 bg-rose-500 rounded-2xl flex items-center justify-center text-white shadow-lg">
          <Icon icon="solar:heart-bold" class="text-4xl" />
        </div>
      </div>
      <h1 class="text-3xl font-bold text-gray-800 mb-2 tracking-widest">宫中有喜</h1>
      <p class="text-gray-400 text-sm mb-8">月子会所综合管理系统</p>

      <!-- Form -->
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        class="text-left"
        @keydown="handleKeydown"
      >
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            size="large"
            :prefix-icon="'User'"
            autocomplete="username"
            clearable
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            size="large"
            :prefix-icon="'Lock'"
            autocomplete="current-password"
            show-password
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="large"
            style="width:100%; height:48px; font-size:16px; letter-spacing:4px; border-radius:12px;"
            :loading="loading"
            @click="handleLogin"
          >
            {{ loading ? '登录中...' : '登 录' }}
          </el-button>
        </el-form-item>
      </el-form>

      <div class="text-center mt-2 text-sm text-gray-400">
        还没有账号？
        <router-link to="/register" class="text-blue-400 hover:text-blue-300 transition-colors">申请注册</router-link>
      </div>

      <p class="text-xs text-gray-300 mt-4">宫中有喜月子会所 &copy; {{ new Date().getFullYear() }}</p>
    </div>
  </div>
</template>
