<template>
    <div>
        <p class="mb-2 text-sm font-medium text-neutral-700">Couleur</p>
        <div class="flex flex-wrap items-center gap-3">
            <button
                v-for="color in presets"
                :key="color"
                type="button"
                class="h-10 w-10 rounded-full border-2 transition-transform hover:scale-110"
                :class="isSelected(color) ? 'border-neutral-900 scale-110' : 'border-transparent'"
                :style="{ backgroundColor: color }"
                :aria-label="`Choisir la couleur ${color}`"
                @click="select(color)"
            />

            <!-- Couleur personnalisée : input natif déguisé en pastille -->
            <label
                class="relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-2 transition-transform hover:scale-110"
                :class="isCustom ? 'border-neutral-900 scale-110' : 'border-dashed border-neutral-400'"
                :style="isCustom ? { backgroundColor: modelValue } : {}"
                title="Couleur personnalisée"
            >
                <input
                    type="color"
                    class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
                    :value="modelValue"
                    aria-label="Choisir une couleur personnalisée"
                    @input="select(($event.target as HTMLInputElement).value)"
                >
                <Icon
                    v-if="!isCustom"
                    name="mdi:plus"
                    class="text-neutral-500"
                    size="20"
                />
            </label>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    modelValue: string
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()

// Les 9 premières sont historiques (couleurs déjà en base) — ne pas réordonner
// pour que les projets/tags existants restent associés à une pastille.
const presets = [
    '#222783', '#26A69A', '#E91E63', '#4A90D9', '#7E57C2',
    '#8BC34A', '#FDD835', '#80DEEA', '#FF7043', '#EF4444',
    '#F97316', '#F59E0B', '#22C55E', '#10B981', '#06B6D4',
    '#3B82F6', '#8B5CF6', '#64748B',
]

const norm = (value: string): string => (value ?? '').toUpperCase()

function isSelected(color: string): boolean {
    return norm(props.modelValue) === norm(color)
}

const isCustom = computed(
    () => !!props.modelValue && !presets.some((c) => norm(c) === norm(props.modelValue)),
)

function select(value: string): void {
    emit('update:modelValue', norm(value))
}
</script>
