<template>
  <div class="confirm-delete-bank-account">
    <!-- Warning Icon -->
    <div class="text-center mb-4">
      <i class="fas fa-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
    </div>

    <!-- Confirmation Message -->
    <div class="confirmation-content">
      <p class="mb-3">
        Bạn có chắc chắn muốn xóa tài khoản ngân hàng sau?
      </p>
      
      <!-- Account Info -->
      <div class="account-info bg-light p-3 rounded mb-3">
        <div class="row">
          <div class="col-sm-4">
            <strong>Số tài khoản:</strong>
          </div>
          <div class="col-sm-8">
            {{ account.accountNumber }}
          </div>
        </div>
        
        <div class="row mt-2">
          <div class="col-sm-4">
            <strong>Tên chủ TK:</strong>
          </div>
          <div class="col-sm-8">
            {{ account.accountHolderName }}
          </div>
        </div>
        
        <div class="row mt-2">
          <div class="col-sm-4">
            <strong>Ngân hàng:</strong>
          </div>
          <div class="col-sm-8">
            {{ account.bankName }} ({{ account.bankCode }})
          </div>
        </div>
        
        <div class="row mt-2" v-if="account.isDefault">
          <div class="col-sm-4">
            <strong>Trạng thái:</strong>
          </div>
          <div class="col-sm-8">
            <span class="badge bg-success">
              <i class="fas fa-star me-1"></i>
              Tài khoản mặc định
            </span>
          </div>
        </div>
      </div>

      <!-- Warning for default account -->
      <div v-if="account.isDefault && cannotDeleteDefault" class="alert alert-warning">
        <i class="fas fa-exclamation-triangle me-2"></i>
        <strong>Không thể xóa!</strong>
        <br>
        Đây là tài khoản mặc định và là tài khoản duy nhất của khách hàng. 
        Vui lòng thêm tài khoản khác và đặt làm mặc định trước khi xóa tài khoản này.
      </div>

      <!-- Warning for default account with other accounts -->
      <div v-else-if="account.isDefault" class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>
        <strong>Lưu ý:</strong>
        <br>
        Đây là tài khoản mặc định. Sau khi xóa, hệ thống sẽ tự động đặt một tài khoản khác làm mặc định.
      </div>

      <!-- General warning -->
      <div class="alert alert-danger">
        <i class="fas fa-exclamation-circle me-2"></i>
        <strong>Cảnh báo:</strong>
        <br>
        Hành động này không thể hoàn tác. Tài khoản ngân hàng sẽ bị xóa vĩnh viễn khỏi hệ thống.
      </div>
    </div>

    <!-- Buttons -->
    <div class="d-flex justify-content-end gap-2">
      <button
        type="button"
        class="btn btn-secondary"
        @click="handleCancel"
        :disabled="loading"
      >
        Hủy
      </button>
      <button
        type="button"
        class="btn btn-danger"
        @click="handleConfirm"
        :disabled="loading || (account.isDefault && cannotDeleteDefault)"
      >
        <span v-if="loading" class="spinner-border spinner-border-sm me-2" role="status"></span>
        <i v-else class="fas fa-trash me-1"></i>
        Xóa tài khoản
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// Props
const props = defineProps({
  account: {
    type: Object,
    required: true,
    default: () => ({})
  },
  totalAccounts: {
    type: Number,
    default: 1
  }
});

// Emits
const emit = defineEmits(['cancel', 'confirmed']);

// Data
const loading = ref(false);

// Computed
const cannotDeleteDefault = computed(() => {
  return props.account.isDefault && props.totalAccounts <= 1;
});

// Methods
function handleCancel() {
  emit('cancel');
}

async function handleConfirm() {
  if (cannotDeleteDefault.value) {
    return;
  }

  loading.value = true;
  
  try {
    emit('confirmed');
  } finally {
    loading.value = false;
  }
}
</script>

<style scoped>
.confirm-delete-bank-account {
  max-width: 100%;
}

.confirmation-content {
  text-align: left;
}

.account-info {
  border: 1px solid #dee2e6;
}

.account-info .row {
  margin-bottom: 0;
}

.account-info .row:not(:last-child) {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 0.5rem;
}

.account-info .row:not(:first-child) {
  padding-top: 0.5rem;
}

.alert {
  margin-bottom: 1rem;
}

.alert i {
  vertical-align: middle;
}

.badge {
  font-size: 0.75rem;
}

.gap-2 {
  gap: 0.5rem;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 576px) {
  .account-info .col-sm-4,
  .account-info .col-sm-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .account-info .col-sm-4 {
    margin-bottom: 0.25rem;
  }
  
  .d-flex.gap-2 {
    flex-direction: column;
  }
  
  .d-flex.gap-2 .btn {
    width: 100%;
  }
}
</style>
