<template>
  <el-card>
    <template #header>
      <div class='flex justify-between items-center'>
        <span class='font-700'>权限管理</span>
        <el-button v-if='hasPermission("platform.permissions.manage")' type='primary' @click='openCreate'>新增权限</el-button>
      </div>
    </template>

    <el-table :data='rows' v-loading='loading'>
      <el-table-column prop='id' label='ID' width='80' sortable />
      <el-table-column prop='name' label='权限标识' min-width='220' sortable />
      <el-table-column prop='category' label='分类' width='150' sortable />
      <el-table-column prop='description' label='描述' min-width='220' sortable />
      <el-table-column v-if='hasPermission("platform.permissions.manage")' label='操作' width='180'>
        <template #default='{ row }'>
          <div class='btn-gap-8 btn-gap-8--nowrap'>
            <el-button size='small' @click='openEdit(row)'>编辑</el-button>
            <el-button size='small' type='danger' @click='removeRow(row)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model='dialogVisible' :title='editingId ? "编辑权限" : "新增权限"' width='560px'>
      <el-form :model='form' label-width='95px'>
        <el-form-item label='权限标识'><el-input v-model='form.name' /></el-form-item>
        <el-form-item label='权限分类'>
          <el-select
            v-model='form.category'
            filterable
            allow-create
            default-first-option
            clearable
            placeholder='请选择或输入分类'
            class='w-full'
          >
            <el-option v-for='item in categoryOptions' :key='item' :label='item' :value='item' />
          </el-select>
        </el-form-item>
        <el-form-item label='描述'><el-input v-model='form.description' type='textarea' :rows='3' /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click='dialogVisible = false'>取消</el-button>
        <el-button type='primary' :loading='saving' @click='submit'>提交</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang='ts'>
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue'
import { permissionsApi } from '@/api/permissions'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const { hasPermission } = authStore
const loading = ref(false)
const saving = ref(false)
const dialogVisible = ref(false)
const editingId = ref<number | null>(null)
const rows = ref<any[]>([])
const form = reactive({ name: '', category: 'general', description: '', guard_name: 'api' })
const categoryOptions = computed<string[]>(() => {
  const categories = rows.value
    .map((item: any) => String(item.category || '').trim())
    .filter((item: string) => item.length > 0)

  return [...new Set(categories)]
})

async function fetchList(): Promise<void> {
  loading.value = true
  try {
    const response: any = await permissionsApi.list({ per_page: 200 })
    rows.value = response.data.data || []
  } finally {
    loading.value = false
  }
}

function openCreate(): void {
  editingId.value = null
  Object.assign(form, { name: '', category: 'general', description: '', guard_name: 'api' })
  dialogVisible.value = true
}

function openEdit(row: any): void {
  editingId.value = row.id
  Object.assign(form, { name: row.name, category: row.category || 'general', description: row.description || '', guard_name: 'api' })
  dialogVisible.value = true
}

async function submit(): Promise<void> {
  saving.value = true
  try {
    if (editingId.value) {
      await permissionsApi.update(editingId.value, form)
      ElMessage.success('更新成功')
    } else {
      await permissionsApi.create(form)
      ElMessage.success('创建成功')
    }
    dialogVisible.value = false
    await fetchList()
  } catch (error: any) {
    const first = error?.errors ? (Object.values(error.errors)[0] as string[])?.[0] : null
    ElMessage.error(first || error?.message || '提交失败')
  } finally {
    saving.value = false
  }
}

async function removeRow(row: any): Promise<void> {
  await ElMessageBox.confirm(`确认删除权限 ${row.name} 吗？`, '提示', { type: 'warning' })
  await permissionsApi.remove(row.id)
  ElMessage.success('删除成功')
  await fetchList()
}

onMounted(fetchList)
</script>
