<template>
  <!-- Thông tin đối soát -->
  <div v-if="reconciliation" class="alert alert-info mb-4">
    <div class="row">
      <div class="col-md-6">
        <strong>Mã đối soát:</strong> {{ reconciliation.Code }}
      </div>
      <div class="col-md-6">
        <strong>Tiền thực chuyển:</strong>
        <span class="text-success fw-bold">{{ formatCurrency(reconciliation.NetAmount) }}</span>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-md-6">
        <strong>Khách hàng:</strong> {{ reconciliation.Customer?.FullName || 'Chưa có' }}
      </div>
      <div class="col-md-6">
        <strong>Số đơn hàng:</strong> {{ reconciliation.OrderCount }}
      </div>
    </div>
  </div>

  <!-- Form cập nhật -->
  <div>
    <!-- Phương thức chuyển tiền -->
    <div class="mb-3">
      <label for="transferMethod" class="form-label fw-semibold">
        Phương thức chuyển tiền <span class="text-danger">*</span>
      </label>
      <select id="transferMethod" v-model="formData.transferMethod" class="form-select"
        :class="{ 'is-invalid': errors.transferMethod }" required>
        <option value="">-- Chọn phương thức chuyển tiền --</option>
        <option v-for="option in transferMethodOptions" :key="option.value" :value="option.value">
          {{ option.label }}
        </option>
      </select>
      <div v-if="errors.transferMethod" class="invalid-feedback">
        {{ errors.transferMethod }}
      </div>
    </div>

    <!-- Ghi chú -->
    <div class="mb-3">
      <label for="note" class="form-label fw-semibold">
        Ghi chú chuyển tiền
        <small class="text-muted">({{ formData.note?.length || 0 }}/1024)</small>
      </label>
      <textarea id="note" v-model="formData.note" class="form-control" :class="{ 'is-invalid': errors.note }" rows="3"
        maxlength="1024" placeholder="Nhập ghi chú về việc chuyển tiền..."></textarea>
      <div v-if="errors.note" class="invalid-feedback">
        {{ errors.note }}
      </div>
    </div>

    <!-- Thông tin bổ sung -->
    <div class="mb-3">
      <label for="additionalInfo" class="form-label fw-semibold">
        Thông tin bổ sung
        <small class="text-muted">({{ formData.additionalInfo?.length || 0 }}/2048)</small>
      </label>
      <textarea id="additionalInfo" v-model="formData.additionalInfo" class="form-control"
        :class="{ 'is-invalid': errors.additionalInfo }" rows="4" maxlength="2048"
        placeholder="Nhập thông tin bổ sung như số tài khoản, chi nhánh ngân hàng..."></textarea>
      <div v-if="errors.additionalInfo" class="invalid-feedback">
        {{ errors.additionalInfo }}
      </div>
    </div>



    <!-- Validation errors -->
    <div v-if="validationErrors.length > 0" class="alert alert-danger">
      <ul class="mb-0">
        <li v-for="error in validationErrors" :key="error">{{ error }}</li>
      </ul>
    </div>

    <!-- Footer buttons -->
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary" @click="cancel" :disabled="loading">
        <i class="bx bx-x me-1"></i>
        Hủy
      </button>
      <button type="button" class="btn btn-success" @click="handleSubmit" :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 chuyển tiền
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';
import { useToast } from 'vue-toastification';
import reconciliationService from '@/services/reconciliationService';
import {
  TransferMethod,
  TransferMethodOptions,
  validateTransferModel
} from '@/infrastructure/utilities/reconciliationConstants';
import { formatCurrency } from '@/infrastructure/utilities/reconciliationHelpers';

// Props & Emits
const props = defineProps({
  reconciliation: {
    type: Object,
    default: null
  }
});

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

// Reactive data
const loading = ref(false);

// Form data
const formData = reactive({
  reconciliationId: null,
  transferMethod: TransferMethod.BankTransfer, // Mặc định là chuyển khoản ngân hàng
  note: '',
  additionalInfo: '',
});

// Validation
const errors = reactive({
  transferMethod: '',
  note: '',
  additionalInfo: '',
});

const validationErrors = ref([]);

// Computed
const transferMethodOptions = computed(() =>
  TransferMethodOptions.filter(option => option.value === TransferMethod.BankTransfer) // Chỉ lấy Chuyển khoản ngân hàng
);

const toast = useToast();

// Methods
const resetForm = () => {
  formData.reconciliationId = null;
  formData.transferMethod = TransferMethod.BankTransfer; // Tự động chọn chuyển khoản ngân hàng
  formData.note = '';
  formData.additionalInfo = '';

  // Clear errors
  Object.keys(errors).forEach(key => {
    errors[key] = '';
  });
  validationErrors.value = [];
};

const initializeForm = () => {
  resetForm();
  if (props.reconciliation) {
    formData.reconciliationId = props.reconciliation.Id;
  }
};

const validateForm = () => {
  // Clear previous errors
  Object.keys(errors).forEach(key => {
    errors[key] = '';
  });

  const modelErrors = validateTransferModel(formData);
  validationErrors.value = modelErrors;

  // Set field-specific errors
  if (!formData.transferMethod) {
    errors.transferMethod = 'Vui lòng chọn phương thức chuyển tiền';
  }

  if (formData.note && formData.note.length > 1024) {
    errors.note = 'Ghi chú không được vượt quá 1024 ký tự';
  }

  if (formData.additionalInfo && formData.additionalInfo.length > 2048) {
    errors.additionalInfo = 'Thông tin bổ sung không được vượt quá 2048 ký tự';
  }

  return modelErrors.length === 0 && !Object.values(errors).some(error => error);
};

const handleSubmit = async () => {
  if (!validateForm()) {
    return;
  }

  // Show confirmation dialog
  const confirmMessage = `Bạn có chắc chắn muốn cập nhật đã chuyển tiền cho đối soát ${props.reconciliation?.Code}?\n\nThao tác này không thể hoàn tác.`;
  if (!confirm(confirmMessage)) {
    return;
  }

  try {
    loading.value = true;

    const result = await reconciliationService.updateTransferred(formData);

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

const cancel = () => {
  resetForm();
  emit('cancel');
};

// Watch for reconciliation changes
watch(() => props.reconciliation, () => {
  initializeForm();
}, { immediate: true });

// Expose methods
defineExpose({
  resetForm,
  initializeForm,
});
</script>

<style scoped>
.form-check-label {
  font-weight: 500;
}

.form-text {
  font-size: 0.875rem;
  color: #6c757d;
}

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

.alert-info {
  background-color: #e7f3ff;
  border-color: #b8daff;
  color: #004085;
}

.modal-footer {
  border-top: 1px solid #dee2e6;
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
</style>
