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

      <div class="mb-3">
        <label class="form-label">Chứng từ thanh toán (ID)</label>
        <input type="text" 
          v-model="formData.PaymentProofMediaId" 
          class="form-control"
          placeholder="Nhập ID chứng từ thanh toán (Guid)"
          pattern="[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}" />
        <div class="form-text">Định dạng: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</div>
      </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ề thanh toán..."></textarea>
        <div class="form-text">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,
  PaidDate: new Date(),
  PaymentProofMediaId: '',
  Note: ''
});

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

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

    const result = await customerReconciliationService.updatePaid(submitData);

    if (result && result.Success) {
      toast.success(result.Message || 'Cập nhật đã thanh toá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 paid:', error);
    toast.error('Có lỗi xảy ra khi cập nhật đã thanh toán');
  } finally {
    loading.value = false;
  }
};
</script>
