<template>
  <DialogWidget ref="dialog" :title="$t('chat.multichat.title')" :modal="true" width="40em" height="32em" name="MultiChat">
    <div class="multi-chat-top">
      <select v-model="selectedRoom" class="room-select">
        <option v-for="room in rooms" :key="room.id" :value="room.id">{{ room.title }}</option>
      </select>
      <div class="options-popdown">
        <label>
          <input type="checkbox" v-model="autoscroll" />
          {{ $t('chat.multichat.autoscroll') }}
        </label>
        <!-- Weitere Optionen können hier ergänzt werden -->
      </div>
    </div>
    <div class="multi-chat-output" ref="output" @mouseenter="mouseOverOutput = true" @mouseleave="mouseOverOutput = false">
      <div v-for="msg in messages" :key="msg.id" class="chat-message">
        <span class="user">{{ msg.user }}:</span> <span class="text">{{ msg.text }}</span>
      </div>
    </div>
    <div class="multi-chat-input">
  <input v-model="input" @keyup.enter="sendMessage" class="chat-input" :placeholder="$t('chat.multichat.placeholder')" />
  <button @click="sendMessage" class="send-btn">{{ $t('chat.multichat.send') }}</button>
  <button @click="shout" class="mini-btn">{{ $t('chat.multichat.shout') }}</button>
  <button @click="action" class="mini-btn">{{ $t('chat.multichat.action') }}</button>
  <button @click="roll" class="mini-btn">{{ $t('chat.multichat.roll') }}</button>
    </div>
  </DialogWidget>
</template>

<script>
import DialogWidget from '@/components/DialogWidget.vue';

export default {
  name: 'MultiChat',
  components: { DialogWidget },
  data() {
    return {
      rooms: [],
      selectedRoom: null,
      autoscroll: true,
      mouseOverOutput: false,
      messages: [],
      input: ''
    };
  },
  watch: {
    messages() {
      this.$nextTick(this.handleAutoscroll);
    },
    autoscroll(val) {
      if (val) this.handleAutoscroll();
    }
  },
  methods: {
    open(rooms = []) {
      this.rooms = rooms;
      this.selectedRoom = rooms.length ? rooms[0].id : null;
      this.autoscroll = true;
      this.messages = [];
      this.input = '';
      this.$refs.dialog.open();
    },
    handleAutoscroll() {
      if (this.autoscroll && !this.mouseOverOutput) {
        const out = this.$refs.output;
        if (out) out.scrollTop = out.scrollHeight;
      }
    },
    sendMessage() {
      if (!this.input.trim()) return;
      this.messages.push({ id: Date.now(), user: 'Ich', text: this.input });
      this.input = '';
    },
    shout() {
      // Schreien-Logik
    },
    action() {
      // Aktion-Logik
    },
    roll() {
      // Würfeln-Logik
    }
  }
};
</script>

<style scoped>
.multi-chat-top {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 0.5em;
}
.room-select {
  min-width: 10em;
}
.options-popdown {
  background: #f5f5f5;
  border-radius: 4px;
  padding: 0.3em 0.8em;
  font-size: 0.95em;
}
.multi-chat-output {
  background: #222;
  color: #fff;
  height: 16em;
  overflow-y: auto;
  margin-bottom: 0.5em;
  padding: 0.7em;
  border-radius: 4px;
  font-size: 1em;
}
.chat-message {
  margin-bottom: 0.3em;
}
.user {
  font-weight: bold;
  color: #90caf9;
}
.multi-chat-input {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.chat-input {
  flex: 1;
  padding: 0.4em 0.7em;
  border-radius: 3px;
  border: 1px solid #bbb;
}
.send-btn {
  padding: 0.3em 1.1em;
  border-radius: 3px;
  background: #1976d2;
  color: #fff;
  border: none;
  cursor: pointer;
}
.mini-btn {
  padding: 0.2em 0.7em;
  font-size: 0.95em;
  border-radius: 3px;
  background: #eee;
  color: #333;
  border: 1px solid #bbb;
  cursor: pointer;
}
</style>
