
<template>
  <div class="admin-chat-rooms">
    <h2>{{ $t('admin.chatrooms.title') }}</h2>
    <button class="create-btn" @click="openCreateDialog">{{ $t('admin.chatrooms.create') }}</button>
    <table class="rooms-table">
      <thead>
        <tr>
          <th>{{ $t('admin.chatrooms.roomName') }}</th>
          <th>{{ $t('admin.chatrooms.type') }}</th>
          <th>{{ $t('admin.chatrooms.isPublic') }}</th>
          <th>{{ $t('admin.chatrooms.actions') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="room in rooms" :key="room.id">
          <td>{{ room.title }}</td>
          <td>{{ room.roomTypeTr || room.roomTypeId }}</td>
          <td>{{ room.isPublic ? $t('common.yes') : $t('common.no') }}</td>
          <td>
            <button @click="editRoom(room)">{{ $t('common.edit') }}</button>
            <button @click="deleteRoom(room)">{{ $t('common.delete') }}</button>
          </td>
        </tr>
      </tbody>
    </table>
  <RoomDialog ref="roomDialog" :room="selectedRoom" @save="fetchRooms" />
  </div>
</template>

<script>
import RoomDialog from '@/dialogues/admin/RoomDialog.vue';
import apiClient from '@/utils/axios.js';

export default {
  name: 'AdminChatRoomsView',
  components: { RoomDialog },
  data() {
    return {
      rooms: [],
  // dialog: false, // removed, handled by DialogWidget
      selectedRoom: null,
  // headers entfernt, da eigene Tabelle
  // roomTypeTr sollte beim Laden der Räume mitgeliefert werden (API/Backend)
    }
  },
  mounted() {
    this.fetchRooms();
  },
  methods: {
    openCreateDialog() {
      this.selectedRoom = null;
      this.$refs.roomDialog.open();
    },
    editRoom(room) {
      this.selectedRoom = { ...room };
      this.$refs.roomDialog.open(this.selectedRoom);
    },
    async deleteRoom(room) {
      if (!room.id) return;
  await apiClient.delete(`/api/admin/chat/rooms/${room.id}`);
      this.fetchRooms();
    },
    async fetchRooms() {
  const res = await apiClient.get('/api/admin/chat/rooms');
      this.rooms = res.data;
    },
  },
}
</script>

<style scoped>
.admin-chat-rooms {
  max-width: 900px;
  margin: 0 auto;
}
.create-btn {
  margin-bottom: 12px;
  padding: 6px 18px;
  border: none;
  border-radius: 3px;
  background: #1976d2;
  color: #fff;
  cursor: pointer;
}
.rooms-table {
  width: 100%;
  border-collapse: collapse;
}
.rooms-table th, .rooms-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.rooms-table th {
  background: #f5f5f5;
}
.rooms-table td button {
  margin-right: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 3px;
  background: #eee;
  cursor: pointer;
}
.rooms-table td button:hover {
  background: #1976d2;
  color: #fff;
}
</style>
