<template>
  <div class="chat-input-container">
    <input
      v-model="message"
      type="text"
      :placeholder="$t('button_send')"
      @keyup.enter="sendMessage"
    />
    <button @click="sendMessage">{{ $t('button_send') }}</button>
    <button class="no-style" @click="showSmileys = !showSmileys" title="Add a smiley">
      <img src="/smileys.png" alt="Smileys" />
    </button>
    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="handleImageUpload"
    />
    <button class="no-style" @click="$refs.fileInput.click()" :title="$t('tooltip_send_image')">
      <img src="/image.png" alt="Image" />
    </button>
    
    <div v-if="showSmileys" class="smiley-bar">
      <span
        v-for="(smiley, code) in smileys"
        :key="code"
        class="smiley-item"
        :title="smiley.tooltip"
        v-html="'&#x' + smiley.code + ';'"
        @click="insertSmiley(code)"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useChatStore } from '../stores/chat';

const chatStore = useChatStore();
const message = ref('');
const showSmileys = ref(false);

// Smiley-Definitionen (wie im Original)
const smileys = {
  ':)': { code: '1F642', emoji: '🙂', tooltip: 'Smile' },
  ':D': { code: '1F600', emoji: '😀', tooltip: 'Laugh' },
  ':(': { code: '1F641', emoji: '🙁', tooltip: 'Sad' },
  ';)': { code: '1F609', emoji: '😉', tooltip: 'Twinkle' },
  ':p': { code: '1F60B', emoji: '😋', tooltip: 'Tongue' },
  ';p': { code: '1F61C', emoji: '😜', tooltip: 'Twinkle tongue' },
  'O)': { code: '1F607', emoji: '😇', tooltip: 'Angel' },
  ':*': { code: '1F617', emoji: '😗', tooltip: 'Kiss' },
  '(h)': { code: '1FA77', emoji: '🩷', tooltip: 'Heart' },
  'xD': { code: '1F602', emoji: '😂', tooltip: 'Laughing hard' },
  ':@': { code: '1F635', emoji: '😵', tooltip: 'Confused' },
  ':O': { code: '1F632', emoji: '😲', tooltip: 'Surprised' },
  ':3': { code: '1F63A', emoji: '😺', tooltip: 'Cat face' },
  ':|': { code: '1F610', emoji: '😐', tooltip: 'Neutral' },
  ':/': { code: '1FAE4', emoji: '🫤', tooltip: 'Skeptical' },
  ':#': { code: '1F912', emoji: '🤒', tooltip: 'Sick' },
  '#)': { code: '1F973', emoji: '🥳', tooltip: 'Partied' },
  '%)': { code: '1F974', emoji: '🥴', tooltip: 'Drunk' },
  '(t)': { code: '1F44D', emoji: '👍', tooltip: 'Thumbs up' },
  ":'(": { code: '1F622', emoji: '😢', tooltip: 'Cry' }
};

function sendMessage() {
  if (!message.value.trim() || !chatStore.currentConversation) return;
  
  chatStore.sendMessage(chatStore.currentConversation, message.value.trim());
  message.value = '';
}

function insertSmiley(code) {
  message.value += code;
  showSmileys.value = false;
}

async function handleImageUpload(event) {
  const file = event.target.files[0];
  if (!file) return;
  
  if (!chatStore.currentConversation) {
    console.error('Keine Konversation ausgewählt');
    return;
  }
  
  // Prüfe Dateigröße (max. 5MB)
  const maxSize = 5 * 1024 * 1024; // 5MB
  if (file.size > maxSize) {
    alert('Bild ist zu groß. Maximale Größe: 5MB');
    return;
  }
  
  try {
    // Lese Bild als Base64
    const reader = new FileReader();
    reader.onload = (e) => {
      const base64Image = e.target.result;
      // Sende Bild als Nachricht
      chatStore.sendImage(chatStore.currentConversation, base64Image, file.type);
    };
    reader.onerror = (error) => {
      console.error('Fehler beim Lesen des Bildes:', error);
      alert('Fehler beim Lesen des Bildes');
    };
    reader.readAsDataURL(file);
  } catch (error) {
    console.error('Fehler beim Bild-Upload:', error);
    alert('Fehler beim Bild-Upload');
  }
  
  // Input zurücksetzen, damit das gleiche Bild erneut ausgewählt werden kann
  event.target.value = '';
}
</script>


