<template>
  <section class="space-y-6">
    <header class="flex items-center justify-between">
      <div>
        <h1 class="mos-title text-2xl font-semibold">角色管理</h1>
        <p class="mos-muted text-sm">管理系统角色及其权限配置。</p>
      </div>
      <button class="mos-btn mos-btn-accent" @click="openCreateDialog">
        新建角色
      </button>
    </header>

    <!-- 角色列表 -->
    <div class="mos-card p-5">
      <table class="w-full">
        <thead>
          <tr class="text-left text-xs text-mosquito-ink/70">
            <th class="pb-3 font-semibold">角色编码</th>
            <th class="pb-3 font-semibold">角色名称</th>
            <th class="pb-3 font-semibold">数据范围</th>
            <th class="pb-3 font-semibold">状态</th>
            <th class="pb-3 font-semibold">创建时间</th>
            <th class="pb-3 font-semibold text-right">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="role in roles"
            :key="role.roleCode"
            class="border-t border-mosquito-line"
          >
            <td class="py-3 font-mono text-sm">{{ role.roleCode }}</td>
            <td class="py-3">{{ role.roleName }}</td>
            <td class="py-3">
              <span class="mos-pill">{{ dataScopeLabel(role.dataScope) }}</span>
            </td>
            <td class="py-3">
              <span
                class="rounded-full px-2 py-1 text-xs font-semibold"
                :class="role.status === 1 ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'"
              >
                {{ role.status === 1 ? '启用' : '禁用' }}
              </span>
            </td>
            <td class="py-3 text-sm text-mosquito-ink/70">
              {{ formatDate(role.createdAt) }}
            </td>
            <td class="py-3 text-right">
              <button class="mos-btn mos-btn-secondary !py-1 !px-2 !text-xs" @click="openEditDialog(role)">
                编辑
              </button>
              <button class="mos-btn mos-btn-secondary !py-1 !px-2 !text-xs ml-2" @click="openPermissionDialog(role)">
                权限
              </button>
              <button
                class="mos-btn mos-btn-danger !py-1 !px-2 !text-xs ml-2"
                @click="handleDelete(role)"
              >
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-if="!roles.length" class="py-8 text-center text-mosquito-ink/60">
        暂无角色数据
      </div>
    </div>

    <!-- 创建/编辑角色对话框 -->
    <div v-if="dialogVisible" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div class="mos-card w-[500px] p-6">
        <h2 class="text-lg font-semibold mb-4">{{ isEdit ? '编辑角色' : '新建角色' }}</h2>
        <div class="space-y-4">
          <div>
            <label class="text-xs font-semibold text-mosquito-ink/70">角色编码</label>
            <input
              v-model="form.roleCode"
              class="mos-input mt-2 w-full"
              placeholder="如: operation_manager"
              :disabled="isEdit"
            />
          </div>
          <div>
            <label class="text-xs font-semibold text-mosquito-ink/70">角色名称</label>
            <input v-model="form.roleName" class="mos-input mt-2 w-full" placeholder="如: 运营经理" />
          </div>
          <div>
            <label class="text-xs font-semibold text-mosquito-ink/70">数据范围</label>
            <select v-model="form.dataScope" class="mos-input mt-2 w-full">
              <option value="ALL">全部数据</option>
              <option value="DEPARTMENT">部门数据</option>
              <option value="OWN">个人数据</option>
            </select>
          </div>
          <div>
            <label class="text-xs font-semibold text-mosquito-ink/70">描述</label>
            <textarea v-model="form.description" class="mos-input mt-2 w-full" rows="3" />
          </div>
          <div v-if="isEdit">
            <label class="text-xs font-semibold text-mosquito-ink/70">状态</label>
            <select v-model="form.status" class="mos-input mt-2 w-full">
              <option :value="1">启用</option>
              <option :value="0">禁用</option>
            </select>
          </div>
        </div>
        <div class="flex justify-end gap-2 mt-6">
          <button class="mos-btn mos-btn-secondary" @click="dialogVisible = false">取消</button>
          <button class="mos-btn mos-btn-accent" @click="handleSubmit">
            {{ isEdit ? '保存' : '创建' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 权限分配对话框 -->
    <div v-if="permissionDialogVisible" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div class="mos-card w-[600px] max-h-[80vh] overflow-auto p-6">
        <h2 class="text-lg font-semibold mb-4">分配权限</h2>
        <div class="space-y-4">
          <div class="text-sm">角色: <span class="font-semibold">{{ currentRole?.roleName }}</span></div>
          <div class="space-y-2">
            <div v-for="group in permissionGroups" :key="group.module" class="border border-mosquito-line rounded-lg p-3">
              <div class="font-semibold text-sm mb-2">{{ group.moduleName }}</div>
              <div class="flex flex-wrap gap-2">
                <label
                  v-for="perm in group.permissions"
                  :key="perm.permissionCode"
                  class="flex items-center gap-1 text-xs cursor-pointer"
                >
                  <input
                    type="checkbox"
                    :checked="selectedPermissions.includes(perm.permissionCode)"
                    @change="togglePermission(perm.permissionCode)"
                  />
                  {{ perm.permissionName }}
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-end gap-2 mt-6">
          <button class="mos-btn mos-btn-secondary" @click="permissionDialogVisible = false">取消</button>
          <button class="mos-btn mos-btn-accent" @click="handleSavePermissions">保存</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { RoleLabels, type AdminRole, type DataScope, type RoleInfo, type PermissionInfo } from '../auth/roles'
import roleService from '../services/role'

const roles = ref<RoleInfo[]>([])
const allPermissions = ref<PermissionInfo[]>([])
const dialogVisible = ref(false)
const permissionDialogVisible = ref(false)
const isEdit = ref(false)
const currentRole = ref<RoleInfo | null>(null)
const selectedPermissions = ref<string[]>([])

const form = ref({
  roleCode: '',
  roleName: '',
  dataScope: 'DEPARTMENT' as DataScope,
  description: '',
  status: 1
})

const dataScopeLabel = (scope: DataScope) => {
  const labels: Record<DataScope, string> = {
    'ALL': '全部数据',
    'DEPARTMENT': '部门数据',
    'OWN': '个人数据'
  }
  return labels[scope] || scope
}

const formatDate = (date: string | undefined) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN')
}

const permissionGroups = computed(() => {
  const groups: Record<string, { module: string; moduleName: string; permissions: PermissionInfo[] }> = {}

  allPermissions.value.forEach(perm => {
    if (!groups[perm.moduleCode]) {
      groups[perm.moduleCode] = {
        module: perm.moduleCode,
        moduleName: perm.moduleCode,
        permissions: []
      }
    }
    groups[perm.moduleCode].permissions.push(perm)
  })

  return Object.values(groups)
})

const loadRoles = async () => {
  try {
    roles.value = await roleService.getRoles()
  } catch (error) {
    console.error('加载角色失败:', error)
  }
}

const loadPermissions = async () => {
  try {
    allPermissions.value = await roleService.getAllPermissions()
  } catch (error) {
    console.error('加载权限失败:', error)
  }
}

const openCreateDialog = () => {
  isEdit.value = false
  form.value = {
    roleCode: '',
    roleName: '',
    dataScope: 'DEPARTMENT',
    description: '',
    status: 1
  }
  dialogVisible.value = true
}

const openEditDialog = (role: RoleInfo) => {
  isEdit.value = true
  currentRole.value = role
  form.value = {
    roleCode: role.roleCode,
    roleName: role.roleName,
    dataScope: role.dataScope,
    description: role.description || '',
    status: role.status
  }
  dialogVisible.value = true
}

const openPermissionDialog = async (role: RoleInfo) => {
  currentRole.value = role
  try {
    const perms = await roleService.getRolePermissions(role.id || 0)
    // 简化：直接使用权限代码
    selectedPermissions.value = []
    permissionDialogVisible.value = true
  } catch (error) {
    console.error('加载权限失败:', error)
  }
}

const handleSubmit = async () => {
  try {
    if (isEdit.value && currentRole.value?.id) {
      await roleService.updateRole({
        id: currentRole.value.id,
        ...form.value
      })
      alert('角色更新成功')
    } else {
      await roleService.createRole({
        ...form.value,
        roleLevel: 1
      })
      alert('角色创建成功')
    }
    dialogVisible.value = false
    await loadRoles()
  } catch (error) {
    alert(error instanceof Error ? error.message : '操作失败')
  }
}

const handleDelete = async (role: RoleInfo) => {
  if (!confirm(`确定要删除角色 ${role.roleName} 吗？`)) {
    return
  }

  try {
    if (role.id) {
      await roleService.deleteRole(role.id)
      alert('角色删除成功')
      await loadRoles()
    }
  } catch (error) {
    alert(error instanceof Error ? error.message : '删除失败')
  }
}

const togglePermission = (permCode: string) => {
  const index = selectedPermissions.value.indexOf(permCode)
  if (index > -1) {
    selectedPermissions.value.splice(index, 1)
  } else {
    selectedPermissions.value.push(permCode)
  }
}

const handleSavePermissions = async () => {
  alert('权限保存成功（演示模式）')
  permissionDialogVisible.value = false
}

onMounted(() => {
  loadRoles()
  loadPermissions()
})
</script>
