<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";

const auth = useAuthStore();
const route = useRoute();
const router = useRouter();
const username = ref("");
const password = ref("");
const pending = ref(false);

async function submit(): Promise<void> {
  pending.value = true;
  await auth.login(username.value, password.value);
  pending.value = false;
  if (auth.isAuthenticated) await router.replace(nextPath());
}

function nextPath(): string {
  const redirect = route.query.redirect;
  return typeof redirect === "string" && redirect.startsWith("/") && !redirect.startsWith("//") ? redirect : "/workbench";
}
</script>

<template>
  <section class="login-shell">
    <section class="login-console-panel" aria-label="HWLAB Cloud Console">
      <div class="login-grid-mark" aria-hidden="true" />
      <header><span class="login-mark">HW</span><div><strong>HWLAB</strong><small>CLOUD CONTROL SURFACE · V0.3</small></div></header>
      <div class="login-console-copy"><span>AUTHENTICATED HARDWARE WORKSPACE</span><h1>从云端控制台进入真实工程上下文。</h1><p>项目、MDTODO、HWPOD 与 Workbench 共用同源会话和稳定深链；权限由服务端 ACL 决定。</p></div>
      <dl><div><dt>Session</dt><dd>HttpOnly cookie</dd></div><div><dt>Secrets</dt><dd>server-side only</dd></div><div><dt>Route restore</dt><dd>enabled</dd></div></dl>
    </section>
    <section class="login-form-panel">
      <form class="login-card" @submit.prevent="submit">
        <div class="login-form-heading"><span>SIGN IN</span><h2>登录控制台</h2><p>使用 HWLAB 账号继续到原始目标深链。</p></div>
        <label>账号或邮箱<input v-model="username" class="input" autocomplete="username" required autofocus /></label>
        <label>密码<input v-model="password" class="input" type="password" autocomplete="current-password" required /></label>
        <p v-if="auth.error" class="form-error" role="alert">{{ auth.error }}</p>
        <button class="btn btn-primary login-submit" type="submit" :disabled="pending || !username.trim() || !password">{{ pending ? "登录中" : "登录" }}</button>
        <p class="login-note">浏览器不保存 user-billing token、Provider Secret 或 AgentRun token。</p>
        <RouterLink class="auth-link" to="/register">创建 HWLAB 账号 →</RouterLink>
      </form>
    </section>
  </section>
</template>

<style scoped>
.login-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); width: 100%; min-height: 100dvh; background: #edf1f1; }
.login-console-panel { position: relative; display: grid; min-width: 0; align-content: space-between; overflow: hidden; background: linear-gradient(145deg, #102a32 0%, #173c43 56%, #1d4d52 100%); padding: clamp(28px, 5vw, 72px); color: #efffff; }
.login-grid-mark { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(116, 218, 209, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 218, 209, .22) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(135deg, #000, transparent 72%); pointer-events: none; }
.login-console-panel header { position: relative; display: flex; gap: 12px; align-items: center; }
.login-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #78d1ca; border-radius: 8px; background: rgba(27, 95, 98, .55); color: #a6f1eb; font: 850 12px/1 ui-monospace, monospace; letter-spacing: 0; }
.login-console-panel header div { display: grid; gap: 4px; }
.login-console-panel header strong { font-size: 18px; letter-spacing: 0; }
.login-console-panel header small,
.login-console-copy > span { color: #82d6cf; font: 800 9px/1 ui-monospace, monospace; letter-spacing: 0; }
.login-console-copy { position: relative; max-width: 620px; padding: 8vh 0; }
.login-console-copy h1 { max-width: 580px; margin: 12px 0 16px; font-size: 48px; line-height: 1.05; letter-spacing: 0; }
.login-console-copy p { max-width: 510px; margin: 0; color: #c2d8d7; font-size: 14px; line-height: 1.7; }
.login-console-panel dl { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(199, 235, 232, .22); }
.login-console-panel dl div { display: grid; gap: 5px; padding: 12px 10px 0 0; }
.login-console-panel dt { color: #8bb9b8; font-size: 9px; letter-spacing: 0; text-transform: uppercase; }
.login-console-panel dd { margin: 0; color: #e8ffff; font: 750 11px/1.3 ui-monospace, monospace; }
.login-form-panel { display: grid; place-items: center; padding: clamp(22px, 5vw, 68px); }
.login-card { display: grid; width: min(100%, 420px); gap: 16px; border: 1px solid #c6d2d7; border-radius: 8px; background: #fff; padding: clamp(24px, 4vw, 40px); box-shadow: 0 22px 60px rgba(23, 48, 55, .12), inset 3px 0 #20aaa4; }
.login-form-heading { display: grid; gap: 5px; margin-bottom: 6px; }
.login-form-heading span { color: #16817d; font: 850 9px/1 ui-monospace, monospace; letter-spacing: 0; }
.login-form-heading h2 { margin: 0; color: #162c35; font-size: 25px; }
.login-form-heading p { margin: 0; color: #6a7981; font-size: 11px; }
.login-card label { display: grid; gap: 6px; color: #40545d; font-size: 11px; font-weight: 800; }
.login-card .input { height: 40px; border-color: #aebdc5; background: #fbfcfc; }
.login-card .input:focus { outline: 2px solid #7ecac4; outline-offset: 1px; border-color: #167d79; }
.login-submit { min-height: 40px; background: #173b42; }
.login-note { margin: 0; border-top: 1px solid #e1e8eb; padding-top: 12px; color: #738189; font-size: 10px; line-height: 1.5; }
.auth-link { color: #126f6b; font-size: 11px; font-weight: 800; text-decoration: none; }
@media (max-width: 840px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-console-panel { min-height: 280px; padding: 28px; }
  .login-console-copy { padding: 44px 0 34px; }
  .login-console-copy h1 { font-size: 34px; }
  .login-form-panel { padding: 22px; }
}
@media (max-width: 520px) {
  .login-console-panel { min-height: 220px; }
  .login-console-copy h1 { font-size: 28px; }
  .login-console-copy p,
  .login-console-panel dl { display: none; }
  .login-card { padding: 22px; }
}
</style>
