<template>
  <div class="batch-action-toolbar">
    <div class="toolbar-left">
      <ElButton
        type="success"
        :disabled="!hasSelection || isLoading"
        :loading="isLoading"
        @click="handleBatchConfirm"
      >
        <ArtSvgIcon icon="ri:check-double-line" class="mr-1" />
        {{ $t('billing.batch.confirmPayment') }}
      </ElButton>
      <ElButton
        type="danger"
        :disabled="!hasSelection || isLoading"
        :loading="isLoading"
        @click="handleBatchCancel"
      >
        <ArtSvgIcon icon="ri:close-circle-line" class="mr-1" />
        {{ $t('billing.batch.cancel') }}
      </ElButton>
      <ElButton
        type="primary"
        :disabled="!hasSelection || isLoading"
        :loading="isLoading"
        @click="handleBatchExport"
      >
        <ArtSvgIcon icon="ri:download-2-line" class="mr-1" />
        {{ $t('billing.batch.export') }}
      </ElButton>
    </div>
    <div class="toolbar-right">
      <span v-if="hasSelection" class="selected-count">
        {{ $t('billing.batch.selectedCount', { count: selectedCount }) }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ElButton, ElMessageBox } from 'element-plus'
  import ArtSvgIcon from '@/components/core/base/art-svg-icon/index.vue'

  interface Props {
    selectedRows: Api.Billing.BillingListDto[]
    loading?: boolean
  }

  interface Emits {
    (e: 'confirm'): void
    (e: 'cancel'): void
    (e: 'export'): void
  }

  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()

  const { t } = useI18n()

  const hasSelection = computed(() => props.selectedRows.length > 0)
  const selectedCount = computed(() => props.selectedRows.length)
  const isLoading = computed(() => props.loading ?? false)

  const handleBatchConfirm = async () => {
    try {
      await ElMessageBox.confirm(
        t('billing.batch.confirmPaymentTip', { count: selectedCount.value }),
        t('common.warning'),
        {
          confirmButtonText: t('common.confirm'),
          cancelButtonText: t('common.cancel'),
          type: 'warning'
        }
      )
      emit('confirm')
    } catch {
      // User cancelled
    }
  }

  const handleBatchCancel = async () => {
    try {
      await ElMessageBox.confirm(
        t('billing.batch.cancelTip', { count: selectedCount.value }),
        t('common.warning'),
        {
          confirmButtonText: t('common.confirm'),
          cancelButtonText: t('common.cancel'),
          type: 'warning'
        }
      )
      emit('cancel')
    } catch {
      // User cancelled
    }
  }

  const handleBatchExport = () => {
    emit('export')
  }
</script>

<style scoped>
  .batch-action-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
  }

  .toolbar-left {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .toolbar-right {
    display: flex;
    align-items: center;
  }

  .selected-count {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    white-space: nowrap;
  }

  .mr-1 {
    margin-right: 4px;
  }
</style>
