<template>
    <div class="expense-history">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fe fe-clock me-2"></i>Lịch sử thay đổi
                </h5>
            </div>
            <div class="card-body">
                <!-- Empty State -->
                <div v-if="!histories || histories.length === 0" class="text-center text-muted py-4">
                    <i class="fe fe-inbox fs-3 d-block mb-2"></i>
                    <p class="mb-0">Chưa có lịch sử thay đổi</p>
                </div>

                <!-- History Timeline -->
                <div v-else class="timeline">
                    <div v-for="(history, index) in histories" :key="history.Id" class="timeline-item"
                        :class="{ 'last-item': index === histories.length - 1 }">
                        <!-- Timeline Marker -->
                        <div class="timeline-marker" :class="getStatusClass(history.NewStatus)">
                            <i :class="getStatusIcon(history.NewStatus)"></i>
                        </div>

                        <!-- Timeline Content -->
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h6 class="mb-1">
                                            <span v-if="history.OldStatus === null" class="badge bg-success">
                                                {{ history.NewStatusDisplay }}
                                            </span>
                                            <span v-else>
                                                <span class="badge bg-secondary">{{ history.OldStatusDisplay }}</span>
                                                <i class="fe fe-arrow-right mx-2"></i>
                                                <span class="badge" :class="`bg-${getStatusClass(history.NewStatus)}`">
                                                    {{ history.NewStatusDisplay }}
                                                </span>
                                            </span>
                                        </h6>
                                        <p class="text-muted mb-0 small">
                                            {{ history.Note || 'Không có ghi chú' }}
                                        </p>
                                    </div>
                                    <div class="text-end">
                                        <small class="text-muted d-block">{{ formatDateTime(history.CreatedTime)
                                            }}</small>
                                        <small class="text-muted">
                                            <i class="fe fe-user me-1"></i>{{ history.ActionByUserName }}
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <!-- Reject Reason -->
                            <div v-if="history.Reason" class="alert alert-danger mt-2 mb-0">
                                <i class="fe fe-alert-triangle me-2"></i>
                                <strong>Lý do:</strong> {{ history.Reason }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    histories: {
        type: Array,
        default: () => []
    }
})

// Utility functions
const formatDateTime = (dateString) => {
    if (!dateString) return '-'
    try {
        return new Date(dateString).toLocaleString('vi-VN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        })
    } catch {
        return '-'
    }
}

const getStatusClass = (status) => {
    const statusMap = {
        0: 'warning',  // Pending
        1: 'success',  // Approved
        2: 'danger',   // Rejected
        3: 'info'      // Paid
    }
    return statusMap[status] || 'secondary'
}

const getStatusIcon = (status) => {
    const iconMap = {
        0: 'fe fe-clock',           // Pending
        1: 'fe fe-check-circle',    // Approved
        2: 'fe fe-x-circle',        // Rejected
        3: 'fe fe-dollar-sign'      // Paid
    }
    return iconMap[status] || 'fe fe-circle'
}
</script>

<style scoped>
.expense-history {
    margin-top: 1rem;
}

.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.timeline-item.last-item {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -2rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #e9ecef;
    z-index: 1;
}

.timeline-marker i {
    font-size: 1rem;
    color: white;
}

.timeline-marker.warning {
    background: #ffc107;
    border-color: #ffc107;
}

.timeline-marker.success {
    background: #28a745;
    border-color: #28a745;
}

.timeline-marker.danger {
    background: #dc3545;
    border-color: #dc3545;
}

.timeline-marker.info {
    background: #17a2b8;
    border-color: #17a2b8;
}

.timeline-content {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    border-left: 3px solid #dee2e6;
}

.timeline-header h6 {
    font-weight: 600;
    color: #495057;
}

.alert {
    padding: 0.75rem;
    font-size: 0.875rem;
}

.fs-3 {
    font-size: 2rem !important;
}
</style>
