<!-- =============================================================================
// IT智能服务台 — Portal 扫码登录页 (Phase 1.3, task #16)
// =============================================================================
// 说明：替代原 PortalSelect.vue 的"企微 OAuth + 角色选择"流程
// 新流程:Portal 显示二维码 → 员工扫码 → 后端 confirm → 按角色自动跳到对应端
//
// 角色分发规则(扫码成功后):
//   只有 admin      → /itadmin/(管理后台)
//   只有 agent      → /itagent/(坐席工作台)
//   admin + agent   → /itportal/select(让用户选)
//   默认 user       → /itdesk/(H5 员工端)
//
// nginx 域名分发建议配置见 docs/NGINX-DOMAIN-ROUTING.md
// ============================================================================= -->

<template>
  <div class="qrcode-login-page">
    <div class="qrcode-login-card">
      <!-- 头部 -->
      <div class="header">
        <h1 class="title">🛠️ IT智能服务台</h1>
        <p class="subtitle">扫码登录</p>
      </div>

      <!-- 二维码区 -->
      <div class="qrcode-section">
        <!-- 加载中 -->
        <div v-if="loading && !qrcodePngBase64" class="qrcode-placeholder">
          <el-icon class="is-loading" :size="48"><Loading /></el-icon>
          <p>正在生成二维码…</p>
        </div>

        <!-- 二维码图片 -->
        <img
          v-else-if="qrcodePngBase64"
          :src="`data:image/png;base64,${qrcodePngBase64}`"
          alt="登录二维码"
          class="qrcode-image"
          :class="{ 'qrcode-expired': status === 'expired' }"
        />

        <!-- 错误状态 -->
        <div v-else-if="errorMessage" class="qrcode-error">
          <el-icon :size="48" color="#ef4444"><CircleCloseFilled /></el-icon>
          <p>{{ errorMessage }}</p>
          <el-button type="primary" @click="refreshQrcode">重试</el-button>
        </div>
      </div>

      <!-- 状态文字 -->
      <div class="status-section">
        <div v-if="status === 'waiting' && countdown > 0" class="status-waiting">
          <p class="status-main">
            <el-icon><Iphone /></el-icon>
            请用<span class="highlight">企业微信</span>扫描二维码
          </p>
          <p class="status-sub">
            二维码 <span class="countdown">{{ countdown }}</span> 秒后过期
          </p>
        </div>

        <div v-else-if="status === 'scanned'" class="status-scanned">
          <p class="status-main">
            <el-icon color="#67c23a"><Check /></el-icon>
            扫码成功
          </p>
          <p class="status-sub">
            {{ scannedBy || '员工' }},请在手机上点<span class="highlight">"确认登录"</span>
          </p>
        </div>

        <div v-else-if="status === 'confirmed'" class="status-confirmed">
          <el-icon :size="32" color="#67c23a"><Loading /></el-icon>
          <p>登录成功,正在跳转…</p>
        </div>

        <div v-else-if="status === 'expired'" class="status-expired">
          <p class="status-main">
            <el-icon color="#e6a23c"><Warning /></el-icon>
            二维码已过期
          </p>
          <el-button type="primary" @click="refreshQrcode">刷新二维码</el-button>
        </div>
      </div>

      <!-- 底部 -->
      <div class="footer">
        <p class="footer-text">
          扫码后系统会根据您的角色自动跳转到对应工作台
        </p>
        <p class="footer-sub">
          坐席/管理员/H5 多端入口统一管理
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useQrcodeLogin } from '@/composables/useQrcodeLogin'

// ============================================================================
// 角色 URL 映射(跟 backend/app/api/portal.py _get_role_url 保持一致)
// ============================================================================
const ROLE_URLS = {
  user: '/itdesk/',
  agent: '/itagent/',
  admin: '/itadmin/',
}

// ============================================================================
// 角色分发逻辑
// ============================================================================
/**
 * 按角色决定跳到哪个端
 * 规则:
 *   - 只有 admin      → /itadmin/
 *   - 只有 agent      → /itagent/
 *   - admin + agent   → /itportal/select(用户多角色,给选择页)
 *   - 默认 user       → /itdesk/
 */
function dispatchToRole(roles: string[]): string {
  const hasAgent = roles.includes('agent')
  const hasAdmin = roles.includes('admin')

  // 多角色:让用户在 PortalSelect 选择
  if (hasAdmin && hasAgent) {
    return '/itportal/select'
  }
  if (hasAdmin) {
    return ROLE_URLS.admin
  }
  if (hasAgent) {
    return ROLE_URLS.agent
  }
  // 默认 user
  return ROLE_URLS.user
}

/**
 * 登录成功回调
 * 1. 存 token 到 localStorage(双 key: portal_token + 各端 token,跨端共享)
 * 2. 按角色自动跳到对应端(整页跳,因为跨基础路径)
 */
function handleLoginSuccess(token: string, _employeeId: string, roles: string[]): void {
  // 存 token 到所有可能的 key(避免各端读不到)
  localStorage.setItem('portal_token', token)
  localStorage.setItem('agent_token', token)
  localStorage.setItem('admin_token', token)
  localStorage.setItem('agent_user_id', _employeeId)

  // 按角色跳
  const targetUrl = dispatchToRole(roles)
  const separator = targetUrl.includes('?') ? '&' : '?'
  const finalUrl = `${targetUrl}${separator}token=${encodeURIComponent(token)}`

  ElMessage.success('登录成功')
  // 短暂延迟让用户看到"登录成功"提示
  setTimeout(() => {
    window.location.href = finalUrl
  }, 500)
}

const {
  qrcodePngBase64,
  countdown,
  status,
  scannedBy,
  loading,
  errorMessage,
  startLogin,
  refreshQrcode,
  stopPolling,
} = useQrcodeLogin({
  onSuccess: handleLoginSuccess,
  onError: (msg) => ElMessage.error(msg),
})

// ============================================================================
// 生命周期
// ============================================================================
onMounted(() => {
  startLogin()
})

onUnmounted(() => {
  stopPolling()
})
</script>

<style scoped>
.qrcode-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  padding: 24px;
}

.qrcode-login-card {
  width: 100%;
  max-width: 460px;
  background: rgba(30, 41, 59, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(71, 85, 105, 0.5);
}

.header {
  text-align: center;
  margin-bottom: 32px;
}

.title {
  font-size: 28px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 8px 0;
}

.subtitle {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
}

.qrcode-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin-bottom: 24px;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  background: white;
  padding: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s;
}

.qrcode-expired {
  opacity: 0.3;
  filter: grayscale(100%);
}

.qrcode-placeholder,
.qrcode-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
}

.status-section {
  text-align: center;
  margin-bottom: 24px;
  min-height: 80px;
}

.status-main {
  font-size: 16px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.status-sub {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}

.status-confirmed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #67c23a;
}

.countdown {
  color: #60a5fa;
  font-weight: 600;
  font-family: monospace;
}

.highlight {
  color: #60a5fa;
  font-weight: 600;
}

.footer {
  text-align: center;
  color: #64748b;
  font-size: 12px;
  border-top: 1px solid rgba(71, 85, 105, 0.5);
  padding-top: 16px;
}

.footer-text {
  margin: 4px 0;
}

.footer-sub {
  margin: 4px 0;
  font-size: 11px;
  color: #475569;
}
</style>