<template>
  <div class="min-h-screen flex w-full">
    <!-- Left: Brand/Art Section -->
    <div class="hidden lg:flex lg:w-3/5 bg-art-bg relative overflow-hidden items-center justify-center p-12">
      <!-- Background Effects -->
      <div class="absolute inset-0 bg-noise opacity-20"></div>
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-art-bg via-[#0a0a0a] to-[#121214]"></div>
      
      <!-- Animated Orbs -->
      <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-art-accent/5 rounded-full blur-[100px] animate-pulse-slow"></div>
      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-900/10 rounded-full blur-[80px] animate-pulse-slow" style="animation-delay: 1s;"></div>
      
      <!-- Brand Content -->
      <div class="relative z-10 text-center max-w-2xl">
        <h1 class="font-serif text-6xl italic text-white mb-6 tracking-wide">
          Niangao<span class="text-art-accent">.Admin</span>
        </h1>
        <div class="h-px w-32 bg-gradient-to-r from-transparent via-art-accent/50 to-transparent mx-auto mb-8"></div>
        <p class="text-art-muted text-lg font-light leading-relaxed">
          Art meets Technology. <br/>
          Crafting the digital garden of <span class="text-white font-medium">年糕崽崽</span>.
        </p>
      </div>
      
      <!-- Footer Copyright -->
      <div class="absolute bottom-8 text-white/20 text-xs font-mono tracking-widest uppercase">
        © {{ new Date().getFullYear() }} Niangao Zaizai. All Rights Reserved.
      </div>
    </div>

    <!-- Right: Login Form -->
    <div class="w-full lg:w-2/5 bg-[#0a0a0a] flex items-center justify-center p-8 relative">
      <div class="w-full max-w-md space-y-8">
        <div class="text-center lg:text-left">
          <h2 class="text-3xl font-medium text-white tracking-tight mb-2">欢迎回来</h2>
          <p class="text-art-muted text-sm">请登录您的管理账号</p>
        </div>

        <form @submit.prevent="handleLogin" class="space-y-6 mt-8">
          <div class="space-y-4">
            <div>
              <label for="username" class="block text-xs font-medium text-art-muted mb-1.5 uppercase tracking-wider">用户名</label>
              <input
                type="text"
                id="username"
                v-model="form.username"
                class="w-full bg-[#0a0a0a] border border-white/10 rounded-md px-4 py-3 text-white placeholder-white/30 focus:border-art-accent focus:ring-1 focus:ring-art-accent outline-none transition-all duration-200 font-sans text-sm login-input"
                placeholder="请输入用户名"
                required
              />
            </div>
            
            <div>
              <label for="password" class="block text-xs font-medium text-art-muted mb-1.5 uppercase tracking-wider">密码</label>
              <input
                type="password"
                id="password"
                v-model="form.password"
                class="w-full bg-[#0a0a0a] border border-white/10 rounded-md px-4 py-3 text-white placeholder-white/30 focus:border-art-accent focus:ring-1 focus:ring-art-accent outline-none transition-all duration-200 font-sans text-sm login-input"
                placeholder="请输入密码"
                required
              />
            </div>
          </div>

          <div class="flex items-center justify-between text-sm">
            <label class="flex items-center text-art-muted hover:text-white cursor-pointer transition-colors">
              <input type="checkbox" class="mr-2 w-4 h-4 rounded border-white/10 bg-white/5 checked:bg-art-accent checked:border-art-accent focus:ring-offset-0 focus:ring-0 text-art-accent">
              <span>记住我</span>
            </label>
            <a href="#" class="text-art-accent hover:text-white transition-colors">忘记密码？</a>
          </div>

          <button 
            type="submit" 
            class="w-full bg-art-accent text-black font-medium py-3.5 rounded-lg hover:opacity-90 active:scale-[0.98] transition-all duration-200 tracking-wide text-sm uppercase shadow-[0_0_20px_rgba(212,179,131,0.15)] hover:shadow-[0_0_30px_rgba(212,179,131,0.25)]"
            :disabled="isLoading"
          >
            <span v-if="isLoading" class="flex items-center justify-center gap-2">
              <svg class="animate-spin h-4 w-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              登录中...
            </span>
            <span v-else>登 录</span>
          </button>
          
          <div v-if="error" class="text-art-error text-sm text-center bg-art-error/10 py-3 rounded-lg border border-art-error/20 flex items-center justify-center gap-2">
            <span class="text-lg">!</span> {{ error }}
          </div>
        </form>
        
        <div class="pt-6 border-t border-white/5 text-center">
          <p class="text-art-muted text-xs">
            不是管理员？ 
            <a href="/" class="text-white hover:text-art-accent underline decoration-art-accent/30 hover:decoration-art-accent underline-offset-4 transition-all">返回首页</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from '../composables/useToast'
import { useAuth } from '../composables/useAuth'
import { login } from '../services/api'

const router = useRouter()
const toast = useToast()
const { login: saveAuth } = useAuth()

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

const error = ref('')
const isLoading = ref(false)

const handleLogin = async () => {
  isLoading.value = true
  error.value = ''
  
  try {
    const response = await login(form.value)
    saveAuth(response.token, response.user, response.expire)
    toast.showToast('欢迎回来，管理员', 'success')
    // 登录成功后重定向到管理后台
    router.push('/admin')
  } catch (err: any) {
    error.value = err.response?.data?.error || '登录失败，请检查用户名和密码'
    toast.showToast('登录失败', 'error')
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
/* Fix autofill background color */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover, 
.login-input:-webkit-autofill:focus, 
.login-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
  -webkit-text-fill-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}
</style>
