<script setup>
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { Link, useForm, usePage } from '@inertiajs/vue3';

const user = usePage().props.auth.user;

const form = useForm({
    first_name: user.first_name ?? '',
    diabetes_type: user.diabetes_type ?? 'type2',
    target_min: user.target_min ?? 70,
    target_max: user.target_max ?? 180,
    palette: user.palette ?? 'mint',
});

const palettes = [
    { id: 'mint', label: 'Menthe', swatch: '#7bbfb5' },
    { id: 'lilac', label: 'Lilas', swatch: '#9b8ec4' },
    { id: 'peach', label: 'Pêche', swatch: '#d4826a' },
];

const types = [
    { id: 'type1', label: 'Type 1' },
    { id: 'type2', label: 'Type 2' },
    { id: 'gestational', label: 'Gestationnel' },
    { id: 'other', label: 'Autre' },
];
</script>

<template>
    <section>
        <header>
            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Préférences Diabetix</h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                Personnalisez votre prénom, votre type de diabète, votre plage cible (mg/dL) et le thème de l'application.
            </p>
        </header>

        <form @submit.prevent="form.patch(route('profile.diabetix'), { preserveScroll: true })" class="mt-6 space-y-6">
            <div>
                <InputLabel for="first_name" value="Prénom" />
                <TextInput id="first_name" v-model="form.first_name" type="text" class="mt-1 block w-full" autocomplete="given-name" />
                <InputError :message="form.errors.first_name" class="mt-2" />
            </div>

            <div>
                <InputLabel value="Type de diabète" />
                <div class="mt-2 flex flex-wrap gap-2">
                    <button v-for="t in types" :key="t.id" type="button" @click="form.diabetes_type = t.id"
                        :class="[
                            'rounded-full border px-4 py-1.5 text-sm transition',
                            form.diabetes_type === t.id
                                ? 'border-emerald-500 bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200'
                                : 'border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700',
                        ]">{{ t.label }}</button>
                </div>
                <InputError :message="form.errors.diabetes_type" class="mt-2" />
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <InputLabel for="target_min" value="Cible min (mg/dL)" />
                    <TextInput id="target_min" v-model.number="form.target_min" type="number" min="50" max="140" class="mt-1 block w-full" />
                    <InputError :message="form.errors.target_min" class="mt-2" />
                </div>
                <div>
                    <InputLabel for="target_max" value="Cible max (mg/dL)" />
                    <TextInput id="target_max" v-model.number="form.target_max" type="number" min="120" max="300" class="mt-1 block w-full" />
                    <InputError :message="form.errors.target_max" class="mt-2" />
                </div>
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400">
                Valeurs par défaut OMS / consensus international : 70–180 mg/dL.
            </p>

            <div>
                <InputLabel value="Thème de couleur" />
                <div class="mt-2 flex gap-3">
                    <button v-for="p in palettes" :key="p.id" type="button" @click="form.palette = p.id"
                        :class="[
                            'flex items-center gap-2 rounded-full border px-4 py-2 text-sm transition',
                            form.palette === p.id
                                ? 'border-gray-900 dark:border-gray-100'
                                : 'border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700',
                        ]">
                        <span class="block h-4 w-4 rounded-full" :style="{ background: p.swatch }" />
                        <span>{{ p.label }}</span>
                    </button>
                </div>
                <InputError :message="form.errors.palette" class="mt-2" />
            </div>

            <div class="flex items-center gap-4">
                <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
                <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
                    <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Préférences enregistrées.</p>
                </Transition>
                <Link :href="route('dashboard')" class="ml-auto text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100">← Retour à l'app</Link>
            </div>
        </form>
    </section>
</template>
