<template>
    <div class="col-lg-4 col-md-6">
        <div class="card risk-card shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Rủi ro cước lấy hàng</h5>
                <!-- Info Icon with Tooltip -->
                <div class="position-relative">
                    <i class="fe fe-info cursor-pointer text-primary" style="font-size: 18px;"
                        @mouseenter="showTooltip = true" @mouseleave="showTooltip = false"></i>

                    <!-- Tooltip -->
                    <div v-if="showTooltip" class="risk-info-tooltip">
                        <div class="tooltip-header">
                            <i class="fe fe-alert-triangle me-2"></i>
                            <strong>{{ riskInfo.Name }}</strong>
                        </div>
                        <div class="tooltip-body">
                            <p class="mb-2">{{ riskInfo.Description }}</p>
                            <div class="mb-2">
                                <strong>Mức độ:</strong>
                                <span :class="getSeverityClass(riskInfo.Severity)" class="badge ms-1">
                                    {{ riskInfo.Severity }}
                                </span>
                            </div>
                            <div>
                                <strong>Giải pháp:</strong> {{ riskInfo.Solution }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="risk-metrics cursor-pointer" @click="openModal">
                    <div class="d-flex align-items-center mb-3">
                        <div class="metric-icon bg-gradient-warning">
                            <i class="fe fe-alert-circle"></i>
                        </div>
                        <div class="ms-3 flex-grow-1">
                            <p class="mb-0 text-muted small">Số tiền phí lấy hàng</p>
                            <h3 class="mb-0 metric-value text-warning">{{ formatCurrency(totalSourceFee) }}</h3>
                        </div>
                    </div>
                    <div class="text-center">
                        <span class="badge bg-light text-dark">
                            <i class="fe fe-package me-1"></i>
                            {{ formatNumber(totalOrders) }} đơn hàng
                        </span>
                    </div>
                </div>

            </div>
        </div>

        <!-- Detail Modal using LadaDialog -->
        <LadaDialog :visible="showModal" variant="modal-full">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center">
                        Chi tiết đơn hàng thiếu Cashier
                        <!-- Info Icon with Tooltip -->
                        <div v-if="riskInfo" class="position-relative ms-2">
                            <i class="fe fe-info cursor-pointer text-warning" style="font-size: 20px;"
                                @mouseenter="showModalTooltip = true" @mouseleave="showModalTooltip = false"></i>

                            <!-- Modal Tooltip -->
                            <div v-if="showModalTooltip" class="modal-info-tooltip">
                                <div class="tooltip-header">
                                    <i class="fe fe-alert-triangle me-2"></i>
                                    <strong>{{ riskInfo.Name }}</strong>
                                </div>
                                <div class="tooltip-body">
                                    <p class="mb-2">{{ riskInfo.Description }}</p>
                                    <div class="mb-2">
                                        <strong>Mức độ:</strong>
                                        <span :class="getSeverityClass(riskInfo.Severity)" class="badge ms-1">
                                            {{ riskInfo.Severity }}
                                        </span>
                                    </div>
                                    <div>
                                        <strong>Giải pháp:</strong> {{ riskInfo.Solution }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </h5>

                    <button @click="closeModal" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>
            <template #body>
                <NoSourceCashier :hideHeader="true" :initialFilters="modalFilters" />
            </template>
            <template #footer>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @click="closeModal">Đóng</button>
                </div>
            </template>
        </LadaDialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { LadaDialog } from '@/components/index'
import NoSourceCashier from './no-source-cashier.vue'

// Props
const props = defineProps({
    riskInfo: {
        type: Object,
        required: true
    },
    totalOrders: {
        type: Number,
        default: 0
    },
    totalSourceFee: {
        type: Number,
        default: 0
    },
    filters: {
        type: Object,
        default: () => ({})
    }
})

// Data
const showTooltip = ref(false)
const showModalTooltip = ref(false)
const showModal = ref(false)

const modalFilters = ref({
    fromDate: props.filters.fromDate,
    toDate: props.filters.toDate
})

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

const formatNumber = (num) => {
    if (!num) return '0'
    return new Intl.NumberFormat('vi-VN').format(num)
}

const getSeverityClass = (severity) => {
    const severityMap = {
        'Low': 'bg-info',
        'Medium': 'bg-warning',
        'High': 'bg-orange',
        'Critical': 'bg-danger'
    }
    return severityMap[severity] || 'bg-secondary'
}

// Modal functions
const openModal = () => {
    showModal.value = true
    // Update modal filters with parent filters
    modalFilters.value.fromDate = props.filters.fromDate
    modalFilters.value.toDate = props.filters.toDate
}

const closeModal = () => {
    showModal.value = false
}
</script>

<style scoped>
.cursor-pointer {
    cursor: pointer;
}

.risk-card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.risk-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.risk-metrics {
    padding: 1rem;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.risk-metrics:hover {
    background: #e9ecef;
}

.metric-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 600;
}

.bg-gradient-warning {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

/* Tooltip */
.risk-info-tooltip,
.modal-info-tooltip {
    position: absolute;
    top: 30px;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 0;
    width: 350px;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.modal-info-tooltip {
    top: 35px;
    left: 0;
}

.tooltip-header {
    background: #fff3cd;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    border-radius: 8px 8px 0 0;
    color: #856404;
    font-weight: 600;
}

.tooltip-body {
    padding: 1rem;
    font-size: 0.875rem;
}

.tooltip-body p {
    color: #6c757d;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Table */
.table th {
    background-color: #f8f9fa;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.text-wrap {
    white-space: normal;
    word-wrap: break-word;
}
</style>
