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

const router = useRouter()
const store = useAuthStore()

// вытаскиваем реактивный loading из стора
const { loading } = storeToRefs(store)

const name = ref('')
const points = ref([])
const description = ref('')
const selected = ref([])

// загрузка точек на карту
onMounted(async () => {
  const response = await store.fetchPointsForMap()
  if (response) {
    points.value = response.points;
  }
})

// вычисляем, все ли точки отмечены
const allSelected = computed(() => {
  return points.value.length > 0 && selected.value.length === points.value.length
})

// переключатель «Выбрать всё / Снять всё»
function toggleAll(event) {
  if (event.target.checked) {
    selected.value = points.value.map(p => p.id)
  } else {
    selected.value = []
  }
}

// сохранение заявки + привязка точек
async function save() {
  console.log(name);
  // 1) создаём заявку
  const { response: data } = await store.createRequest({ name: name.value, description: description.value })

  const id = data.request.id

  await store.addPointsToRequest(id, selected.value)

  await router.push({name: 'request-list'})
}
</script>

<template>
  <div>
    <h1>Новая заявка</h1>
    <form @submit.prevent="save">
      <!-- Название заявки -->
      <div class="mb-3">
        <label class="form-label">Название</label>
        <input v-model="name" class="form-control" required />
      </div>
      <!-- Описание заявки -->
      <div class="mb-3">
        <label class="form-label">Описание</label>
        <textarea v-model="description" class="form-control" rows="3"></textarea>
      </div>

      <!-- Таблица точек -->
      <div class="mb-3">
        <label class="form-label">Выберите точки</label>
        <table class="table table-bordered">
          <thead>
          <tr>
            <th scope="col"><input type="checkbox" @change="toggleAll" :checked="allSelected"/></th>
            <th scope="col">ID</th>
            <th scope="col">Название</th>
            <th scope="col">Район</th>
            <th scope="col">Категория</th>
            <th scope="col">Частота монит.</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="p in points" :key="p.id">
            <td>
              <input
                  type="checkbox"
                  :value="p.id"
                  v-model="selected"
              />
            </td>
            <td>{{ p.id }}</td>
            <td>{{ p.name }}</td>
            <td>{{ p.district.name }}</td>
            <td>{{ p.road_category?.join(', ') }}</td>
            <td>{{ p.monitoring_freq === 1 ? 'Ежемесячно' : 'Ежеквартально' }}</td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- Кнопка сохранить -->
      <button class="btn btn-primary" :disabled="loading">
        {{ loading ? 'Сохранение…' : 'Сохранить' }}
      </button>
    </form>
  </div>
</template>
