<script setup lang="ts">
import {
  ArrowRight,
  Building2,
  Eye,
  EyeOff,
  Lock,
  ShieldCheck,
  UserRound,
} from "@lucide/vue";
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { ApiError } from "../api/http";
import { useAuthStore } from "../stores/auth";

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();

const username = ref("");
const password = ref("");
const remember = ref(true);
const showPassword = ref(false);
const loading = ref(false);
const errorMessage = ref("");

const passwordType = computed(() => (showPassword.value ? "text" : "password"));

async function submit(): Promise<void> {
  loading.value = true;
  errorMessage.value = "";

  try {
    await auth.login(username.value.trim(), password.value);
    const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/dashboard";
    router.push(redirect);
  } catch (error) {
    errorMessage.value = error instanceof ApiError ? error.message : "登录失败，请稍后重试";
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <main class="login-screen">
    <section class="login-form-side">
      <div class="login-card">
        <div class="login-brand">
          <div class="brand-mark large">
            <Building2 :size="30" aria-hidden="true" />
          </div>
          <h1>企业薪酬管理系统</h1>
          <p>管理门户登录</p>
        </div>

        <form class="form-stack" @submit.prevent="submit">
          <label class="field">
            <span>用户名</span>
            <div class="input-with-icon">
              <UserRound :size="20" aria-hidden="true" />
              <input v-model="username" autocomplete="username" type="text" />
            </div>
          </label>

          <label class="field">
            <span>密码</span>
            <div class="input-with-icon">
              <Lock :size="20" aria-hidden="true" />
              <input v-model="password" autocomplete="current-password" :type="passwordType" />
              <button class="input-action" type="button" title="显示或隐藏密码" @click="showPassword = !showPassword">
                <EyeOff v-if="showPassword" :size="20" aria-hidden="true" />
                <Eye v-else :size="20" aria-hidden="true" />
              </button>
            </div>
          </label>

          <label class="checkbox-line">
            <input v-model="remember" type="checkbox" />
            <span>记住设备</span>
          </label>

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

          <button class="primary-button full" type="submit" :disabled="loading">
            <span>{{ loading ? "登录中..." : "登录" }}</span>
            <ArrowRight :size="20" aria-hidden="true" />
          </button>
        </form>

        <div class="login-footer">
          <p>仅限授权人员访问。</p>
          <span>安全策略</span>
          <span>联系 IT 支持</span>
        </div>
      </div>
    </section>

    <section class="login-visual">
      <div class="login-background-layer" aria-hidden="true"></div>
      <div class="ledger-visual">
        <span class="status-chip green">企业版</span>
        <h2>智能 · 精准 · 值得信赖</h2>
        <p>面向考勤、加班、请假和扣款规则的薪酬管理平台。</p>
        <div class="visual-metrics">
          <div>
            <strong>99.9%</strong>
            <span>运行稳定性</span>
          </div>
          <div>
            <strong>RBAC</strong>
            <span>权限控制</span>
          </div>
        </div>
      </div>
      <div class="security-line">
        <ShieldCheck :size="18" aria-hidden="true" />
        <span>EPMS v0.1.0 · 本地 API 已启用</span>
      </div>
    </section>
  </main>
</template>
