<template>
  <div class="admin-page-stack">
    <AdminPageHeader
      title="授权记录"
      subtitle="查看当前用户授权并按需撤销客户端访问。"
      icon="verified_user"
      accent="emerald"
      :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.keyword"
        class="col-12 col-sm-6 col-md-3"
        outlined
        dense
        clearable
        label="关键字"
        :disable="loading"
        @keyup.enter="search"
      />
      <q-input
        v-model="filters.applicationId"
        class="col-12 col-sm-6 col-md-3"
        outlined
        dense
        clearable
        label="应用 ID"
        :disable="loading"
        @keyup.enter="search"
      />
      <q-input
        v-model="filters.status"
        class="col-12 col-sm-6 col-md-2"
        outlined
        dense
        clearable
        label="状态"
        :disable="loading"
        @keyup.enter="search"
      />
      <q-input
        v-model="filters.type"
        class="col-12 col-sm-6 col-md-2"
        outlined
        dense
        clearable
        label="类型"
        :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="撤销授权"
      message="该操作会撤销当前用户对客户端的授权。"
      :busy="!!actionBusy"
      icon="block"
      @confirm="confirmRevoke"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive } from "vue";
import type { QTableColumn } from "quasar";
import type { AuthAuthorizationPageItem } 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<AuthAuthorizationPageItem>((values) =>
  api.authorizations(values),
);
const {
  rows,
  loading,
  errorMessage,
  filters,
  pagination,
  pageCount,
  metrics,
  reload,
  search,
  resetFilters,
  onTableRequest,
} = query;
const { actionBusy, runWithState } = useAdminActions(reload);
const dialog = reactive<{
  open: boolean;
  row: AuthAuthorizationPageItem | null;
}>({ open: false, 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: "verified" },
  { 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-authorization" as const,
      icon: "block",
      label: "撤销授权",
      color: "negative",
    },
  ];
}

function runAction(action: AdminAction, row: AdminRow) {
  if (action !== "revoke-authorization") {
    return;
  }
  dialog.row = row as AuthAuthorizationPageItem;
  dialog.open = true;
}

function confirmRevoke() {
  if (!dialog.row) {
    return;
  }
  const row = dialog.row;
  void runWithState(`revoke-authorization:${row.id}`, (mfa) =>
    api.revokeAuthorization(row, mfa),
  ).then((success) => {
    if (success) {
      dialog.open = false;
      dialog.row = null;
    }
  });
}

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