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

defineProps<{
  rows: AccessUserRow[];
  selectedId: string | null;
  query: string;
  refreshing: boolean;
}>();

const emit = defineEmits<{
  select: [row: AccessUserRow];
  refresh: [];
  "update:query": [value: string];
}>();
</script>

<template>
  <EntityIndex
    :items="rows"
    :item-key="(row) => row.id"
    :selected-id="selectedId"
    label="授权用户索引"
    empty-text="没有匹配用户。"
    @select="emit('select', $event)"
  >
    <template #toolbar>
      <label class="operations-search">
        <span>用户索引</span>
        <input :value="query" type="search" placeholder="用户、角色、状态或 tool" @input="emit('update:query', ($event.target as HTMLInputElement).value)" />
      </label>
      <button class="table-action" type="button" :disabled="refreshing" @click="emit('refresh')">
        {{ refreshing ? "刷新中" : "刷新" }}
      </button>
    </template>
    <template #item="{ item }">
      <strong>{{ accessUserLabel(item) }}</strong>
      <small>{{ item.username || item.id }}</small>
      <span class="entity-index-meta">
        <span class="status-pill" :data-status="item.status">{{ item.role }} / {{ item.status }}</span>
        <code>{{ item.toolCount }} tools · {{ item.tupleCount }} tuples</code>
      </span>
    </template>
  </EntityIndex>
</template>
