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

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

// Государства
const loading = ref(false);
const error = ref(null);

// ID заявки
const id = parseInt(route.params.id);

// Поля формы заявки
const name = ref('');
const description = ref('');

// Все точки (для группировки и вывода)
const points = ref([]);
// Выбранные точки в текущем запросе
const selected = ref([]);

const totalRows = ref(null);

// 1) Группируем все точки по имени района
const groupedPoints = computed(() => {
  const groups = {};
  points.value.forEach((p) => {
    const districtName = p.district?.name || 'Без района';
    if (!groups[districtName]) {
      groups[districtName] = [];
    }
    groups[districtName].push(p);
  });
  return groups;
});

// === Шаг 1: Загрузка данных ===
async function load() {
  loading.value = true;
  error.value = null;

  // 1.1) Получаем детали заявки (name, description)
  const { response: listRes, error: listErr } = await store.getRequests();
  if (listErr) {
    console.error('Ошибка при загрузке списка заявок:', listErr);
  } else {
    const reqItem = listRes.data.find((r) => r.id === id);
    if (reqItem) {
      name.value = reqItem.name;
      description.value = reqItem.description || '';
    }
  }

  // 1.2) Получаем текущие точки у этой заявки
  const { response: pointsRes, error: pointsErr } = await store.getPointsByRequest(id);
  if (pointsErr) {
    console.error('Ошибка при загрузке точек заявки:', pointsErr);
  } else {
    // response.data.points — массив объектов { id, name, district, … }
    selected.value = pointsRes.data.points.map((p) => p.id);
  }

  // 1.3) Подгружаем ВСЕ возможные точки
  const { points: allPoints, error: allErr } = await store.fetchPointsForMap();
  if (allErr) {
    console.error('Ошибка при загрузке всех точек:', allErr);
  } else {
    points.value = allPoints;
  }

  loading.value = false;
}
onMounted(load);

// “Выбрать всё” / “Убрать всё”
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 = [];
  }
}

// Переключение одной строки (клик на всю строку)
function toggleSingle(pointId) {
  const idx = selected.value.indexOf(pointId);
  if (idx === -1) {
    selected.value.push(pointId);
  } else {
    selected.value.splice(idx, 1);
  }
}

// === Шаг 2: Сохранить вручную (без импорта) ===
async function save() {
  const payload = {
    name: name.value,
    description: description.value,
    point_ids: selected.value,
  };
  const { error: changeErr } = await store.changeRequest(id, payload);
  if (changeErr) {
    console.error(changeErr);
    error.value = changeErr.response?.data?.message || 'Ошибка при сохранении.';
  } else {
    router.push({ name: 'request-list' });
  }
}

// === Шаг 3: Импорт через Excel/CSV ===
const fileInput = ref(null);
const importErrors = ref([]);       // строки, которые не нашлись
const matchedIds = ref([]);         // ID найденных точек

async function handleImportClick() {
  importErrors.value = [];
  matchedIds.value = [];
  error.value = null;

  const file = fileInput.value.files[0];
  if (!file) {
    error.value = 'Сначала выберите файл.';
    return;
  }

  loading.value = true;
  const { response, error: impErr } = await store.importPointsByName(id, file);
  loading.value = false;

  if (impErr) {
    console.error('Ошибка при импорте:', impErr);
    error.value = impErr.response?.data?.message || 'Сервер вернул ошибку при импорте.';
    return;
  }
// Сохраняем значение total_rows
  totalRows.value = response.total_rows;
  // Успешно распарсили и получили:
  // response.matched_point_ids = [...], response.not_found_names = [...]
  matchedIds.value = response.matched_point_ids || [];
  importErrors.value = response.not_found_names || [];
}

/**
 * После того, как пользователь увидел, что всё найдено (importErrors пуст),
 * он кликает “Синхронизировать” → отправляем matchedIds на сервер.
 */
async function handleSyncClick() {
  if (importErrors.value.length > 0) {
    error.value = 'Прежде чем синхронизировать, исправьте ошибки импорта.';
    return;
  }
  if (matchedIds.value.length === 0) {
    error.value = 'Нет найденных ID для синхронизации.';
    return;
  }

  loading.value = true;
  const { response: syncRes, error: syncErr } = await store.syncPoints(id, matchedIds.value);
  loading.value = false;

  if (syncErr) {
    console.error('Ошибка при синхронизации:', syncErr);
    error.value = syncErr.response?.data?.message || 'Ошибка при синхронизации.';
    return;
  }

  // По желанию можно показать пользователю, какие ID добавились/удалились
  // syncRes.removed_point_ids, syncRes.added_point_ids
  alert('Синхронизация завершена. Удалены точки: ' +
      JSON.stringify(syncRes.removed_point_ids) +
      ', Добавлены: ' +
      JSON.stringify(syncRes.added_point_ids));

  // Обновляем форму (обновляем выбранные “selected” из базы)
  await load();
}

</script>

<template>
  <div>
    <h1>Редактирование заявки #{{ id }}</h1>

    <div v-if="error" class="alert alert-danger">{{ error }}</div>

    <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 class="table-light">
          <tr>
            <th><input type="checkbox" @change="toggleAll" :checked="allSelected"/></th>
            <th>ID</th>
            <th>Номер ПУИДД</th>
            <th>Название</th>
            <th>Район</th>
          </tr>
          </thead>
          <tbody>
          <template v-for="(pointsInDistrict, districtName) in groupedPoints" :key="districtName">
            <!-- Заголовок района -->
            <tr class="table-secondary">
              <td colspan="5"><strong>{{ districtName }}</strong></td>
            </tr>
            <!-- Сами точки -->
            <tr v-for="p in pointsInDistrict" :key="p.id"
                @click="toggleSingle(p.id)"
                style="cursor: pointer;"
            >
              <td @click.stop>
                <input type="checkbox" :value="p.id" v-model="selected"/>
              </td>
              <td>{{ p.id }}</td>
              <td>{{ p.record_number }}</td>
              <td>{{ p.name }}</td>
              <td>{{ p.district.name }}</td>
            </tr>
          </template>
          </tbody>
        </table>
      </div>

      <!-- Кнопка сохранить вручную -->
      <button class="btn btn-success me-2" :disabled="loading">
        {{ loading ? 'Сохранение…' : 'Сохранить изменения' }}
      </button>

      <!-- === Секция импорта из файла === -->
      <div class="mt-4 p-3 border rounded">
        <h5>Импорт из Excel/CSV по названию точек</h5>
        <div class="mb-2">
          <input type="file" accept=".xlsx,.xls,.csv" ref="fileInput" />
        </div>
        <button type="button" class="btn btn-primary me-2"
                @click="handleImportClick"
                :disabled="loading"
        >
          {{ loading ? 'Импортируем…' : 'Импортировать и проверить' }}
        </button>

        <!-- Выведем количество строк из Excel -->
        <div v-if="totalRows !== null" class="mt-3">
          <strong>Всего строк в Excel:</strong> {{ totalRows }}
        </div>

        <!-- Покажем ошибки, если они есть -->
        <div v-if="importErrors.length" class="mt-2 alert alert-warning">
          <strong>Не найдены следующие названия точек:</strong>
          <ul>
            <li v-for="name in importErrors" :key="name">{{ name }}</li>
          </ul>
          – эти строки нужно исправить в файле.
        </div>

        <!-- Покажем количество совпавших ID -->
        <div v-if="matchedIds.length && !importErrors.length" class="mt-2 alert alert-success">
          Найдено точек: {{ matchedIds.length }}.
          (ID-список: {{ matchedIds.join(', ') }})
        </div>

        <!-- Если всё совпало, можно синхронизировать -->
        <div class="mt-2">
          <button type="button"
                  class="btn btn-outline-success"
                  @click="handleSyncClick"
                  :disabled="loading || importErrors.length > 0 || !matchedIds.length"
          >
            {{ loading ? 'Синхронизируем…' : 'Синхронизировать (деактивировать старые)' }}
          </button>
        </div>
      </div>
    </form>
  </div>
</template>

<style scoped>
/* Слегка подсветим строку по наведению */
table.table tbody tr:hover {
  background-color: #f5f5f5;
}
</style>
