<template>
  <ElDescriptions :column="2" border>
    <ElDescriptionsItem :label="t('merchant.fields.name')">
      {{ merchant?.name || '-' }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.status')">
      <ElTag :type="statusType">{{ statusText }}</ElTag>
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.operatingMode')">
      {{ operatingModeText }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.isFrozen')">
      <ElTag :type="merchant?.isFrozen ? 'danger' : 'success'">
        {{ merchant?.isFrozen ? t('merchant.frozen.yes') : t('merchant.frozen.no') }}
      </ElTag>
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.frozenReason')">
      {{ merchant?.frozenReason || '-' }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.approvedAt')">
      {{ formatDateTime(merchant?.approvedAt) }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.approvedBy')">
      {{ merchant?.approvedBy || '-' }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.createdAt')">
      {{ formatDateTime(merchant?.createdAt) }}
    </ElDescriptionsItem>
    <ElDescriptionsItem :label="t('merchant.fields.updatedAt')">
      {{ formatDateTime(merchant?.updatedAt) }}
    </ElDescriptionsItem>
  </ElDescriptions>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus'
  import { MerchantStatus } from '@/enums/MerchantStatus'
  import { OperatingMode } from '@/enums/OperatingMode'

  interface Props {
    merchant?: Api.Merchant.MerchantDetail | null
  }

  const props = defineProps<Props>()
  const { t } = useI18n()

  const statusType = computed(() => {
    switch (props.merchant?.status) {
      case MerchantStatus.Pending:
        return 'warning'
      case MerchantStatus.Approved:
        return 'success'
      case MerchantStatus.Rejected:
        return 'danger'
      case MerchantStatus.Frozen:
        return 'info'
      default:
        return 'info'
    }
  })

  const statusText = computed(() => {
    switch (props.merchant?.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 operatingModeText = computed(() => {
    switch (props.merchant?.operatingMode) {
      case OperatingMode.SameEntity:
        return t('merchant.operatingMode.same')
      case OperatingMode.DifferentEntity:
        return t('merchant.operatingMode.different')
      default:
        return '-'
    }
  })

  const formatDateTime = (value?: string | null) => {
    if (!value) return '-'
    const date = new Date(value)
    return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
  }
</script>
