<script setup>
import {ref, computed, onMounted} from 'vue';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import {useAuthStore} from '@/stores/Auth';
import dejavuFont from '@/fonts/DejaVuSans-normal.js';

const authStore = useAuthStore();
const fullResponse = ref({});
const selectedDistrictId = ref(null);
const selectedCategory = ref(null);
const selectedFrequency = ref(null);
const selectedRequestId = ref(null)
const requestsList = ref([]);

const requestOptions = computed(() => {
  const map = new Map()
  allPoints.value.forEach(p => {
    (p.requests || []).forEach(r => {
      map.set(r.id, r.name)
    })
  })
  return Array.from(map.entries())
      .map(([id, name]) => ({ id, name }))
})

onMounted(async () => {
  const {response: reqR, requestError} = await authStore.getRequests();
  if (reqR) {
    requestsList.value = reqR.data;
  } else {
    console.error('Ошибка загрузки заявок:', requestError);
  }

  const {response, error} = await authStore.getPointList();
  if (response) {
    fullResponse.value = response.data;
  } else {
    console.error('Ошибка загрузки точек:', error);
  }
});

const allPoints = computed(() => fullResponse.value.points || []);

const selectedRequest = computed(() => {
  return requestsList.value.find(r => r.id === selectedRequestId.value) || null;
});

const districtOptions = computed(() => {
  const districts = new Map();
  allPoints.value.forEach(p => {
    if (p.district) {
      districts.set(p.district.id, p.district.name.trim());
    }
  });

  return Array
      .from(districts.entries())
      .map(([id, name]) => ({ id, name }))
      .sort((a, b) => a.name.localeCompare(b.name, 'ru')); // вот она, сортировка
});

const uniqueCategories = computed(() => {
  const cats = new Set();
  allPoints.value.forEach(p => {
    if (!p.road_category || p.road_category.length === 0) {
      cats.add('Без категории');
    } else {
      if (Array.isArray(p.road_category)) {
        p.road_category.forEach(c => cats.add(c));
      } else if (typeof p.road_category === 'string') {
        p.road_category.split(',').map(c => c.trim()).forEach(c => cats.add(c));
      }
    }
  });
  return Array.from(cats);
});

const sortedPoints = computed(() => {
  return allPoints.value
      .filter(point => {
        const matchesDistrict = !selectedDistrictId.value || point.district_id === selectedDistrictId.value;
        const matchesFreq = !selectedFrequency.value || Number(point.monitoring_freq) === Number(selectedFrequency.value);

        const pointCats = Array.isArray(point.road_category)
            ? point.road_category
            : typeof point.road_category === 'string'
                ? point.road_category.split(',').map(c => c.trim())
                : [];

        const hasCategory = pointCats.length > 0;
        const matchesCategory = !selectedCategory.value ||
            (selectedCategory.value === 'Без категории' && !hasCategory) ||
            pointCats.includes(selectedCategory.value);

        const matchesRequest = !selectedRequestId.value
            || (point.requests || []).some(r => r.id === selectedRequestId.value)

        return matchesDistrict && matchesCategory && matchesFreq && matchesRequest
      })
      .sort((a, b) => {
        const aKey = `${a.record_number || 0}-${a.monitoring_freq || 0}-${a.accounting_flag || 0}`;
        const bKey = `${b.record_number || 0}-${b.monitoring_freq || 0}-${b.accounting_flag || 0}`;
        return aKey.localeCompare(bKey, 'ru', {numeric: true});
      });
});

const statistics = computed(() => {
  const totalPoints = sortedPoints.value.length;

  const totalLength = sortedPoints.value.reduce((sum, point) => {
    const len = parseFloat(point.length);
    return !isNaN(len) ? sum + len : sum;
  }, 0);

  const categoryCount = {};

  sortedPoints.value.forEach(point => {
    let categories = [];
    if (Array.isArray(point.road_category)) {
      categories = point.road_category;
    } else if (typeof point.road_category === 'string') {
      categories = point.road_category
          .split(',')
          .map(c => c.trim())
          .filter(Boolean);
    }

    categories.forEach(category => {
      categoryCount[category] = (categoryCount[category] || 0) + 1;
    });
  });

  return {
    totalPoints,
    totalLength,
    categoryCount,
  };
});
const districtName = computed(() => {
  if (!selectedDistrictId.value) return 'Оренбургской области'
  const opt = districtOptions.value.find(d => d.id === selectedDistrictId.value)
  // предположим, opt.name — например, "Абдулинский район"
  if (!opt) return 'Оренбургской области'
  return `${opt.name}`  // пробел перед именем
})

const pdfFileName = computed(() => {
  // Берём название района, если выбран. Если нет — область.
  let name = selectedDistrictId.value
      ? districtOptions.value.find(d => d.id === selectedDistrictId.value)?.name || 'Оренбургская область'
      : 'Оренбургская область';
  // Можно добавить дату, чтобы не было коллизий файлов
  const dateStr = new Date().toISOString().slice(0, 10); // ГГГГ-ММ-ДД
  return `Реестр_ПУИДД_${name}_${dateStr}.pdf`;
});

const generatePdfWithTable = () => {
  if (!sortedPoints.value.length) {
    alert('Нет данных для выгрузки');
    return;
  }

  const doc = new jsPDF({orientation: 'landscape', unit: 'mm', format: 'a4'});
  doc.addFileToVFS('DejaVuSans.ttf', dejavuFont);
  doc.addFont('DejaVuSans.ttf', 'DejaVuSans', 'normal');
  doc.setFont('DejaVuSans');
  doc.setFontSize(8);

  doc.text('Согласовано:', 15, 15, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Представитель ', 15, 20, {align: 'left'});
  doc.text('ГУ ГУДХОО', 15, 25, {align: 'left'});
  doc.text('Подпись: ________________________________', 15, 30, {align: 'left'});
  doc.text('_________________________________________', 15, 35, {align: 'left'});
  doc.text('Дата: ___________________________________', 15, 40, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Утверждаю:', 110, 15, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Представитель', 110, 20, {align: 'left'});
  doc.text('АО "Оренбургремдорстрой"', 110, 25, {align: 'left'});
  doc.text('Подпись: ________________________________', 110, 30, {align: 'left'});
  doc.text('_________________________________________', 110, 35, {align: 'left'});
  doc.text('Дата: ___________________________________', 110, 40, {align: 'left'});
  doc.text('Утверждаю:', 200, 15, {align: 'left'});
  doc.setFontSize(8);
  doc.text('Генеральный директор', 200, 20, {align: 'left'});
  doc.text('ООО "ИТБ"', 200, 25, {align: 'left'});
  doc.text('Подпись: ________________________________', 200, 30, {align: 'left'});
  doc.text('Иванов Дмитрий Александрович', 200, 35, {align: 'left'});
  doc.text('Дата: ___________________________________', 200, 40, {align: 'left'});

  const req = selectedRequest.value;
  console.log(req);
  const reqName = req ? req.name : '—';
  const reqDesc = req && req.description ? `${req.description}` : '';
  doc.setFontSize(12);
  doc.text(`Реестр пунктов учета интенсивности дорожного движения на автомобильных дорогах общего пользования`, 15, 50);
  doc.text(`регионального и межмуниципального значения Оренбургской области по ${reqName} ${reqDesc}`, 15, 57);

  autoTable(doc, {
    head: [[
      'Номер ПУИДД', 'Название', 'Протяжённость', 'Пункт учёта',
      'Категория', 'Тип учёта', 'Признак', 'Частота', 'Координаты'
    ]],
    body: sortedPoints.value.map(point => [
      `${point.record_number ?? '-'}`,
      point.name,
      point.length ?? '-',
      point.accounting_point ?? '-',
      Array.isArray(point.road_category) ? point.road_category.join(', ') : point.road_category ?? '-',
      point.accounting_type ?? '-',
      point.accounting_flag === 1 ? 'Подъезд' : point.accounting_flag === 2 ? 'Перегон' : '-',
      point.monitoring_freq === 1 ? 'Ежемесячно' : point.monitoring_freq === 2 ? 'Ежеквартально' : '-',
      `${point.latitude ?? '-'}, ${point.longitude ?? '-'}`
    ]),
    startY: 62,
    styles: {
      font: 'DejaVuSans',
      fontStyle: 'normal',
      fontSize: 8,
      lineWidth: 0.1,
      lineColor: [0, 0, 0]
    },
    headStyles: {
      font: 'DejaVuSans',
      fontStyle: 'normal',          // жирный шрифт (опционально)
      halign: 'center',
      fontSize: 8,
      textColor: [0, 0, 0],
      fillColor: [255, 255, 255],
      lineWidth: 0.1,
      lineColor: [0, 0, 0]
    },
    theme: 'grid'
  });


  doc.save(pdfFileName.value);
};
</script>

<template>
  <div class="container mt-4">
    <h3 class="mb-3">Реестр пунктов учета интенсивности дорожного движения</h3>
    <div class="mb-3">
      <strong>Всего ПУИДД:</strong> {{ statistics.totalPoints }}<br>
      <strong>Общая протяженность дорог:</strong> {{ statistics.totalLength.toFixed(2) }} км<br>
      <strong>Категории дорог: </strong>
      <span v-for="(count, category) in statistics.categoryCount" :key="category" class="me-2">
        {{ category }} ({{ count }})
      </span>
    </div>
    <div class="row mb-3 g-2">
      <div class="col-md-2">
        <select class="form-select" v-model="selectedDistrictId">
          <option :value="null">Все районы</option>
          <option v-for="district in districtOptions" :key="district.id" :value="district.id">
            {{ district.name }}
          </option>
        </select>
      </div>
      <div class="col-md-2">
        <select class="form-select" v-model="selectedCategory">
          <option :value="null">Все категории</option>
          <option v-for="cat in uniqueCategories" :key="cat" :value="cat">
            {{ cat }}
          </option>
        </select>
      </div>
      <div class="col-md-2">
        <select class="form-select" v-model="selectedFrequency">
          <option :value="null">Все частоты</option>
          <option :value="1">Ежемесячно</option>
          <option :value="2">Ежеквартально</option>
        </select>
      </div>
      <div class="col-md-2">
        <select class="form-select" v-model="selectedRequestId">
          <option :value="null">Все заявки</option>
          <option
              v-for="req in requestOptions"
              :key="req.id"
              :value="req.id"
          >
            {{ req.name }}
          </option>
        </select>
      </div>
      <div class="col-md-3 text-end">
        <button class="btn btn-outline-primary" @click="generatePdfWithTable">Скачать PDF</button>
      </div>
    </div>

    <div v-if="sortedPoints.length" class="table-responsive">
      <table class="table table-bordered table-sm table-striped align-middle">
        <thead>
        <tr>
          <th>Номер ПУИДД</th>
          <th>Название</th>
          <th>Протяжённость</th>
          <th>Пункт учёта</th>
          <th>Категория</th>
          <th>Тип учёта</th>
          <th>Признак</th>
          <th>Частота</th>
          <th>Координаты</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="point in sortedPoints" :key="point.id">
          <td>{{ `${point.record_number ?? '-'}` }}</td>
          <td>{{ point.name }}</td>
          <td>{{ point.length ?? '-' }}</td>
          <td>{{ point.accounting_point ?? '-' }}</td>
          <td>
            <template v-if="Array.isArray(point.road_category)">
              <span v-for="cat in point.road_category" :key="cat" class="me-1">{{ cat }}</span>
            </template>
            <template v-else>
              {{ point.road_category ?? '-' }}
            </template>
          </td>
          <td>{{ point.accounting_type ?? '-' }}</td>
          <td>{{ point.accounting_flag === 1 ? 'Подъезд' : point.accounting_flag === 2 ? 'Перегон' : '-' }}</td>
          <td>{{
              point.monitoring_freq === 1 ? 'Ежемесячно' : point.monitoring_freq === 2 ? 'Ежеквартально' : '-'
            }}
          </td>
          <td>{{ point.latitude ?? '-' }}, {{ point.longitude ?? '-' }}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div v-else class="alert alert-warning">Нет данных для отображения</div>
  </div>
</template>

<style scoped>
select {
  font-size: 14px;
}
</style>
