<template>
  <div class="internal-login">
    <!-- 左：深色品牌区 -->
    <section class="login-brand">
      <div class="login-brand__top">
        <img src="/logo.png" class="login-brand__logo" alt="医梦AI" />
      </div>
      <div class="login-brand__main">
        <h1>绩效运营工作台</h1>
        <p>目标对齐 · 进度可追溯<br>结果可解释 · 医疗级数据严谨</p>
        <svg class="medical-pulse" viewBox="0 0 220 24" aria-hidden="true" focusable="false">
          <path d="M2 12h72l8-8 10 16 12-16 8 8h106" />
        </svg>
      </div>
      <svg class="molecule-mark" viewBox="0 0 180 150" aria-hidden="true" focusable="false">
        <path d="M48 44 92 28 134 58 116 112 62 112 48 44Z" />
        <circle cx="48" cy="44" r="7" />
        <circle cx="92" cy="28" r="7" />
        <circle cx="134" cy="58" r="7" />
        <circle cx="116" cy="112" r="7" />
        <circle cx="62" cy="112" r="7" />
      </svg>
    </section>

    <!-- 右：白表单区 -->
    <section class="internal-login__panel">
      <div class="login-panel__header">
        <span class="login-panel__eyebrow">Internal Access</span>
        <h2>账号登录</h2>
      </div>
      <el-form :model="form" :rules="rules" ref="formRef" @submit.prevent="handleSubmit" class="login-form">
        <el-form-item prop="username">
          <label class="field-label">用户名</label>
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            class="underline-input"
          />
        </el-form-item>
        <el-form-item prop="password">
          <label class="field-label">密码</label>
          <el-input
            v-model="form.password"
            type="password"
            show-password
            placeholder="请输入密码"
            class="underline-input"
            @keyup.enter="handleSubmit"
          />
        </el-form-item>
        <el-button
          class="login-btn"
          native-type="submit"
          :loading="loading"
        >
          登 录
        </el-button>
      </el-form>
      <div class="login-panel__footer">
        <span class="login-help uppercase-label">账号由 HR 管理员创建</span>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores/auth'

const router = useRouter()
const auth = useAuthStore()
const formRef = ref(null)
const loading = ref(false)

const form = reactive({ username: '', password: '' })
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

async function handleSubmit() {
  const valid = await formRef.value.validate().catch(() => false)
  if (!valid) return
  loading.value = true
  try {
    await auth.login(form.username, form.password)
    router.push('/')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.internal-login {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 100vh;
  width: 100%;
  background: var(--color-surface);
}

/* 左侧深色品牌区 */
.login-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-login-brand-from), var(--color-login-brand-to));
  padding: 28px 32px;
  color: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-brand__top {
  position: relative;
  z-index: 1;
}
.login-brand__logo {
  width: 56px;
  height: 30px;
  object-fit: contain;
}
.login-brand__main {
  position: relative;
  z-index: 1;
}
.login-brand__main h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0;
}
.login-brand__main p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  line-height: 1.7;
}

.medical-pulse {
  display: block;
  width: 100px;
  height: 12px;
  margin-top: 12px;
  color: var(--color-accent);
  opacity: 0.6;
}

.medical-pulse path,
.molecule-mark path,
.molecule-mark circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.molecule-mark {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 140px;
  height: 120px;
  color: var(--color-accent);
  opacity: 0.08;
}

/* 右侧白表单区 */
.internal-login__panel {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.login-panel__header {
  margin-bottom: 24px;
}
.login-panel__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.login-panel__header h2 {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.login-form { padding: 0; }
.field-label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.login-btn {
  width: 100%;
  border-radius: 4px;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.login-panel__footer {
  text-align: center;
  padding-top: 16px;
}

@media (max-width: 768px) {
  .internal-login {
    grid-template-columns: 1fr;
  }
  .login-brand {
    display: none;
  }
}
</style>
