<template>
  <div class="create-update-bank-account">
    <form @submit.prevent="onSubmit">
      <div class="row">
        <!-- Số tài khoản -->
        <div class="col-md-6 mb-3">
          <label for="accountNumber" class="form-label">
            Số tài khoản <span class="text-danger">*</span>
          </label>
          <input id="accountNumber" v-model="formData.AccountNumber" type="text" class="form-control"
            :class="{ 'is-invalid': errors.accountNumber }" placeholder="Nhập số tài khoản" maxlength="64"
            @input="validateAccountNumber" />
          <div v-if="errors.accountNumber" class="invalid-feedback">
            {{ errors.accountNumber }}
          </div>
        </div>

        <!-- Tên chủ tài khoản -->
        <div class="col-md-6 mb-3">
          <label for="accountHolderName" class="form-label">
            Tên chủ tài khoản <span class="text-danger">*</span>
          </label>
          <input id="accountHolderName" v-model="formData.AccountHolderName" type="text" class="form-control"
            :class="{ 'is-invalid': errors.accountHolderName }" placeholder="Nhập tên chủ tài khoản" maxlength="256"
            @blur="validateAccountHolderName" />
          <div v-if="errors.accountHolderName" class="invalid-feedback">
            {{ errors.accountHolderName }}
          </div>
        </div>

        <!-- Mã ngân hàng -->
        <div class="col-md-6 mb-3">
          <label for="bankCode" class="form-label">
            Mã ngân hàng <span class="text-danger">*</span>
          </label>
          <input id="bankCode" v-model="formData.BankCode" type="text" class="form-control"
            :class="{ 'is-invalid': errors.bankCode }" placeholder="VD: VCB, TCB, ACB..." maxlength="16"
            @blur="validateBankCode" />
          <div v-if="errors.bankCode" class="invalid-feedback">
            {{ errors.bankCode }}
          </div>
        </div>

        <!-- Tên ngân hàng -->
        <div class="col-md-6 mb-3">
          <label for="bankName" class="form-label">
            Tên ngân hàng <span class="text-danger">*</span>
          </label>
          <input id="bankName" v-model="formData.BankName" type="text" class="form-control"
            :class="{ 'is-invalid': errors.bankName }" placeholder="Nhập tên ngân hàng" maxlength="256"
            @blur="validateBankName" />
          <div v-if="errors.bankName" class="invalid-feedback">
            {{ errors.bankName }}
          </div>
        </div>

        <!-- Tên chi nhánh -->
        <div class="col-md-6 mb-3">
          <label for="branchName" class="form-label">Tên chi nhánh</label>
          <input id="branchName" v-model="formData.BranchName" type="text" class="form-control"
            placeholder="Nhập tên chi nhánh" maxlength="256" />
        </div>

        <!-- Địa chỉ chi nhánh -->
        <div class="col-md-6 mb-3">
          <label for="branchAddress" class="form-label">Địa chỉ chi nhánh</label>
          <input id="branchAddress" v-model="formData.BranchAddress" type="text" class="form-control"
            placeholder="Nhập địa chỉ chi nhánh" maxlength="512" />
        </div>

        <!-- Đặt làm mặc định -->
        <div class="col-12 mb-3">
          <div class="form-check">
            <input id="isDefault" v-model="formData.IsDefault" type="checkbox" class="form-check-input" />
            <label for="isDefault" class="form-check-label">
              Đặt làm tài khoản mặc định
            </label>
          </div>
          <small class="text-muted">
            Tài khoản mặc định sẽ được sử dụng làm tài khoản chính cho các giao dịch
          </small>
        </div>

        <!-- Ghi chú -->
        <div class="col-12 mb-3">
          <label for="note" class="form-label">Ghi chú</label>
          <textarea id="note" v-model="formData.Note" class="form-control" rows="3"
            placeholder="Nhập ghi chú (tùy chọn)" maxlength="512"></textarea>
          <div class="form-text">
            {{ formData.Note?.length || 0 }}/512 ký tự
          </div>
        </div>
      </div>

      <!-- Buttons -->
      <div class="d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-secondary" @click="cancel" :disabled="loading">
          Hủy
        </button>
        <button type="submit" class="btn btn-primary" :disabled="loading || !isFormValid">
          <span v-if="loading" class="spinner-border spinner-border-sm me-2" role="status"></span>
          {{ formData.Id === 0 ? 'Tạo mới' : 'Cập nhật' }}
        </button>
      </div>
    </form>
  </div>
</template>

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

const toast = useToast();

// Props
const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  customerId: {
    type: [String, Number],
    required: true
  }
});

// Emits
const emit = defineEmits(['cancel']);

// Data
const loading = ref(false);

const formData = reactive({
  Id: props.id,
  CustomerId: props.customerId,
  AccountNumber: '',
  AccountHolderName: '',
  BankCode: '',
  BankName: '',
  BranchName: '',
  BranchAddress: '',
  IsDefault: false,
  Note: ''
});

const errors = reactive({
  accountNumber: '',
  accountHolderName: '',
  bankCode: '',
  bankName: ''
});

// Computed
const isFormValid = computed(() => {
  return formData.AccountNumber.trim() &&
    formData.AccountHolderName.trim() &&
    formData.BankCode.trim() &&
    formData.BankName.trim() &&
    !Object.values(errors).some(error => error);
});

// Methods
async function getById(id) {
  var bankAccountResult = await customerBankAccountService.getById(id);
  formData.Id = bankAccountResult.Id;
  formData.AccountNumber = bankAccountResult.AccountNumber;
  formData.AccountHolderName = bankAccountResult.AccountHolderName;
  formData.BankCode = bankAccountResult.BankCode;
  formData.BankName = bankAccountResult.BankName;
  formData.BranchName = bankAccountResult.BranchName || '';
  formData.BranchAddress = bankAccountResult.BranchAddress || '';
  formData.IsDefault = bankAccountResult.IsDefault;
  formData.Note = bankAccountResult.Note || '';
  formData.CustomerId = props.customerId;
}

function cancel() {
  emit('cancel');
}

// Validation methods
function validateAccountNumber() {
  const value = formData.AccountNumber.trim();
  if (!value) {
    errors.accountNumber = 'Số tài khoản không được để trống';
  } else if (!/^\d+$/.test(value)) {
    errors.accountNumber = 'Số tài khoản chỉ được chứa số';
  } else if (value.length < 6 || value.length > 64) {
    errors.accountNumber = 'Số tài khoản phải có độ dài từ 6-64 ký tự';
  } else {
    errors.accountNumber = '';
  }
}

function validateAccountHolderName() {
  const value = formData.AccountHolderName.trim();
  if (!value) {
    errors.accountHolderName = 'Tên chủ tài khoản không được để trống';
  } else if (value.length > 256) {
    errors.accountHolderName = 'Tên chủ tài khoản không được vượt quá 256 ký tự';
  } else {
    errors.accountHolderName = '';
  }
}

function validateBankCode() {
  const value = formData.BankCode.trim();
  if (!value) {
    errors.bankCode = 'Mã ngân hàng không được để trống';
  } else if (value.length > 16) {
    errors.bankCode = 'Mã ngân hàng không được vượt quá 16 ký tự';
  } else {
    errors.bankCode = '';
  }
}

function validateBankName() {
  const value = formData.BankName.trim();
  if (!value) {
    errors.bankName = 'Tên ngân hàng không được để trống';
  } else if (value.length > 256) {
    errors.bankName = 'Tên ngân hàng không được vượt quá 256 ký tự';
  } else {
    errors.bankName = '';
  }
}

function validateForm() {
  validateAccountNumber();
  validateAccountHolderName();
  validateBankCode();
  validateBankName();

  return !Object.values(errors).some(error => error);
}

async function onSubmit() {
  if (!validateForm()) {
    toast.error('Vui lòng kiểm tra lại thông tin đã nhập');
    return;
  }

  try {
    loading.value = true;

    var bankAccountModel = formData;
    bankAccountModel.UpdatedByUserName = "";
    bankAccountModel.UpdatedBy = 0;

    const result = await customerBankAccountService.createOrUpdate(bankAccountModel);

    if (result != null && result.Result === 1) {
      toast.success('Thành công!');
      cancel();
    } else {
      toast.error('Thất bại: ' + result.Message);
    }
  } catch (error) {
    console.error('Error saving bank account:', error);
    toast.error('Có lỗi xảy ra khi lưu tài khoản ngân hàng');
  } finally {
    loading.value = false;
  }
}

// Lifecycle
onMounted(async () => {
  if (props.id > 0) {
    loading.value = true;
    await getById(props.id);
    loading.value = false;
  }
});
</script>

<style scoped>
.create-update-bank-account {
  max-width: 100%;
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

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

.form-check-label {
  font-weight: 500;
}

.gap-2 {
  gap: 0.5rem;
}

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

@media (max-width: 768px) {
  .d-flex.gap-2 {
    flex-direction: column;
  }

  .d-flex.gap-2 .btn {
    width: 100%;
  }
}
</style>
