<script setup lang="ts">
// Couleur de bandeau/filet : palette du gabarit PDF + couleurs du site Grav
// (hover des keywords de l'index). undefined = couleur par défaut (catégorie).
const props = withDefaults(
  defineProps<{
    label?: string
    /** Couleur affichée quand aucune n'est choisie (défaut catégorie). */
    defaultColor?: string
  }>(),
  { label: 'Couleur du bandeau' },
)

const model = defineModel<string | undefined>()

// Une couleur choisie hors palette = couleur personnalisée (input natif).
const isCustom = computed(() => !!model.value && !BAND_COLORS.includes(model.value))
</script>

<template>
  <div class="space-y-2">
    <p class="text-xs font-medium uppercase tracking-wide text-neutral-500">{{ label }}</p>
    <div class="flex flex-wrap gap-1.5">
      <!-- Défaut (catégorie) -->
      <button
        v-if="props.defaultColor"
        type="button"
        class="relative size-7 rounded-full border transition-transform hover:scale-110"
        :class="!model ? 'ring-2 ring-[var(--fl-ink)] ring-offset-1 dark:ring-white' : 'border-neutral-300 dark:border-neutral-600'"
        :style="{ backgroundColor: props.defaultColor }"
        title="Couleur par défaut"
        @click="model = undefined"
      >
        <UIcon name="i-lucide-rotate-ccw" class="absolute inset-0 m-auto size-3.5 text-black/40" />
      </button>
      <button
        v-for="c in BAND_COLORS"
        :key="c"
        type="button"
        class="size-7 rounded-full border transition-transform hover:scale-110"
        :class="model === c ? 'ring-2 ring-[var(--fl-ink)] ring-offset-1 dark:ring-white' : 'border-neutral-300 dark:border-neutral-600'"
        :style="{ backgroundColor: c }"
        :aria-label="c"
        @click="model = c"
      />
      <!-- Couleur personnalisée (sélecteur natif) -->
      <label
        class="relative flex size-7 cursor-pointer items-center justify-center overflow-hidden rounded-full border transition-transform hover:scale-110"
        :class="isCustom ? 'ring-2 ring-[var(--fl-ink)] ring-offset-1 dark:ring-white' : 'border-neutral-300 dark:border-neutral-600'"
        :style="isCustom ? { backgroundColor: model } : undefined"
        title="Couleur personnalisée"
      >
        <UIcon v-if="!isCustom" name="i-lucide-pipette" class="size-3.5 text-neutral-400" />
        <input
          type="color"
          class="absolute inset-0 cursor-pointer opacity-0"
          :value="isCustom ? model : '#000000'"
          @input="model = ($event.target as HTMLInputElement).value"
        >
      </label>
    </div>
  </div>
</template>
