<script setup lang="ts">
// Модальный ввод одной строки — замена window.prompt (в стиле кита, с фокусом).
import { nextTick, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps<{
  open: boolean
  title: string
  /** Подпись поля ввода — без неё поле выглядит «ноунейм» */
  label?: string
  placeholder?: string
  /** Текст подтверждающей кнопки (по умолчанию «Создать») */
  confirmText?: string
}>()
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'confirm', text: string): void
}>()

const { t } = useI18n()
const text = ref('')
const inputRef = ref<HTMLInputElement | null>(null)

watch(
  () => props.open,
  (open) => {
    if (open) {
      text.value = ''
      // ref указывает на компонент GnInput — корень достаём из $el
      void nextTick(() => {
        const el = (inputRef.value as { $el?: HTMLElement } | null)?.$el ?? inputRef.value
        if (el instanceof HTMLElement) el.querySelector('input')?.focus()
      })
    }
  },
)

function submit() {
  const value = text.value.trim()
  if (!value) return
  emit('confirm', value)
  emit('update:open', false)
}
</script>

<template>
  <GnModal :open="open" :title="title" @update:open="emit('update:open', $event)">
    <form class="quick-prompt" @submit.prevent="submit">
      <GnInput
        ref="inputRef"
        v-model="text"
        :label="props.label"
        :placeholder="props.placeholder"
      />
      <div class="quick-prompt-actions">
        <GnButton type="submit" variant="success" icon="ph-check">
          {{ props.confirmText ?? t('common.create') }}
        </GnButton>
        <GnButton type="button" variant="primary" @click="emit('update:open', false)">
          {{ t('common.cancel') }}
        </GnButton>
      </div>
    </form>
  </GnModal>
</template>

<style scoped>
.quick-prompt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quick-prompt-actions {
  display: flex;
  gap: 0.75rem;
}
</style>