<!-- SPEC: PJ2026-010405 云端控制台 / Access. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<script setup lang="ts">
import InspectorPanel from "@/components/console/InspectorPanel.vue";
import { accessUserLabel, type AccessToolRow, type AccessTupleView, type AccessUserRow } from "@/stores/admin-access-view";
import type { AccessUserRole, AccessUserStatus } from "@/types";

defineProps<{
  user: AccessUserRow;
  tools: AccessToolRow[];
  tuples: AccessTupleView[];
  mutationError: string | null;
  saving: boolean;
}>();

const emit = defineEmits<{
  close: [];
  role: [value: AccessUserRole];
  status: [value: AccessUserStatus];
  tool: [toolId: AccessToolRow["id"], allowed: boolean];
}>();

</script>

<template>
  <InspectorPanel :title="accessUserLabel(user)" :subtitle="user.id" @close="emit('close')">
    <p v-if="mutationError" class="form-error">{{ mutationError }}</p>
    <div class="form-grid compact-form-grid">
      <label>
        <span>Role</span>
        <select :value="user.role" :disabled="saving" @change="emit('role', ($event.target as HTMLSelectElement).value as AccessUserRole)">
          <option value="admin">admin</option><option value="user">user</option>
        </select>
      </label>
      <label>
        <span>Status</span>
        <select :value="user.status" :disabled="saving" @change="emit('status', ($event.target as HTMLSelectElement).value as AccessUserStatus)">
          <option value="active">active</option><option value="disabled">disabled</option>
        </select>
      </label>
    </div>
    <section>
      <h3>Tool grants</h3>
      <div class="tool-toggle-grid">
        <label v-for="tool in tools" :key="tool.id" class="tool-toggle-row">
          <span><strong>{{ tool.label }}</strong><small>{{ tool.id }}</small></span>
          <input type="checkbox" :checked="tool.allowed" :disabled="saving" @change="emit('tool', tool.id, ($event.target as HTMLInputElement).checked)" />
        </label>
      </div>
    </section>
    <section class="tuple-list">
      <h3>Tuples</h3>
      <p v-if="!tuples.length" class="muted-box">暂无 tuple。</p>
      <ul v-else><li v-for="tuple in tuples" :key="tuple.id"><code>{{ tuple.userId || '-' }}</code><span>{{ tuple.relation || '-' }}</span><code>{{ tuple.object || '-' }}</code></li></ul>
    </section>
  </InspectorPanel>
</template>
