<template>
  <div class="modal-body-content">
    <form @submit.prevent="handleSubmit">
      <div class="mb-3">
        <label class="form-label">Ngày chuyển tiền</label>
        <VueDatePicker v-model="formData.TransferDate" 
          :enable-time-picker="true" 
          format="dd/MM/yyyy HH:mm"
          placeholder="Chọn ngày giờ chuyển tiền" />
      </div>

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

      <div class="mb-3">
        <label class="form-label">Thông tin chuyển khoản (JSON)</label>
        <textarea v-model="formData.TransferInfo" 
          class="form-control" 
          rows="4"
          maxlength="2048"
          placeholder='{"BankTransactionId": "TXN123456"}'></textarea>
        <div class="form-text">Nhập thông tin bổ sung dạng JSON, tối đa 2048 ký tự</div>
      </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>
          Hủy
        </button>
        <button type="submit" class="btn btn-success" :disabled="loading">
          <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
          <i v-else class="bx bx-check me-1"></i>
          Xác nhận
        </button>
      </div>
    </form>
  </div>
</template>

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

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,
  TransferDate: new Date(),
  Note: '',
  TransferInfo: ''
});

const handleSubmit = async () => {
  try {
    loading.value = true;

    // Convert date to ISO string
    const submitData = {
      ReconciliationId: formData.ReconciliationId,
      TransferDate: formData.TransferDate ? dateToISOString(formData.TransferDate) : null,
      Note: formData.Note || null,
      TransferInfo: formData.TransferInfo || null
    };

    const result = await customerReconciliationService.updateTransferred(submitData);

    if (result && result.Success) {
      toast.success(result.Message || 'Cập nhật đã chuyển tiền thành công');
      emit('success');
    } else {
      toast.error(result?.Message || 'Có lỗi xảy ra khi cập nhật');
    }
  } catch (error) {
    console.error('Error updating transferred:', error);
    toast.error('Có lỗi xảy ra khi cập nhật đã chuyển tiền');
  } finally {
    loading.value = false;
  }
};
</script>
