<script setup>

import {ref, onMounted, computed, watch} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {useAuthStore} from '@/stores/Auth.js';
import Flatpickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import {Russian} from 'flatpickr/dist/l10n/ru.js';

const authStore = useAuthStore();
const route = useRoute();
const info = ref([]);
const router = useRouter();
const message = ref('');
const responsibles = ref([]);
const formError = ref('');
const successMessage = ref('');
const backTimeout = ref(null);

const selectedResponsible = computed(() =>
    responsibles.value.find(op => op.id === form.value.subgroup_manager_id) || null
)

const holidayDates = [
  '2025-01-01', '2025-01-07', '2025-03-08', '2025-05-01', '2025-05-02',
  '2025-05-08', '2025-05-09', '2025-06-12', '2025-06-13',
  '2025-11-03', '2025-11-04', '2025-12-31',
];

const fpConfig = {
  altInput: true,
  altFormat: 'd.m.Y',
  dateFormat: 'Y-m-d',
  locale: {
    ...Russian,
    firstDayOfWeek: 1,
  },
  disable: [
    (date) => date.getDay() === 0 || date.getDay() === 6,
    ...holidayDates.map((d) => new Date(d)),
  ],
};

const summerTimes = ['08:00', '13:00', '18:00'];
const winterTimes = ['09:00', '14:00'];

const period = ref('summer');

const timeOptions = computed(() => {
  return period.value === 'summer' ? summerTimes : winterTimes;
});

const user = authStore.user;

const form = ref({
  id: null,
  day: '',
  timeStart: null,
  timeEnd: null,
  comment: '',
  subgroup_manager_id: null,
  counter_id: null,
});

// Список «учётчиков» для выбранного менеджера подгруппы
const counters = ref([]);

onMounted(async () => {
  const {response: usersResp} = await authStore.getUsers();
  if (usersResp) {
    // Бэкенд вернул объект вида { "Менеджер подгруппы":[…], … }
    responsibles.value = usersResp.data['Менеджер подгруппы'] || [];
  }

  const {response} = await authStore.getPointPlanInfo(route.params.id);
  if (response) {
    info.value = response.data.point_plan;
    form.value.timeStart = info.value.timeStart;
    form.value.subgroup_manager_id = info.value.subgroup_manager?.id || null;
    form.value.day = info.value.day ? info.value.day.split('T')[0] : '';
    form.value.comment = info.value.comment || '';
  }

  // Сразу загрузим «учётчиков» для этого менеджера
  await loadCounters(form.value.subgroup_manager_id);

  form.value.counter_id = info.value.counter_id || null;

  form.value.id = route.params.id;
});

function formatDate(dateStr) {
  const date = new Date(dateStr);
  return date.toLocaleDateString('ru-RU');
}

// Загружает «учётчиков» для заданного менеджера подгруппы
async function loadCounters(subgroupManagerId) {
  if (!subgroupManagerId) {
    counters.value = [];
    return;
  }
  try {
    // Передаём параметр subgroup_manager_id
    const {data, error} = await authStore.getCounters({subgroup_manager_id: subgroupManagerId});
    if (!error) {
      counters.value = data;
    } else {
      console.error('Ошибка при получении списка учётчиков:', error);
      counters.value = [];
    }
  } catch (e) {
    console.error('Ошибка при вызове getCounters:', e);
    counters.value = [];
  }
}

watch(
    () => form.value.timeStart,
    () => {
      updateEndTime();
    },
);

const updateEndTime = () => {
  if (!form.value.timeStart) {
    form.value.timeEnd = null;
    return;
  }

  const [hours, minutes] = form.value.timeStart.split(':').map(Number);
  const durationHours = form.value.timeStart === '18:00' ? 2 : 4;
  const newHours = (hours + durationHours) % 24;
  form.value.timeEnd = `${String(newHours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
};

// Наблюдатель: когда выбирают другого «ответственного», сразу перезагружаем «учётчиков»
watch(
    () => form.value.subgroup_manager_id,
    (newId) => {
      loadCounters(newId);
      // при смене менеджера сбросим уже выбранного учётчика
      form.value.counter_id = null;
    }
);

const savePlan = async () => {
  formError.value = '';
  successMessage.value = '';

  try {
    const {response, error} = await authStore.updatePointPlan(form.value.id, form.value);

    if (error) {
      switch (error.status) {
        case 403:
          // Бэкенд отдал { error: "..." }
          formError.value = error.data?.error || 'Доступ запрещён.'
          break
        case 409:
          formError.value = error.data?.message || 'Учетчик уже занят в это время.'
          break
        default:
          formError.value = 'Ошибка при сохранении данных.'
      }
      return
    }

    successMessage.value = response.data.message;
    backTimeout.value = setTimeout(() => {
      router.back();
    }, 5000);
  } catch (err) {
    console.error('Ошибка при отправке:', err);
    formError.value = 'Непредвиденная ошибка на клиенте.';
  }
};

const goBack = () => {
  if (backTimeout.value) {
    clearTimeout(backTimeout.value);
    backTimeout.value = null;
  }
  router.back();
};
</script>

<template>
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card shadow-sm">
          <div class="card-body">

            <div v-if="formError" class="alert alert-danger mt-3">
              {{ formError }}
            </div>
            <div v-if="successMessage" class="alert alert-success mt-3">
              {{ successMessage }}
            </div>

            <div class="mb-3 d-flex align-items-center">
              <label class="w-150 flex-shrink-0">Дата:</label>
              <Flatpickr v-model="form.day" :config="fpConfig" class="form-control" required/>
            </div>


            <div class="mb-3 d-flex align-items-center">
              <label class="w-150 flex-shrink-0">Номер ПУИДД:</label>
              <p class="form-control-plaintext">{{ info.point?.record_number ?? '-' }}
              </p>
            </div>
            <div v-if="info.point">
              <div class="mb-3 d-flex align-items-center">
                <label class="w-150 flex-shrink-0">Название:</label>
                <p class="form-control-plaintext">{{ info.point.name }}</p>
              </div>
              <div class="mb-3 d-flex align-items-center">
                <label class="w-150 flex-shrink-0">Широта:</label>
                <p class="form-control-plaintext">{{ info.point.latitude }}</p>
              </div>
              <div class="mb-3 d-flex align-items-center">
                <label class="w-150 flex-shrink-0">Долгота:</label>
                <p class="form-control-plaintext">{{ info.point.longitude }}</p>
              </div>
              <div class="mb-3 d-flex align-items-center">
                <label class="w-150 flex-shrink-0">Регион:</label>
                <p class="form-control-plaintext">{{ info.point.district.name }}</p>
              </div>
              <div class="mb-3 d-flex align-items-center">
                <label class="w-150 flex-shrink-0">Область:</label>
                <p class="form-control-plaintext">{{ info.point.district.region.name }}</p>
              </div>
            </div>

            <div class="mb-3 d-flex align-items-center">
              <label class="w-150 flex-shrink-0">Период:</label>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="summer" value="summer"
                       v-model="period"/>
                <label class="form-check-label" for="summer">Летний</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="winter" value="winter"
                       v-model="period"/>
                <label class="form-check-label" for="winter">Зимний</label>
              </div>
            </div>

            <div class="mb-3 d-flex align-items-center">
              <label class="w-150 flex-shrink-0">Время начала мониторинга:</label>
              <select v-model="form.timeStart" @change="updateEndTime" class="form-control" required>
                <option disabled value="">Выберите время</option>
                <option v-for="time in timeOptions" :key="time" :value="time">{{ time }}</option>
              </select>
            </div>

            <div class="mb-3 d-flex align-items-center">
              <label class="w-150 flex-shrink-0">Время завершения мониторинга:</label>

              <input type="time" class="form-control" v-model="form.timeEnd" disabled required/>
            </div>

            <!-- Ответственный -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-150 flex-shrink-0">Ответственный:</label>

              <select v-model="form.subgroup_manager_id" class="form-select" required>
                <option :value="null">Выберите ответственного</option>
                <option v-for="op in responsibles" :key="op.id" :value="op.id">
                  {{ op.last_name }} {{ op.first_name }} {{ op.middle_name }}
                </option>
              </select>
            </div>

            <!-- Исполнитель (Учётчик) -->
            <div class="mb-3 d-flex align-items-center">
              <label class="w-150 flex-shrink-0">Исполнитель (учётчик):</label>
              <select v-model="form.counter_id" class="form-select" required>
                <option :value="null">Выберите учётчика</option>
                <option
                    v-for="ctr in counters"
                    :key="ctr.id"
                    :value="ctr.id"
                >
                  {{ ctr.last_name }} {{ ctr.first_name }} {{ ctr.middle_name || '' }}
                </option>
              </select>
            </div>

            <div class="mb-3 d-flex align-items-center">
              <label for="comment" class="w-150 flex-shrink-0">Замечания:</label>
              <!-- заменили «самозакрывающийся» тег -->
              <textarea id="comment" v-model="form.comment" class="form-control"></textarea>
            </div>

            <div class="d-flex justify-content-end gap-2">
              <button class="btn btn-secondary" @click="goBack">Назад</button>
              <button class="btn btn-primary" @click="savePlan">Сохранить</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.alert {
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
}
</style>
