<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoleStore }    from '@/stores/RoleStore.js'

const store          = useRoleStore()
const selectedRoleId = ref(null)

// Загружаем сначала роли (чтобы сразу выбрать первую), затем — все разрешения
onMounted(async () => {
  await store.fetchRoles()
  if (store.roles.length > 0) {
    selectedRoleId.value = store.roles[0].id
  }
  await store.fetchPermissions()
})

// Вычисляем объект выбранной роли
const selectedRole = computed(() =>
    store.roles.find(r => r.id === selectedRoleId.value) || null
)

// Проверяем, назначено ли perm выбранной роли
function isAssigned(perm) {
  return selectedRole.value?.permissions?.some(p => p.id === perm.id) ?? false
}

// При клике на чекбокс
async function onToggle(perm, event) {
  const assigned = event.target.checked
  if (selectedRoleId.value === null) return
  await store.toggleRolePermission(selectedRoleId.value, perm.id, assigned)
}

// Создать новое разрешение
const newPermName = ref('')

async function createPerm() {
  if (!newPermName.value.trim()) return
  try {
    await store.addPermission(newPermName.value.trim())
    newPermName.value = ''
  } catch {
    alert('Не удалось создать разрешение')
  }
}

// Удалить разрешение
async function deletePerm(id) {
  if (confirm('Удалить разрешение?')) {
    await store.removePermission(id)
  }
}
</script>

<template>
  <div class="row">
    <div class="col-3">
      <h5>Роли</h5>
      <ul class="list-group">
        <li
            v-for="r in store.roles"
            :key="r.id"
            @click="selectedRoleId = r.id"
            :class="['list-group-item', { active: r.id === selectedRoleId }]"
            style="cursor: pointer"
        >
          {{ r.name }}
        </li>
      </ul>
    </div>

    <div class="col-9">
      <h5 class="mb-3">
        Разрешения для роли:
        <strong>{{ selectedRole ? selectedRole.name : '—' }}</strong>
      </h5>

      <div class="d-flex mb-3">
        <input
            v-model="newPermName"
            class="form-control me-2"
            placeholder="Новое разрешение"
        />
        <button class="btn btn-success" @click="createPerm">
          Добавить
        </button>
      </div>

      <table class="table table-sm">
        <thead>
        <tr>
          <th>Разрешение</th>
          <th>Назначено</th>
          <th>Удалить</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="perm in store.permissions" :key="perm.id">
          <td>{{ perm.name }}</td>
          <td>
            <input
                type="checkbox"
                :checked="isAssigned(perm)"
                @change="e => onToggle(perm, e)"
            />
          </td>
          <td>
            <button
                class="btn btn-sm btn-danger"
                @click="deletePerm(perm.id)"
            >×
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
