<template>
  <section class="space-y-6">
    <header class="space-y-2">
      <h1 class="mos-title text-2xl font-semibold">权限矩阵</h1>
      <p class="mos-muted text-sm">查看不同角色的功能权限范围。</p>
    </header>

    <div class="mos-card p-5 space-y-4">
      <div class="grid gap-3 rounded-xl border border-mosquito-line px-4 py-3 text-xs text-mosquito-ink/70" :style="gridStyle">
        <div></div>
        <div v-for="role in roles" :key="role.key" class="text-center font-semibold text-mosquito-ink">
          {{ role.label }}
        </div>
      </div>

      <div v-for="section in permissionSections" :key="section.group" class="space-y-2">
        <div class="text-xs font-semibold text-mosquito-ink/70">{{ section.group }}</div>
        <div
          v-for="permission in section.items"
          :key="permission.key"
          class="grid gap-3 rounded-xl border border-mosquito-line px-4 py-3 text-sm"
          :style="gridStyle"
        >
          <div>
            <div class="text-sm font-semibold text-mosquito-ink">{{ permission.label }}</div>
            <div class="mos-muted text-xs">{{ permission.description }}</div>
          </div>
          <div v-for="role in roles" :key="role.key" class="flex items-center justify-center">
            <span
              class="rounded-full px-2 py-1 text-[10px] font-semibold"
              :class="hasPermission(role.key, permission.key)
                ? 'bg-mosquito-accent/10 text-mosquito-brand'
                : 'bg-mosquito-bg text-mosquito-ink/50'"
            >
              {{ hasPermission(role.key, permission.key) ? '允许' : '无' }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { RolePermissions, type AdminRole, type Permission } from '../auth/roles'

const roles: { key: AdminRole; label: string }[] = [
  { key: 'super_admin', label: '超级管理员' },
  { key: 'system_admin', label: '系统管理员' },
  { key: 'operation_manager', label: '运营经理' },
  { key: 'viewer', label: '只读' }
]

const permissionSections: { group: string; items: { key: Permission; label: string; description: string }[] }[] = [
  {
    group: '可视化与运营查看',
    items: [
      { key: 'dashboard:view', label: '看板查看', description: '访问运营概览与关键指标' },
      { key: 'activity:view', label: '活动查看', description: '查看活动列表与详情信息' },
      { key: 'dashboard:export', label: '导出数据', description: '导出看板数据' },
      { key: 'risk:view', label: '告警查看', description: '查看风控与系统告警信息' }
    ]
  },
  {
    group: '运营与风控管理',
    items: [
      { key: 'user:view', label: '用户管理', description: '管理运营成员、审批与角色' },
      { key: 'reward:view', label: '奖励管理', description: '配置与执行奖励发放' },
      { key: 'risk:rule', label: '风控管理', description: '维护风控规则与黑名单' },
      { key: 'system:config', label: '配置管理', description: '管理系统配置与策略' },
      { key: 'audit:view', label: '审计查看', description: '查看关键操作审计日志' }
    ]
  }
]

const hasPermission = (role: AdminRole, permission: Permission) => {
  return RolePermissions[role]?.includes(permission) ?? false
}

const gridStyle = computed(() => ({
  gridTemplateColumns: `minmax(200px, 1.8fr) repeat(${roles.length}, minmax(80px, 1fr))`
}))
</script>
