<template>
  <div class="user-verification-page">
    <BoxedIconTitleBlock
      class="user-verification-page__heading"
      title="تایید هویت کاربران"
      desc="در این قسمت می‌توانید کاربران خود را تایید یا رد کنید"
    >
      <template #icon>
        <SvgIcon name="users-three" :size="24" color="var(--color-primary)" />
      </template>
    </BoxedIconTitleBlock>

    <VerificationsFilters v-model="filters" @apply="onFilterApply" @reset="onFilterReset" />

    <SimpleTitleIconBlock title="لیست همه کاربران" class="user-verification-page__list-title">
      <template #header-icon>
        <SvgIcon name="users" :size="16" color="#bcbcbc" />
      </template>
    </SimpleTitleIconBlock>

    <SkeletonLoaderBlock v-if="isLoading" :rows="6" :cols-per-row="1" />
    <div v-else-if="users.length > 0">
      <VerificationItem
        v-for="user in users"
        :key="user.id"
        :user="user"
        @show-details="onShowDetails"
        @show-reject-reason="onShowRejectReason"
        @verify-user="onVerifyUser"
      />
    </div>
    <NoItems v-else title="متاسفیم" desc="کاربری برای نمایش وجود ندارد." />

    <PaginationBlock :pagination="paginationMeta" @update:page="setPage" />

    <UserVerificationDetailsModal v-if="isModal('UserVerificationDetailsModal')" />
    <RejectReasonModal v-if="isModal('RejectReasonModal')" />
    <RejectReasonDetailsModal v-if="isModal('RejectReasonDetailsModal')" />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import useModal from '@/composables/useModal'
import { useQueryClient } from '@tanstack/vue-query'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import { usePagination } from '@/composables/usePagination'
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
import VerificationItem from '@/features/admin/users/components/verifications/VerificationItem.vue'
import VerificationsFilters from '@/features/admin/users/components/verifications/VerificationsFilters.vue'
import RejectReasonModal from '@/features/admin/users/components/verifications/modals/RejectReasonModal.vue'
import RejectReasonDetailsModal from '@/features/admin/users/components/verifications/modals/RejectReasonDetailsModal.vue'
import {
  adminUsersKeys,
  useAdminUsersListQuery,
  useChangeAdminUserStatusMutation,
} from '@/services/query/admin-users'
import UserVerificationDetailsModal from '@/features/admin/users/components/verifications/modals/UserVerificationDetailsModal.vue'

const queryClient = useQueryClient()
const { openModal, isModal } = useModal()

const filters = ref({ name: '', nationalCode: '', fromDate: '', toDate: '' })
const { pagination, setPage, reset: resetPagination } = usePagination({ page: 1, perPage: 10 })

const listFilters = computed(() => ({ ...filters.value, status: 'verified' }))

const { data, isLoading } = useAdminUsersListQuery(listFilters, pagination, {
  keepPreviousData: true,
})

const users = computed(() => data.value?.data ?? [])
const paginationMeta = computed(() => ({
  page: pagination.value.page,
  perPage: pagination.value.perPage,
  ...data.value?.meta,
}))

const onFilterApply = () => resetPagination()
const onFilterReset = () => resetPagination()

const changeStatusMutation = useChangeAdminUserStatusMutation()

const onVerifyUser = ({ id, status }) => {
  if (status === 'blocked') {
    openModal('RejectReasonModal', { id })
    return
  }
  changeStatusMutation.mutate(
    { id, payload: { status } },
    {
      onSuccess: () => queryClient.invalidateQueries({ queryKey: adminUsersKeys.all }),
    }
  )
}

const onShowDetails = (id) => {
  openModal('UserVerificationDetailsModal', {
    id,
    onVerify: ({ id: targetId, status }) => onVerifyUser({ id: targetId, status }),
  })
}

const onShowRejectReason = (user) => {
  openModal('RejectReasonDetailsModal', { user })
}
</script>

<style lang="scss" scoped>
.user-verification-page {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  &__heading {
    margin-bottom: 0.5rem;
  }

  &__list-title {
    margin-bottom: 0.375rem;
  }
}
</style>
