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

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

// Текущий пользователь и его роль
const currentUser = computed(() => authStore.user);
const isSubgroupManager = computed(() => currentUser.value.role?.name === 'Менеджер подгруппы');

// Список всех учётчиков, которые мы будем отображать
const counters = ref([]);
const deleteError = ref('');
// Состояния для формы создания / редактирования
const showForm = ref(false);
const isEditing = ref(false);
const formErrors = ref({});
const formModel = ref({
  first_name: '',
  middle_name: '',
  last_name: '',
  subgroup_manager_id: null, // всегда текущий менеджер подгруппы или другой, если админ
});

// Кандидаты на выбор (менеджеры подгруппы) — чтобы привязать к ним учётчика.
// Если текущий пользователь — менеджер подгруппы, в форму он увидит только себя и не сможет изменить.
const subgroupManagers = ref([]);

// Сбрасывает поля формы
function resetForm() {
  formErrors.value = {}
  formModel.value = {
    first_name: '',
    middle_name: '',
    last_name: '',
    subgroup_manager_id: isSubgroupManager.value
        ? currentUser.value.id
        : null
  }
  isEditing.value = false
  editingId.value = null
}

// Загружает список учётчиков с бэка
async function loadCounters() {
  // каждый раз, когда мы обновляем список, сбрасываем старую ошибку
  deleteError.value = '';
  try {
    const params = isSubgroupManager.value
        ? { subgroup_manager_id: currentUser.value.id }
        : {}
    // теперь getCounters возвращает { data: [ … ], error: … }
    const { data, error } = await authStore.getCounters(params)
    if (!error) {
      counters.value = data
    } else {
      console.error('Ошибка при получении списка учётчиков:', error)
    }
  } catch (e) {
    console.error(e)
  }
}

// -----------------------------------------------------------------
// Загружаем список «Менеджеров подгруппы» из API
// -----------------------------------------------------------------
async function loadSubgroupManagers() {
  // Если текущий пользователь сам «Менеджер подгруппы»,
  // ему не нужно выбирать другого — в форме привяжем его автоматически.
  if (isSubgroupManager.value) {
    return
  }

  try {
    // Предполагается, что fetchAllUsers() делает GET /api/users и возвращает весь grouped‐объект
    const { response, error } = await authStore.getUsers()
    if (error) {
      console.error('Не удалось получить сгруппированных пользователей:', error)
      return
    }

    const grouped = response.data

    // прямо берём ключ "Менеджер подгруппы" (если такого нет — вернётся пустой массив)
    subgroupManagers.value = grouped['Менеджер подгруппы'] || []
  } catch (e) {
    console.error('Ошибка при загрузке Менеджеров подгруппы:', e)
  }
}

// По нажатию “Создать”
function openCreateForm() {
  resetForm();
  showForm.value = true;
}

// По нажатию “Редактировать”
function openEditForm(counter) {
  isEditing.value = true;
  formErrors.value = {};
  formModel.value = {
    first_name: counter.first_name,
    middle_name: counter.middle_name,
    last_name: counter.last_name,
    subgroup_manager_id: counter.subgroup_manager_id,
  };
  editingId.value = counter.id;
  showForm.value = true;
}

// Поле для хранения id редактируемой записи
const editingId = ref(null);

// Сохраняет как новую запись, так и обновляет
async function submitForm() {
  formErrors.value = {};
  try {
    // Если редактируем, вызываем update
    if (isEditing.value) {
      const { error } = await authStore.updateCounter(
          editingId.value,
          formModel.value
      );
      if (error) {
        if (error.response?.data?.errors) {
          formErrors.value = error.response.data.errors;
        } else {
          console.error('Ошибка при обновлении учётчика:', error);
        }
        return;
      }
    } else {
      // При создании: если текущий — менеджер подгруппы, принудительно ставим subgroup_manager_id = currentUser.id
      if (isSubgroupManager.value) {
        formModel.value.subgroup_manager_id = currentUser.value.id;
      }
      const { error } = await authStore.createCounter(formModel.value);
      if (error) {
        if (error.response?.data?.errors) {
          formErrors.value = error.response.data.errors;
        } else {
          console.error('Ошибка при создании учётчика:', error);
        }
        return;
      }
    }
    showForm.value = false;
    await loadCounters();
  } catch (e) {
    console.error(e);
  }
}

// Удаление записи (доступно только тем, у кого есть права)
async function deleteCounter(id) {
  if (!confirm('Вы уверены, что хотите удалить этого учётчика?')) return;

  try {
    const { error } = await authStore.deleteCounter(id);

    // Если сервер вернул ошибку
    if (error) {
      // 1) Пытаемся взять из error.data.message
      let msg = error.data?.message;
      // 2) Если там нет, пытаемся из error.response.data.message
      if (!msg && error.response?.data?.message) {
        msg = error.response.data.message;
      }
      deleteError.value = msg || 'Ошибка при удалении учётчика';
      return;
    }

    // Удалось — сбрасываем deleteError и перезагружаем список
    deleteError.value = '';
    await loadCounters();

  } catch (e) {
    console.error(e);
    deleteError.value = 'Непредвиденная ошибка при удалении';
  }
}


onMounted(async () => {
  await Promise.all([loadCounters(), loadSubgroupManagers()]);
  resetForm();
});
</script>

<template>
  <div class="container py-4">
    <h3 class="mb-4">Учетчики</h3>
    <!-- Если есть ошибка при удалении, показываем alert -->
    <div v-if="deleteError" class="alert alert-danger">
      {{ deleteError }}
    </div>

    <!-- Кнопка «Создать нового» — не показываем, если пользователь не имеет права -->
    <div class="mb-3" v-if="authStore.hasPermission('create-counters') || currentUser.value?.role?.name !== 'Менеджер подгруппы'">
      <button class="btn btn-primary" @click="openCreateForm">
        Создать учетчика
      </button>
    </div>

    <!-- Таблица со всеми учётчиками (или только своими, если роль Менеджер подгруппы) -->
    <div class="table-responsive">
      <table class="table table-bordered align-middle">
        <thead class="table-light">
        <tr>
          <th>Фамилия</th>
          <th>Имя</th>
          <th>Отчество</th>
          <th>Менеджер подгруппы</th>
          <th>Действия</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="c in counters" :key="c.id">
          <td>{{ c.last_name }}</td>
          <td>{{ c.first_name }}</td>
          <td>{{ c.middle_name || '—' }}</td>
          <td>
            {{ c.subgroup_manager
              ? `${c.subgroup_manager.last_name} ${c.subgroup_manager.first_name} ${c.subgroup_manager.middle_name}`
              : '—' }}
          </td>
          <td>
            <!-- Редактировать и удалить -->
            <!--
              Редактировать можно, если:
              — текущий пользователь — админ (любой, кроме «Менеджер подгруппы»), или
              — текущий пользователь — тот же Менеджер подгруппы, который привязан к этому Counter
            -->
            <button
                class="btn btn-sm btn-warning me-1"
                @click="openEditForm(c)"
                :disabled="
                  currentUser.value?.role?.name === 'Менеджер подгруппы' &&
                  c.subgroup_manager_id !== currentUser.value.id
                "
            >
              Редактировать
            </button>
            <button
                class="btn btn-sm btn-danger"
                @click="deleteCounter(c.id)"
                :disabled="
                  currentUser.value?.role?.name === 'Менеджер подгруппы' &&
                  c.subgroup_manager_id !== currentUser.value.id
                "
            >
              Удалить
            </button>
          </td>
        </tr>
        <tr v-if="counters.length === 0">
          <td colspan="5" class="text-center text-muted">
            Нет доступных учётчиков
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- Модальное окно (упрощённый вариант, используется v-if вместо полноценного bootstrap-modal) -->
    <div v-if="showForm" class="modal-backdrop">
      <div class="modal-content">
        <h5 class="mb-3">
          {{ isEditing ? 'Редактировать учетчика' : 'Новый учетчик' }}
        </h5>

        <div class="mb-3">
          <label class="form-label">Фамилия:</label>
          <input
              v-model="formModel.last_name"
              type="text"
              class="form-control"
              :class="{ 'is-invalid': formErrors.last_name }"
          />
          <div v-if="formErrors.last_name" class="invalid-feedback">
            {{ formErrors.last_name[0] }}
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label">Имя:</label>
          <input
              v-model="formModel.first_name"
              type="text"
              class="form-control"
              :class="{ 'is-invalid': formErrors.first_name }"
          />
          <div v-if="formErrors.first_name" class="invalid-feedback">
            {{ formErrors.first_name[0] }}
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label">Отчество:</label>
          <input
              v-model="formModel.middle_name"
              type="text"
              class="form-control"
              :class="{ 'is-invalid': formErrors.middle_name }"
          />
          <div v-if="formErrors.middle_name" class="invalid-feedback">
            {{ formErrors.middle_name[0] }}
          </div>
        </div>

        <!-- Если текущий пользователь не Менеджер подгруппы, показываем селект выбора менеджера -->
        <div
            v-if="!isSubgroupManager"
            class="mb-3"
        >
          <label class="form-label">Менеджер подгруппы:</label>
          <select
              v-model="formModel.subgroup_manager_id"
              class="form-select"
              :class="{ 'is-invalid': formErrors.subgroup_manager_id }"
          >
            <option :value="null">— выбрать —</option>
            <option
                v-for="mgr in subgroupManagers"
                :key="mgr.id"
                :value="mgr.id"
            >
              {{ mgr.last_name }} {{ mgr.first_name }} {{ mgr.middle_name }}
            </option>
          </select>
          <div v-if="formErrors.subgroup_manager_id" class="invalid-feedback">
            {{ formErrors.subgroup_manager_id[0] }}
          </div>
        </div>

        <div class="d-flex justify-content-between mt-4">
          <button
              class="btn btn-secondary"
              @click="() => (showForm = false)"
          >
            Отмена
          </button>
          <button class="btn btn-primary" @click="submitForm">
            Сохранить
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
}
</style>
