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

            <!-- 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>

            <!-- Số dư mong muốn -->
            <div class="mb-3">
                <label class="form-label">Số dư mong muốn <span class="text-danger">*</span></label>
                <input type="number" class="form-control" v-model.number="adjustData.desiredBalance" min="0" step="1000"
                    placeholder="Nhập số dư mong muốn" :class="{ 'is-invalid': errors.desiredBalance }">
                <div class="invalid-feedback" v-if="errors.desiredBalance">
                    {{ errors.desiredBalance }}
                </div>
            </div>

            <!-- Hiển thị số tiền thay đổi -->
            <div class="mb-3" v-if="adjustmentAmount !== 0">
                <div class="alert" :class="adjustmentAmount > 0 ? 'alert-success' : 'alert-warning'">
                    <i :class="adjustmentAmount > 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'" class="me-2"></i>
                    <strong>{{ adjustmentAmount > 0 ? 'Cộng tiền:' : 'Trừ tiền:' }}</strong>
                    {{ formatCurrency(Math.abs(adjustmentAmount)) }}
                </div>
            </div>

            <!-- Lý do điều chỉnh -->
            <div class="mb-3">
                <label class="form-label">Lý do điều chỉnh <span class="text-danger">*</span></label>
                <textarea class="form-control" v-model="adjustData.reason" rows="3" maxlength="500"
                    placeholder="Nhập lý do điều chỉnh số dư..." :class="{ 'is-invalid': errors.reason }"></textarea>
                <div class="invalid-feedback" v-if="errors.reason">
                    {{ errors.reason }}
                </div>
                <small class="text-muted">{{ adjustData.reason.length }}/500 ký tự</small>
            </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-check me-2"></i>
                    Xác nhận
                </button>
            </div>
        </div>
    </form>
</template>

<script setup>
import { ref, reactive, computed, 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 form = ref(null)

const adjustData = reactive({
    desiredBalance: 0,
    reason: ''
})

const errors = reactive({
    desiredBalance: '',
    reason: ''
})

const adjustmentAmount = computed(() => {
    return adjustData.desiredBalance - (props.wallet?.Balance || 0)
})

// Reset form khi wallet thay đổi
watch(() => props.wallet, (newWallet) => {
    adjustData.desiredBalance = newWallet?.Balance || 0
    adjustData.reason = ''
    errors.desiredBalance = ''
    errors.reason = ''
}, { immediate: true, deep: true })

const validateForm = () => {
    let isValid = true
    errors.desiredBalance = ''
    errors.reason = ''

    if (adjustData.desiredBalance < 0) {
        errors.desiredBalance = 'Số dư mong muốn phải >= 0'
        isValid = false
    }

    if (!adjustData.reason || adjustData.reason.trim() === '') {
        errors.reason = 'Lý do điều chỉnh là bắt buộc'
        isValid = false
    } else if (adjustData.reason.length > 500) {
        errors.reason = 'Lý do không được vượt quá 500 ký tự'
        isValid = false
    }

    return isValid
}

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

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

    if (!validateForm()) {
        return
    }

    if (adjustmentAmount.value === 0) {
        toast.info('Số dư hiện tại đã khớp với số dư mong muốn')
        return
    }

    const confirmMessage = adjustmentAmount.value > 0
        ? `Bạn có chắc chắn muốn cộng ${formatCurrency(Math.abs(adjustmentAmount.value))} vào ví?`
        : `Bạn có chắc chắn muốn trừ ${formatCurrency(Math.abs(adjustmentAmount.value))} khỏi ví?`

    if (!confirm(confirmMessage)) {
        return
    }

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

        const result = await walletService.adjustBalance(
            props.wallet.Id,
            adjustData.desiredBalance,
            adjustData.reason
        )

        if (result.Result === 1) {
            toast.success(result.Message || 'Cân ví thành công')
            emit('success')
            emit('close')
        } else {
            toast.error(result.Message || 'Có lỗi xảy ra khi cân ví')
        }
    } catch (error) {
        console.error('Error adjusting balance:', error)
        toast.error(error.response?.data?.Message || 'Có lỗi xảy ra khi cân ví')
    } finally {
        isLoading.value = false
        isSubmitting.value = false
    }
}

defineExpose({
    handleAdjust
})
</script>
