<template>
  <div>
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-xl font-bold text-gray-800">我的權限快照</h2>
      <el-button :loading="loading" @click="load" :icon="Refresh" size="small">重新整理</el-button>
    </div>

    <el-alert
      v-if="error"
      :title="errorMessage"
      type="error"
      show-icon
      :closable="false"
      class="mb-4"
    />

    <el-skeleton v-if="loading && !snapshot" :rows="4" animated />

    <template v-if="snapshot">
      <p class="text-sm text-gray-500 mb-3">
        Sub：<span class="font-mono">{{ snapshot.authentik_sub }}</span>
      </p>

      <el-empty
        v-if="snapshot.permissions.length === 0"
        description="目前沒有任何權限"
      />

      <el-table
        v-else
        :data="snapshot.permissions"
        stripe
        border
        class="w-full shadow-sm"
      >
        <el-table-column prop="scope_type" label="Scope 類型" width="100" />
        <el-table-column prop="scope_id" label="Scope ID" min-width="140" />
        <el-table-column prop="system" label="系統" width="120" />
        <el-table-column prop="module" label="模組" width="120" />
        <el-table-column prop="action" label="操作" width="100" />
      </el-table>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { usePermissionStore } from '@/stores/permission'

const permissionStore = usePermissionStore()

const snapshot = ref(null)
const loading = ref(false)
const error = ref(null)
const errorMessage = ref('')

async function load() {
  loading.value = true
  error.value = null
  try {
    await permissionStore.fetchMySnapshot()
    snapshot.value = permissionStore.snapshot
  } catch (err) {
    error.value = err
    const status = err.response?.status
    const detail = err.response?.data?.detail
    if (status === 401) {
      errorMessage.value = 'Token 已過期，請重新登入'
    } else if (detail) {
      errorMessage.value = `錯誤：${detail}`
    } else {
      errorMessage.value = '載入失敗，請稍後再試'
    }
  } finally {
    loading.value = false
  }
}

onMounted(load)
</script>
