<template>
    <LadaDialog :visible="visible" @close="closeModal" variant="modal-full">
        <template #header>
            <div class="modal-header">
                <h5 class="modal-title">Chi tiết chi phí</h5>
                <button type="button" class="btn-close" @click="closeModal"></button>
            </div>
        </template>

        <template #body>
            <!-- Loading -->
            <div v-if="loading" class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>

            <!-- Error -->
            <div v-else-if="error" class="alert alert-danger">
                <i class="fe fe-alert-circle me-2"></i>{{ error }}
            </div>

            <!-- Content -->
            <div v-else-if="expense" class="expense-detail-content">


                <div class="row">
                    <!-- Main Information -->
                    <div class="col-lg-9">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-title mb-0">Thông tin chi phí</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted small">Mô tả chi phí</label>
                                        <p class="mb-0"><strong>{{ expense.Description }}</strong></p>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted small">Số tiền</label>
                                        <p class="mb-0 text-primary fs-5"><strong>{{ formatCurrency(expense.Amount)
                                        }}</strong></p>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted small">Danh mục chi phí</label>
                                        <p class="mb-0">
                                            <span class="badge bg-info">{{ expense.ExpenseCategoryName }}</span>
                                        </p>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted small">Trạng thái</label>
                                        <p class="mb-0">
                                            <ExpenseStatusBadge :status="expense.Status" />
                                        </p>
                                    </div>
                                    <div class="col-12 mb-3" v-if="expense.Note">
                                        <label class="form-label text-muted small">Ghi chú</label>
                                        <p class="mb-0">{{ expense.Note }}</p>
                                    </div>
                                    <div class="col-md-6 mb-3" v-if="expense.TransactionId">
                                        <label class="form-label text-muted small">ID giao dịch</label>
                                        <p class="mb-0">{{ expense.TransactionId }}</p>
                                    </div>
                                    <div class="col-md-6 mb-3" v-if="expense.OrderId">
                                        <label class="form-label text-muted small">ID đơn hàng</label>
                                        <p class="mb-0">{{ expense.OrderId }}</p>
                                    </div>
                                    <div class="col-12 mb-3" v-if="expense.RejectReason">
                                        <label class="form-label text-muted small">Lý do từ chối</label>
                                        <div class="alert alert-danger">
                                            {{ expense.RejectReason }}
                                        </div>
                                    </div>

                                    <!-- Bank Account Information -->
                                    <div class="col-12" v-if="expense.BankAccountNumber">
                                        <hr class="my-3" />
                                        <h6 class="mb-3"><i class="fe fe-credit-card me-2"></i>Thông tin tài khoản ngân
                                            hàng</h6>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label text-muted small">Số tài khoản</label>
                                                <p class="mb-0"><strong>{{ expense.BankAccountNumber }}</strong></p>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label text-muted small">Chủ tài khoản</label>
                                                <p class="mb-0">{{ expense.BankAccountHolderName }}</p>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label text-muted small">Ngân hàng</label>
                                                <p class="mb-0">{{ expense.BankName }} ({{ expense.BankCode }})</p>
                                            </div>
                                            <div class="col-md-6 mb-3" v-if="expense.BankBranchName">
                                                <label class="form-label text-muted small">Chi nhánh</label>
                                                <p class="mb-0">{{ expense.BankBranchName }}</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Additional Information -->
                                    <div class="col-12">
                                        <hr class="my-3" />
                                        <h6 class="mb-3"><i class="fe fe-info me-2"></i>Thông tin bổ sung</h6>
                                        <div class="row">
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label text-muted small">Người tạo</label>
                                                <p class="mb-0">{{ expense.CreatedByUserName || '-' }}</p>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label text-muted small">Ngày tạo</label>
                                                <p class="mb-0">{{ formatDateTime(expense.CreatedTime) }}</p>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label text-muted small">Người cập nhật</label>
                                                <p class="mb-0">{{ expense.UpdatedByUserName || '-' }}</p>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label class="form-label text-muted small">Ngày cập nhật</label>
                                                <p class="mb-0">{{ formatDateTime(expense.UpdatedTime) }}</p>
                                            </div>
                                            <div class="col-md-3 mb-3" v-if="expense.ApprovedBy">
                                                <label class="form-label text-muted small">Người phê duyệt</label>
                                                <p class="mb-0">{{ expense.ApprovedByUserName }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- History Section -->
                    <div class="col-lg-3" v-if="expense && expense.Histories && expense.Histories.length > 0">
                        <ExpenseHistory :histories="expense.Histories" />
                    </div>
                </div>
            </div>
        </template>

        <template #footer>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @click="closeModal">
                    Đóng
                </button>
            </div>
        </template>
    </LadaDialog>


</template>

<script setup>
import { ref, watch } from 'vue'
import { useToast } from 'vue-toastification'
import expenseService from '@/services/expenseService'
import { ExpenseStatusBadge, ExpenseHistory } from './index'

const props = defineProps({
    visible: {
        type: Boolean,
        required: true
    },
    expenseId: {
        type: String,
        default: null
    }
})

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

const toast = useToast()

// Data
const loading = ref(false)
const error = ref('')
const expense = ref(null)


// Watch for visibility and expenseId changes
watch(() => [props.visible, props.expenseId], ([newVisible, newExpenseId]) => {
    if (newVisible && newExpenseId) {
        loadExpense()
    }
}, { immediate: true })

// Utility functions
const formatCurrency = (amount) => {
    if (!amount) return '0 VND'
    return new Intl.NumberFormat('vi-VN', {
        style: 'currency',
        currency: 'VND'
    }).format(amount)
}

const formatDateTime = (dateString) => {
    if (!dateString) return '-'
    try {
        return new Date(dateString).toLocaleString('vi-VN')
    } catch {
        return '-'
    }
}

// Methods
const loadExpense = async () => {
    if (!props.expenseId) return

    try {
        loading.value = true
        error.value = ''

        const result = await expenseService.getById(props.expenseId)
        if (result) {
            expense.value = result
        } else {
            error.value = 'Không tìm thấy chi phí'
        }
    } catch (err) {
        console.error('Error loading expense:', err)
        error.value = 'Có lỗi xảy ra khi tải thông tin chi phí'
    } finally {
        loading.value = false
    }
}

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




</script>

<style scoped>
.expense-detail-content {
    max-height: 70vh;
    overflow-y: auto;
}

.form-label.small {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.text-muted {
    color: #6c757d !important;
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}
</style>
