import { reactive, ref } from 'vue/dist/vue.esm-bundler.js';
import { ElMessage } from 'element-plus';
import { signIn } from './auth-store.js';
import blackHoleImage from '../../../img/black_hole.png';

const REMEMBERED_USERNAME_STORAGE_KEY = 'xyw-asset-console.remembered-username';

/** 代码作用（白话）：提供唯一的账号密码登录界面，并只在 Jeddy 成功登录的当次显示专属欢迎提示。关联文件：auth-store.js、AuthController.java、app.css。关联逻辑（调用链/数据流）：登录表单 -> Auth API -> Cookie/用户状态 -> 路由跳转。 */
export default {
  /** 代码作用（白话）：准备登录表单状态，并从浏览器中读取此前选择记住的账号。关联文件：app.css、auth-store.js。关联逻辑（调用链/数据流）：浏览器本地存储 -> 表单账号 -> 用户提交登录。 */
  setup() {
    /** 代码作用（白话）：安全读取浏览器本地保存的账号；浏览器禁用本地存储时不影响登录。关联文件：LoginView.js。关联逻辑（调用链/数据流）：localStorage -> form.username -> 登录表单。 */
    function getRememberedUsername() {
      try {
        return window.localStorage.getItem(REMEMBERED_USERNAME_STORAGE_KEY) || '';
      } catch (_) {
        return '';
      }
    }

    const form = reactive({ username: getRememberedUsername(), password: '' });
    const rememberUsername = ref(Boolean(form.username));
    const submitting = ref(false);

    /** 代码作用（白话）：按复选框状态仅保存或删除账号名，绝不保存密码和 Token。关联文件：LoginView.js。关联逻辑（调用链/数据流）：复选框/登录成功 -> localStorage -> 下次打开表单自动回填。 */
    function syncRememberedUsername() {
      try {
        if (rememberUsername.value && form.username.trim()) {
          window.localStorage.setItem(REMEMBERED_USERNAME_STORAGE_KEY, form.username.trim());
          return;
        }
        window.localStorage.removeItem(REMEMBERED_USERNAME_STORAGE_KEY);
      } catch (_) {
        // 浏览器禁用本地存储时，登录主流程仍可继续。
      }
    }

    /** 代码作用（白话）：提交现有账号密码数据、按需记住账号，并在完成后清除页面内存中的密码。关联文件：auth-store.js、router/index.js。关联逻辑（调用链/数据流）：表单 submit -> signIn -> 账号本地存储/Jeddy 欢迎提示或通用错误 -> 资产总览。 */
    async function submit() {
      submitting.value = true;
      try {
        const user = await signIn(form);
        syncRememberedUsername();
        form.password = '';
        if (user.username === 'Jeddy' && user.roleCode === 'DEVELOPER') ElMessage.success('🎉 欢迎系统开发者-BOSS：Jeddy 上线');
        window.location.hash = '#/overview';
      } catch (_) {
        ElMessage.error('账号或密码错误，请重试');
      } finally {
        submitting.value = false;
      }
    }

    return { blackHoleImage, form, rememberUsername, submitting, submit, syncRememberedUsername };
  },
  template: `
    <main class="login-page" :style="{ '--login-background-image': 'url(' + blackHoleImage + ')' }">
      <div class="login-page__atmosphere" aria-hidden="true"></div>
      <section class="login-panel" aria-labelledby="login-title">
        <header class="login-brand">
          <div class="login-brand__mark" aria-hidden="true"><span></span><span></span><span></span></div>
          <div>
            <h1 id="login-title">学有为资产管理系统</h1>
          </div>
        </header>
        <el-form class="login-form" @submit.prevent="submit">
          <el-form-item class="login-form__item">
            <el-input v-model="form.username" class="login-form__input" placeholder="请输入账号" autocomplete="username" aria-label="账号" />
          </el-form-item>
          <el-form-item class="login-form__item">
            <el-input v-model="form.password" class="login-form__input" placeholder="请输入密码" type="password" show-password autocomplete="current-password" aria-label="密码" @keyup.enter="submit" />
          </el-form-item>
          <el-checkbox v-model="rememberUsername" class="login-form__remember" @change="syncRememberedUsername">记住我的账号</el-checkbox>
          <el-button type="primary" native-type="submit" :loading="submitting" class="login-submit">{{ submitting ? '正在登录' : '登录' }}</el-button>
        </el-form>
      </section>
    </main>
  `
};
