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

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

const pointId = ref(route.params.id);
const regions = ref([]);
const name = ref('');
const latitude = ref('');
const longitude = ref('');
const selectedRegionId = ref(null);
const selectedDistrictId = ref(null);
const selectedFile = ref(null);
const segmentFrom = ref('');
const segmentTo = ref('');
// Новые поля:
const lengthValue = ref('');             // = field "length"
const accountingPoint = ref('');         // = field "accounting_point"
const errorMessage = ref('');


onMounted(async () => {
  await loadPoint(pointId.value);
});

watch(
    () => route.params.id,
    async (id) => {
      if (id) await loadPoint(id);
    }
);

async function loadPoint(id) {
  // Загружаем одновременно регионы и данные точки
  const [{regions: reg}, {point: pt}] = await Promise.all([
    authStore.fetchRegionsForSelect(),
    authStore.fetchPointForEdit(id),
  ]);

  regions.value = reg;
  selectedRegionId.value = pt.district?.region?.id ?? null;
  selectedDistrictId.value = pt.district?.id ?? null;
  name.value = pt.name || '';
  latitude.value = pt.latitude ?? '';
  longitude.value = pt.longitude ?? '';
  segmentFrom.value = pt.segment_from ?? '';
  segmentTo.value = pt.segment_to ?? '';
  // Заполняем новые поля из ответа API:
  lengthValue.value = pt.length ?? '';
  accountingPoint.value = pt.accounting_point ?? '';
}

const filteredDistricts = computed(() => {
  const r = regions.value.find((r) => r.id === selectedRegionId.value);
  return r ? r.districts : [];
});

const handleFileUpload = (e) => {
  const file = e.target.files[0];
  if (file) {
    selectedFile.value = file;
  }
};

const tryPasteCoordinates = async () => {
  try {
    const text = await navigator.clipboard.readText();
    const parts = text.split(/[, ]+/).map((p) => p.trim());
    if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
      latitude.value = parts[0];
      longitude.value = parts[1];
      alert('Координаты из буфера вставлены');
    } else {
      alert('Буфер обмена не содержит координаты');
    }
  } catch (err) {
    alert('Ошибка чтения из буфера обмена');
  }
};

const savePoint = async () => {
  errorMessage.value = '';
  if (
      !name.value ||
      !latitude.value ||
      !longitude.value ||
      !selectedDistrictId.value
  ) {
    errorMessage.value = 'Заполните обязательные поля!';
    return;
  }

  const formData = new FormData();
  formData.append('_method', 'PATCH');
  formData.append('district_id', selectedDistrictId.value);
  formData.append('name', name.value);
  formData.append('latitude', latitude.value);
  formData.append('longitude', longitude.value);
  formData.append('segment_from', segmentFrom.value);
  formData.append('segment_to', segmentTo.value);
  // Привязываем новые поля:
  formData.append('length', lengthValue.value);
  formData.append('accounting_point', accountingPoint.value);

  if (selectedFile.value) {
    formData.append('file', selectedFile.value);
  }

  const {response, error} = await authStore.saveEditedPoint(
      pointId.value,
      formData
  );
  if (response) {
    errorMessage.value = '';
    alert('Точка успешно обновлена!');
    router.push({name: 'point-list'});
  } else {
    // если ошибка 403 — выводим текст с сервера, иначе — просто текст
    if (error?.status === 403 && error.data?.message) {
      errorMessage.value = error.data.message;
    } else if (error?.data?.message) {
      errorMessage.value = error.data.message;
    } else {
      errorMessage.value = 'Ошибка при сохранении точки';
    }
  }
};
</script>

<template>
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card shadow-sm">
          <div class="card-body">
            <div v-if="errorMessage" class="alert alert-danger mb-3">
              {{ errorMessage }}
            </div>
            <!-- Область -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Область:</label>
              <select v-model.number="selectedRegionId" class="form-select">
                <option :value="null">Выберите область</option>
                <option v-for="r in regions" :key="r.id" :value="r.id">
                  {{ r.name }}
                </option>
              </select>
            </div>

            <!-- Район -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Район:</label>
              <select v-model="selectedDistrictId" class="form-select">
                <option :value="null">Выберите район</option>
                <option
                    v-for="d in filteredDistricts"
                    :key="d.id"
                    :value="d.id"
                >
                  {{ d.name }}
                </option>
              </select>
            </div>

            <!-- Название -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Название:</label>
              <input v-model="name" type="text" class="form-control"/>
            </div>

            <!-- Начало перегона -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Начало перегона, км:</label>
              <input
                  v-model="segmentFrom"
                  type="number"
                  step="0.001"
                  class="form-control"
              />
            </div>

            <!-- Конец перегона -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Конец перегона, км:</label>
              <input
                  v-model="segmentTo"
                  type="number"
                  step="0.001"
                  class="form-control"
              />
            </div>

            <!-- Длинна -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Длинна (length):</label>
              <input
                  v-model="lengthValue"
                  type="number"
                  step="0.01"
                  class="form-control"
                  placeholder="Введите длину"
              />
            </div>

            <!-- Пункт учёта -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Пункт учёта:</label>
              <input
                  v-model="accountingPoint"
                  type="text"
                  class="form-control"
                  placeholder="Например, 12+345"
              />
            </div>

            <!-- Широта -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Широта:</label>
              <input
                  v-model="latitude"
                  type="text"
                  class="form-control"
                  placeholder="Широта"
              />
            </div>

            <!-- Долгота -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">Долгота:</label>
              <input v-model="longitude" type="text" class="form-control"/>
            </div>

            <!-- GeoJSON -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-160">GeoJSON файл:</label>
              <input
                  type="file"
                  class="form-control"
                  accept=".json,application/geo+json"
                  @change="handleFileUpload"
              />
            </div>

            <!-- Кнопки -->
            <div class="d-flex justify-content-end mb-3 gap-2">
              <button class="btn btn-secondary" @click="router.push({ name: 'point-list' })">
                Назад
              </button>
              <button class="btn btn-primary" @click="savePoint">Сохранить</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.w-160 {
  width: 160px;
}
</style>
