<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head } from '@inertiajs/vue3';
import { onMounted, ref } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

// Fix for Leaflet default icons
import icon from 'leaflet/dist/images/marker-icon.png';
const DefaultIcon = L.icon({
    iconUrl: icon,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});
L.Marker.prototype.options.icon = DefaultIcon;

const props = defineProps({
    candidates: Array
});

const mapContainer = ref(null);
const isLoading = ref(true);
const geocodedCount = ref(0);

onMounted(async () => {
    const map = L.map(mapContainer.value).setView([46.603354, 1.888334], 6); // Centered on France

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    const markers = [];

    for (const candidate of props.candidates) {
        if (!candidate.city) continue;

        try {
            // Rate limited geocoding (Nominatim allows 1 request/sec ideally)
            const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(candidate.city)}&limit=1`);
            const data = await response.json();

            if (data && data.length > 0) {
                const { lat, lon } = data[0];
                const marker = L.marker([lat, lon]).addTo(map);
                marker.bindPopup(`
                    <div class="p-1">
                        <p class="font-bold text-primary">${candidate.name}</p>
                        <p class="text-xs text-slate-500">${candidate.city}</p>
                        <p class="text-xs font-semibold mt-1">${candidate.job || 'Pas de poste'}</p>
                        <p class="text-[10px] bg-indigo-50 text-indigo-600 px-1.5 py-0.5 rounded mt-1 inline-block">Score: ${candidate.score}/20</p>
                    </div>
                `);
                markers.push(marker);
                geocodedCount.value++;
            }
            
            // Artificial delay to avoid being blocked by Nominatim
            await new Promise(resolve => setTimeout(resolve, 800));
        } catch (error) {
            console.error(`Geocoding failed for ${candidate.city}:`, error);
        }
    }

    if (markers.length > 0) {
        const group = new L.featureGroup(markers);
        map.fitBounds(group.getBounds().pad(0.1));
    }
    
    isLoading.value = false;
});
</script>

<template>
    <Head title="Provenance des Candidats" />

    <AdminLayout>
        <template #header>
            Carte de Provenance
        </template>

        <div class="mb-6 flex justify-between items-center">
            <div>
                <h3 class="text-2xl font-bold">Localisation des Candidats</h3>
                <p class="text-sm text-slate-500 mt-1">
                    Visualisez d'où viennent vos candidats sur la carte.
                </p>
            </div>
            <div v-if="isLoading" class="flex items-center gap-2 text-indigo-600 font-bold text-sm bg-indigo-50 px-4 py-2 rounded-xl">
                <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Geocodage en cours ({{ geocodedCount }}/{{ candidates.length }})...
            </div>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
            <div ref="mapContainer" class="w-full h-[600px] z-10"></div>
        </div>
    </AdminLayout>
</template>

<style>
/* Leaflet popup customization */
.leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.leaflet-popup-tip {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
</style>
