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

const auth = useAuthStore()
const loading = ref(true)

const bucket = ref([])   // районы без менеджера группы
const managers = ref([])   // действующие менеджеры группы + их районы

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

  const districts = response.data.districts     // приходит c вложенным region
  const users = response.data.managers

  /* формируем «карточки» менеджеров */
  managers.value = users.map(u => ({
    ...u,
    districts: districts
        .filter(d => d.group_manager_id === u.id)
        .map(d => ({id: d.id, name: d.name, region: d.region.name}))
  }))

  bucket.value = districts
      .filter(d => !d.group_manager_id)
      .map(d => ({
        id: d.id,
        name: d.name,
        region: d.region.name,
        type: 'district-group'
      }))

  loading.value = false
})

async function save({evt, managerId}) {
  const el = evt?.added?.element
  if (!el) return               // drag внутри списка

  try {
    await auth.assignGroupManagerToDistrict({
      district_id: el.id,
      group_manager_id: managerId ?? null
    })
  } catch (e) {
    console.error(e)
    alert('Не удалось сохранить изменение')
  }
}
</script>

<template>

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


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