<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-brand">
        <div class="brand-icon">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
        </div>
        <h1 class="brand-title">制度文件管理学习 AI 智能体</h1>
        <p class="brand-desc">基于 AI 的制度文件管理与智能问答平台</p>

        <div class="brand-features">
          <span class="feature-item">文件统一管理</span>
          <span class="feature-item">AI 智能问答</span>
          <span class="feature-item">审批流程自动化</span>
        </div>
      </div>

      <div class="login-card">
        <h2 class="login-title">请登录系统</h2>

        <a-form layout="vertical" :model="loginForm" @finish="handleLogin">
          <a-form-item label="用户名" required>
            <a-input v-model:value="loginForm.username" placeholder="请输入用户名">
              <template #prefix><UserOutlined /></template>
            </a-input>
          </a-form-item>

          <a-form-item label="密码" required>
            <a-input-password v-model:value="loginForm.password" placeholder="请输入密码" :visibility-toggle="true">
              <template #prefix><LockOutlined /></template>
            </a-input-password>
          </a-form-item>

          <div class="login-options">
            <a-checkbox v-model:checked="loginForm.remember">记住我</a-checkbox>
          </div>

          <a-form-item>
            <a-button type="primary" html-type="submit" class="login-submit-btn" :loading="loading">登录</a-button>
          </a-form-item>
        </a-form>

        <p class="login-footer">© 2026 制度文件管理学习AI智能体</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { authAPI } from '../api/auth'

const emit = defineEmits(['login-success'])

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

const loading = ref(false)

const handleLogin = async () => {
  if (!loginForm.value.username || !loginForm.value.password) {
    message.error('请输入用户名和密码')
    return
  }

  loading.value = true
  try {
    const response = await authAPI.login(loginForm.value.username, loginForm.value.password)
    if (response.data.code === 200) {
      const { token, refreshToken } = response.data.data

      localStorage.setItem('token', token)
      localStorage.setItem('refreshToken', refreshToken)
      localStorage.setItem('isLoggedIn', 'true')

      try {
        const userInfoResponse = await authAPI.getUserInfo()
        if (userInfoResponse.data.code === 200 && userInfoResponse.data.data) {
          const fullUserInfo = userInfoResponse.data.data
          localStorage.setItem('userInfo', JSON.stringify(fullUserInfo))
        }
      } catch (e) {
        console.warn('获取完整用户信息失败:', e.message)
      }

      message.success('登录成功')
      emit('login-success')
    } else {
      message.error(response.data.message || '登录失败')
    }
  } catch (error) {
    message.error(error.message || '登录失败，请检查网络连接')
    console.error('登录失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
}

.login-wrapper {
  display: flex;
  width: 720px;
  min-height: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.login-brand {
  width: 280px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
}

.brand-icon {
  margin-bottom: var(--space-sm);
}

.brand-title {
  font-size: var(--font-md);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  margin-bottom: var(--space-xs);
}

.brand-desc {
  font-size: var(--font-xs);
  opacity: 0.6;
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.brand-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-sm);
}

.feature-item {
  display: inline-block;
  font-size: var(--font-xs);
  opacity: 0.55;
}

.login-card {
  flex: 1;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.login-submit-btn {
  width: 100%;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.login-submit-btn:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.login-footer {
  text-align: center;
  margin-top: var(--space-lg);
  color: var(--text-disabled);
  font-size: var(--font-xs);
}
</style>