<script setup lang="ts">
import { ChartLine, Loader2, Shield, ShieldCheck, Users, Zap } from 'lucide-vue-next'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { toast } from 'vue-sonner'

import api from '@/services/api'

const router = useRouter()

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

const isValid = computed(() => {
  return form.value.username && form.value.password
})

async function handleLogin() {
  if (!isValid.value) {
    toast.error('请填写用户名和密码')
    return
  }

  loading.value = true
  try {
    const data = await api.post<{ user: any, token: string }>('/auth/login', {
      username: form.value.username,
      password: form.value.password,
    })

    if (data?.token) {
      localStorage.setItem('token', data.token)
      localStorage.setItem('user', JSON.stringify(data.user))

      toast.success('登录成功')

      if (data.user.role === 'agent' || data.user.parent_agent_id) {
        router.push('/agent')
      }
      else {
        router.push('/admin')
      }
    }
  }
  catch (error: any) {
    console.error('登录失败:', error)
    toast.error(error.message || '登录失败，请检查用户名和密码')
  }
  finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="min-h-screen flex">
    <div class="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-primary/10 via-primary/5 to-background relative overflow-hidden">
      <div class="absolute inset-0">
        <div class="absolute top-20 left-20 w-72 h-72 bg-primary/20 rounded-full blur-3xl" />
        <div class="absolute bottom-20 right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
      </div>
      <div class="relative z-10 flex flex-col justify-center px-12">
        <div class="flex items-center gap-3 mb-8">
          <div class="size-12 rounded-xl bg-primary flex items-center justify-center">
            <ShieldCheck class="size-7 text-primary-foreground" />
          </div>
          <span class="text-2xl font-bold">管理平台</span>
        </div>
        <h1 class="text-4xl font-bold mb-4">
          软件授权管理平台
        </h1>
        <p class="text-lg text-muted-foreground mb-8">
          专业的软件验证与授权管理解决方案，为您的软件提供全方位的保护
        </p>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex items-center gap-3 p-4 rounded-lg bg-background/50 backdrop-blur">
            <Zap class="size-5 text-primary" />
            <span class="text-sm">快速集成</span>
          </div>
          <div class="flex items-center gap-3 p-4 rounded-lg bg-background/50 backdrop-blur">
            <Shield class="size-5 text-primary" />
            <span class="text-sm">安全可靠</span>
          </div>
          <div class="flex items-center gap-3 p-4 rounded-lg bg-background/50 backdrop-blur">
            <ChartLine class="size-5 text-primary" />
            <span class="text-sm">数据分析</span>
          </div>
          <div class="flex items-center gap-3 p-4 rounded-lg bg-background/50 backdrop-blur">
            <Users class="size-5 text-primary" />
            <span class="text-sm">用户管理</span>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-1 flex items-center justify-center p-8">
      <div class="w-full max-w-md">
        <div class="text-center mb-8 lg:hidden">
          <div class="flex items-center justify-center gap-3 mb-4">
            <div class="size-10 rounded-xl bg-primary flex items-center justify-center">
              <ShieldCheck class="size-6 text-primary-foreground" />
            </div>
            <span class="text-xl font-bold">管理平台</span>
          </div>
        </div>

        <div class="mb-8">
          <h2 class="text-2xl font-bold mb-2">
            欢迎回来
          </h2>
          <p class="text-muted-foreground">
            请输入您的账号信息登录系统
          </p>
        </div>

        <form class="space-y-6" @submit.prevent="handleLogin">
          <div class="space-y-2">
            <UiLabel for="username">用户名</UiLabel>
            <UiInput
              id="username"
              v-model="form.username"
              type="text"
              name="username"
              autocomplete="username"
              placeholder="请输入用户名"
              :disabled="loading"
            />
          </div>

          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <UiLabel for="password">密码</UiLabel>
              <router-link to="/forgot-password" class="text-sm text-primary hover:underline">
                忘记密码？
              </router-link>
            </div>
            <UiInput
              id="password"
              v-model="form.password"
              type="password"
              name="password"
              autocomplete="current-password"
              placeholder="请输入密码"
              :disabled="loading"
            />
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <UiCheckbox
                id="remember"
                v-model:checked="form.remember"
              />
              <UiLabel for="remember" class="text-sm font-normal cursor-pointer">
                记住我
              </UiLabel>
            </div>
          </div>

          <UiButton
            type="submit"
            class="w-full"
            :disabled="loading || !isValid"
          >
            <Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
            {{ loading ? '登录中...' : '登录' }}
          </UiButton>
        </form>

        <div class="mt-6 text-center text-sm text-muted-foreground">
          还没有账号？
          <router-link to="/register" class="text-primary hover:underline">
            立即注册
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
