<template>
    <div>
        <!-- Breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">{{ isEditMode ? 'Sửa Thẻ Xăng Dầu' : 'Thêm Thẻ Xăng Dầu' }}</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Quản lý Dầu</a></li>
                    <li class="breadcrumb-item"><router-link :to="{ name: 'FuelCardList' }">Thẻ Xăng Dầu</router-link>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ isEditMode ? 'Sửa' : 'Thêm mới' }}</li>
                </ol>
            </div>
        </div>

        <!-- Form -->
        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card shadow-none">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-credit-card me-2"></i>
                            Thông tin thẻ xăng dầu
                        </h5>
                    </div>
                    <div class="card-body">
                        <form @submit.prevent="save">
                            <div class="row">
                                <!-- Số thẻ -->
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Số thẻ <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" v-model="form.CardNumber"
                                        placeholder="Nhập số thẻ (VD: 5234****5261)" required maxlength="50">
                                    <small class="text-muted">Có thể mask 4 số đầu và 4 số cuối</small>
                                </div>

                                <!-- Tên chủ thẻ -->
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Tên chủ thẻ <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" v-model="form.CardholderName"
                                        placeholder="Nhập tên chủ thẻ" required maxlength="100">
                                </div>

                                <!-- Ngân hàng -->
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Ngân hàng <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" v-model="form.BankName"
                                        placeholder="VD: Vietcombank, BIDV, Techcombank..." required maxlength="100">
                                </div>

                                <!-- Loại thẻ -->
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Loại thẻ <span class="text-danger">*</span></label>
                                    <select class="form-select" v-model="form.CardType" required>
                                        <option value="">-- Chọn loại thẻ --</option>
                                        <option value="Credit Card">Thẻ tín dụng (Credit Card)</option>
                                        <option value="Debit Card">Thẻ ghi nợ (Debit Card)</option>
                                    </select>
                                </div>

                                <!-- Trạng thái -->
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Trạng thái <span class="text-danger">*</span></label>
                                    <select class="form-select" v-model="form.Status" required>
                                        <option :value="1">Đang hoạt động</option>
                                        <option :value="2">Ngừng hoạt động</option>
                                        <option :value="3">Đã mất</option>
                                        <option :value="4">Hết hạn</option>
                                    </select>
                                </div>

                                <!-- Người phụ trách -->
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Người phụ trách</label>
                                    <v-select 
                                        v-model="selectedResponsible" 
                                        :reduce="(option) => option.Id" 
                                        label="UserName"
                                        :filterable="false" 
                                        :options="staffs" 
                                        @search="getStaffs"
                                        placeholder="Chọn người phụ trách (tùy chọn)"
                                        :clearable="true"
                                        @update:modelValue="form.ResponsibleUserId = $event">
                                        <template #no-options="{ search, searching, loading }">
                                            Gõ từ khóa để tìm nhân viên...
                                        </template>
                                        <template v-slot:option="option">
                                            {{ option.UserName }} ({{ option.FullName }})
                                        </template>
                                    </v-select>
                                    <small class="text-muted">Người giữ/quản lý thẻ xăng dầu này</small>
                                </div>

                                <!-- Ngày hết hạn -->
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Ngày hết hạn <span class="text-danger">*</span></label>
                                    <VueDatePicker v-model="form.ExpiryDate" :enable-time-picker="false"
                                        placeholder="Chọn ngày hết hạn" :min-date="new Date()" auto-apply />
                                </div>

                                <!-- Hạn mức tín dụng -->
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Hạn mức tín dụng <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" v-model.number="form.CreditLimit"
                                        placeholder="Nhập hạn mức (VND)" required min="0" step="1000">
                                    <small class="text-muted">{{ formatCurrency(form.CreditLimit) }}</small>
                                </div>

                                <!-- Ghi chú -->
                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Ghi chú</label>
                                    <textarea class="form-control" v-model="form.Notes" rows="3"
                                        placeholder="Nhập ghi chú (tùy chọn)"></textarea>
                                </div>
                            </div>

                            <!-- Buttons -->
                            <div class="row">
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary me-2" :disabled="saving">
                                        <span v-if="saving" class="spinner-border spinner-border-sm me-2"></span>
                                        <i v-else class="fas fa-save me-2"></i>
                                        {{ saving ? 'Đang lưu...' : 'Lưu' }}
                                    </button>
                                    <button type="button" class="btn btn-secondary" @click="goBack"
                                        :disabled="saving">
                                        <i class="fas fa-arrow-left me-2"></i>Quay lại
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import fuelCardService from '@/services/fuelCardService';
import staffService from '@/services/staffService';
import { useToast } from 'vue-toastification';
import VueDatePicker from '@vuepic/vue-datepicker';
import _ from 'lodash';

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

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

const form = reactive({
    Id: 0,
    CardNumber: '',
    CardholderName: '',
    BankName: '',
    CardType: '',
    Status: 1,
    ExpiryDate: null,
    CreditLimit: 0,
    Notes: '',
    ResponsibleUserId: null
});

const staffs = reactive([]);
const selectedResponsible = ref(null);

const isEditMode = computed(() => {
    return route.params.id && parseInt(route.params.id) > 0;
});
//#endregion

//#region LIFECYCLE
onMounted(async () => {
    if (isEditMode.value) {
        await loadFuelCard();
    }
});
//#endregion

//#region FUNCTIONS
function formatCurrency(value) {
    if (value == null || value == undefined || value === 0) return '0 ₫';
    return new Intl.NumberFormat('vi-VN', {
        style: 'currency',
        currency: 'VND'
    }).format(value);
}

async function getStaffs(keyword, loading) {
    if (keyword.length) {
        loading(true);
        await sugStaffs(loading, keyword);
    }
}

let sugStaffs = _.debounce(async (loading, keyword) => {
    staffs.splice(0, staffs.length);
    var staffResult = await staffService.sugStaff(keyword);
    if (staffResult != null && staffResult.length > 0) {
        staffResult.forEach(staff => {
            staffs.push(staff);
        });
    }
    loading(false);
}, 300);

async function loadFuelCard() {
    try {
        const id = parseInt(route.params.id);
        const result = await fuelCardService.getFuelCardById(id);
        if (result) {
            form.Id = result.Id;
            form.CardNumber = result.CardNumber;
            form.CardholderName = result.CardholderName;
            form.BankName = result.BankName;
            form.CardType = result.CardType;
            form.Status = result.Status;
            form.ExpiryDate = result.ExpiryDate ? new Date(result.ExpiryDate) : null;
            form.CreditLimit = result.CreditLimit;
            form.Notes = result.Notes || '';
            form.ResponsibleUserId = result.ResponsibleUserId || null;
            
            // Nếu có người phụ trách, thêm vào danh sách để hiển thị
            if (result.ResponsibleUserId && result.ResponsibleUserName) {
                staffs.push({
                    Id: result.ResponsibleUserId,
                    UserName: result.ResponsibleUserName,
                    FullName: result.ResponsibleUserName
                });
                selectedResponsible.value = result.ResponsibleUserId;
            }
        } else {
            toast.error('Không tìm thấy thẻ xăng dầu');
            goBack();
        }
    } catch (error) {
        console.error('Error loading fuel card:', error);
        toast.error('Có lỗi xảy ra khi tải thông tin thẻ');
        goBack();
    }
}



async function save() {
    // Validation
    if (!form.CardNumber || !form.CardholderName || !form.BankName || !form.CardType) {
        toast.warning('Vui lòng điền đầy đủ thông tin bắt buộc');
        return;
    }

    if (!form.ExpiryDate) {
        toast.warning('Vui lòng chọn ngày hết hạn');
        return;
    }

    if (form.CreditLimit < 0) {
        toast.warning('Hạn mức tín dụng phải >= 0');
        return;
    }

    saving.value = true;
    try {
        const result = await fuelCardService.createOrUpdateFuelCard(form);
        if (result && result.Result === 1) {
            toast.success(result.Message || (isEditMode.value ? 'Cập nhật thẻ thành công' : 'Tạo thẻ thành công'));
            goBack();
        } else {
            toast.error(result.Message || 'Không thể lưu thẻ');
        }
    } catch (error) {
        console.error('Error saving fuel card:', error);
        toast.error('Có lỗi xảy ra khi lưu thẻ');
    } finally {
        saving.value = false;
    }
}

function goBack() {
    router.push({ name: 'FuelCardList' });
}
//#endregion
</script>

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

.text-danger {
    color: #dc3545;
}
</style>
