<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div class="row">
        <!-- Tên công ty -->
        <div class="col-md-12 mb-3">
          <label for="companyName" class="form-label">
            Tên công ty <span class="text-danger">*</span>
          </label>
          <input type="text" class="form-control" id="companyName" v-model="model.companyName"
            :class="{ 'is-invalid': errors.companyName }" maxlength="200" placeholder="Nhập tên công ty" />
          <div v-if="errors.companyName" class="invalid-feedback">
            {{ errors.companyName }}
          </div>
        </div>

        <!-- Mã số thuế -->
        <div class="col-md-6 mb-3">
          <label for="taxCode" class="form-label">
            Mã số thuế <span class="text-danger">*</span>
          </label>
          <input type="text" class="form-control" id="taxCode" v-model="model.taxCode"
            :class="{ 'is-invalid': errors.taxCode }" maxlength="20" placeholder="Nhập mã số thuế" />
          <div v-if="errors.taxCode" class="invalid-feedback">
            {{ errors.taxCode }}
          </div>
        </div>

        <!-- Email hóa đơn -->
        <div class="col-md-6 mb-3">
          <label for="invoiceEmail" class="form-label">
            Email nhận hóa đơn <span class="text-danger">*</span>
          </label>
          <input type="email" class="form-control" id="invoiceEmail" v-model="model.invoiceEmail"
            :class="{ 'is-invalid': errors.invoiceEmail }" maxlength="100" placeholder="Nhập email nhận hóa đơn" />
          <div v-if="errors.invoiceEmail" class="invalid-feedback">
            {{ errors.invoiceEmail }}
          </div>
        </div>

        <!-- Địa chỉ -->
        <div class="col-md-12 mb-3">
          <label for="address" class="form-label">
            Địa chỉ <span class="text-danger">*</span>
          </label>
          <textarea class="form-control" id="address" v-model="model.address" :class="{ 'is-invalid': errors.address }"
            maxlength="500" rows="3" placeholder="Nhập địa chỉ công ty"></textarea>
          <div v-if="errors.address" class="invalid-feedback">
            {{ errors.address }}
          </div>
        </div>

        <!-- Tên người liên hệ -->
        <div class="col-md-6 mb-3">
          <label for="contactName" class="form-label">
            Tên người liên hệ <span class="text-danger">*</span>
          </label>
          <input type="text" class="form-control" id="contactName" v-model="model.contactName"
            :class="{ 'is-invalid': errors.contactName }" maxlength="100" placeholder="Nhập tên người liên hệ" />
          <div v-if="errors.contactName" class="invalid-feedback">
            {{ errors.contactName }}
          </div>
        </div>

        <!-- Số điện thoại liên hệ -->
        <div class="col-md-6 mb-3">
          <label for="contactPhone" class="form-label">
            Số điện thoại <span class="text-danger">*</span>
          </label>
          <input type="tel" class="form-control" id="contactPhone" v-model="model.contactPhone"
            :class="{ 'is-invalid': errors.contactPhone }" maxlength="20" placeholder="Nhập số điện thoại" />
          <div v-if="errors.contactPhone" class="invalid-feedback">
            {{ errors.contactPhone }}
          </div>
        </div>

        <!-- Đặt làm mặc định -->
        <div class="col-md-12 mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="isDefault" v-model="model.isDefault" />
            <label class="form-check-label" for="isDefault">
              Đặt làm thông tin VAT mặc định
            </label>
          </div>
        </div>

        <!-- Ghi chú -->
        <div class="col-md-12 mb-3">
          <label for="note" class="form-label">Ghi chú</label>
          <textarea class="form-control" id="note" v-model="model.note" :class="{ 'is-invalid': errors.note }"
            maxlength="1000" rows="3" placeholder="Nhập ghi chú (tùy chọn)"></textarea>
          <div v-if="errors.note" class="invalid-feedback">
            {{ errors.note }}
          </div>
        </div>
      </div>

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

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

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

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

//#region DATA
const loading = ref(false);

const model = reactive({
  id: 0,
  customerId: 0,
  companyName: '',
  taxCode: '',
  invoiceEmail: '',
  address: '',
  contactName: '',
  contactPhone: '',
  note: '',
  isDefault: false
});

const errors = reactive({
  companyName: '',
  taxCode: '',
  invoiceEmail: '',
  address: '',
  contactName: '',
  contactPhone: '',
  note: ''
});
//#endregion

//#region Methods
function clearErrors() {
  Object.keys(errors).forEach(key => {
    errors[key] = '';
  });
}

function validateForm() {
  clearErrors();
  let isValid = true;

  // Validate required fields
  if (!model.companyName.trim()) {
    errors.companyName = 'Tên công ty là bắt buộc';
    isValid = false;
  } else if (model.companyName.length > 200) {
    errors.companyName = 'Tên công ty không được vượt quá 200 ký tự';
    isValid = false;
  }

  if (!model.invoiceEmail.trim()) {
    errors.invoiceEmail = 'Email hóa đơn là bắt buộc';
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(model.invoiceEmail)) {
    errors.invoiceEmail = 'Email không đúng định dạng';
    isValid = false;
  } else if (model.invoiceEmail.length > 100) {
    errors.invoiceEmail = 'Email không được vượt quá 100 ký tự';
    isValid = false;
  }

  if (!model.address.trim()) {
    errors.address = 'Địa chỉ là bắt buộc';
    isValid = false;
  } else if (model.address.length > 500) {
    errors.address = 'Địa chỉ không được vượt quá 500 ký tự';
    isValid = false;
  }

  if (!model.contactName.trim()) {
    errors.contactName = 'Tên người liên hệ là bắt buộc';
    isValid = false;
  } else if (model.contactName.length > 100) {
    errors.contactName = 'Tên người liên hệ không được vượt quá 100 ký tự';
    isValid = false;
  }

  if (!model.contactPhone.trim()) {
    errors.contactPhone = 'Số điện thoại là bắt buộc';
    isValid = false;
  } else if (model.contactPhone.length > 20) {
    errors.contactPhone = 'Số điện thoại không được vượt quá 20 ký tự';
    isValid = false;
  }

  if (!model.taxCode.trim()) {
    errors.taxCode = 'Mã số thuế là bắt buộc';
    isValid = false;
  } else if (model.taxCode.length > 20) {
    errors.taxCode = 'Mã số thuế không được vượt quá 20 ký tự';
    isValid = false;
  }

  // Validate optional fields

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

  return isValid;
}

async function loadData() {
  if (props.id <= 0) return;

  try {
    loading.value = true;
    const result = await vatInfoService.getById(props.id);

    if (result) {
      Object.assign(model, {
        id: result.Id || 0,
        customerId: result.CustomerId || props.customerId,
        companyName: result.CompanyName || '',
        taxCode: result.TaxCode || '',
        invoiceEmail: result.InvoiceEmail || '',
        address: result.Address || '',
        contactName: result.ContactName || '',
        contactPhone: result.ContactPhone || '',
        note: result.Note || '',
        isDefault: result.IsDefault || false
      });
    }
  } catch (error) {
    console.error('Error loading VAT info:', error);
    toast.error('Có lỗi xảy ra khi tải dữ liệu');
  } finally {
    loading.value = false;
  }
}

async function handleSubmit() {
  if (!validateForm()) return;

  try {
    loading.value = true;

    const submitModel = {
      ...model,
      customerId: Number(props.customerId)
    };

    if (submitModel.id <= 0) {
      delete submitModel.id;
    }

    const result = await vatInfoService.createOrUpdate(submitModel);

    if (result && result.Result === 1) {
      toast.success(props.id > 0 ? 'Cập nhật thành công!' : 'Thêm mới thành công!');
      emit('success');
    } else {
      toast.error('Thất bại: ' + (result.Message || 'Có lỗi xảy ra'));
    }
  } catch (error) {
    console.error('Error saving VAT info:', error);
    toast.error('Có lỗi xảy ra khi lưu dữ liệu');
  } finally {
    loading.value = false;
  }
}

function handleCancel() {
  emit('cancel');
}
//#endregion

//#region Events
onMounted(async () => {
  model.customerId = Number(props.customerId);
  await loadData();
});
//#endregion
</script>

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

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

.gap-2 {
  gap: 0.5rem;
}
</style>
