<template>
  <BasicModal
    title="افزودن مهارت"
    title-en="Add skills"
    width="95%"
    max-width="40rem"
    min-width="auto"
    :show-close-button="true"
  >
    <template #default="{ close }">
      <div class="add-skill">
        <div v-if="store.skills.length > 0" class="add-skill__selected">
          <Badge
            v-for="skill in store.skills"
            :key="skill.title"
            variant="neutral"
            :label="skill.title"
            :value="SKILL_LEVELS[skill.level] || skill.level"
          >
            <template #append>
              <button
                type="button"
                class="add-skill__remove"
                aria-label="حذف مهارت"
                @click="store.removeSkill(skill.title)"
              >
                <SvgIcon name="close" :size="12" color="currentColor" />
              </button>
            </template>
          </Badge>
        </div>

        <label class="add-skill__hint">مهارت های خود را با علامت Enter از هم جدا کنید.</label>
        <textarea
          v-model="query"
          rows="4"
          class="add-skill__input"
          @keydown.enter.prevent="onEnter"
        />

        <div v-if="suggestions.length > 0" class="add-skill__suggestions">
          <div
            v-for="suggestion in suggestions"
            :key="suggestion"
            class="add-skill__suggestion"
            :class="{ 'add-skill__suggestion--open': pendingSkill === suggestion }"
          >
            <Badge
              variant="neutral"
              :value="suggestion"
              clickable
              @click="togglePending(suggestion)"
            >
              <template #append>
                <SvgIcon name="plus" :size="12" color="currentColor" />
              </template>
            </Badge>
            <div v-if="pendingSkill === suggestion" class="add-skill__levels">
              <button
                v-for="(label, level) in SKILL_LEVELS"
                :key="level"
                type="button"
                class="add-skill__level"
                @click="addWithLevel(suggestion, level)"
              >
                {{ label }}
              </button>
            </div>
          </div>
        </div>

        <div class="add-skill__divider" />

        <footer class="add-skill__footer">
          <BaseButton text="ذخیره اطلاعات" custom-class="add-skill__submit" @click="close">
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="18" color="#fff" />
            </template>
          </BaseButton>
        </footer>
      </div>
    </template>
  </BasicModal>
</template>

<script setup>
import { computed, ref } from 'vue'
import Badge from '@/components/Badge.vue'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { useCompleteInfoStore } from '@/features/missionary/store/complete-info'
import { SKILL_LEVELS, SKILL_SUGGESTIONS } from '@/features/missionary/constants/complete-info'

defineOptions({ name: 'MissionaryAddSkillModal' })

const store = useCompleteInfoStore()

const query = ref('')
const pendingSkill = ref('')

const suggestions = computed(() => {
  const term = query.value.trim()
  if (!term) return []
  const picked = new Set(store.skills.map((s) => s.title))
  const matches = SKILL_SUGGESTIONS.filter(
    (title) => title.includes(term) && !picked.has(title)
  ).slice(0, 8)
  if (!matches.includes(term) && !picked.has(term)) matches.unshift(term)
  return matches
})

const togglePending = (title) => {
  pendingSkill.value = pendingSkill.value === title ? '' : title
}

const onEnter = () => {
  const term = query.value.trim()
  if (term) pendingSkill.value = term
}

const addWithLevel = (title, level) => {
  store.addSkill({ title, level })
  pendingSkill.value = ''
  query.value = ''
}
</script>

<style lang="scss" scoped>
.add-skill {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: start;
  padding-block: 0.25rem 0.5rem;

  &__selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  &__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #b1b1b1;
    cursor: pointer;

    &:hover {
      color: var(--color-error);
    }
  }

  &__hint {
    font-family: var(--font-family-fa);
    font-weight: 300;
    font-size: 0.875rem;
    color: #b5b5b5;
  }

  &__input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-thd-gray);
    border-radius: 1rem;
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    color: #4b4b4b;
    outline: none;
    resize: vertical;

    &:focus {
      border-color: var(--color-prim-gray);
    }
  }

  &__suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
  }

  &__suggestion {
    position: relative;

    &--open {
      z-index: 5;
    }
  }

  &__levels {
    position: absolute;
    top: calc(100% + 0.25rem);
    inset-inline-start: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    border-radius: 0.625rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 8%);
    overflow: hidden;
  }

  &__level {
    border: none;
    background: transparent;
    padding: 0.625rem 1rem;
    font-family: var(--font-family-fa);
    font-size: 0.8rem;
    color: #7a7a7a;
    text-align: start;
    cursor: pointer;
    white-space: nowrap;

    &:hover {
      background: #ececec;
      color: #4b4b4b;
    }
  }

  &__divider {
    border-block-end: 1px solid #ddd;
    margin-top: 4rem;
  }

  &__footer {
    display: flex;
    justify-content: flex-start;
  }

  &__submit {
    min-width: 14rem;
    padding: 0 1.5rem;
  }
}
</style>
