<script setup>
import { ref } from 'vue'
import { useForm, usePage } from '@inertiajs/vue3'

const props = defineProps({
    show: Boolean,
    commande: Object,
    targetStatut: String,
})

const emit = defineEmits(['close'])
const page = usePage()

const form = useForm({ statut: '', commentaire: '' })

function submit() {
    form.statut = props.targetStatut
    form.patch(route('commandes.transition', props.commande.id), {
        onSuccess: () => {
            form.reset()
            emit('close')
        },
    })
}

function close() {
    form.reset()
    emit('close')
}

const statutLabel = (s) => page.props.config?.statuts?.[s] ?? s
</script>

<template>
    <Transition enter-from-class="opacity-0" enter-active-class="transition-opacity duration-150"
        leave-to-class="opacity-0" leave-active-class="transition-opacity duration-150">
        <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center">
            <div class="absolute inset-0 bg-black/50" @click="close" />
            <div class="relative w-full max-w-md rounded-xl bg-white p-6 shadow-xl mx-4">
                <h3 class="text-lg font-semibold text-gray-900">Changer le statut</h3>
                <p class="mt-1 text-sm text-gray-600">
                    Commande <strong>{{ commande?.numero_commande }}</strong> →
                    <strong>{{ statutLabel(targetStatut) }}</strong>
                </p>

                <form @submit.prevent="submit" class="mt-4 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">
                            Commentaire
                            <span v-if="targetStatut === 'annulee'" class="text-red-500">*</span>
                        </label>
                        <textarea v-model="form.commentaire" rows="3"
                            :required="targetStatut === 'annulee'"
                            placeholder="Optionnel — précisez la raison si nécessaire"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
                        <p v-if="form.errors.commentaire" class="mt-1 text-xs text-red-600">{{ form.errors.commentaire }}</p>
                    </div>

                    <div class="flex justify-end gap-3">
                        <button type="button" @click="close"
                            class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                            Annuler
                        </button>
                        <button type="submit" :disabled="form.processing"
                            class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors">
                            {{ form.processing ? 'Mise à jour...' : 'Confirmer' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </Transition>
</template>
