<template>
  <div class="art-page-view">
    <ReviewSearch v-model="formFilters" @search="handleSearch" @reset="handleReset" />

    <ElCard class="art-table-card" shadow="never">
      <ArtTableHeader
        v-model:columns="columns"
        v-model:showSearchBar="showSearchBar"
        :loading="loading"
        @refresh="refreshData"
      />

      <ArtTable
        :data="data"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        @pagination:current-change="handleCurrentChange"
        @pagination:size-change="handleSizeChange"
      >
        <template #status="{ row }">
          <ElTag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</ElTag>
        </template>
        <template #operatingMode="{ row }">
          <span>{{ getOperatingModeText(row.operatingMode) }}</span>
        </template>
        <template #claimedByName="{ row }">
          <span class="cell-ellipsis">{{ row.claimedByName || '-' }}</span>
        </template>
        <template #action="{ row }">
          <div class="action-wrap">
            <button class="art-action-btn primary" @click="handleReview(row)">
              <ArtSvgIcon icon="ri:check-double-line" class="art-action-icon" />
              <span>{{ t('merchant.review.title') }}</span>
            </button>
          </div>
        </template>
      </ArtTable>
    </ElCard>

    <ReviewDialog ref="reviewDialogRef" @success="refreshData" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ElCard, ElTag } from 'element-plus'
  import ArtTable from '@/components/core/tables/art-table/index.vue'
  import ArtTableHeader from '@/components/core/tables/art-table-header/index.vue'
  import ArtSvgIcon from '@/components/core/base/art-svg-icon/index.vue'
  import { useTable } from '@/hooks/core/useTable'
  import { fetchPendingReviewList } from '@/api/merchant'
  import { MerchantStatus } from '@/enums/MerchantStatus'
  import { OperatingMode } from '@/enums/OperatingMode'
  import { formatDateTime } from '@/utils/billing'
  import ReviewDialog from './components/ReviewDialog.vue'
  import ReviewSearch from './modules/review-search.vue'
  import type { MerchantReviewSearchForm } from './types'
  import type { ColumnOption } from '@/types/component'

  defineOptions({ name: 'MerchantReview' })

  const { t } = useI18n()
  const showSearchBar = ref(true)
  const reviewDialogRef = ref<InstanceType<typeof ReviewDialog>>()

  const formFilters = ref<MerchantReviewSearchForm>({
    keyword: '',
    operatingMode: undefined
  })

  const {
    data,
    loading,
    pagination,
    columns,
    searchParams,
    refreshData,
    handleCurrentChange,
    handleSizeChange
  } = useTable<typeof fetchPendingReviewList, Api.Merchant.MerchantReviewListItem>({
    core: {
      apiFn: fetchPendingReviewList,
      apiParams: {
        Page: 1,
        PageSize: 20
      },
      paginationKey: {
        current: 'Page',
        size: 'PageSize'
      },
      columnsFactory: (): ColumnOption<Api.Merchant.MerchantReviewListItem>[] => [
        { type: 'globalIndex', label: '#', width: 60, fixed: 'left' },
        {
          prop: 'name',
          label: t('merchant.list.table.name'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'tenantName',
          label: t('merchant.list.table.tenantName'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'operatingMode',
          label: t('merchant.list.table.operatingMode'),
          width: 140,
          useSlot: true
        },
        { prop: 'status', label: t('merchant.list.table.status'), width: 120, useSlot: true },
        {
          prop: 'claimedByName',
          label: t('merchant.review.claim'),
          minWidth: 200,
          useSlot: true
        },
        {
          prop: 'createdAt',
          label: t('merchant.list.table.createdAt'),
          width: 180,
          formatter: (row) => formatDateTime(row.createdAt)
        },
        { prop: 'action', label: t('common.action'), width: 160, fixed: 'right', useSlot: true }
      ]
    }
  })

  onMounted(() => {
    searchParams.keyword = undefined
    searchParams.operatingMode = undefined
  })

  const handleSearch = (params: MerchantReviewSearchForm) => {
    searchParams.keyword = params.keyword || undefined
    searchParams.operatingMode = params.operatingMode
    refreshData()
  }

  const handleReset = () => {
    formFilters.value = { keyword: '', operatingMode: undefined }
    searchParams.keyword = undefined
    searchParams.operatingMode = undefined
    refreshData()
  }

  const handleReview = (row: Api.Merchant.MerchantReviewListItem) => {
    reviewDialogRef.value?.open(row)
  }

  const getStatusType = (status: number) => {
    switch (status) {
      case MerchantStatus.Pending:
        return 'warning'
      case MerchantStatus.Approved:
        return 'success'
      case MerchantStatus.Rejected:
        return 'danger'
      default:
        return 'info'
    }
  }

  const getStatusText = (status: number) => {
    switch (status) {
      case MerchantStatus.Pending:
        return t('merchant.status.pending')
      case MerchantStatus.Approved:
        return t('merchant.status.approved')
      case MerchantStatus.Rejected:
        return t('merchant.status.rejected')
      case MerchantStatus.Frozen:
        return t('merchant.status.frozen')
      default:
        return t('merchant.status.unknown')
    }
  }

  const getOperatingModeText = (mode?: number) => {
    switch (mode) {
      case OperatingMode.SameEntity:
        return t('merchant.operatingMode.same')
      case OperatingMode.DifferentEntity:
        return t('merchant.operatingMode.different')
      default:
        return '-'
    }
  }
</script>

<style scoped>
  .action-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .cell-ellipsis {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
