<template>
  <!-- 角色选择页面 -->
  <div class="portal-select">
    <!-- 加载中状态 -->
    <div v-if="loading" class="loading-container">
      <el-icon class="loading-icon" :size="48">
        <Loading />
      </el-icon>
      <p class="loading-text">正在加载用户信息...</p>
    </div>

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

    <!-- 角色选择页面 -->
    <div v-else class="select-container">
      <!-- 标题区域 -->
      <div class="header">
        <h1 class="title">IT智能服务台</h1>
        <p class="subtitle">选择您要进入的工作台</p>
      </div>

      <!-- 用户信息卡片 -->
      <div v-if="userInfo" class="user-info">
        <el-avatar :size="48" :src="userInfo.avatar || undefined">
          {{ userInfo.name?.charAt(0) || '?' }}
        </el-avatar>
        <div class="user-details">
          <span class="user-name">{{ userInfo.name }}</span>
          <span v-if="userInfo.department" class="user-department">{{ userInfo.department }}</span>
        </div>
      </div>

      <!-- 角色卡片列表 -->
      <div class="role-cards">
        <!-- 用户端卡片 -->
        <div
          class="role-card"
          :class="{ 'role-card--active': selectedRole === 'user' }"
          @click="selectRole('user')"
        >
          <div class="role-card__icon">
            <el-icon :size="48" color="#3b82f6">
              <User />
            </el-icon>
          </div>
          <div class="role-card__content">
            <h3 class="role-card__title">用户端</h3>
            <p class="role-card__desc">提交工单、查看进度、浏览知识库</p>
          </div>
          <div class="role-card__action">
            <el-button type="primary" size="large" @click.stop="enterRole('user')">
              进入
            </el-button>
          </div>
        </div>

        <!-- 坐席端卡片 -->
        <div
          v-if="hasAgentRole"
          class="role-card"
          :class="{ 'role-card--active': selectedRole === 'agent' }"
          @click="selectRole('agent')"
        >
          <div class="role-card__icon">
            <el-icon :size="48" color="#f59e0b">
              <Headset />
            </el-icon>
          </div>
          <div class="role-card__content">
            <h3 class="role-card__title">坐席端</h3>
            <p class="role-card__desc">处理会话、AI辅助、管理工单</p>
          </div>
          <div class="role-card__action">
            <el-button type="warning" size="large" @click.stop="enterRole('agent')">
              进入
            </el-button>
          </div>
        </div>

        <!-- 管理端卡片 -->
        <div
          v-if="hasAdminRole"
          class="role-card"
          :class="{ 'role-card--active': selectedRole === 'admin' }"
          @click="selectRole('admin')"
        >
          <div class="role-card__icon">
            <el-icon :size="48" color="#ef4444">
              <Setting />
            </el-icon>
          </div>
          <div class="role-card__content">
            <h3 class="role-card__title">管理端</h3>
            <p class="role-card__desc">系统配置、数据分析、权限管理</p>
          </div>
          <div class="role-card__action">
            <el-button type="danger" size="large" @click.stop="enterRole('admin')">
              进入
            </el-button>
          </div>
        </div>
      </div>

      <!-- 底部提示 -->
      <div class="footer">
        <p class="footer-text">
          当前账号：{{ userInfo?.name }} ({{ userInfo?.employee_id }})
        </p>
        <p class="footer-hint">
          <el-icon><InfoFilled /></el-icon>
          每次进入需要重新选择工作台
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { usePortalStore } from '@/stores/portal'
import { storeToRefs } from 'pinia'
import { Loading, CircleCloseFilled, User, Headset, Setting, InfoFilled } from '@element-plus/icons-vue'
import apiClient from '@/api/index'

// 获取 Portal Store
const portalStore = usePortalStore()

// 解构状态
const { userInfo, loading, error, hasAgentRole, hasAdminRole } = storeToRefs(portalStore)

// 选中的角色
const selectedRole = ref<string | null>(null)

// ==================== 生命周期 ====================

onMounted(async () => {
  const urlParams = new URLSearchParams(window.location.search)
  const token = urlParams.get('token')
  const code = urlParams.get('code')

  // 1. 企微 OAuth2 回调：URL 中有 code 参数
  if (code && !token) {
    loading.value = true
    try {
      const response = await apiClient.post('/h5/oauth/callback', { code })
      const data = response.data.data
      if (data?.token) {
        portalStore.setToken(data.token)
        // 清除 URL 中的 code/state 参数
        window.history.replaceState({}, '', window.location.pathname)
      } else {
        error.value = 'OAuth2授权失败：未获取到Token'
        return
      }
    } catch (err: any) {
      console.error('OAuth2 回调失败:', err)
      error.value = err.response?.data?.detail || 'OAuth2授权失败'
      return
    } finally {
      loading.value = false
    }
  }

  // 2. 从 Portal 跳转回来：URL 中有 token 参数
  if (token) {
    portalStore.setToken(token)
    window.history.replaceState({}, '', window.location.pathname)
  }

  // 3. 检查是否已登录（localStorage 缓存）
  if (!portalStore.isAuthenticated) {
    portalStore.restoreFromCache()
    if (!portalStore.isAuthenticated) {
      // 未登录，尝试触发 OAuth2 流程
      const corpId = import.meta.env.VITE_WECOM_CORP_ID || ''
      if (corpId) {
        // 生产环境：调用后端获取 OAuth2 授权 URL
        try {
          loading.value = true
          const response = await apiClient.get('/h5/oauth/authorize')
          const authorizeUrl = response.data.data?.authorize_url
          if (authorizeUrl) {
            window.location.href = authorizeUrl
            return
          }
        } catch (err) {
          console.error('获取 OAuth2 URL 失败:', err)
        } finally {
          loading.value = false
        }
      }
      // 无 corpId 或获取失败：显示错误（开发环境可 Mock 登录）
      error.value = '未登录，请通过企业微信工作台访问'
      return
    }
  }

  // 4. 加载用户信息
  await portalStore.fetchUserInfo()

  // 5. 如果用户只有一个有效角色，直接跳转（避免多角色用户被自动跳走）
  // 注意：user角色是默认的，但如果有agent或admin角色，应该让用户选择
  const validRoles = portalStore.roles.filter(
    (r: any) => r.name === 'agent' || r.name === 'admin'
  )
  if (validRoles.length === 0 && portalStore.roleCount === 1) {
    // 只有默认的user角色，直接跳转
    const singleRole = portalStore.roles[0]
    if (singleRole) {
      enterRole(singleRole.name)
    }
  }
  // 否则：显示角色选择页面（让用户选择）
})

// ==================== 方法 ====================

/**
 * 选择角色
 */
function selectRole(role: string) {
  selectedRole.value = role
}

/**
 * 进入角色对应的工作台
 */
function enterRole(role: string) {
  // 保存当前选择的角色到 localStorage（用于记住选择）
  localStorage.setItem('portal_selected_role', role)

  // 跳转到对应的工作台
  const roleUrls: Record<string, string> = {
    user: '/itdesk/',
    agent: '/itagent/',
    admin: '/itadmin/',
  }

  const url = roleUrls[role]
  if (url) {
    // 将 Token 传递给目标页面
    const token = portalStore.token
    if (token) {
      window.location.href = `${url}?token=${encodeURIComponent(token)}`
    } else {
      window.location.href = url
    }
  }
}

/**
 * 重试加载
 */
function handleRetry() {
  portalStore.fetchUserInfo()
}
</script>

<style scoped>
/* 页面容器 */
.portal-select {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 加载中状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loading-icon {
  animation: spin 1s linear infinite;
  color: #3b82f6;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: #94a3b8;
  font-size: 16px;
}

/* 错误状态 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.error-text {
  color: #ef4444;
  font-size: 16px;
}

/* 选择页面 */
.select-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 800px;
  width: 100%;
}

/* 标题区域 */
.header {
  text-align: center;
}

.title {
  font-size: 32px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: #94a3b8;
}

/* 用户信息卡片 */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(71, 85, 105, 0.5);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: #f1f5f9;
}

.user-department {
  font-size: 14px;
  color: #94a3b8;
}

/* 角色卡片列表 */
.role-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 角色卡片 */
.role-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.role-card:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
}

.role-card--active {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.role-card__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 16px;
}

.role-card__content {
  flex: 1;
}

.role-card__title {
  font-size: 20px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 4px;
}

.role-card__desc {
  font-size: 14px;
  color: #94a3b8;
}

.role-card__action {
  flex-shrink: 0;
}

/* 底部提示 */
.footer {
  text-align: center;
  margin-top: 16px;
}

.footer-text {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
}

.footer-hint {
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 响应式布局 */
@media (max-width: 640px) {
  .role-card {
    flex-direction: column;
    text-align: center;
  }

  .role-card__icon {
    width: 64px;
    height: 64px;
  }

  .role-card__action {
    width: 100%;
  }

  .role-card__action .el-button {
    width: 100%;
  }
}
</style>
