<script setup lang="ts">
/** Étape 3 — toi (Person isMe) + les premiers membres, ajout rapide au clavier. */
const meName = defineModel<string>('meName', { required: true })
const members = defineModel<string[]>('members', { required: true })

const newMember = ref('')
const meInput = ref<HTMLInputElement | null>(null)
const memberInput = ref<HTMLInputElement | null>(null)

onMounted(() => meInput.value?.focus())

function addMember() {
  const value = newMember.value.trim()
  if (!value) return
  if (!members.value.includes(value)) members.value = [...members.value, value]
  newMember.value = ''
}

function removeMember(index: number) {
  members.value = members.value.filter((_, i) => i !== index)
}
</script>

<template>
  <!-- ld-v2 -->
  <section class="memstep">
    <label class="field">
      <span class="field__label">Toi — ton prénom</span>
      <input
        ref="meInput"
        v-model="meName"
        class="field__input"
        type="text"
        placeholder="Camille"
        autocomplete="given-name"
        enterkeyhint="next"
        @keydown.enter.prevent="memberInput?.focus()"
      >
    </label>

    <div class="field">
      <span class="field__label">Les premières personnes autour de la table</span>
      <div class="member-add">
        <input
          ref="memberInput"
          v-model="newMember"
          class="field__input member-add__input"
          type="text"
          placeholder="Un prénom, puis Entrée"
          autocomplete="off"
          enterkeyhint="enter"
          @keydown.enter.prevent="addMember"
        >
        <button
          type="button"
          class="ld-btn ld-btn--ghost"
          :disabled="!newMember.trim()"
          @click="addMember"
        >
          <UIcon name="i-lucide-plus" /> Ajouter
        </button>
      </div>

      <ul v-if="members.length" class="member-chips">
        <li v-for="(m, i) in members" :key="m" class="member-chip">
          {{ m }}
          <button
            type="button"
            class="member-chip__x"
            :aria-label="`Retirer ${m}`"
            @click="removeMember(i)"
          >
            <UIcon name="i-lucide-x" />
          </button>
        </li>
      </ul>
      <p class="field__hint">Tu pourras en ajouter à tout moment — les cercles se dessinent à l'usage.</p>
    </div>
  </section>
</template>

<style scoped>
.memstep {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  width: min(100%, 26rem);
  margin-inline: auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mood-text-muted);
}

.field__input {
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 1.0625rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--mood-input-border);
  border-radius: var(--r-input);
}
.field__input:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--mood-input-focus), 0 0 0 2.5px var(--mood-accent-soft);
}

.field__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}

.member-add {
  display: flex;
  gap: 0.5rem;
}
.member-add__input { flex: 1; min-width: 0; }

.member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  background: var(--mood-accent-soft);
  color: var(--mood-text);
}

.member-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  cursor: pointer;
  background: none;
  color: var(--mood-text-muted);
  transition: background 0.1s ease, color 0.1s ease;
}
.member-chip__x:hover {
  background: var(--mood-surface);
  color: var(--mood-error);
}
</style>
