@props(['stats' => null, 'country' => 'benin'])

<div class="country-map-container">
    <div class="country-map-header">
        <h3 class="country-map-title">
            <i class="fas fa-map-marked-alt"></i>
            Répartition par Département
        </h3>
        @if($stats)
            <span class="country-map-total">
                Total: <strong>{{ array_sum(array_column((array)$stats, 'total')) }}</strong>
            </span>
        @endif
    </div>

    <div class="country-map-canvas-wrapper">
        <canvas
            id="country-map-canvas"
            width="240"
            height="360"
            data-stats="{{ json_encode($stats ?? []) }}"
            data-country="{{ $country }}">
        </canvas>
    </div>

    @if($stats)
        <div class="country-map-legend">
            <div class="legend-title">Départements</div>
            <div class="legend-items">
                @foreach($stats as $department => $data)
                    <div class="legend-item">
                        <span class="legend-color" style="background: #88b121;"></span>
                        <span class="legend-label">{{ ucfirst($department) }}</span>
                        <span class="legend-value">{{ $data['total'] ?? 0 }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

@push('styles')
<style>
/* ===== COUNTRY MAP STYLES ===== */
.country-map-container {
    background: white;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    padding: 20px;
    font-family: 'Nunito', sans-serif;
}

.country-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f8f9fa;
}

.country-map-title {
    font-size: 18px;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.country-map-title i {
    color: #88b121;
    font-size: 20px;
}

.country-map-total {
    font-size: 14px;
    color: #718096;
    background: #f8fdf4;
    padding: 6px 12px;
    border-radius: 6px;
}

.country-map-total strong {
    color: #88b121;
    font-weight: 700;
    font-size: 16px;
}

.country-map-canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

#country-map-canvas {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ===== LEGEND ===== */
.country-map-legend {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
}

.legend-title {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: white;
    border-radius: 6px;
    font-size: 13px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-label {
    flex: 1;
    color: #4a5568;
    font-weight: 500;
}

.legend-value {
    color: #88b121;
    font-weight: 700;
    padding: 2px 8px;
    background: #f8fdf4;
    border-radius: 4px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .country-map-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .legend-items {
        grid-template-columns: 1fr;
    }

    #country-map-canvas {
        width: 100%;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('country-map-canvas');

    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    const statsData = JSON.parse(canvas.dataset.stats || '{}');
    const country = canvas.dataset.country || 'benin';

    // Coordonnées pour le Bénin (ajustées pour canvas 240x360)
    const beninDepartments = {
        atacora: { x: 120, y: 78 },
        alibori: { x: 48, y: 108 },
        borgou: { x: 108, y: 156 },
        donga: { x: 53, y: 186 },
        collines: { x: 79, y: 264 },
        zou: { x: 77, y: 312 },
        couffo: { x: 54, y: 336 },
        mono: { x: 55, y: 356 },
        atlantique: { x: 80, y: 352 },
        littoral: { x: 100, y: 360 },
        plateau: { x: 102, y: 312 }
    };

    const departmentCoords = beninDepartments;

    // Charger et dessiner l'image de la carte
    const image = new Image();
    image.onload = function() {
        // Dessiner l'image
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

        // Configuration du texte
        ctx.font = 'bold 14px Nunito, sans-serif';
        ctx.fillStyle = '#88b121';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Dessiner les statistiques
        Object.keys(departmentCoords).forEach(department => {
            const coords = departmentCoords[department];
            const value = statsData[department]?.total ?? 0;

            // Dessiner un cercle de fond blanc
            ctx.beginPath();
            ctx.arc(coords.x, coords.y, 16, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
            ctx.fill();
            ctx.strokeStyle = '#88b121';
            ctx.lineWidth = 2;
            ctx.stroke();

            // Dessiner le texte
            ctx.fillStyle = '#88b121';
            ctx.fillText(value.toString(), coords.x, coords.y);
        });
    };

    // URL de l'image de la carte du Bénin
    // Vous devez placer l'image dans public/images/benin-map.png
    image.src = '/images/benin-map.png';

    // Si l'image ne charge pas, dessiner une carte simplifiée
    image.onerror = function() {
        // Dessiner un fond
        ctx.fillStyle = '#f8f9fa';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Dessiner le contour du Bénin (simplifié)
        ctx.strokeStyle = '#88b121';
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(100, 20);
        ctx.lineTo(120, 100);
        ctx.lineTo(140, 200);
        ctx.lineTo(120, 300);
        ctx.lineTo(80, 340);
        ctx.lineTo(60, 300);
        ctx.lineTo(40, 200);
        ctx.lineTo(60, 100);
        ctx.closePath();
        ctx.stroke();

        // Configuration du texte
        ctx.font = 'bold 14px Nunito, sans-serif';
        ctx.fillStyle = '#88b121';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Dessiner les statistiques
        Object.keys(departmentCoords).forEach(department => {
            const coords = departmentCoords[department];
            const value = statsData[department]?.total ?? 0;

            // Dessiner un cercle de fond
            ctx.beginPath();
            ctx.arc(coords.x, coords.y, 16, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
            ctx.fill();
            ctx.strokeStyle = '#88b121';
            ctx.lineWidth = 2;
            ctx.stroke();

            // Dessiner le texte
            ctx.fillStyle = '#88b121';
            ctx.fillText(value.toString(), coords.x, coords.y);
        });
    };
});
</script>
@endpush