<template>
  <!-- Editable "From" field: a plain text input (free text always preserved)
       with an auto-suggest dropdown of validated Mailjet senders. Type freely,
       or pick a suggestion. -->
  <q-input
    :model-value="modelValue"
    @update:model-value="onInput"
    @focus="menuOpen = true"
    :label="label"
    outlined dense
    :placeholder="placeholder"
    :hint="hint"
    spellcheck="false"
    autocomplete="off"
  >
    <template #append>
      <q-icon name="expand_more" class="cursor-pointer" @click.stop="menuOpen = !menuOpen" />
    </template>
    <q-menu
      :model-value="menuOpen && filtered.length > 0"
      @update:model-value="v => menuOpen = v"
      no-focus no-refocus fit anchor="bottom left" self="top left"
    >
      <q-list dense style="min-width:320px">
        <q-item v-for="s in filtered" :key="s" clickable v-close-popup
                :active="s === modelValue" @click="pick(s)">
          <q-item-section class="text-body2">{{ s }}</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-input>
</template>

<script setup>
import { ref, computed } from 'vue'

// Validated Mailjet senders — single source of truth for the From picker.
// Mailjet only delivers from a validated sender; an unvalidated address
// silently falls back to noreply@targo.ca, so we surface the known-good ones.
// The field stays free-text, so a newly-validated address can just be typed.
const SENDERS = [
  'Facturation Targo <facturation@targo.ca>',
  'Service TARGO <support@targointernet.com>',
  'TARGO <noreply@targo.ca>',
]

const props = defineProps({
  modelValue: { type: String, default: '' },
  label: { type: String, default: 'Expéditeur (From)' },
  placeholder: { type: String, default: 'Facturation Targo <facturation@targo.ca>' },
  hint: { type: String, default: 'Expéditeur validé Mailjet — saisie libre, ou choisir une suggestion' },
})
const emit = defineEmits(['update:modelValue'])

const menuOpen = ref(false)

const filtered = computed(() => {
  const q = (props.modelValue || '').toLowerCase().trim()
  // Empty, or already an exact match (pre-filled / just picked) → show the
  // full list so the dropdown stays a useful picker. Otherwise substring-filter.
  if (!q || SENDERS.some(s => s.toLowerCase() === q)) return SENDERS
  return SENDERS.filter(s => s.toLowerCase().includes(q))
})

function onInput (val) {
  emit('update:modelValue', val == null ? '' : val)
  menuOpen.value = true
}
function pick (s) {
  emit('update:modelValue', s)
  menuOpen.value = false
}
</script>
