<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 points = ref([]);
const selectedDistrictId = ref(null);
const selectedMonth = ref(null);
const selectedRequestId = ref(null);

const loadingPlans = ref(false);
// кэшируем все планы один раз
const allPlans = ref([]);

const plansMap = ref([]); // Теперь храним все планы
const monthIndexMap = ref(new Map());
const requestsList = ref([]);
// Метки типов измерения 1,2,3
const measurementTypeLabels = {
  1: 'Автоматический',
  2: 'Визуальный',
  3: 'Смешанный'
};

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

onMounted(async () => {
  try {
    const {response} = await authStore.getPointList();
    points.value = response.data.points;
    console.log('API response:', response.data);
    const {response: reqRes} = await authStore.getRequests();
    const res = await authStore.getPointPlanList();
    allPlans.value = res.response.data.point_plans || [];
    requestsList.value = reqRes.data;
  } catch (e) {
    console.error('Ошибка загрузки точек:', e);
  }
  loadingPlans.value = false;
});

const filteredEntries = computed(() => {
  if (!selectedDistrictId.value || !selectedMonth.value) return [];

  // 1. Сначала фильтруем планы по району и месяцу
  let plans = allPlans.value.filter(plan =>
      plan.point.district?.id === selectedDistrictId.value &&
      (new Date(plan.day).getMonth() + 1) === selectedMonth.value
  );
  // 2. Фильтруем по заявке, если указано
  if (selectedRequestId.value) {
    plans = plans.filter(p => p.request_id === selectedRequestId.value);
  }
  // 3. Уникализируем точки
  const uniquePoints = new Map();
  plans.forEach(plan => {
    if (!uniquePoints.has(plan.point.id)) {
      uniquePoints.set(plan.point.id, {
        point: plan.point,
        plans: [plan]
      });
    }
  });
  return Array.from(uniquePoints.values())
      .sort((a, b) => a.point.record_number - b.point.record_number);
});

const districtOptions = computed(() => {
  const map = new Map();
  points.value.forEach(p => {
    const d = p.district;
    if (d) {
      map.set(d.id, {
        name: (d.name ?? '').trim(),
        name_declined: (d.name_declined ?? '').trim()
      });
    }
  });
  return Array.from(map, ([id, {name, name_declined}]) => ({
    id, name, name_declined
  }))
      .sort((a, b) => a.name.localeCompare(b.name, 'ru'));
});

const districtNameDeclined = computed(() => {
  const d = districtOptions.value.find(d => d.id === selectedDistrictId.value);
  return (d?.name_declined ?? '');
});

const monthOptions = Array.from({length: 12}, (_, i) => ({
  value: i + 1,
  label: new Date(0, i).toLocaleString('ru-RU', {month: 'long'})
}));

const districtName = computed(() =>
    districtOptions.value.find(d => d.id === selectedDistrictId.value)?.name_declined || ''
);
const monthLabel = computed(() =>
    monthOptions.find(m => m.value === selectedMonth.value)?.label || ''
);

function generatePdfWithTable() {
  if (!filteredEntries.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 pageWidth = doc.internal.pageSize.getWidth();
  doc.setFontSize(12);
  doc.text(`Карточка пунктов учета интенсивности дорожного движения на автомобильных дорогах общего`,
      pageWidth / 2, // X-координата (середина страницы)
      48,            // Y-координата (прежняя позиция)
      {align: 'center'} // Опции выравнивания
  );
  doc.text(`пользования регионального и межмуниципального значения ${districtNameDeclined.value}`,
      pageWidth / 2, // X-координата (середина страницы)
      53,            // Y-координата (прежняя позиция)
      {align: 'center'} // Опции выравнивания
  );

  const req = selectedRequest.value;
  const reqName = req ? req.name : '—';
  const reqDesc = req && req.description ? `${req.description}` : '';

  doc.text(
      `по ${reqName}${reqDesc ? ' ' + reqDesc : ''}`,
      pageWidth / 2,
      58,
      {align: 'center'}
  );

  autoTable(doc, {
    head: [[
      'Номер ПУИДД',
      'Наименование а/д',
      'Район',
      'км дороги',
      'Пункт учета',
      'Категория дороги',
      'Тип пункта учёта',
      'Обоснование выбора',
      'Тип измерения'
    ]],
    body: filteredEntries.value.map(({point}) => [
      `${point.record_number}`,
      point.name,
      point.district.name,
      point.accounting_point,
      `${point.latitude}, ${point.longitude}`,
      Array.isArray(point.road_category) ? point.road_category.join(', ') : point.road_category,
      point.accounting_flag === 1 ? 'Подъезд' : 'Перегон',
      'Соответствует требованиям пунктов 3.6 и 3.7 ГОСТ 32965-2014', // Обоснование можно взять из первого плана
      'Визуальный' // Или агрегировать данные из всех планов
    ]),
    startY: 63,
    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(`Карточка ПУИДД_${districtName.value}_${monthLabel.value}.pdf`);
}
</script>

<template>

  <div class="container mt-4">
    <h4>Карточка ПУИДД</h4>
    <div class="row mb-3">
      <div class="col-sm-3">
        <label>Район</label>
        <select v-model="selectedDistrictId" class="form-select">
          <option :value="null">— Выберите район —</option>
          <option v-for="d in districtOptions" :key="d.id" :value="d.id">{{ d.name }}</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label>Месяц</label>
        <select v-model="selectedMonth" class="form-select" :disabled="!selectedDistrictId || loadingPlans">
          <option :value="null">— Выберите месяц —</option>
          <option v-for="m in monthOptions" :key="m.value" :value="m.value">{{ m.label }}</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label>Заявка</label>
        <select v-model.number="selectedRequestId" class="form-select" :disabled="loadingPlans">
          <option :value="null">— Все заявки —</option>
          <option v-for="r in requestsList" :key="r.id" :value="r.id">
            {{ r.name }}
          </option>
        </select>
      </div>
      <div class="col-sm-3 d-flex align-items-end">
        <button @click="generatePdfWithTable" class="btn btn-primary w-100" :disabled="!filteredEntries.length">
          Скачать PDF
        </button>
      </div>
    </div>

    <div v-if="filteredEntries.length" class="table-responsive">
      <table class="table table-sm table-striped">
        <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="entry in filteredEntries" :key="entry.point.id"> <!-- Исправлен ключ -->
          <td>{{ `${entry.point.record_number}` }}</td>
          <td>{{ entry.point.name }}</td>
          <td>{{ entry.point.district?.name }}</td> <!-- Добавлена проверка через ?. -->
          <td>{{ entry.point.accounting_point }}</td>
          <td>{{ `${entry.point.latitude}, ${entry.point.longitude}` }}</td>
          <td>
            {{
              Array.isArray(entry.point.road_category)
                  ? entry.point.road_category.join(', ')
                  : entry.point.road_category
            }}
          </td>
          <td>{{ entry.point.accounting_flag === 1 ? 'Подъезд' : 'Перегон' }}</td>
          <td>{{ entry.plans[0]?.justification || 'Соответствует требованиям пунктов 3.6 и 3.7 ГОСТ 32965-2014' }}</td>
          <!-- Обращение к первому плану -->
          <td>{{ measurementTypeLabels[entry.plans[0]?.measurement_type] || 'Визуальный' }}</td>
        </tr>
        </tbody>
      </table>
    </div>

    <div v-else-if="selectedDistrictId && selectedMonth && !loadingPlans" class="alert alert-warning">
      Нет назначенных работ
    </div>
    <div v-else class="text-info">
      Выберите заявку, район и месяц.
    </div>
    <div v-if="loadingPlans" class="text-center">Загрузка...</div>

  </div>
</template>

<style scoped>
.form-select {
  font-size: 0.9rem;
}
</style>
