<template>
    <form ref="form" @submit.prevent="handleTransfer">
        <div class="position-relative">
            <LoadingOverlay v-model="isLoading" />

            <div class="row">
                <!-- Cột ảnh chứng từ (bên trái) -->
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">Ảnh chứng từ <span class="text-danger">*</span></label>

                        <!-- Preview ảnh -->
                        <div class="proof-image-preview mb-2" v-if="imagePreviewUrl">
                            <img :src="imagePreviewUrl" alt="Preview" class="img-fluid rounded">
                            <button type="button" class="btn btn-sm btn-danger remove-image-btn" @click="removeImage"
                                title="Xóa ảnh">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>

                        <!-- Upload button -->
                        <div class="file-upload-wrapper" :class="{ 'is-invalid': errors.proofImage }">
                            <input type="file" ref="fileInput" id="proofImageInput" class="d-none"
                                accept="image/jpeg,image/png,image/jpg" @change="handleFileSelect">
                            <button type="button" class="btn btn-outline-secondary w-100"
                                @click="$refs.fileInput.click()">
                                <i class="fas fa-upload me-2"></i>
                                {{ transferData.proofImage ? 'Đổi ảnh' : 'Chọn ảnh' }}
                            </button>
                        </div>

                        <div class="invalid-feedback d-block" v-if="errors.proofImage">
                            {{ errors.proofImage }}
                        </div>
                        <small class="text-muted d-block mt-1">JPG, PNG (tối đa 5MB)</small>
                    </div>
                </div>

                <!-- Cột form (bên phải) -->
                <div class="col-md-9">
                    <!-- Số dư hiện tại -->
                    <div class="mb-3">
                        <label class="form-label">Số dư hiện tại</label>
                        <input type="text" class="form-control" :value="formatCurrency(wallet?.Balance)" readonly>
                    </div>

                    <!-- Ví đích -->
                    <div class="mb-3">
                        <label class="form-label">Ví đích <span class="text-danger">*</span></label>
                        <v-select label="UserName" :options="walletOptions" v-model="selectedWallet"
                            :reduce="(option) => option" @search="onWalletSearch" :filterable="false"
                            :loading="walletLoading" placeholder="Tìm kiếm ví theo tên người dùng..." :clearable="true"
                            :class="{ 'is-invalid': errors.destinationWalletId }">
                            <template v-slot:option="option">
                                <div>
                                    <strong>{{ option.UserName }}</strong> - {{ option.FullName }}
                                    <br>
                                    <small class="text-muted">Số dư: {{ formatCurrency(option.Balance) }}</small>
                                </div>
                            </template>
                            <template v-slot: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">
                                    Nhập tên người dùng để tìm kiếm
                                </span>
                            </template>
                        </v-select>
                        <div class="invalid-feedback d-block" v-if="errors.destinationWalletId">
                            {{ errors.destinationWalletId }}
                        </div>
                    </div>

                    <!-- Số tiền -->
                    <div class="mb-3">
                        <label class="form-label">Số tiền <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" v-model.number="transferData.amount" min="0" step="1"
                            placeholder="Nhập số tiền cần chuyển" :class="{ 'is-invalid': errors.amount }">
                        <div class="invalid-feedback" v-if="errors.amount">
                            {{ errors.amount }}
                        </div>
                        <small class="text-muted">Số dư khả dụng: {{ formatCurrency(wallet?.Balance) }}</small>
                    </div>

                    <!-- Ghi chú -->
                    <div class="mb-3">
                        <label class="form-label">Ghi chú</label>
                        <textarea class="form-control" v-model="transferData.note" rows="3" maxlength="500"
                            placeholder="Nhập ghi chú cho giao dịch (tùy chọn)"></textarea>
                        <small class="text-muted">{{ transferData.note.length }}/500 ký tự</small>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-secondary" @click="handleClose">Đóng</button>
                <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
                    <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
                    <i v-else class="fas fa-paper-plane me-2"></i>
                    Chuyển tiền
                </button>
            </div>
        </div>
    </form>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { formatCurrency } from '@/infrastructure/utilities/currencyHelper'
import LoadingOverlay from '@/components/loaders/LoadingOverlay.vue'
import walletService from '@/services/walletService'
import { useToast } from 'vue-toastification'

const toast = useToast()

const props = defineProps({
    wallet: {
        type: Object,
        required: true
    }
})

const emit = defineEmits(['close', 'success'])

const isLoading = ref(false)
const isSubmitting = ref(false)
const walletLoading = ref(false)
const form = ref(null)
const walletOptions = reactive([])
const selectedWallet = ref(null)

const transferData = reactive({
    destinationWalletId: null,
    amount: 0,
    note: '',
    proofImage: null
})

const errors = reactive({
    destinationWalletId: '',
    amount: '',
    proofImage: ''
})

const imagePreviewUrl = ref(null)
const fileInput = ref(null)

let walletSearchTimeout = null

const onWalletSearch = (search, loading) => {
    if (walletSearchTimeout) {
        clearTimeout(walletSearchTimeout)
    }

    walletSearchTimeout = setTimeout(async () => {
        if (search.length) {
            loading(true)
            try {
                // Sử dụng API mới GetSuggestions
                const result = await walletService.getSuggestions(search)

                if (result && Array.isArray(result)) {
                    // Lọc bỏ ví hiện tại
                    const filteredWallets = result.filter(w => w.Id !== props.wallet?.Id)
                    walletOptions.splice(0, walletOptions.length, ...filteredWallets)
                }
            } catch (error) {
                console.error('Error searching wallets:', error)
                toast.error('Lỗi khi tìm kiếm ví')
            } finally {
                loading(false)
            }
        }
    }, 300)
}

// Xử lý chọn file ảnh
const handleFileSelect = (event) => {
    const file = event.target.files[0]
    errors.proofImage = ''

    if (!file) {
        return
    }

    // Validate file type
    const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg']
    if (!allowedTypes.includes(file.type)) {
        errors.proofImage = 'Chỉ chấp nhận file ảnh định dạng JPG hoặc PNG'
        event.target.value = ''
        return
    }

    // Validate file size (5MB)
    const maxSize = 5 * 1024 * 1024 // 5MB
    if (file.size > maxSize) {
        errors.proofImage = 'Kích thước file không được vượt quá 5MB'
        event.target.value = ''
        return
    }

    // Lưu file và tạo preview
    transferData.proofImage = file

    // Tạo preview URL
    if (imagePreviewUrl.value) {
        URL.revokeObjectURL(imagePreviewUrl.value)
    }
    imagePreviewUrl.value = URL.createObjectURL(file)
}

// Xóa ảnh đã chọn
const removeImage = () => {
    transferData.proofImage = null
    if (imagePreviewUrl.value) {
        URL.revokeObjectURL(imagePreviewUrl.value)
        imagePreviewUrl.value = null
    }
    if (fileInput.value) {
        fileInput.value.value = ''
    }
    errors.proofImage = ''
}

// Reset form khi wallet thay đổi
watch(() => props.wallet, () => {
    Object.assign(transferData, {
        destinationWalletId: null,
        amount: 0,
        note: '',
        proofImage: null
    })
    selectedWallet.value = null
    walletOptions.splice(0, walletOptions.length)
    removeImage()
    errors.destinationWalletId = ''
    errors.amount = ''
    errors.proofImage = ''
}, { deep: true })

const validateForm = () => {
    let isValid = true
    errors.destinationWalletId = ''
    errors.amount = ''
    errors.proofImage = ''

    if (!selectedWallet.value || !selectedWallet.value.Id) {
        errors.destinationWalletId = 'Vui lòng chọn ví đích'
        isValid = false
    } else {
        transferData.destinationWalletId = selectedWallet.value.Id

        if (transferData.destinationWalletId === props.wallet?.Id) {
            errors.destinationWalletId = 'Không thể chuyển tiền cho chính mình'
            isValid = false
        }
    }

    if (!transferData.amount || transferData.amount <= 0) {
        errors.amount = 'Số tiền phải lớn hơn 0'
        isValid = false
    }

    if (transferData.amount > (props.wallet?.Balance || 0)) {
        errors.amount = `Số dư không đủ. Số dư hiện tại: ${formatCurrency(props.wallet?.Balance)}`
        isValid = false
    }

    // Validate ảnh chứng từ (bắt buộc)
    if (!transferData.proofImage) {
        errors.proofImage = 'Vui lòng chọn ảnh chứng từ'
        isValid = false
    }

    return isValid
}

const handleClose = () => {
    emit('close')
}

const handleTransfer = async () => {
    if (isSubmitting.value) return

    if (!validateForm()) {
        return
    }

    const confirmMessage = `Bạn có chắc chắn muốn chuyển ${formatCurrency(transferData.amount)} đến ví của ${selectedWallet.value.FullName} (${selectedWallet.value.UserName})?`

    if (!confirm(confirmMessage)) {
        return
    }

    try {
        isSubmitting.value = true
        isLoading.value = true

        const result = await walletService.transfer(
            transferData.destinationWalletId,
            transferData.amount,
            transferData.note,
            transferData.proofImage // Thêm file ảnh chứng từ
        )

        if (result.Result === 1) {
            toast.success(result.Message || 'Chuyển tiền thành công')
            // Cleanup preview URL
            removeImage()
            emit('success')
            emit('close')
        } else {
            toast.error(result.Message || 'Có lỗi xảy ra khi chuyển tiền')
        }
    } catch (error) {
        console.error('Error transferring money:', error)
        toast.error(error.response?.data?.Message || error.response?.data?.message || 'Có lỗi xảy ra khi chuyển tiền')
    } finally {
        isLoading.value = false
        isSubmitting.value = false
    }
}

defineExpose({
    handleTransfer
})
</script>

<style scoped>
.proof-image-preview {
    position: relative;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 8px;
    background-color: #f8f9fa;
}

.proof-image-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.remove-image-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-wrapper.is-invalid {
    border: 1px solid #dc3545;
    border-radius: 4px;
    padding: 2px;
}
</style>
