<template>
  <div class="modal-body-content">
    <form @submit.prevent="handleSubmit">
      <div class="alert alert-warning">
        <i class="bx bx-error-circle me-2"></i>
        <strong>Cảnh báo:</strong> Hủy đối soát sẽ trả các đơn hàng về trạng thái chưa đối soát.
      </div>

      <div class="mb-3">
        <label class="form-label">Lý do hủy <span class="text-danger">*</span></label>
        <textarea v-model="formData.CancelReason" 
          class="form-control" 
          rows="3" 
          maxlength="512"
          placeholder="Nhập lý do hủy đối soát..."
          required></textarea>
        <div class="form-text">Bắt buộc, tối đa 512 ký tự</div>
      </div>

      <div class="mb-3">
        <label class="form-label">Ghi chú bổ sung</label>
        <textarea v-model="formData.Note" 
          class="form-control" 
          rows="3" 
          maxlength="2048"
          placeholder="Nhập ghi chú bổ sung..."></textarea>
        <div class="form-text">Tối đa 2048 ký tự</div>
      </div>

      <div class="mb-3 form-check">
        <input type="checkbox" 
          class="form-check-input" 
          id="createOrderTrack"
          v-model="formData.CreateOrderTrack" />
        <label class="form-check-label" for="createOrderTrack">
          Tạo track log cho các đơn hàng
        </label>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" @click="$emit('cancel')" :disabled="loading">
          <i class="bx bx-x me-1"></i>
          Đóng
        </button>
        <button type="submit" class="btn btn-danger" :disabled="loading || !formData.CancelReason">
          <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
          <i v-else class="bx bx-trash me-1"></i>
          Hủy đối soát
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useToast } from 'vue-toastification';
import customerReconciliationService from '@/services/customerReconciliationService';

const props = defineProps({
  reconciliation: {
    type: Object,
    required: true
  }
});

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

const loading = ref(false);
const formData = reactive({
  ReconciliationId: props.reconciliation.Id,
  CancelReason: '',
  Note: '',
  CreateOrderTrack: true
});

const handleSubmit = async () => {
  if (!formData.CancelReason || formData.CancelReason.trim() === '') {
    toast.warning('Vui lòng nhập lý do hủy');
    return;
  }

  if (!confirm(`Bạn có chắc chắn muốn hủy đối soát ${props.reconciliation.Code}?`)) {
    return;
  }

  try {
    loading.value = true;

    const submitData = {
      ReconciliationId: formData.ReconciliationId,
      CancelReason: formData.CancelReason.trim(),
      Note: formData.Note || null,
      CreateOrderTrack: formData.CreateOrderTrack
    };

    const result = await customerReconciliationService.cancel(submitData);

    if (result && result.Success) {
      toast.success(result.Message || 'Hủy đối soát thành công');
      emit('success');
    } else {
      toast.error(result?.Message || 'Có lỗi xảy ra khi hủy đối soát');
    }
  } catch (error) {
    console.error('Error cancelling reconciliation:', error);
    toast.error('Có lỗi xảy ra khi hủy đối soát');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.alert {
  border-radius: 0.375rem;
}

.modal-footer {
  border-top: 1px solid #dee2e6;
  padding-top: 1rem;
  margin-top: 1rem;
}
</style>
