<template>
  <div class="expense-form">
    <form @submit.prevent="handleSubmit">
      <div class="row">
        <!-- Mã tả chi phí -->
        <div class="col-md-12 mb-3">
          <label class="form-label">Mã tả chi phí <span class="text-danger">*</span></label>
          <input 
            type="text" 
            class="form-control"
            v-model="formData.Description"
            placeholder="Nhập mã tả chi phí..."
            required
            :class="{ 'is-invalid': errors.Description }"
          />
          <div v-if="errors.Description" class="invalid-feedback">
            {{ errors.Description }}
          </div>
        </div>

        <!-- Số tiền -->
        <div class="col-md-6 mb-3">
          <label class="form-label">Số tiền <span class="text-danger">*</span></label>
          <VueNumberFormat 
            v-model:value="formData.Amount" 
            class="form-control"
            :options="{ precision: 0, prefix: '', suffix: ' VND', decimal: ',', thousand: '.', isInteger: true }"
            :class="{ 'is-invalid': errors.Amount }"
            required
          />
          <div v-if="errors.Amount" class="invalid-feedback">
            {{ errors.Amount }}
          </div>
        </div>

        <!-- Danh mục chi phí -->
        <div class="col-md-6 mb-3">
          <label class="form-label">Danh mục chi phí <span class="text-danger">*</span></label>
          <v-select
            v-model="selectedCategory"
            :options="expenseCategories"
            label="Name"
            :reduce="option => option.Id"
            placeholder="Chọn danh mục..."
            :class="{ 'is-invalid': errors.ExpenseCategoryId }"
            required
          />
          <div v-if="errors.ExpenseCategoryId" class="invalid-feedback">
            {{ errors.ExpenseCategoryId }}
          </div>
        </div>

        <!-- Ghi chú -->
        <div class="col-md-12 mb-3">
          <label class="form-label">Ghi chú</label>
          <textarea 
            class="form-control" 
            v-model="formData.Note"
            rows="3"
            placeholder="Nhập ghi chú..."
          ></textarea>
        </div>

        <!-- Trạng thái -->
        <div class="col-md-6 mb-3">
          <label class="form-label">Trạng thái</label>
          <v-select
            v-model="formData.Status"
            :options="statusOptions"
            label="Name"
            :reduce="option => option.Value"
            placeholder="Chọn trạng thái..."
          />
        </div>

        <!-- ID giao dịch -->
        <div class="col-md-6 mb-3">
          <label class="form-label">ID giao dịch</label>
          <input 
            type="text" 
            class="form-control"
            v-model="formData.TransactionId"
            placeholder="Nhập ID giao dịch..."
          />
        </div>

        <!-- ID đơn hàng -->
        <div class="col-md-6 mb-3">
          <label class="form-label">ID đơn hàng</label>
          <input 
            type="number" 
            class="form-control"
            v-model="formData.OrderId"
            placeholder="Nhập ID đơn hàng..."
          />
        </div>

        <!-- Người phê duyệt -->
        <div class="col-md-6 mb-3">
          <label class="form-label">Người phê duyệt</label>
          <LadaSelect
            v-model="formData.ApprovedBy"
            :options="userOptions"
            :searchFn="searchUsers"
            label="FullName"
            placeholder="Chọn người phê duyệt..."
          />
        </div>

        <!-- Lý do từ chối (chỉ hiển thị khi trạng thái là Rejected) -->
        <div v-if="formData.Status === 2" class="col-md-12 mb-3">
          <label class="form-label">Lý do từ chối</label>
          <textarea 
            class="form-control" 
            v-model="formData.RejectReason"
            rows="3"
            placeholder="Nhập lý do từ chối..."
          ></textarea>
        </div>
      </div>

      <div class="d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-secondary" @click="handleCancel">
          Hủy
        </button>
        <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
          <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
          {{ isEdit ? 'Cập nhật' : 'Tạo mới' }}
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import expenseCategoryService from '@/services/expenseCategoryService'
import userService from '@/services/userService'
import LadaSelect from '@/components/LadaSelect.vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  isSubmitting: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'submit', 'cancel'])

// Data
const expenseCategories = ref([])
const errors = ref({})
const userOptions = ref([])

// Computed
const formData = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const selectedCategory = computed({
  get: () => {
    const category = expenseCategories.value.find(c => c.Id === props.modelValue.ExpenseCategoryId)
    if (category) {
      formData.value.ExpenseCategoryName = category.Name
    }
    return props.modelValue.ExpenseCategoryId
  },
  set: (value) => {
    formData.value.ExpenseCategoryId = value
    const category = expenseCategories.value.find(c => c.Id === value)
    formData.value.ExpenseCategoryName = category ? category.Name : ''
  }
})

// Status options
const statusOptions = [
  { Name: 'Đang chờ xử lý', Value: 0 },
  { Name: 'Đã phê duyệt', Value: 1 },
  { Name: 'Đã từ chối', Value: 2 },
  { Name: 'Đã thanh toán', Value: 3 }
]

// Methods
const validateForm = () => {
  errors.value = {}
  
  if (!formData.value.Description?.trim()) {
    errors.value.Description = 'Mã tả chi phí là bắt buộc'
  }
  
  if (!formData.value.Amount || formData.value.Amount <= 0) {
    errors.value.Amount = 'Số tiền phải lớn hơn 0'
  }
  
  if (!formData.value.ExpenseCategoryId) {
    errors.value.ExpenseCategoryId = 'Danh mục chi phí là bắt buộc'
  }
  
  return Object.keys(errors.value).length === 0
}

const handleSubmit = () => {
  if (validateForm()) {
    emit('submit', formData.value)
  }
}

const handleCancel = () => {
  emit('cancel')
}

const loadExpenseCategories = async () => {
  try {
    expenseCategories.value = await expenseCategoryService.getAll()
  } catch (error) {
    console.error('Error loading expense categories:', error)
  }
}

// Staff search for approver
const searchUsers = async (keyword) => {
  try {
    if (!keyword || keyword.length < 2) { userOptions.value = []; return }
    const result = await userService.sugStaff(keyword)
    userOptions.value = Array.isArray(result) ? result : []
  } catch (e) {
    console.error('searchUsers error', e)
  }
}

// Ensure current ApprovedBy exists in options
const ensureApproverOption = async () => {
  const id = formData.value?.ApprovedBy
  if (!id) return
  if (!userOptions.value.some(u => u.Id === id)) {
    try {
      const u = await userService.getStaff(id)
      if (u && u.Id) userOptions.value.push(u)
    } catch (e) { console.warn('getStaff failed', e) }
  }
}

// Lifecycle
onMounted(async () => {
  loadExpenseCategories()
  await ensureApproverOption()
})
</script>

<style scoped>
.expense-form {
  background: white;
  padding: 1.5rem;
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
}

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

.is-invalid {
  border-color: #dc3545;
}

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
</style>

