{% load static %}
{# === JavaScript для страницы детального просмотра сотрудника === #}

<script src="{% static 'js/components/postDetailModal.js' %}"></script>
<script src="{% static 'js/components/feedLikes.js' %}"></script>
<script src="{% static 'js/components/feedComments.js' %}"></script>

<script type="module">
  import { initSkillsManager } from '{% static "js/components/skillsManager.js" %}';
  import { initDeptRoleEditor } from '{% static "js/components/deptRoleEditor.js" %}';
  import { initEmployeeForm } from '{% static "js/components/employeeFormHandler.js" %}';
  import { smoothScrollTo } from '{% static "js/utils/scroll.js" %}';
  import { initEmployeeProfile } from '{% static "js/components/employeeProfile.js" %}';
  import { initLdapLoginFields } from '{% static "js/components/ldapLoginField.js" %}';

  document.addEventListener('DOMContentLoaded', () => {
    // Инициализация LDAP login полей
    initLdapLoginFields();
    // 0. Загрузка данных профиля через AJAX (аватар и посты с правильными URL)
    const employeeId = '{{ emp.id }}';
    if (employeeId) {
      initEmployeeProfile(employeeId, {
        avatarContainer: '#employeeAvatar',
        nameContainer: '#employeeName',
        postsContainer: '#employeePosts'
      });
    }

    // 1. Обработчик формы редактирования профиля
    const employeeForm = initEmployeeForm();
    console.log('[employee_detail_scripts] employeeForm initialized:', employeeForm);

    // 2. Менеджер навыков
    const skillsManager = initSkillsManager({
      blockId: 'skillsBlock',
      formId: 'skillAddForm',
      collapseId: 'skillsForm',
      removeUrl: "{% url 'employees:skill_remove' emp.id %}"
    });

    // 3. Редакторы ролей в отделах
    const deptRoleEditor = initDeptRoleEditor();

    // 3. Smooth scroll к форме редактирования на мобильных
    const editWrap = document.getElementById('editFormWrap');
    if (editWrap) {
      const isMobile = () => window.matchMedia('(max-width: 767.98px)').matches;

      function getHeaderOffset() {
        const sticky = document.querySelector('.ios-header');
        return (sticky?.offsetHeight || 0) + 8;
      }

      editWrap.addEventListener('shown.bs.collapse', () => {
        if (isMobile()) {
          smoothScrollTo(editWrap, { offset: getHeaderOffset() });
        }
      });

      // Если форма уже открыта при загрузке
      if (editWrap.classList.contains('show') && isMobile()) {
        setTimeout(() => smoothScrollTo(editWrap, { offset: getHeaderOffset() }), 50);
      }
    }

    // Экспорт в window для отладки
    if (employeeForm) window.employeeForm = employeeForm;
    if (skillsManager) window.skillsManager = skillsManager;
    if (deptRoleEditor) window.deptRoleEditor = deptRoleEditor;

    // 4. Обработчик клика на аватар для просмотра увеличенной версии
    const avatarModal = document.getElementById('avatarModal');
    if (avatarModal) {
      avatarModal.addEventListener('show.bs.modal', (event) => {
        // Получаем элемент, который вызвал модалку
        const button = event.relatedTarget;
        if (button && button.dataset.avatarUrl) {
          const modalImage = avatarModal.querySelector('#avatarModalImage');
          if (modalImage) {
            modalImage.src = button.dataset.avatarUrl;
          }
        }
      });
    }

    // 5. Обработчик формы кадровых событий
    const actionForm = document.getElementById('employeeActionForm');
    const actionType = document.getElementById('actionType');
    const actionDate = document.getElementById('actionDate');
    const dismissalWarning = document.getElementById('dismissalWarning');
    const actionSuccess = document.getElementById('actionSuccess');
    const actionError = document.getElementById('actionError');

    if (actionForm && actionType) {
      // Установка текущей даты по умолчанию
      if (actionDate) {
        const now = new Date();
        const offset = now.getTimezoneOffset() * 60000;
        const localISOTime = new Date(now - offset).toISOString().slice(0, 16);
        actionDate.value = localISOTime;
      }

      // Показ предупреждения при выборе увольнения
      actionType.addEventListener('change', (e) => {
        if (dismissalWarning) {
          if (e.target.value === 'dismissed') {
            dismissalWarning.classList.remove('d-none');
          } else {
            dismissalWarning.classList.add('d-none');
          }
        }
      });

      // Отправка формы
      actionForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        // Скрываем предыдущие сообщения
        if (actionSuccess) actionSuccess.classList.add('d-none');
        if (actionError) actionError.classList.add('d-none');

        const formData = new FormData(actionForm);
        const data = {
          employee: parseInt(formData.get('employee')),
          action: formData.get('action'),
          date: formData.get('date'),
          comment: formData.get('comment') || ''
        };

        const submitBtn = actionForm.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Сохранение...';

        try {
          const response = await fetch('/api/v1/employee-actions/', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRFToken': formData.get('csrfmiddlewaretoken')
            },
            body: JSON.stringify(data)
          });

          if (response.ok) {
            const result = await response.json();

            // Показываем сообщение об успехе
            if (actionSuccess) {
              const actionNames = {
                'hired': 'Принят на работу',
                'dismissed': 'Уволен',
                'transferred': 'Переведен',
                'on_leave': 'В отпуске',
                'returned_from_leave': 'Вернулся из отпуска',
                'on_maternity': 'В декрете',
                'returned_from_maternity': 'Вернулся из декрета',
                'rehired': 'Восстановлен'
              };
              actionSuccess.textContent = `Событие "${actionNames[data.action]}" успешно создано.`;
              actionSuccess.classList.remove('d-none');
            }

            // Сбрасываем форму
            actionForm.reset();
            if (actionDate) {
              const now = new Date();
              const offset = now.getTimezoneOffset() * 60000;
              const localISOTime = new Date(now - offset).toISOString().slice(0, 16);
              actionDate.value = localISOTime;
            }
            if (dismissalWarning) dismissalWarning.classList.add('d-none');

            // Перезагружаем страницу через 2 секунды для отображения нового события
            setTimeout(() => {
              window.location.reload();
            }, 2000);
          } else {
            const error = await response.json();
            let errorMsg = 'Ошибка при создании события.';

            if (error.detail) {
              errorMsg = error.detail;
            } else if (error.error) {
              errorMsg = error.error;
            } else if (typeof error === 'object') {
              errorMsg = Object.values(error).flat().join('. ');
            }

            if (actionError) {
              actionError.textContent = errorMsg;
              actionError.classList.remove('d-none');
            }
          }
        } catch (error) {
          console.error('Error creating employee action:', error);
          if (actionError) {
            actionError.textContent = 'Произошла ошибка при отправке данных.';
            actionError.classList.remove('d-none');
          }
        } finally {
          submitBtn.disabled = false;
          submitBtn.innerHTML = originalText;
        }
      });
    }
  });
</script>