<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore }  from '@/stores/Auth'
import AssignmentBoard   from './AssignmentBoard.vue'

const auth   = useAuthStore()
const loaded = ref(false)

/* данные для доски */
const bucket   = ref([])
const managers = ref([])   // региональные менеджеры

onMounted(async () => {
  const { response, error } = await auth.getRegionsAndSeniorManagers()
  if (error) { console.error(error); return }

  const regions = response.data.regions
  managers.value = response.data.stManagers.map(m => ({
    ...m,
    regions: regions.filter(r => r.sen_manager_id === m.id)
        .map(r => ({ id:r.id, name:r.name }))
  }))

  bucket.value = regions.filter(r => !r.sen_manager_id)
      .map(r => ({ id:r.id, name:r.name, type:'region' }))

  loaded.value = true
})

/* d‑n‑d сохранение */
async function save({ evt, managerId }) {   // ←  разбираем объект
  const el = evt?.added?.element            // будет только у «приёмника»
  if (!el) return

  try {
    await auth.purposeSenManager({
      region_id      : el.id,
      sen_manager_id : managerId ?? null    // null – снять назначение
    })
  } catch (e) {
    // откатываем визуально
    evt.from.insertBefore(evt.item, evt.from.children[evt.oldIndex])
    console.error(e)
    alert(e.response?.data?.message || 'Ошибка сохранения')
  }
}

</script>

<template>
  <div v-if="!loaded" class="text-center py-5">
    <div class="spinner-border text-primary"/>
  </div>

  <AssignmentBoard
      v-else
      :bucket="bucket"
      :managers="managers"
      label="regions"
      @change="save"
      type-class="region"
  />
</template>
