<script setup lang="ts">
import { reactive } from "vue";

defineProps<{ loading: boolean }>();

const emit = defineEmits<{
  submit: [credentials: { username: string; password: string }];
}>();

const form = reactive({ username: "", password: "" });

function submit() {
  emit("submit", { username: form.username.trim(), password: form.password });
}
</script>

<template>
  <main class="login-page">
    <section class="login-hero" aria-label="大本营千问千答后台登录">
      <section class="login-hero-main" aria-label="产品介绍">
        <header class="login-brand">
          <span class="login-brand-mark" aria-hidden="true">
            <svg viewBox="0 0 64 64" role="presentation">
              <circle cx="32" cy="32" r="28" />
              <path d="M32 9c4 7 8 10 15 11-1 7 1 12 7 17-6 4-9 9-9 16-7-1-12 1-17 6-4-6-9-9-16-9 1-7-1-12-6-17 6-4 9-9 9-16 7 1 12-1 17-6 4 6 9 9 16 9Z" />
              <path d="M32 19c2.5 5 5.5 7.5 11 8-4 3.5-5.5 7.5-4 13-4.7-2.5-8.7-2.5-13 0 1.5-5.5 0-9.5-4-13 5.5-.5 8.5-3 10-8Z" />
              <circle cx="32" cy="32" r="3" />
            </svg>
          </span>
          <span class="login-brand-copy">
            <strong>大本营千问千答</strong>
            <small>智能知识管理与问答系统</small>
          </span>
        </header>

        <div class="login-orbit" aria-hidden="true"><i></i></div>
        <div class="login-dot-matrix" aria-hidden="true"></div>

        <div class="login-brand-content">
          <h1>
            把大本营答疑、知识库和学员<br />
            运营放在<span>同一个控制台</span>里
          </h1>
          <p>
            统一维护学员名单、开放知识库、模型接入、Agent 调试、问答记录和系统运行参数，让日常运营更清晰，也让排查与交接更从容。
          </p>

          <div class="login-highlights" aria-label="核心能力">
            <div class="login-highlight-item">
              <span aria-hidden="true">
                <svg viewBox="0 0 24 24"><rect x="5" y="3.5" width="13" height="17" rx="2" /><path d="M8.5 7.5h5M8.5 11.5h6M8.5 15.5h3.5M18 7h2v11a2 2 0 0 1-2 2" /></svg>
              </span>
              <strong>大本营知识库</strong>
            </div>
            <div class="login-highlight-item">
              <span aria-hidden="true">
                <svg viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="12" rx="4" /><path d="M9 12h.01M15 12h.01M8 16h8M12 7V4M10.5 3h3" /></svg>
              </span>
              <strong>答疑 Agent 调试</strong>
            </div>
            <div class="login-highlight-item">
              <span aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="M5 5.5h14v11H9l-4 3v-14Z" /><path d="M8.5 9.5h7M8.5 13h4" /></svg>
              </span>
              <strong>问答记录审计</strong>
            </div>
            <div class="login-highlight-item">
              <span aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="M12 3.5 15 5l3.3-.2.2 3.3 1.7 2.9-2 2.7-.5 3.3-3.3.5-2.4 2.3-2.4-2.3-3.3-.5-.5-3.3-2-2.7 1.7-2.9.2-3.3L9 5l3-1.5Z" /><circle cx="12" cy="11.7" r="3" /></svg>
              </span>
              <strong>系统运行管理</strong>
            </div>
          </div>
        </div>

        <svg class="login-wave" viewBox="0 0 920 250" preserveAspectRatio="none" aria-hidden="true">
          <path d="M-20 45C105 25 110 150 250 151S410 85 530 118s185 97 410 18" />
          <path d="M-20 62C95 40 127 169 264 167s160-64 277-28 180 82 399 18" />
          <path d="M-20 80C90 57 140 188 278 184s159-60 273-23 176 69 389 17" />
          <path d="M-20 105C88 78 142 209 295 202s168-54 278-16 165 56 367 13" />
          <path d="M-20 133C95 102 157 224 315 220s164-46 282-11 158 43 343 12" />
        </svg>

        <svg class="login-lotus" viewBox="0 0 360 300" aria-hidden="true">
          <g>
            <path d="M180 258C126 219 119 159 180 72c61 87 54 147 0 186Z" />
            <path d="M177 260C112 244 78 196 99 99c75 58 98 108 78 161Z" />
            <path d="M183 260c65-16 99-64 78-161-75 58-98 108-78 161Z" />
            <path d="M162 264C92 266 47 232 34 143c78 30 119 70 128 121Z" />
            <path d="M198 264c70 2 115-32 128-121-78 30-119 70-128 121Z" />
            <path d="M119 275c-45 5-80-8-111-41 56 3 97 15 111 41ZM241 275c45 5 80-8 111-41-56 3-97 15-111 41Z" />
          </g>
        </svg>
      </section>

      <section class="login-card" aria-labelledby="login-title">
        <div class="login-card-inner">
          <div class="login-card-head">
            <span class="login-card-eyebrow">ADMIN CONSOLE</span>
            <h2 id="login-title">欢迎登录</h2>
            <p>登录大本营答疑助手后台管理系统</p>
          </div>
          <el-form label-position="top" autocomplete="off" @submit.prevent="submit">
            <el-form-item label="管理员账号">
              <el-input v-model="form.username" size="large" placeholder="请输入管理员账号" autocomplete="off">
                <template #prefix>
                  <svg class="login-input-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3.5" /><path d="M5.5 19c.6-4 2.8-6 6.5-6s5.9 2 6.5 6" /></svg>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="form.password"
                size="large"
                type="password"
                placeholder="请输入密码"
                autocomplete="new-password"
                show-password
              >
                <template #prefix>
                  <svg class="login-input-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v2.5" /></svg>
                </template>
              </el-input>
            </el-form-item>
            <el-button type="primary" native-type="submit" :loading="loading" class="full-btn login-submit">
              进入答疑后台
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
            </el-button>
          </el-form>
          <p class="login-security-note"><span aria-hidden="true"></span>仅限已授权的后台管理员访问</p>
        </div>
      </section>
    </section>
    <p class="login-copyright">© 2026 深圳市慧愈文化科技有限公司</p>
  </main>
</template>
