<script setup>
/* ------ UI‑состояние ---------------------------------------------------- */
import {ref, computed, onMounted} from 'vue'
import {useAuthStore} from '@/stores/Auth'
import {useRefStore} from '@/stores/Ref'

const authStore = useAuthStore()
const refStore = useRefStore()

// селекторы периода
const periodTypes = [
  {label: 'Месяц', value: 'month'},
  {label: 'Квартал', value: 'quarter'},
  {label: 'Полугодие', value: 'half'},
  {label: '9 месяцев', value: 'nine'},
  {label: 'Год', value: 'year'},
]
const months = Array.from({length: 12}, (_, i) => ({
  label: new Date(0, i).toLocaleString('ru', {month: 'long'}),
  value: i + 1,
}))
const quarters = [1, 2, 3, 4].map(q => ({label: `Q${q}`, value: q}))
const halves = [1, 2].map(h => ({label: `H${h}`, value: h}))
const currentYear = new Date().getFullYear()
const years = Array.from({length: 5}, (_, i) => currentYear - i)

// выбранные значения фильтров
const selectedPeriod = ref('month')
const selectedYear = ref(currentYear)
const selectedMonth = ref(null)
const selectedQuarter = ref(null)
const selectedHalf = ref(null)

/* ------ данные отчёта --------------------------------------------------- */
const loading = ref(false)
const loadError = ref(false)
const errorMessage = ref('')

/** итоговая структура для таблицы */
const plans = ref([])

const requests = ref([])
const selectedRequest = ref(null)

/* ------ параметры запроса ---------------------------------------------- */
const reportParams = computed(() => {
  const base = {
    group_manager_id: selectedGroupMgr.value,
    subgroup_manager_id: selectedSubgroupMgr.value,
    district_id: selectedDistrict.value,
    request_id: selectedRequest.value,
  };

  // если выбрана заявка — отдадим только её
  if (selectedRequest.value) {
    return base;
  }

  // иначе — добавляем период
  return {
    ...base,
    periodType: selectedPeriod.value,
    year: selectedYear.value,
    month: selectedPeriod.value === 'month' ? selectedMonth.value : undefined,
    quarter: selectedPeriod.value === 'quarter' ? selectedQuarter.value : undefined,
    half: selectedPeriod.value === 'half' ? selectedHalf.value : undefined,
  };
});

/* ------ утилита преобразования ответа бэка ------------------------------ */
function normalise(apiRow) {

  // берём Ncs, округляем до 2‑х знаков и заполняем недостающие нулями
  const cats = (apiRow.dailyByCat || [])
      .map(o => +(o.Ncs ?? 0).toFixed(2))

  while (cats.length < 14) cats.push(0)
  /* предположим: бек присылает те же поля, которые вы отдаёте в Excel‑экспорт */
  return {
    id: apiRow.id,
    record_number: apiRow.record_number,
    name: apiRow.name ?? '',

    kmFrom: round2(apiRow.km_from),
    kmTo: round2(apiRow.km_to),
    length: round2(apiRow.length),

    dailyByCat: cats,               // уже округлены

    totalDaily: round2(apiRow.totalDaily),
    totalCarEq: round2(apiRow.totalCarEq),
    hourly: round2(apiRow.hourly),
    hourlyEq: round2(apiRow.hourlyEq),
    peak50: round2(apiRow.peak50),
  }
}

function round2(n) {
  return +(Number(n).toFixed(2))
}

// вычисляем название района
const districtName = computed(() => {
  const id = selectedDistrict.value
  if (!id) return 'Оренбургская область'
  return refStore.districts.find(d => d.id === id)?.name || 'Оренбургская область'
})

/* ------ кнопка «Показать» ---------------------------------------------- */
async function fetchReport() {
  loading.value = true
  loadError.value = false
  errorMessage.value = ''
  try {
    const {response, error} = await authStore.fetchDetailedTrafficReport(reportParams.value)
    if (error) {
      throw new Error(error.data?.message ?? 'Не удалось получить отчёт')
    }
    /* response.data = [{ … }, … ] */
    plans.value = response.data.map(normalise)
  } catch (err) {
    loadError.value = true
    errorMessage.value = err.message
  } finally {
    loading.value = false
  }
}

/* ------ Excel ----------------------------------------------------------- */
async function downloadReport() {
  await authStore.downloadDetailedTrafficReport(reportParams.value, districtName.value)
}

/* реактивные коллекции прямо из store */
const managersGroup = computed(() => refStore.managersGroup)
const managersSubgroup = computed(() => refStore.managersSubgroup)
const districts = computed(() => refStore.districts)

/* выбранные id */
const selectedGroupMgr = ref(null)
const selectedSubgroupMgr = ref(null)
const selectedDistrict = ref(null)

onMounted(async () => {
  refStore.init()
  const {response: reqResp, error: reqErr} = await authStore.getRequests()
  if (!reqErr) requests.value = reqResp.data
})
</script>

<template>
  <div class="container py-4">
    <!-- ---------------- ФИЛЬТРЫ ---------------- -->
    <div class="filters-row">
      <div class="filters-grid">
        <div class="filter-item">
          <label>Период</label>
          <select v-model="selectedPeriod" class="form-select">
            <option v-for="p in periodTypes" :key="p.value" :value="p.value">{{ p.label }}</option>
          </select>
        </div>

        <div class="filter-item">
          <select v-model="selectedYear" class="form-select">
            <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
          </select>
        </div>

        <div v-if="selectedPeriod==='month'" class="filter-item">
          <select v-model="selectedMonth" class="form-select">
            <option :value="null">Месяц</option>
            <option v-for="m in months" :key="m.value" :value="m.value">{{ m.label }}</option>
          </select>
        </div>

        <div class="filter-item">
          <select v-model="selectedRequest" class="form-select">
            <option :value="null">Все заявки</option>
            <option v-for="r in requests" :key="r.id" :value="r.id">
              {{ r.name }}
            </option>
          </select>
        </div>

        <div v-if="selectedPeriod==='quarter'" class="filter-item">
          <label>Квартал</label>
          <select v-model="selectedQuarter" class="form-select">
            <option v-for="q in quarters" :key="q.value" :value="q.value">{{ q.label }}</option>
          </select>
        </div>

        <div v-if="selectedPeriod==='half'" class="filter-item">
          <label>Полугодие</label>
          <select v-model="selectedHalf" class="form-select">
            <option v-for="h in halves" :key="h.value" :value="h.value">{{ h.label }}</option>
          </select>
        </div>

        <!-- менеджер группы -->
        <select v-model="selectedGroupMgr" class="form-select">
          <option :value="null">Все менеджеры групп</option>
          <option v-for="m in refStore.managersGroup" :key="m.id" :value="m.id">{{ m.fullName }}</option>
        </select>

        <!-- менеджер подгруппы -->
        <select v-model="selectedSubgroupMgr" class="form-select">
          <option :value="null">Все менеджеры подгрупп</option>
          <option v-for="m in refStore.managersSubgroup" :key="m.id" :value="m.id">{{ m.fullName }}</option>
        </select>

        <!-- район / подгруппа -->
        <select v-model="selectedDistrict" class="form-select">
          <option :value="null">Все районы</option>
          <option v-for="d in refStore.districts" :key="d.id" :value="d.id">{{ d.name }}</option>
        </select>
      </div>
      <div class="actions-inline">
          <button @click="fetchReport" class="btn btn-primary w-100">Показать</button>
          <button @click="downloadReport" class="btn btn-secondary w-100">Скачать Excel</button>
      </div>
    </div>

    <!-- ---------------- СТАТУС ----------------- -->
    <div v-if="loading" class="text-center py-5">
      <div class="spinner-border" role="status"></div>
      <p class="mt-3">Загрузка данных…</p>
    </div>

    <div v-else-if="loadError" class="alert alert-danger">
      {{ errorMessage }}
    </div>

    <div v-else-if="plans.length === 0" class="col-auto alert alert-info">
      Нажмите «Показать», чтобы получить отчёт
    </div>

    <!-- ---------------- ТАБЛИЦА ---------------- -->

    <div v-else class="table-wrapper">
      <table class="table table-bordered calendar-table">
        <!-- ===== шапка (4 строки) ===== -->
        <thead>
        <tr>
          <th rowspan="3">Место учёта, км</th>
          <th colspan="2">Границы перегона, км</th>
          <th class="rotate-90" rowspan="3">Протяженность перегона, км</th>

          <th colspan="2">Количество легких<br>АТС, шт/сут</th>
          <th colspan="12">Количество&nbsp;тяжелых&nbsp;АТС, шт/сут</th>

          <th class="rotate-90" rowspan="3">Всего ТС, шт/сут</th>
          <th class="rotate-90" rowspan="3">Всего, приведённых к легк. авто, ед/сут</th>

          <th colspan="4">Максимальная интенсивность за год</th>
        </tr>

        <tr>
          <th rowspan="2">от</th>
          <th rowspan="2">до</th>

          <th>A</th>
          <th>B</th>
          <th colspan="11">C</th>

          <th>D</th>
          <th class="rotate-90" rowspan="2">Часовая, шт/ч</th>
          <th class="rotate-90" rowspan="2">Прив. к&nbsp;легк., ед/ч</th>
          <th class="rotate-90" rowspan="2">Наиб. часовая (≥50 г/год)</th>
          <th class="rotate-90" rowspan="2">Суточная, шт/сут</th>
        </tr>

        <tr>
          <th class="rotate-90">Мотоциклы</th>
          <th class="rotate-90">Легковые и&nbsp;фургоны</th>
          <th class="rotate-90">2‑осн. груз.</th>
          <th class="rotate-90">3‑осн. груз.</th>
          <th class="rotate-90">4‑осн. груз.</th>
          <th class="rotate-90">4‑осн. автопоезд</th>
          <th class="rotate-90">5‑осн. автопоезд</th>
          <th class="rotate-90">3‑осн. седельн.</th>
          <th class="rotate-90">4‑осн. седельн.</th>
          <th class="rotate-90">5-осн, 2-оси тягач</th>
          <th class="rotate-90">5-осн, 3-оси тягач</th>
          <th class="rotate-90">6‑осн. седельн.</th>
          <th class="rotate-90">7+ осей и другие</th>
          <th class="rotate-90">Автобусы</th>
        </tr>

        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
          <th>13</th>
          <th>14</th>
          <th>15</th>
          <th>16</th>
          <th>17</th>
          <th>18</th>
          <th>19</th>
          <th>20</th>
          <th>21</th>
          <th>22</th>
          <th>23</th>
          <th>24</th>
        </tr>
        </thead>

        <!-- ===== тело ===== -->
        <tbody>
        <template v-for="p in plans" :key="p.id">
          <tr>
            <td colspan="24" class="fw-bold text-center">{{ p.record_number }} {{ p.name }}</td>
          </tr>
          <tr>
            <td>{{ p.kmFrom.toFixed(3) }}</td>
            <td>{{ p.kmFrom.toFixed(3) }}</td>
            <td>{{ p.kmTo.toFixed(3) }}</td>
            <td>{{ p.length.toFixed(3) }}</td>

            <td v-for="(val,i) in p.dailyByCat" :key="i" class="text-end">{{ val }}</td>

            <td class="text-end">{{ p.totalDaily }}</td>
            <td class="text-end">{{ p.totalCarEq }}</td>
            <td class="text-end">{{ p.hourly }}</td>
            <td class="text-end">{{ p.hourlyEq }}</td>
            <td class="text-end">{{ p.peak50 }}</td>
            <td class="text-end">{{ p.totalDaily }}</td>
          </tr>
        </template>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
/* ---------- десктопный ряд фильтров ---------- */
.filters-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:flex-end;              /* селекты выравниваем по нижнему краю */
}

/* область с select-ами растягивается, а кнопки нет */
.filters-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  flex:1 1 auto;                    /* берёт всё доступное */
}

.filter-item{
  display:flex;              /* в ряд */
  align-items:center;        /* по базовой линии */
  gap:.4rem;
  flex-wrap:nowrap;
}

.filter-item label{
  margin:0;                  /* убираем отступ снизу */
  white-space:nowrap;        /* не переносим слово */
}

/* кнопки справа */
.actions-inline{
  display:flex;
  gap:.5rem;
  flex:0 0 auto;
  align-items:center;
}

.actions-inline .btn{
  white-space:nowrap;        /* «Скачать Excel» всегда одной строкой */
}

/* ---------- таблица со скроллом ---------- */
.table-wrapper {
  width: 100%;
  overflow-x: auto;          /* горизонтальный скролл */
}
.calendar-table {            /* чтобы появился скролл */
  min-width: 1000px;         /* подберите «как читабельно» */
}

/* ---------- мобильные («телефон») ---------- */
@media (max-width: 576px) {
  /* селекты стекаются по одному в столбик */
  .filters-grid{             /* селекты в столбик */
    display:grid;
    grid-template-columns:1fr;
  }

  .filters-grid select{
    min-width:160px;
  }
  /* уменьшаем общий шрифт таблицы */
  .calendar-table { font-size: 12px; }

  .filters-row{flex-direction:column; align-items:stretch;}

  .filter-item{flex-wrap:wrap;}

  .actions-inline{
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }
}

/* ---------- общие мелочи ---------- */
.table th, .table td { vertical-align: middle; }
.rotate-90 { writing-mode: vertical-rl; transform: rotate(180deg); }
</style>
