<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head } from '@inertiajs/vue3'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import frLocale from '@fullcalendar/core/locales/fr'
import { ref, onMounted } from 'vue'

const calendarOptions = ref({
    plugins: [dayGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    locale: frLocale,
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek'
    },
    events: route('calendar.events'),
    eventClick: (info) => {
        if (info.event.url) {
            info.jsEvent.preventDefault()
            window.location.href = info.event.url
        }
    },
    eventDidMount: (info) => {
        // Simple tooltip-like title on hover
        info.el.title = info.event.title + (info.event.extendedProps.service ? ' - ' + info.event.extendedProps.service : '')
    },
    height: 'auto',
    firstDay: 1, // Start on Monday
})
</script>

<template>
    <Head title="Calendrier des écheances" />
    <AuthenticatedLayout>
        <template #header>
            <h1 class="text-xl font-semibold text-gray-900">Calendrier des échéances</h1>
        </template>

        <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
            <div class="calendar-container">
                <FullCalendar :options="calendarOptions" />
            </div>

            <div class="mt-8 grid gap-4 sm:grid-cols-3">
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full bg-[#27ae60]"></span>
                    <span class="text-xs text-gray-600">Contrats Actifs</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full bg-[#f39c12]"></span>
                    <span class="text-xs text-gray-600">Contrats à Renouveler / Proche écheance</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full bg-[#3498db]"></span>
                    <span class="text-xs text-gray-600">Licences / SaaS</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full bg-[#9b59b6]"></span>
                    <span class="text-xs text-gray-600">Noms de Domaine</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full bg-[#e74c3c]"></span>
                    <span class="text-xs text-gray-600">Contrats Expirés</span>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

<style>
.fc {
    font-family: inherit;
    --fc-border-color: #f1f5f9;
    --fc-button-bg-color: #4f46e5;
    --fc-button-border-color: #4f46e5;
    --fc-button-hover-bg-color: #4338ca;
    --fc-button-active-bg-color: #4338ca;
    --fc-today-bg-color: #f8fafc;
}

.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.fc .fc-col-header-cell {
    padding: 12px 0;
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #64748b;
}

.fc-event {
    cursor: pointer;
    border: none !important;
    padding: 2px 4px !important;
    font-size: 0.75rem !important;
}

.fc-daygrid-event {
    white-space: normal !important;
    align-items: center;
}
</style>
