<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, Link, useForm } from '@inertiajs/vue3'

const props = defineProps({
    licence:      Object,
    contrats:     Array,
    fournisseurs: Array,
    communes:     Array,
})

const isEdit = !!props.licence

const form = useForm({
    nom:                    props.licence?.nom || '',
    contrat_id:             props.licence?.contrat_id || '',
    fournisseur_id:         props.licence?.fournisseur_id || '',
    commune_id:             props.licence?.commune_id || '',
    cle_licence:            props.licence?.cle_licence || '',
    nombre_sieges_total:    props.licence?.nombre_sieges_total || 1,
    nombre_sieges_utilises: props.licence?.nombre_sieges_utilises || 0,
    date_acquisition:       props.licence?.date_acquisition ? props.licence.date_acquisition.substring(0, 10) : '',
    date_expiration:        props.licence?.date_expiration ? props.licence.date_expiration.substring(0, 10) : '',
    type_licence:           props.licence?.type_licence || 'abonnement',
    statut:                 props.licence?.statut || 'active',
    notes:                  props.licence?.notes || '',
})

function submit() {
    if (isEdit) {
        form.put(route('licences.update', props.licence.id))
    } else {
        form.post(route('licences.store'))
    }
}
</script>

<template>
    <Head :title="isEdit ? 'Modifier Licence' : 'Nouvelle Licence'" />
    <AuthenticatedLayout>
        <template #header>
            <div class="flex items-center gap-3">
                <Link :href="route('licences.index')" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </Link>
                <h1 class="text-xl font-semibold text-gray-900">{{ isEdit ? 'Modifier la licence' : 'Ajouter une licence' }}</h1>
            </div>
        </template>

        <div class="max-w-4xl">
            <form @submit.prevent="submit" class="space-y-6">
                <!-- Section Informations Générales -->
                <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
                    <h2 class="mb-5 text-sm font-semibold uppercase tracking-wide text-gray-500">Informations logicielles</h2>
                    
                    <div class="grid gap-6 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-gray-700">Nom du produit / logiciel</label>
                            <input v-model="form.nom" type="text" required class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="ex: Microsoft 365 Business Standard" />
                            <div v-if="form.errors.nom" class="mt-1 text-xs text-red-600">{{ form.errors.nom }}</div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Type de licence</label>
                            <select v-model="form.type_licence" required class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                <option value="perpétuelle">Perpétuelle (achat unique)</option>
                                <option value="abonnement">Abonnement (annuel/mensuel)</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Statut</label>
                            <select v-model="form.statut" required class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                <option value="active">Active</option>
                                <option value="expirée">Expirée</option>
                                <option value="résiliée">Résiliée</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Section Clé et Sièges -->
                <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
                    <h2 class="mb-5 text-sm font-semibold uppercase tracking-wide text-gray-500">Clés et Utilisation</h2>
                    
                    <div class="grid gap-6 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-gray-700">Clé de licence (stockage sécurisé)</label>
                            <textarea v-model="form.cle_licence" rows="2" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Saisissez la clé ou le code d'activation..."></textarea>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Nombre de sièges (Total)</label>
                            <input v-model.number="form.nombre_sieges_total" type="number" min="1" required class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Nombre de sièges (Utilisés)</label>
                            <input v-model.number="form.nombre_sieges_utilises" type="number" min="0" required class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
                        </div>
                    </div>
                </div>

                <!-- Section Dates et Liens -->
                <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
                    <h2 class="mb-5 text-sm font-semibold uppercase tracking-wide text-gray-500">Établissement & Dates</h2>
                    
                    <div class="grid gap-6 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Affectation Commune</label>
                            <select v-model="form.commune_id" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                <option value="">Non affectée (Agglo)</option>
                                <option v-for="c in communes" :key="c.id" :value="c.id">{{ c.nom }}</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Fournisseur</label>
                            <select v-model="form.fournisseur_id" required class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                <option value="">Choisir un fournisseur</option>
                                <option v-for="f in fournisseurs" :key="f.id" :value="f.id">{{ f.nom }}</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Contrat lié (optionnel)</label>
                            <select v-model="form.contrat_id" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                <option value="">Aucun contrat spécifique</option>
                                <option v-for="cnt in contrats" :key="cnt.id" :value="cnt.id">{{ cnt.titre }}</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">Date d'échéance / Expiration</label>
                            <input v-model="form.date_expiration" type="date" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-end gap-3">
                    <Link :href="route('licences.index')" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Annuler</Link>
                    <button type="submit" :disabled="form.processing"
                        class="rounded-lg bg-indigo-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50 transition-colors">
                        {{ isEdit ? 'Enregistrer les modifications' : 'Créer la licence' }}
                    </button>
                </div>
            </form>
        </div>
    </AuthenticatedLayout>
</template>
