<script setup>
import { useAuthStore } from '@/stores/Auth.js'
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'

const router     = useRouter()
const authStore  = useAuthStore()

/**
 * ui‑структура:
 * [
 *   { roleName : 'Региональный менеджер', alias : 'stManagers', users : [...] },
 *   { roleName : 'Менеджер группы',       alias : 'managers',   users : [...] },
 *   ...
 * ]
 */
const roleGroups = ref([])   // объединяем всё в один reactive‑массив

/** Соответствие «русское название роли → старый alias (для читаемости кода)» */
const ROLE_MAP = {
  'Региональный менеджер': 'stManagers',
  'Менеджер группы':       'managers',
  'Менеджер подгруппы':    'operators',
  'Заказчик':              'clients',
}

async function getUsers () {
  const { response } = await authStore.getUsers()
  const data = response.data || {}

  // превращаем объект в массив, чтобы удобно итерироваться в шаблоне
  roleGroups.value = Object.entries(ROLE_MAP).map(
      ([ruName, alias]) => ({
        roleName : ruName,
        alias,
        users    : data[ruName] ?? [],
      })
  )
}

onMounted(getUsers)

function formatDate (dateStr) {
  const date = new Date(dateStr)
  return isNaN(date) ? '—' : date.toLocaleDateString('ru-RU')
}

function deleteUser (id) {
  authStore.deleteUser(id).then(getUsers)
}
</script>

<template>
  <div class="table-responsive p-3">
    <table class="table table-bordered table-hover">
      <thead>
      <tr>
        <th class="text-center bg-secondary text-white align-middle">
          Фамилия Имя Отчество
        </th>
        <th class="text-center bg-secondary text-white align-middle">
          Дата рождения
        </th>
        <th class="text-center bg-secondary text-white align-middle">
          Должность
        </th>
        <th class="text-center bg-secondary text-white align-middle">
          Роль
        </th>
        <th
            class="text-center bg-secondary text-white align-middle"
            style="width: 160px"
        >
          Действия
        </th>
      </tr>
      </thead>

      <!-- выводим блоком каждую группу пользователей -->
      <template v-for="group in roleGroups" :key="group.roleName">
        <tbody v-if="group.users.length">
        <tr class="table-primary fw-bold">
          <td colspan="5">{{ group.roleName }}</td>
        </tr>

        <tr
            v-for="user in group.users"
            :key="user.id"
            class="align-middle"
        >
          <td>
            {{ user.last_name }} {{ user.first_name }} {{ user.middle_name }}
          </td>
          <td>{{ formatDate(user.birthday) }}</td>
          <td>{{ user.position }}</td>
          <td>{{ user.role?.name || '—' }}</td>
          <td>
            <div class="d-flex gap-1">
              <button
                  type="button"
                  class="btn btn-primary btn-sm"
                  @click="router.push({ name: 'user-profile', params: { id: user.id } })"
              >
                Редактировать
              </button>
              <button
                  type="button"
                  class="btn btn-danger btn-sm"
                  @click="deleteUser(user.id)"
              >
                Удалить
              </button>
            </div>
          </td>
        </tr>
        </tbody>
      </template>
    </table>
  </div>
</template>
