<template>
  <div>
    <div v-if="loading" class="text-center py-4">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Đang tải...</span>
      </div>
    </div>

    <div v-else-if="model.id" class="confirm-delete-content">
      <!-- Warning icon and message -->
      <div class="text-center mb-4">
        <i class="fas fa-exclamation-triangle fa-4x text-warning mb-3"></i>
        <h5 class="text-danger mb-2">Xác nhận xóa thông tin VAT</h5>
        <p class="text-muted">
          Bạn có chắc chắn muốn xóa thông tin xuất hóa đơn VAT này không?<br>
          <strong>Hành động này không thể hoàn tác!</strong>
        </p>
      </div>

      <!-- VAT Info Summary -->
      <div class="card border-warning">
        <div class="card-header bg-warning bg-opacity-10">
          <h6 class="mb-0 text-warning">
            <i class="fas fa-file-invoice me-2"></i>Thông tin sẽ bị xóa
          </h6>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-12 mb-2">
              <strong>Tên công ty:</strong> {{ model.companyName }}
              <span v-if="model.isDefault" class="badge bg-success ms-2">Mặc định</span>
            </div>
            <div class="col-md-6 mb-2">
              <strong>Mã số thuế:</strong> {{ model.taxCode }}
            </div>
            <div class="col-md-6 mb-2">
              <strong>Email hóa đơn:</strong> {{ model.invoiceEmail }}
            </div>
            <div class="col-12 mb-2">
              <strong>Địa chỉ:</strong> {{ model.address }}
            </div>
            <div class="col-md-6 mb-2">
              <strong>Người liên hệ:</strong> {{ model.contactName }}
            </div>
            <div class="col-md-6 mb-2">
              <strong>Số điện thoại:</strong> {{ model.contactPhone }}
            </div>
            <div class="col-12 mb-0" v-if="model.note">
              <strong>Ghi chú:</strong> {{ model.note }}
            </div>
          </div>
        </div>
      </div>

      <!-- Warning for default VAT info -->
      <div v-if="model.isDefault" class="alert alert-warning mt-3" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i>
        <strong>Lưu ý:</strong> Đây là thông tin VAT mặc định của khách hàng.
        Sau khi xóa, bạn cần đặt một thông tin VAT khác làm mặc định (nếu có).
      </div>

      <!-- Confirmation checkbox -->
      <div class="form-check mt-4">
        <input class="form-check-input" type="checkbox" id="confirmDelete" v-model="confirmChecked" />
        <label class="form-check-label" for="confirmDelete">
          Tôi hiểu rằng hành động này không thể hoàn tác và đồng ý xóa thông tin VAT này.
        </label>
      </div>
    </div>

    <div v-else class="text-center py-4">
      <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
      <p class="text-muted">Không tìm thấy thông tin VAT để xóa.</p>
    </div>

    <!-- Footer buttons -->
    <div class="d-flex justify-content-end gap-2 mt-4">
      <button type="button" class="btn btn-secondary" @click="handleCancel" :disabled="deleting">
        Hủy
      </button>
      <button type="button" class="btn btn-danger" @click="handleDelete"
        :disabled="!confirmChecked || deleting || !model.id">
        <span v-if="deleting" class="spinner-border spinner-border-sm me-2" role="status"></span>
        <i v-else class="fas fa-trash me-2"></i>
        Xóa thông tin VAT
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import vatInfoService from "@/services/vatInfoService.js";
import { useToast } from "vue-toastification";

const toast = useToast();
const emit = defineEmits(['cancel', 'success']);

//#region props
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
});
//#endregion

//#region DATA
const loading = ref(false);
const deleting = ref(false);
const confirmChecked = ref(false);

const model = reactive({
  id: 0,
  customerId: 0,
  companyName: '',
  taxCode: '',
  invoiceEmail: '',
  address: '',
  contactName: '',
  contactPhone: '',
  note: '',
  isDefault: false
});
//#endregion

//#region Methods
async function loadData() {
  if (!props.id || props.id <= 0) return;

  try {
    loading.value = true;
    const result = await vatInfoService.getById(props.id);

    if (result) {
      Object.assign(model, {
        id: result.Id || 0,
        customerId: result.CustomerId || 0,
        companyName: result.CompanyName || '',
        taxCode: result.TaxCode || '',
        invoiceEmail: result.InvoiceEmail || '',
        address: result.Address || '',
        contactName: result.ContactName || '',
        contactPhone: result.ContactPhone || '',
        note: result.Note || '',
        isDefault: result.IsDefault || false
      });
    }
  } catch (error) {
    console.error('Error loading VAT info for delete:', error);
    toast.error('Có lỗi xảy ra khi tải dữ liệu');
  } finally {
    loading.value = false;
  }
}

async function handleDelete() {
  if (!confirmChecked.value || !model.id) return;

  try {
    deleting.value = true;
    const result = await vatInfoService.delete(model.id);

    if (result && result.Result === 1) {
      toast.success('Xóa thông tin VAT thành công!');
      emit('success');
    } else {
      toast.error('Thất bại: ' + (result.Message || 'Có lỗi xảy ra khi xóa'));
    }
  } catch (error) {
    console.error('Error deleting VAT info:', error);
    toast.error('Có lỗi xảy ra khi xóa thông tin VAT');
  } finally {
    deleting.value = false;
  }
}

function handleCancel() {
  emit('cancel');
}
//#endregion

//#region Events
onMounted(async () => {
  await loadData();
});
//#endregion
</script>

<style scoped>
.confirm-delete-content {
  max-height: 70vh;
  overflow-y: auto;
}

.text-warning {
  color: #ffc107 !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-muted {
  color: #6c757d !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

.bg-opacity-10 {
  background-color: rgba(255, 193, 7, 0.1) !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.gap-2 {
  gap: 0.5rem;
}

.card {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

.card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-radius: 0.375rem 0.375rem 0 0;
}

.card-body {
  padding: 1rem;
}

.alert {
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
}

.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  margin-left: -1.5em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0.25em;
}

.form-check-label {
  color: #212529;
}

.badge {
  font-size: 0.75rem;
}
</style>
