<template>
  <div class="container mt-4">
    <!-- Форма запуска нового отчёта -->
    <div class="row mb-3">
      <div class="col-md-4">
        <label>Район</label>
        <select v-model.number="selectedDistrictId" class="form-select">
          <option :value="null">— Вся область —</option>
          <option v-for="d in districtsList" :key="d.id" :value="d.id">
            {{ d.name }}
          </option>
        </select>
      </div>
      <div class="col-md-4">
        <label>Заявка</label>
        <select v-model.number="selectedRequestId" class="form-select">
          <option :value="null">— выберите заявку —</option>
          <option v-for="r in requestsList" :key="r.id" :value="r.id">
            {{ r.name || r.number }}
          </option>
        </select>
      </div>
      <div class="col-md-4 d-flex align-items-end">
        <button
            class="btn btn-primary w-100"
            :disabled="!selectedRequestId || loading"
            @click="startReport"
        >
          {{ loading ? 'Отправка…' : 'Сформировать фотоотчет' }}
        </button>
      </div>
    </div>

    <!-- Список запущенных отчётов -->
    <div class="row">
      <div class="col-12" v-if="reports.length">
        <h5>Список отчётов</h5>
        <ul class="list-group">
          <li
              v-for="r in reports"
              :key="r.jobId"
              class="list-group-item"
          >
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <strong>№{{ r.jobId }}</strong>
                <small class="text-muted">[{{ r.createdAt }}]</small><br>
                Заявка: <em>{{ r.requestName }}</em><br>
                Район: <em>{{ r.districtName }}</em><br>
                Статус: {{ statusMessage(r.status) }}
                <span v-if="r.status==='error'" class="text-danger">!</span>
              </div>
              <div>
                <button
                    v-if="r.url"
                    @click="downloadUrl(r.url)"
                    class="btn btn-sm btn-success"
                >Скачать</button>
              </div>
            </div>
            <details v-if="r.status==='error'" class="mt-2">
              <summary class="text-danger">Посмотреть текст ошибки</summary>
              <pre class="bg-light p-2">{{ r.error }}</pre>
            </details>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

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

const authStore       = useAuthStore();
const districtsList   = ref([]);
const requestsList    = ref([]);
const selectedDistrictId = ref(null);
const selectedRequestId  = ref(null);
const loading         = ref(false);

// вместо одного jobId/status/fileUrl — массив отчётов
// каждый объект: { jobId, status: 'pending'|'processing'|'done'|'error', url?: string }
const reports = ref([]);

// таймер опроса всех отчётов
let pollTimer = null;

// загрузка справочников
async function loadRefs() {
  try {
    const { response: distRes } = await authStore.getRefDistricts();
    districtsList.value = distRes.data.map(d => ({ id: d.id, name: d.name.trim() }));
    const { response: reqRes } = await authStore.getRequests();
    requestsList.value = reqRes.data;
  } catch (e) {
    console.error(e);
  }
}
loadRefs();

// запуск нового отчёта
async function startReport() {
  if (!selectedRequestId.value) {
    alert('Выберите заявку');
    return;
  }
  loading.value = true;
  try {
    const { response, error } = await authStore.startPhotoReport(
        selectedRequestId.value,
        selectedDistrictId.value
    );
    if (error) {
      console.error(error);
      alert('Не удалось поставить задачу в очередь');
      return;
    }
    // заводим новый отчёт в список
    reports.value.unshift({
      jobId: response.jobId,
      createdAt: new Date().toISOString().slice(0,19).replace('T',' '),
      requestName: requestsList.value.find(r=>r.id===selectedRequestId.value).name,
      districtName: selectedDistrictId.value
          ? districtsList.value.find(d=>d.id===selectedDistrictId.value).name
          : 'Оренбургская область',
      status: 'pending',
      url: null,
      error: null,
    });
    // если таймер ещё не запущен — запускаем
    if (!pollTimer) {
      pollTimer = setInterval(pollAllStatuses, 5000);
    }
  } finally {
    loading.value = false;
  }
}

// опрашиваем сразу ВСЕ нескомплитившиеся отчёты
async function pollAllStatuses() {
  // берём только те, что в ожидании или в процессе
  const toPoll = reports.value.filter(r => r.status === 'pending' || r.status === 'processing');
  if (!toPoll.length) {
    clearInterval(pollTimer);
    pollTimer = null;
    return;
  }
  await Promise.all(toPoll.map(async r => {
    const { response, error } = await authStore.getPhotoReportStatus(r.jobId);
    if (error) {
      r.status = 'error';
      r.error = 'Network error';          // или какое-то своё сообщение
    } else {
      r.status = response.status;
      if (response.status === 'done') {
        r.url = response.url;
      }
      if (response.status === 'error') {
        r.error = response.error;         // <— сюда попадёт error_message из БД
      }
    }
  }));
}

// скачиваем
function downloadUrl(url) {
  const a = document.createElement('a')
  a.href = url
  a.download = ''      // если хочется подсказать имя, можно его здесь вставить
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

// при монтировании сразу тащим прошлые отчёты
onMounted(async () => {
  try {
    const { response, error } = await authStore.listPhotoReports();
    if (!error) {
      // response.data — массив объектов { jobId, requestName, districtName, createdAt, status, url, error }
      reports.value = response.data;
      // и запускаем опрос статусов (если есть ещё незавершённые)
      if (reports.value.some(r => r.status === 'pending' || r.status === 'processing')) {
        if (!pollTimer) pollTimer = setInterval(pollAllStatuses, 5000);
      }
    }
  } catch (e) {
    console.error('Не удалось загрузить прошлые отчёты', e);
  }
});

onUnmounted(() => {
  if (pollTimer) clearInterval(pollTimer);
});

// читаем текстовый статус
function statusMessage(s) {
  return {
    pending:    'формируется…',
    processing: 'в обработке…',
    done:       'готов!',
    error:      'ошибка',
  }[s] || s;
}
</script>

<style scoped>
.form-select {
  margin-top: 0.25rem;
}
</style>
