<template>
  <div>
    <!-- Header -->
    <div class="breadcrumb-header justify-content-between">
      <div class="my-auto">
        <h4 class="page-title">{{ isEdit ? 'Chỉnh sửa' : 'Tạo mới' }} tài khoản ngân hàng</h4>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
          <li class="breadcrumb-item"><a href="javascript:void(0);">Tài chính</a></li>
          <li class="breadcrumb-item">
            <router-link :to="{ name: 'bank-accounts' }">Quản lý tài khoản ngân hàng</router-link>
          </li>
          <li class="breadcrumb-item active" aria-current="page">{{ isEdit ? 'Chỉnh sửa' : 'Tạo mới' }}</li>
        </ol>
      </div>
      <router-link :to="{ name: 'bank-accounts' }" class="btn btn-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i>
        Quay lại
      </router-link>
    </div>

    <div class="row row-sm">
      <!-- Form -->
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 grid-margin">
        <div class="card">
          <div class="card-body">
            <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }">
              <div class="row">
                <!-- Tên tài khoản -->
                <div class="col-lg-6 mb-3">
                  <label class="form-label required">Tên tài khoản</label>
                  <Field v-model="formModel.AccountName" name="AccountName" type="text" class="form-control"
                    :class="{ 'is-invalid': errors.AccountName }" placeholder="Nhập tên tài khoản..." maxlength="256" />
                  <ErrorMessage class="invalid-feedback" name="AccountName" />
                </div>

                <!-- Số tài khoản -->
                <div class="col-lg-6 mb-3">
                  <label class="form-label required">Số tài khoản</label>
                  <Field v-model="formModel.AccountNumber" name="AccountNumber" type="text" class="form-control"
                    :class="{ 'is-invalid': errors.AccountNumber }" placeholder="Nhập số tài khoản..." maxlength="50" />
                  <ErrorMessage class="invalid-feedback" name="AccountNumber" />
                </div>

                <!-- Ngân hàng -->
                <div class="col-lg-6 mb-3">
                  <label class="form-label required">Ngân hàng</label>
                  <v-select v-model="formModel.BankId" :options="bankOptions" :reduce="option => option.Id"
                    label="BrandName" placeholder="Chọn ngân hàng..." :class="{ 'is-invalid': errors.BankCode }"
                    :filterable="false" @search="searchBanks" @option:selected="onBankSelected">
                    <template #option="{ BrandName, FullName }">
                      <div>
                        <div class="fw-bold">{{ BrandName }}</div>
                        <small class="text-muted">{{ FullName }}</small>
                      </div>
                    </template>
                    <template #no-options="{ search, searching }">
                      <template v-if="searching">
                        Không có kết quả cho <em>{{ search }}</em>.
                      </template>
                      <span v-else style="opacity: 0.8">Gõ từ khóa để tìm ngân hàng...</span>
                    </template>
                  </v-select>
                  <Field v-model="formModel.BankId" name="BankId" type="hidden" />
                  <ErrorMessage class="invalid-feedback" name="BankId" />
                </div>

                <!-- Người quản lý -->
                <div class="col-lg-6 mb-3">
                  <label class="form-label">Người quản lý</label>
                  <v-select v-model="formModel.ManagerUserId" :options="userOptions" :reduce="option => option.Id"
                    label="FullName" placeholder="Chọn người quản lý..." :filterable="false" @search="searchUsers"
                    :clearable="true">
                    <template #option="{ FullName, UserName }">
                      <div>
                        <div class="fw-bold">{{ FullName }}</div>
                        <small class="text-muted">@{{ UserName }}</small>
                      </div>
                    </template>
                    <template #no-options>
                      Gõ từ khóa để tìm người dùng...
                    </template>
                  </v-select>
                </div>

                <!-- Tự động cập nhật số dư -->
                <div class="col-lg-12 mb-3">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" v-model="formModel.AutoUpdateBalance"
                      id="autoUpdateBalance">
                    <label class="form-check-label" for="autoUpdateBalance">
                      Tự động cập nhật số dư khi import sao kê
                    </label>
                  </div>
                </div>

                <!-- Ghi chú -->
                <div class="col-lg-12 mb-3">
                  <label class="form-label">Ghi chú</label>
                  <Field v-model="formModel.Note" name="Note" as="textarea" class="form-control" rows="3"
                    placeholder="Ghi chú về tài khoản..." maxlength="1024" />
                  <div class="form-text">
                    {{ formModel.Note?.length || 0 }}/1024 ký tự
                  </div>
                </div>
              </div>

              <!-- Form Actions -->
              <div class="d-flex justify-content-end gap-2">
                <router-link :to="{ name: 'bank-accounts' }" class="btn btn-secondary">
                  Hủy
                </router-link>
                <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
                  <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-1"></span>
                  <i v-else class="fas fa-save me-1"></i>
                  {{ isSubmitting ? 'Đang lưu...' : 'Lưu' }}
                </button>
              </div>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useToast } from "vue-toastification";
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';
import bankAccountService from '@/services/bankAccountService';
import bankService from '@/services/bankService';
import userService from '@/services/userService';
import _ from 'lodash';

// Props
const props = defineProps({
  id: [String, Number]
});

// Composables
const route = useRoute();
const router = useRouter();
const toast = useToast();

// Reactive data
const loading = ref(false);
const bankOptions = ref([]);
const userOptions = ref([]);

const formModel = reactive({
  Id: 0,
  AccountName: '',
  AccountNumber: '',
  BankId: null,
  Note: '',
  ManagerUserId: null,
  AutoUpdateBalance: true
});

// Computed
const isEdit = computed(() => !!props.id || !!route.params.id);
const accountId = computed(() => props.id || route.params.id);

// Validation Schema
const schema = Yup.object().shape({
  AccountName: Yup.string().required('Tên tài khoản không được để trống'),
  AccountNumber: Yup.string().required('Số tài khoản không được để trống'),
  BankId: Yup.number().required('Vui lòng chọn ngân hàng')
});

// Methods
const loadAccountData = async () => {
  if (!isEdit.value) return;

  loading.value = true;
  try {
    const result = await bankAccountService.getById(accountId.value);
    if (result) {
      Object.assign(formModel, result);
    } else {
      toast.error('Không tìm thấy tài khoản ngân hàng');
      router.push({ name: 'bank-accounts' });
    }
  } catch (error) {
    toast.error('Có lỗi xảy ra khi tải thông tin tài khoản');
    router.push({ name: 'bank-accounts' });
  } finally {
    loading.value = false;
  }
};

const searchBanks = async (keyword, loading) => {
  if (keyword.length) {
    loading(true);
    await searchBanksDebounce(loading, keyword);
  }
};

let searchBanksDebounce = _.debounce(async (loading, keyword) => {
  bankOptions.value.splice(0, bankOptions.value.length);

  try {
    const result = await bankService.sugBank(keyword);
    if (result && result.length > 0) {
      result.forEach(bank => {
        bankOptions.value.push(bank);
      });
    }
  } catch (error) {
    console.error('Error searching banks:', error);
  }

  loading(false);
}, 500);

const onBankSelected = (selectedBank) => {
  // Không cần cập nhật BankName nữa vì đã bỏ trường này
};

const searchUsers = async (search) => {
  if (!search || search.length < 2) return;

  try {
    const result = await userService.sugStaff(search);
    userOptions.value = result || [];
  } catch (error) {
    console.error('Error searching users:', error);
  }
};

const onSubmit = async () => {
  try {
    const result = await bankAccountService.createOrUpdate(formModel);
    if (result.Result === 1) {
      toast.success(result.Message || `${isEdit.value ? 'Cập nhật' : 'Tạo'} tài khoản ngân hàng thành công`);
      router.push({ name: 'bank-accounts' });
    } else {
      toast.error(result.Message || 'Có lỗi xảy ra khi lưu tài khoản ngân hàng');
    }
  } catch (error) {
    toast.error('Có lỗi xảy ra khi lưu tài khoản ngân hàng');
  }
};

// Lifecycle
onMounted(() => {
  if (isEdit.value) {
    loadAccountData();
  }
});
</script>

<style scoped>
.required::after {
  content: " *";
  color: #dc3545;
}

.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
</style>
