<template>
  <el-container class="layout">
    <el-aside width="240px" class="sidebar">
      <div class="logo">
        <div class="logo-icon">M</div>
        <div class="logo-text">
          <div class="logo-title">Sino-MCI</div>
          <div class="logo-sub">消息中台</div>
        </div>
      </div>
      <el-menu
        :default-active="$route.path"
        router
        class="menu"
        :collapse-transition="false"
      >
        <el-menu-item index="/dashboard">
          <el-icon><DataLine /></el-icon>
          <span>概览</span>
        </el-menu-item>

        <el-sub-menu index="/channel">
          <template #title>
            <el-icon><Connection /></el-icon>
            <span>渠道接入</span>
          </template>
          <el-menu-item index="/channel/subject">渠道主体</el-menu-item>
          <el-menu-item index="/channel/app">渠道应用</el-menu-item>
          <el-menu-item index="/channel/account">渠道账号</el-menu-item>
          <el-menu-item index="/channel/identity">渠道身份</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/customer">
          <template #title>
            <el-icon><User /></el-icon>
            <span>客户关系</span>
          </template>
          <el-menu-item index="/customer/person">联系人</el-menu-item>
          <el-menu-item index="/customer/group">群聊</el-menu-item>
          <el-menu-item index="/customer/tag">标签体系</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/message">
          <template #title>
            <el-icon><ChatDotRound /></el-icon>
            <span>消息运营</span>
          </template>
          <el-menu-item index="/message/send-record">发送记录</el-menu-item>
          <el-menu-item index="/message/query">消息查询</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/flow">
          <template #title>
            <el-icon><Share /></el-icon>
            <span>流程编排</span>
          </template>
          <el-menu-item index="/flow/inbound">入站流程</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item v-if="isPlatformAdmin" index="/system/tenant">租户管理</el-menu-item>
          <el-menu-item index="/system/user">用户管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header class="header">
        <span class="page-title">{{ $route.meta.title || '消息中台' }}</span>
        <div class="header-right">
          <el-badge :value="0" class="notify-badge">
            <el-icon class="notify-icon" :size="20"><Bell /></el-icon>
          </el-badge>

          <div v-if="isPlatformAdmin" class="tenant-wrap">
            <span class="tenant-label">租户</span>
            <el-select
              v-model="selectedTenant"
              placeholder="选择租户"
              size="small"
              class="tenant-select"
              @change="handleTenantChange"
            >
              <el-option label="全部租户" value="" />
              <el-option
                v-for="t in tenantOptions"
                :key="t.tenantCode"
                :label="t.tenantName"
                :value="t.tenantCode"
              />
            </el-select>
          </div>
          <div v-else class="tenant-wrap">
            <span class="tenant-name">{{ authStore.tenantCode || '-' }}</span>
          </div>

          <el-dropdown @command="handleUserCommand">
            <div class="user-info">
              <el-avatar :size="32" class="user-avatar">{{ avatarText }}</el-avatar>
              <div class="user-meta">
                <div class="user-role">{{ roleText }}</div>
                <div class="user-name">{{ authStore.username }}</div>
              </div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { listTenants } from '../api/account'
import {
  DataLine,
  Connection,
  User,
  ChatDotRound,
  Share,
  Setting,
  Bell,
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const isPlatformAdmin = computed(() => authStore.roleCodes.includes('platform_admin'))

const roleText = computed(() => {
  if (authStore.roleCodes.includes('platform_admin')) return '平台管理员'
  if (authStore.roleCodes.includes('tenant_admin')) return '租户管理员'
  return '运营人员'
})

const avatarText = computed(() => {
  const name = authStore.username || 'U'
  return name.slice(0, 1).toUpperCase()
})

const selectedTenant = ref(authStore.tenantCode || '')
const tenantOptions = ref<any[]>([])

async function loadTenants() {
  if (!isPlatformAdmin.value) return
  try {
    const res: any = await listTenants()
    tenantOptions.value = res.data || []
  } catch {
    tenantOptions.value = []
  }
}

function handleTenantChange(code: string) {
  authStore.setTenant(code)
  window.location.reload()
}

function handleUserCommand(command: string) {
  if (command === 'logout') {
    authStore.clearAuth()
    router.push('/login')
  }
}

onMounted(loadTenants)
</script>

<style scoped>
.layout {
  height: 100vh;
  background: #f8fafc;
}
.sidebar {
  background: #fff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}
.logo {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
  gap: 12px;
}
.logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
.logo-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.logo-sub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.2;
}
.menu {
  border-right: none;
  flex: 1;
  overflow-y: auto;
}
.header {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
}
.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.notify-badge {
  cursor: pointer;
}
.notify-icon {
  color: #64748b;
}
.tenant-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 20px;
  border-right: 1px solid #e2e8f0;
}
.tenant-label {
  font-size: 14px;
  color: #64748b;
}
.tenant-select {
  width: 140px;
}
.tenant-name {
  font-size: 14px;
  color: #334155;
  font-weight: 500;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  outline: none;
}
.user-avatar {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}
.user-meta {
  line-height: 1.2;
}
.user-role {
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
}
.user-name {
  font-size: 12px;
  color: #64748b;
}
.main {
  padding: 24px;
  overflow-y: auto;
}
</style>
