<template>
  <div class="admin-page-stack">
    <AdminPageHeader
      title="令牌管理"
      subtitle="检索访问令牌、刷新令牌与授权码，并执行撤销操作。"
      icon="vpn_key"
      accent="violet"
      :metrics="pageMetrics"
    >
      <template #actions>
        <q-btn icon="refresh" round flat :loading="loading" @click="reload" />
      </template>
    </AdminPageHeader>

    <AdminFilterPanel :loading="loading" @search="search" @reset="resetFilters">
      <q-input
        v-model="filters.userId"
        class="col-12 col-sm-6 col-md-4"
        outlined
        dense
        clearable
        label="用户 ID"
        :disable="loading"
        @keyup.enter="search"
      />
      <q-input
        v-model="filters.clientId"
        class="col-12 col-sm-6 col-md-4"
        outlined
        dense
        clearable
        label="客户端 ID"
        :disable="loading"
        @keyup.enter="search"
      />
    </AdminFilterPanel>

    <AdminDataTable
      :rows="rows"
      :columns="columns"
      :pagination="pagination"
      :loading="loading"
      :error-message="errorMessage"
      :page-count="pageCount"
      :action-busy="actionBusy"
      :actions-for="actionsFor"
      @request="onTableRequest"
      @reload="reload"
      @page="setPage"
      @action="runAction"
    />

    <AdminDangerDialog
      v-model="dialog.open"
      :title="
        dialog.action === 'revoke-token-client'
          ? '撤销客户端令牌'
          : '撤销用户令牌'
      "
      message="令牌撤销后相关会话需要重新授权。"
      :busy="!!actionBusy"
      icon="key_off"
      @confirm="confirmRevoke"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive } from "vue";
import type { QTableColumn } from "quasar";
import type { AuthTokenPageItem } from "../../../models/AuthModels";
import { AdminApiService } from "../../../services/AdminApiService";
import AdminDataTable from "../components/AdminDataTable.vue";
import AdminDangerDialog from "../components/AdminDangerDialog.vue";
import AdminFilterPanel from "../components/AdminFilterPanel.vue";
import AdminPageHeader from "../components/AdminPageHeader.vue";
import { useAdminActions } from "../composables/useAdminActions";
import { usePagedQuery } from "../composables/usePagedQuery";
import type { AdminAction, AdminMetric, AdminRow } from "../types";

const api = new AdminApiService();
const query = usePagedQuery<AuthTokenPageItem>((values) => api.tokens(values));
const {
  rows,
  loading,
  errorMessage,
  filters,
  pagination,
  pageCount,
  metrics,
  reload,
  search,
  resetFilters,
  onTableRequest,
} = query;
const { actionBusy, runWithState } = useAdminActions(reload);
const dialog = reactive<{
  open: boolean;
  action: AdminAction;
  row: AuthTokenPageItem | null;
}>({ open: false, action: "revoke-token-user", row: null });

const columns: QTableColumn<AdminRow>[] = [
  { name: "primary", field: "id", label: "令牌", align: "left" },
  { name: "status", field: "id", label: "状态", align: "left" },
  { name: "meta", field: "id", label: "生命周期", align: "left" },
  { name: "actions", field: "id", label: "操作", align: "right" },
];

const pageMetrics = computed<AdminMetric[]>(() => [
  { label: "令牌总数", value: metrics.value.total, icon: "vpn_key" },
  { label: "当前范围", value: metrics.value.range, icon: "view_timeline" },
  { label: "已加载", value: metrics.value.loaded, icon: "data_object" },
  {
    label: "筛选项",
    value: metrics.value.activeFilters,
    icon: "filter_alt",
    tone: "muted",
  },
]);

onMounted(() => {
  void reload();
});

function actionsFor() {
  return [
    {
      key: "revoke-token-user" as const,
      icon: "person_off",
      label: "撤销该用户令牌",
      color: "negative",
    },
    {
      key: "revoke-token-client" as const,
      icon: "app_blocking",
      label: "撤销该客户端令牌",
      color: "negative",
    },
  ];
}

function runAction(action: AdminAction, row: AdminRow) {
  if (action !== "revoke-token-user" && action !== "revoke-token-client") {
    return;
  }
  dialog.action = action;
  dialog.row = row as AuthTokenPageItem;
  dialog.open = true;
}

function confirmRevoke() {
  if (!dialog.row) {
    return;
  }
  const row = dialog.row;
  const action = dialog.action;
  void runWithState(`${action}:${row.id}`, (mfa) =>
    action === "revoke-token-client"
      ? api.revokeTokenByClient(row.applicationId, mfa)
      : api.revokeTokenByUser(row.subject ?? "", mfa),
  ).then((success) => {
    if (success) {
      dialog.open = false;
      dialog.row = null;
    }
  });
}

function setPage(page: number) {
  pagination.value.page = page;
  void reload();
}
</script>