<template>
  <main class="login-page">
    <header class="page-brand">
      <LogoMark />
      <strong>{{ displayCompanyName }}</strong>
    </header>

    <section class="hero">
      <p class="eyebrow-text">Smart Expense Operations</p>
      <h1>企业报销智能运营台</h1>
      <p class="hero-lead">让报销审批更智能、更高效</p>
      <p class="hero-sub">智能审单 · 自动化审批 · 风险预警 · SLA 监控 · 数据驱动决策</p>

      <div class="hero-stage" aria-hidden="true">
        <span class="flow-line flow-a"></span>
        <span class="flow-line flow-b"></span>
        <span class="flow-line flow-c"></span>

        <div class="metric-card amount">
          <span>报销金额趋势</span>
          <strong>¥ 61,600</strong>
          <small>较昨日 <b class="up">+8.3%</b></small>
          <div class="mini-bars"><i></i><i></i><i></i><i></i></div>
        </div>

        <div class="document-card">
          <span>报销单</span>
          <i></i><i></i><i></i>
          <b class="doc-check"><i class="mdi mdi-check"></i></b>
        </div>

        <img class="shield-art" src="../assets/security-shield.png" alt="" />

        <div class="round-badge ai">AI</div>

        <div class="metric-card risk">
          <span>风险预警</span>
          <strong><i class="mdi mdi-alert"></i> 14 单</strong>
          <small>较昨日 <b class="danger">+16.7%</b></small>
        </div>

        <div class="metric-card audit">
          <span>审批效率</span>
          <strong>78%</strong>
          <small>较昨日 <b class="up">+6.2%</b></small>
        </div>

        <div class="metric-card sla">
          <span>SLA 达成率</span>
          <strong>96%</strong>
          <small>较昨日 <b class="up">+3.1%</b></small>
        </div>
      </div>

      <div class="feature-strip" aria-label="核心能力">
        <article v-for="item in features" :key="item.title">
          <span :class="item.tone"><i :class="item.icon"></i></span>
          <div>
            <strong>{{ item.title }}</strong>
            <p>{{ item.desc }}</p>
          </div>
        </article>
      </div>
    </section>

    <section class="login-card" aria-label="登录表单">
      <div class="card-brand">
        <LogoMark />
        <strong>{{ displayCompanyName }}</strong>
      </div>

      <header class="card-head">
        <h2>欢迎登录</h2>
        <p>使用员工邮箱或管理员账号进入系统</p>
      </header>

      <form
        class="login-form"
        :class="{ 'is-submitting': submitting }"
        @submit.prevent="emit('login', { username, password, tenantId: tenant })"
      >
        <label class="field">
          <span class="sr-only">账号</span>
          <i class="mdi mdi-account-outline"></i>
          <input
            v-model="username"
            type="text"
            placeholder="请输入员工邮箱 / 管理员账号"
            autocomplete="username"
            :disabled="submitting"
            required
          />
        </label>

        <label class="field">
          <span class="sr-only">密码</span>
          <i class="mdi mdi-lock-outline"></i>
          <input
            v-model="password"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入登录密码"
            autocomplete="current-password"
            :disabled="submitting"
            required
          />
          <button
            class="field-icon-btn"
            type="button"
            :disabled="submitting"
            :aria-label="showPassword ? '隐藏密码' : '显示密码'"
            @click="showPassword = !showPassword"
          >
            <i :class="showPassword ? 'mdi mdi-eye' : 'mdi mdi-eye-off'"></i>
          </button>
        </label>

        <label class="field">
          <span class="sr-only">企业或租户</span>
          <i class="mdi mdi-office-building"></i>
          <select
            v-model="tenant"
            class="tenant-select"
            aria-label="请选择企业或租户"
            :disabled="submitting"
          >
            <option value="default">远光软件股份有限公司</option>
          </select>
          <span class="field-select-chevron" aria-hidden="true">
            <i class="mdi mdi-chevron-down"></i>
          </span>
        </label>

        <div class="form-meta">
          <label class="remember">
            <input v-model="remember" type="checkbox" :disabled="submitting" />
            <span>记住账号</span>
          </label>
          <button type="button" class="link-btn" :disabled="submitting" @click="emit('recover-password')">忘记密码?</button>
        </div>

        <p v-if="errorMessage" class="login-error">{{ errorMessage }}</p>

        <button class="submit-btn" type="submit" :disabled="submitting">
          <span v-if="submitting" class="submit-btn__spinner" aria-hidden="true"></span>
          <span class="submit-btn__label">{{ submitting ? '登录中' : '登录' }}</span>
        </button>

        <div class="divider"><span>或</span></div>

        <button class="sso-btn" type="button" :disabled="submitting" @click="emit('sso-login')">
          <i class="mdi mdi-shield-outline"></i>
          <span>SSO 单点登录</span>
        </button>
      </form>

      <footer class="security-note">
        <i class="mdi mdi-lock-outline"></i>
        <span>安全登录 · 数据加密传输 · 如需帮助请联系系统管理员</span>
      </footer>
    </section>
  </main>
</template>

<script setup>
import { computed } from 'vue'

import { useLoginView } from '../composables/useLoginView.js'

const props = defineProps({
  companyName: {
    type: String,
    default: ''
  },
  submitting: {
    type: Boolean,
    default: false
  },
  errorMessage: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['login', 'recover-password', 'sso-login'])

const displayCompanyName = computed(() => props.companyName || '易财费控')

const { features, LogoMark, password, remember, showPassword, tenant, username } = useLoginView()
</script>

<style scoped src="../assets/styles/views/login-view.css"></style>
