<template>
  <form class="chat-form" @submit.prevent="handleSubmit">
    <textarea
      v-model="prompt"
      aria-label="Pregunta del usuario"
      placeholder="Escribe tu mensaje..."
      autocomplete="off"
      required
      :disabled="disabled"
      @keydown.enter.exact.prevent="handleSubmit"
      @keydown.enter.shift.exact="addNewLine"
    ></textarea>
    <button 
      type="submit" 
      :disabled="disabled || !prompt.trim()"
    >
      Enviar
    </button>
  </form>
</template>

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

defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['send-message'])

const prompt = ref('')

const handleSubmit = () => {
  if (!prompt.value.trim()) return
  
  emit('send-message', prompt.value.trim())
  prompt.value = ''
}

const addNewLine = () => {
  prompt.value += '\n'
}
</script>

<style scoped>
.chat-form {
  flex-shrink: 0;
  margin-top: 1.25rem;
  display: flex;
  gap: 12px;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
}

textarea {
  flex-grow: 1;
  min-height: 4.25rem;
  border-radius: 16px;
  border: 1px solid #2d2f36;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  resize: none;
  outline: none;
  background-color: #1c1e24;
  color: #e6e9ef;
  font-family: inherit;
  max-width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

textarea::placeholder {
  color: #6a6e7c;
  font-style: italic;
  opacity: 0.9;
}

textarea:focus {
  border-color: #5a90ff;
  background-color: #20232a;
}

button {
  background-color: #5a90ff;
  border: none;
  border-radius: 14px;
  color: #ffffff;
  padding: 0 1.75rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.1s ease;
  white-space: nowrap;
}

button:hover:not(:disabled) {
  background-color: #4076e0;
}

button:active:not(:disabled) {
  transform: translateY(1px);
  background-color: #305dc0;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #3a4a6a;
}
</style>
