<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Lock, User } from '@element-plus/icons-vue'

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

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

const handleLogin = async () => {
  if (!form.username || !form.password) {
    ElMessage.warning('请输入账号和密码')
    return
  }

  submitting.value = true
  try {
    const response = await fetch('/api/users/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: form.username, password: form.password }),
    })
    const data = await response.json()
    if (!response.ok || data.status !== 'success') {
      throw new Error(data.detail || data.message || '登录失败')
    }

    const user = data.data || {}
    localStorage.setItem('precision_auth_token', data.access_token)
    localStorage.setItem('precision_user_id', String(user.id || ''))
    localStorage.setItem('precision_user_name', user.real_name || user.username || '')
    localStorage.setItem('precision_user_role', user.role === 'admin' ? '系统管理员' : '普通用户')
    emit('login-success')
    ElMessage.success('登录成功')
  } catch (error) {
    ElMessage.error(error.message || '登录失败')
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <div class="login-page">
    <div class="login-shell">
      <section class="brand-panel">
        <div class="brand-badge">AR</div>
        <div class="brand-copy">
          <div class="brand-kicker">ACCURACY RETENTION WORKSPACE</div>
          <h1>数控机床中试验证阶段精度保持性<br />综合评价系统</h1>
          <p>统一管理整机与部件精度测试数据，执行综合评估、趋势追踪与结果复核。</p>
        </div>
      </section>

      <section class="login-panel">
        <div class="panel-header">
          <div class="panel-kicker">PRECISION CONTROL CENTER</div>
          <h2>进入工作空间</h2>
        </div>

        <el-form @submit.prevent="handleLogin">
          <el-form-item>
            <el-input v-model="form.username" size="large" placeholder="登录账号">
              <template #prefix><el-icon><User /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" size="large" type="password" show-password placeholder="登录密码">
              <template #prefix><el-icon><Lock /></el-icon></template>
            </el-input>
          </el-form-item>

          <el-button class="login-btn" type="primary" size="large" :loading="submitting" @click="handleLogin">
            进入系统
          </el-button>
        </el-form>

        <div class="login-tip">账号由系统管理员统一分配。</div>
      </section>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  min-height: 100vh;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 16% 18%, rgba(164, 208, 255, 0.42), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(182, 214, 246, 0.45), transparent 24%),
    linear-gradient(160deg, #eef4fb 0%, #dae6f4 52%, #eef3f8 100%);
}

.login-shell {
  width: min(1240px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 420px);
  gap: 26px;
  align-items: stretch;
}

.brand-panel,
.login-panel {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(220, 233, 248, 0.54) 48%, rgba(247, 251, 255, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 10px rgba(255, 255, 255, 0.18),
    0 26px 56px rgba(115, 139, 171, 0.18);
  backdrop-filter: blur(22px);
}

.brand-panel {
  min-height: 620px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-panel::before,
.login-panel::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.brand-badge {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(145deg, #d6ecff 0%, #8fb8df 52%, #6aa2cf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 18px 36px rgba(111, 150, 188, 0.28);
}

.brand-copy {
  max-width: 640px;
}

.brand-kicker,
.panel-kicker {
  letter-spacing: 0.28em;
  font-size: 12px;
  color: #6f87a5;
}

.brand-copy h1 {
  margin: 22px 0 16px;
  font-size: clamp(38px, 3vw, 54px);
  line-height: 1.08;
  color: #203553;
  white-space: nowrap;
}

.brand-copy p {
  max-width: 520px;
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: #61738d;
}

.login-panel {
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-header h2 {
  margin: 12px 0 0;
  font-size: 32px;
  color: #203553;
}

.login-btn {
  width: 100%;
  margin-top: 12px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #6a96cc 0%, #4e7fba 56%, #84abd3 100%);
  box-shadow: 0 16px 28px rgba(89, 125, 165, 0.24);
}

.login-tip {
  margin-top: 18px;
  color: #70839d;
  font-size: 13px;
}

@media (max-width: 980px) {
  .login-page {
    padding: 18px;
  }

  .login-shell {
    grid-template-columns: 1fr;
  }

  .brand-panel {
    min-height: auto;
    padding: 32px 28px;
  }

  .brand-copy h1 {
    white-space: normal;
    text-wrap: balance;
  }
}
</style>
