<!-- SPEC: PJ2026-010405 云端控制台 / Users. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<script setup lang="ts">
import Pagination from "@/components/common/Pagination.vue";
import EntityIndex from "@/components/console/EntityIndex.vue";
import type { AdminBillingUserSummary } from "@/types";

defineProps<{
  users: AdminBillingUserSummary[];
  selectedId: string | null;
  search: string;
  status: string;
  role: string;
  page: number;
  pageSize: number;
  total: number;
}>();
const emit = defineEmits<{
  select: [userId: string];
  apply: [];
  page: [value: number];
  "update:search": [value: string];
  "update:status": [value: string];
  "update:role": [value: string];
}>();
const userKey = (item: AdminBillingUserSummary): string =>
  String(item.user?.id || "");
const formatNumber = (value: unknown): string =>
  Number(value ?? 0).toLocaleString();
</script>

<template>
  <EntityIndex
    :items="users"
    :item-key="userKey"
    :selected-id="selectedId"
    label="用户索引"
    @select="emit('select', $event.user?.id || '')"
  >
    <template #toolbar
      ><div class="user-index-filters admin-users-filters">
        <input
          :value="search"
          class="input"
          aria-label="搜索用户"
          placeholder="搜索用户名、邮箱或 user id"
          @input="
            emit('update:search', ($event.target as HTMLInputElement).value)
          "
          @keyup.enter="emit('apply')"
        /><select
          :value="status"
          class="input"
          aria-label="用户状态"
          @change="
            emit('update:status', ($event.target as HTMLSelectElement).value);
            emit('apply');
          "
        >
          <option value="">全部状态</option>
          <option value="active">active</option>
          <option value="disabled">disabled</option>
          <option value="pending">pending</option></select
        ><select
          :value="role"
          class="input"
          aria-label="用户角色"
          @change="
            emit('update:role', ($event.target as HTMLSelectElement).value);
            emit('apply');
          "
        >
          <option value="">全部角色</option>
          <option value="user">user</option>
          <option value="admin">admin</option>
        </select>
      </div></template
    >
    <template #item="{ item }"
      ><strong>{{
        item.user?.displayName || item.user?.username || item.user?.id
      }}</strong
      ><small
        >{{ item.user?.email || item.user?.username }} ·
        {{ item.planId || "default" }}</small
      ><span class="entity-index-meta"
        ><span class="status-pill" :data-status="item.user?.status"
          >{{ item.user?.role }} / {{ item.user?.status }}</span
        ><code>{{ formatNumber(item.credits?.available) }} cr</code></span
      ></template
    >
    <template #footer
      ><Pagination
        :page="page"
        :page-size="pageSize"
        :total="total"
        @update:page="emit('page', $event)"
    /></template>
  </EntityIndex>
</template>
