<template>
  <BaseModal
    :show="show"
    :aria-labelledby="mode === 'delete' ? 'delete-poi-title' : 'poi-modal-title'"
    @close="$emit('close')"
  >
    <div
      v-if="mode === 'add' || mode === 'edit'"
      ref="modalRef"
      class="kestrel-card-modal relative w-full max-w-md p-6"
    >
      <h2
        id="poi-modal-title"
        class="kestrel-section-heading mb-4"
      >
        {{ mode === 'edit' ? 'Edit POI' : 'Add POI' }}
      </h2>
      <form
        class="space-y-4"
        @submit.prevent="$emit('submit', { label: localForm.label, iconType: localForm.iconType })"
      >
        <div>
          <label
            for="add-poi-label"
            class="kestrel-label"
          >Label (optional)</label>
          <input
            id="add-poi-label"
            v-model="localForm.label"
            type="text"
            placeholder="e.g. Rally point"
            class="kestrel-input"
            autocomplete="off"
          >
        </div>
        <div
          ref="iconRef"
          class="relative inline-block w-full"
        >
          <label class="kestrel-label">Icon type</label>
          <button
            type="button"
            class="flex w-full min-w-0 items-center justify-between gap-2 rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-left text-sm text-kestrel-text transition-colors hover:border-kestrel-accent/50"
            :aria-expanded="iconOpen"
            aria-haspopup="listbox"
            :aria-label="`Icon type: ${localForm.iconType}`"
            @click="iconOpen = !iconOpen"
          >
            <span class="flex items-center gap-2 capitalize">
              <Icon
                :name="POI_ICONIFY_IDS[localForm.iconType]"
                class="size-4 shrink-0"
              />
              {{ localForm.iconType }}
            </span>
            <span
              class="text-kestrel-muted transition-transform"
              :class="iconOpen && 'rotate-180'"
            >▾</span>
          </button>
          <Transition
            enter-active-class="transition duration-100 ease-out"
            enter-from-class="opacity-0 scale-95"
            enter-to-class="opacity-100 scale-100"
            leave-active-class="transition duration-75 ease-in"
            leave-from-class="opacity-100 scale-100"
            leave-to-class="opacity-0 scale-95"
          >
            <div
              v-show="iconOpen"
              class="absolute left-0 right-0 top-full z-10 mt-1 rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow shadow-glow-dropdown"
              role="listbox"
            >
              <button
                v-for="opt in POI_ICON_TYPES"
                :key="opt"
                type="button"
                role="option"
                :aria-selected="localForm.iconType === opt"
                class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm capitalize transition-colors"
                :class="localForm.iconType === opt ? 'bg-kestrel-accent-dim text-kestrel-accent' : 'text-kestrel-text hover:bg-kestrel-border'"
                @click="localForm.iconType = opt; iconOpen = false"
              >
                <Icon
                  :name="POI_ICONIFY_IDS[opt]"
                  class="size-4 shrink-0"
                />
                {{ opt }}
              </button>
            </div>
          </Transition>
        </div>
        <div class="flex justify-end gap-2 pt-2">
          <button
            type="button"
            class="kestrel-btn-secondary"
            @click="$emit('close')"
          >
            Cancel
          </button>
          <button
            type="submit"
            class="rounded bg-kestrel-accent px-4 py-2 text-sm font-medium text-kestrel-bg transition-opacity hover:opacity-90"
          >
            {{ mode === 'edit' ? 'Save changes' : 'Add POI' }}
          </button>
        </div>
      </form>
    </div>
    <div
      v-else-if="mode === 'delete'"
      ref="modalRef"
      class="kestrel-card-modal relative w-full max-w-sm p-6"
    >
      <h2
        id="delete-poi-title"
        class="kestrel-section-heading mb-2"
      >
        Delete POI?
      </h2>
      <p class="mb-4 text-sm text-kestrel-muted">
        {{ deletePoi?.label ? `"${deletePoi.label}" will be removed.` : 'This POI will be removed.' }}
      </p>
      <div class="flex justify-end gap-2">
        <button
          type="button"
          class="kestrel-btn-secondary"
          @click="$emit('close')"
        >
          Cancel
        </button>
        <button
          type="button"
          class="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90"
          @click="$emit('confirmDelete')"
        >
          Delete
        </button>
      </div>
    </div>
  </BaseModal>
</template>

<script setup>
const POI_ICONIFY_IDS = { pin: 'tabler:map-pin', flag: 'tabler:flag', waypoint: 'tabler:current-location' }
const POI_ICON_TYPES = Object.keys(POI_ICONIFY_IDS)

const props = defineProps({
  show: Boolean,
  mode: { type: String, default: 'add' },
  form: { type: Object, default: () => ({ label: '', iconType: 'pin' }) },
  editPoi: { type: Object, default: null },
  deletePoi: { type: Object, default: null },
})
defineEmits(['close', 'submit', 'confirmDelete'])

const modalRef = ref(null)
const iconRef = ref(null)
const iconOpen = ref(false)
const localForm = ref({ label: '', iconType: 'pin' })

watch(() => props.show, (show) => {
  if (!show) return
  iconOpen.value = false
  localForm.value = props.mode === 'edit' && props.editPoi
    ? { label: (props.editPoi.label ?? '').trim(), iconType: props.editPoi.icon_type || 'pin' }
    : { ...props.form }
})

function onDocClick(e) {
  if (iconOpen.value && iconRef.value && !iconRef.value.contains(e.target)) iconOpen.value = false
}
onMounted(() => document.addEventListener('click', onDocClick))
onBeforeUnmount(() => document.removeEventListener('click', onDocClick))
</script>
