<script setup lang="ts">
// 微信扫码登录（第一版已注释，待后续启用）
// import { NButton } from 'naive-ui'
// import { api } from '../../api/client'
// import { useToast } from '../../composables/useToast'
//
// const toast = useToast()
//
// async function startWeChatLogin() {
//   try {
//     const { data } = await api.get('/auth/wechat/authorize')
//     // 弹出微信授权窗口
//     const w = window.open(data.authorization_url, 'wechat-login', 'width=800,height=600')
//     if (!w) {
//       toast.warning('弹出窗口被拦截，请允许弹出窗口')
//     }
//   } catch (e: any) {
//     toast.apiError(e, '获取微信登录二维码失败')
//   }
// }
</script>

<template>
  <div class="auth-layout">
    <div class="auth-card">
      <RouterView />
      <!-- 微信扫码登录（第一版已注释，待后续启用）
      <div class="social-login" style="margin-top:16px;text-align:center">
        <div class="divider" style="display:flex;align-items:center;gap:12px;margin-bottom:12px;color:#bbb;font-size:12px">
          <span style="flex:1;height:1px;background:#eee"></span>
          <span>其他登录方式</span>
          <span style="flex:1;height:1px;background:#eee"></span>
        </div>
        <NButton block secondary @click="startWeChatLogin" style="margin-bottom:8px" class="sky-btn">
          <template #icon>
            <span style="font-size:16px">💬</span>
          </template>
          微信扫码登录
        </NButton>
      </div>
      -->
      <div class="auth-footer">
        <router-link to="/">← 返回首页</router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.auth-layout { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a5276 0%, #2980b9 100%); }
html.dark .auth-layout { background: linear-gradient(135deg, #0d1b2a 0%, #1a2a3a 100%); }
.auth-card { background: var(--bg-card); border-radius: 12px; padding: 28px 32px; width: 100%; max-width: 400px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); transform: translateY(-3px); }

html.dark .auth-card { background: #1a1a2e; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid #2a2a4a; color: #e0e0e0; }

.auth-footer { text-align: center; margin-top: 14px; }
.auth-footer a { color: var(--text-muted); text-decoration: none; font-size: 13px; }

/* 输入框 — 亮色浅色背景，暗色深色背景 */
.auth-card :deep(.n-input) {
  --n-color: #fff !important;
  --n-placeholder-color: #999 !important;
  --n-text-color: #333 !important;
  --n-caret-color: #1a5276 !important;
  --n-border: 1px solid #c0c4cc !important;
  --n-border-hover: 1px solid #1a5276 !important;
  --n-border-focus: 1px solid #1a5276 !important;
  background: #fff !important;
  border: 1px solid #c0c4cc !important;
}
html.dark .auth-card :deep(.n-input) {
  --n-color: #16213e !important;
  --n-placeholder-color: #5a6a8a !important;
  --n-text-color: #d0d8e0 !important;
  --n-caret-color: #6ab0e0 !important;
  --n-border: 1px solid #2a3a5a !important;
  --n-border-hover: 1px solid #4a7a9a !important;
  --n-border-focus: 1px solid #6ab0e0 !important;
  background: #16213e !important;
  border: 1px solid #2a3a5a !important;
}
html.dark .auth-card :deep(.n-input input) { color: #d0d8e0 !important; background: transparent !important; }
html.dark .auth-card :deep(.n-input-placeholder) { color: #5a6a8a !important; }
.auth-card :deep(.n-input .n-input-wrapper) { background: transparent; }
.auth-card :deep(.n-input input) { background: transparent !important; color: #333; }
.auth-card :deep(.n-input-placeholder) { color: #999 !important; }
.auth-card :deep(.n-input__border) { border-color: #d9d9d9 !important; }
.auth-card :deep(.n-input__state-border) { border-color: #d9d9d9 !important; }
html.dark .auth-card :deep(.n-input__border) { border-color: #2a3a5a !important; }
html.dark .auth-card :deep(.n-input__state-border) { border-color: #2a3a5a !important; }
/* 验证码显示区 */
.auth-card :deep(.captcha-chip) { background: var(--bg-page) !important; }
html.dark .auth-card :deep(.captcha-chip) { background: #0d1b2a !important; }
.auth-card :deep(.c-answer-label) { color: var(--text-muted) !important; }
</style>
