<template>
  <div class="flex items-center gap-2 mt-2">
    <!-- Replace mode: textarea only, no buttons -->
    <textarea
      v-if="mode === 'replace'"
      :value="modelValue"
      :placeholder="placeholder || 'Enter custom value...'"
      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
      rows="3"
      class="flex-1 px-3 py-1.5 text-sm border border-titan-green-800/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-titan-purple-500 resize-y"
    />

    <!-- Append mode: input/textarea + buttons -->
    <template v-else>
      <input
        v-if="variant === 'input'"
        type="text"
        :value="modelValue"
        :placeholder="placeholder || 'Enter custom value...'"
        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
        @keydown.enter.prevent="emit('submit')"
        @keydown.escape.prevent="emit('cancel')"
        @keydown="handleComma"
        class="flex-1 px-3 py-1.5 text-sm border border-titan-green-800/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-titan-purple-500"
      />
      <textarea
        v-else-if="variant === 'textarea'"
        :value="modelValue"
        :placeholder="placeholder || 'Enter custom value...'"
        @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
        @keydown.enter.prevent="emit('submit')"
        @keydown.escape.prevent="emit('cancel')"
        @keydown="handleComma"
        rows="3"
        class="flex-1 px-3 py-1.5 text-sm border border-titan-green-800/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-titan-purple-500 resize-y"
      />
      <button
        type="button"
        @click="$emit('submit')"
        aria-label="Add custom value"
        class="px-3 py-1.5 text-sm font-medium text-white bg-titan-purple-500 rounded-lg hover:bg-titan-purple-600 focus:outline-none focus:ring-2 focus:ring-titan-purple-500"
      >
        Add
      </button>
      <button
        type="button"
        @click="$emit('cancel')"
        aria-label="Cancel custom input"
        class="px-3 py-1.5 text-sm font-medium text-titan-green-800 bg-titan-green-800/10 rounded-lg hover:bg-titan-green-800/15 focus:outline-none focus:ring-2 focus:ring-titan-green-800"
      >
        Cancel
      </button>
    </template>
  </div>
</template>

<script setup lang="ts">
/**
 * @internal
 * Custom input component for TitanSelectContainer.
 * Provides a text input with Add/Cancel buttons for entering custom select values.
 */
import type { SelectCustomInputProps, SelectCustomInputEmits } from '@/types/components'

/**
 * Component props
 */
interface Props extends SelectCustomInputProps {
  /**
   * Current input value (v-model)
   */
  modelValue: string
  /**
   * Placeholder text for the input field
   * @default 'Enter custom value...'
   */
  placeholder?: string
  /**
   * Input variant - 'input' for single-line text input, 'textarea' for multi-line textarea
   * @default 'input'
   */
  variant?: 'input' | 'textarea'
  /**
   * Input mode - 'append' shows input + Add/Cancel buttons, 'replace' shows textarea only for immediate updates
   * @default 'append'
   */
  mode?: 'append' | 'replace'
}

/**
 * Component emits
 */
interface Emits extends SelectCustomInputEmits {
  /**
   * Emitted when the input value changes
   * @param value - The new input value
   */
  'update:modelValue': [value: string]
  /**
   * Emitted when the user submits the custom value (clicks Add or presses Enter)
   */
  'submit': []
  /**
   * Emitted when the user cancels the custom input (clicks Cancel or presses Escape)
   */
  'cancel': []
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'input',
  mode: 'append'
})
const emit = defineEmits<Emits>()

/**
 * Handle comma key to submit custom value
 */
const handleComma = (event: KeyboardEvent) => {
  if (event.key === ',') {
    event.preventDefault()
    emit('submit')
  }
}
</script>
