/* global $, window, document, showAlert */
$(document).ready(function() {
  const publicLink = window.location.pathname.split('/').pop();
  let questionnaireData = null;
  
  // Элементы DOM
  const loadingEl = $('#loading');
  const containerEl = $('#questionnaire-container');
  const titleEl = $('#questionnaire-title');
  const descriptionEl = $('#questionnaire-description');
  const questionsContainerEl = $('#questions-container');
  const formEl = $('#poll-form');
  const resultsContainerEl = $('#results-container');
  const pollResultsContainerEl = $('#poll-results-container');
  
  // Элементы навигации для пошаговых опросов
  const navigationControlsEl = $('#navigation-controls');
  const prevButtonEl = $('#prev-question');
  const nextButtonEl = $('#next-question');
  const questionCounterEl = $('#question-counter');
  const submitButtonEl = $('#submit-button');
  
  // Для пошаговых опросов
  let currentQuestionIndex = 0;
  
  // Проверка доступности localStorage
  const isLocalStorageAvailable = () => {
    try {
      const testKey = 'test';
      window.localStorage.setItem(testKey, testKey);
      window.localStorage.removeItem(testKey);
      return true;
    } catch (e) {
      return false;
    }
  };
  
  // Ключ для localStorage
  const getLocalStorageKey = () => `questionnaire_${publicLink}_completed`;
  
  // Проверка на повторное прохождение опроса
  const checkIfAlreadyCompleted = () => {
    if (!isLocalStorageAvailable()) return false;
    return window.localStorage.getItem(getLocalStorageKey()) === 'true';
  };
  
  // Сохранение информации о прохождении опроса
  const markAsCompleted = () => {
    if (!isLocalStorageAvailable()) return;
    window.localStorage.setItem(getLocalStorageKey(), 'true');
  };
  
  // Получаем базовый путь API
  const getApiPath = () => {
    const pathParts = window.location.pathname.split('/');
    // Убираем последние две части пути (poll/:publicLink)
    pathParts.pop();
    pathParts.pop();
    return pathParts.join('/') + '/api';
  };
  
  // Загрузка данных опроса
  const loadQuestionnaire = () => {
    $.ajax({
      url: `${getApiPath()}/questionnaires/public/${publicLink}`,
      method: 'GET',
      success: function(result) {
        if (result.success) {
          questionnaireData = result.data;
          
          // Проверяем, проходил ли пользователь уже этот опрос
          if (checkIfAlreadyCompleted()) {
            showAlreadyCompletedMessage();
          } else {
            showWelcomeAnimation();
          }
        } else {
          loadingEl.text(`Ошибка: ${result.error}`);
        }
      },
      error: function(error) {
        console.error('Error loading questionnaire:', error);
        loadingEl.text('Не удалось загрузить опрос. Пожалуйста, попробуйте позже.');
      }
    });
  };
  
  // Показываем анимацию приветствия
  const showWelcomeAnimation = () => {
    // Скрываем индикатор загрузки
    loadingEl.hide();
    
    // Создаем элемент приветствия
    const $welcomeEl = $('<div>', {
      id: 'welcome-animation',
      class: 'welcome-animation',
      css: {
        opacity: 0,
        transform: 'translateY(20px)'
      }
    });
    
    const $welcomeIcon = $('<div>', {
      class: 'welcome-icon',
      html: '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/></svg>'
    });
    
    const $welcomeTitle = $('<h2>', {
      text: `Добро пожаловать в опрос "${questionnaireData.title}"`,
      class: 'welcome-title'
    });
    
    const $welcomeDescription = $('<p>', {
      text: questionnaireData.description || 'Пожалуйста, ответьте на следующие вопросы:',
      class: 'welcome-description'
    });
    
    const $startButton = $('<button>', {
      type: 'button',
      text: 'Начать опрос',
      class: 'btn btn-primary welcome-start-btn'
    });
    
    $startButton.on('click', function() {
      $welcomeEl.css({
        opacity: 0,
        transform: 'translateY(-20px)'
      });
      
      setTimeout(() => {
        $welcomeEl.remove();
        renderQuestionnaire();
      }, 500);
    });
    
    $welcomeEl.append($welcomeIcon, $welcomeTitle, $welcomeDescription, $startButton);
    
    // Добавляем приветствие перед контейнером опроса
    containerEl.before($welcomeEl);
    
    // Анимируем появление
    setTimeout(() => {
      $welcomeEl.css({
        opacity: 1,
        transform: 'translateY(0)'
      });
    }, 100);
  };
  
  // Показываем сообщение о том, что опрос уже пройден
  const showAlreadyCompletedMessage = () => {
    loadingEl.hide();
    
    const $completedEl = $('<div>', {
      class: 'already-completed',
      css: {
        opacity: 0,
        transform: 'translateY(20px)'
      }
    });
    
    const $completedIcon = $('<div>', {
      class: 'completed-icon',
      html: '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/></svg>'
    });
    
    const $completedTitle = $('<h2>', {
      text: 'Вы уже прошли этот опрос',
      class: 'completed-title'
    });
    
    const $completedDescription = $('<p>', {
      text: 'Спасибо за ваше участие. Вы уже отправили свои ответы на этот опрос.',
      class: 'completed-description'
    });
    
    const $viewResultsButton = $('<button>', {
      type: 'button',
      text: 'Посмотреть результаты',
      class: 'btn btn-primary view-results-btn'
    });
    
    const $startAgainButton = $('<button>', {
      type: 'button',
      text: 'Пройти снова',
      class: 'btn btn-secondary start-again-btn'
    });
    
    $viewResultsButton.on('click', function() {
      $completedEl.remove();
      containerEl.show();
      formEl.hide();
      resultsContainerEl.show();
      loadPollResults();
    });
    
    $startAgainButton.on('click', function() {
      if (isLocalStorageAvailable()) {
        window.localStorage.removeItem(getLocalStorageKey());
      }
      $completedEl.remove();
      showWelcomeAnimation();
    });
    
    $completedEl.append($completedIcon, $completedTitle, $completedDescription, $viewResultsButton, $startAgainButton);
    
    containerEl.before($completedEl);
    
    setTimeout(() => {
      $completedEl.css({
        opacity: 1,
        transform: 'translateY(0)'
      });
    }, 100);
  };
  
  // Отображение опроса
  const renderQuestionnaire = () => {
    titleEl.text(questionnaireData.title);
    descriptionEl.text(questionnaireData.description || '');
    
    // Удаляем кнопку "Отправить ответы", так как есть кнопка "Отправить" в навигации
    formEl.find('.form-actions').remove();
    
    // Добавляем навигацию для пошагового опроса
    formEl.append(`
      <div class="step-navigation">
        <button type="button" id="prev-question" class="btn btn-secondary nav-btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
          </svg>
          Назад
        </button>
        <span id="question-counter">Вопрос 1 из ${questionnaireData.questions.length}</span>
        <button type="button" id="next-question" class="btn nav-btn">
          Далее
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
          </svg>
        </button>
      </div>
    `);
    
    // Обработчики для навигации
    $('#prev-question').on('click', prevQuestion);
    $('#next-question').on('click', nextQuestion);
    
    // Показываем только первый вопрос
    currentQuestionIndex = 0;
    renderCurrentQuestion();
    
    // Показываем контейнер с данными
    containerEl.show();
  };
  
  // Отображение текущего вопроса в пошаговом режиме
  const renderCurrentQuestion = () => {
    // Очищаем контейнер вопросов
    questionsContainerEl.empty();
    
    // Получаем текущий вопрос
    const currentQuestion = questionnaireData.questions[currentQuestionIndex];
    
    // Отображаем вопрос
    renderQuestion(questionsContainerEl, currentQuestion, currentQuestionIndex);
    
    // Добавляем классы для анимации
    const $currentQuestionEl = questionsContainerEl.find(`.question-item[data-index="${currentQuestionIndex}"]`);
    $currentQuestionEl.addClass('enter');
    
    // Запускаем анимацию появления после небольшой задержки
    setTimeout(() => {
      $currentQuestionEl.removeClass('enter').addClass('active');
    }, 50);
    
    // Обновляем счетчик вопросов
    questionCounterEl.addClass('update');
    questionCounterEl.text(`Вопрос ${currentQuestionIndex + 1} из ${questionnaireData.questions.length}`);
    
    // Снимаем класс анимации счетчика
    setTimeout(() => {
      questionCounterEl.removeClass('update');
    }, 500);
    
    // Управляем состоянием кнопок навигации
    prevButtonEl.prop('disabled', currentQuestionIndex === 0);
    nextButtonEl.text(
      currentQuestionIndex === questionnaireData.questions.length - 1 
        ? 'Отправить' 
        : 'Далее'
    );
  };
  
  // Переход к предыдущему вопросу
  const prevQuestion = function() {
    if (currentQuestionIndex > 0) {
      currentQuestionIndex--;
      renderCurrentQuestion();
    }
  };
  
  // Переход к следующему вопросу или завершение опроса
  const nextQuestion = function() {
    const currentQuestion = questionnaireData.questions[currentQuestionIndex];
    
    // Проверяем, что на текущий вопрос есть ответ, если он обязательный
    if (currentQuestion.required && !checkQuestionAnswer(currentQuestion, currentQuestionIndex)) {
      // Добавляем класс ошибки к текущему вопросу
      const $currentQuestionEl = questionsContainerEl.find(`.question-item[data-index="${currentQuestionIndex}"]`);
      $currentQuestionEl.addClass('error shake');
      
      // Удаляем класс ошибки после окончания анимации
      setTimeout(() => {
        $currentQuestionEl.removeClass('shake');
      }, 500);
      
      return;
    }
    
    // Если есть еще вопросы, переходим к следующему
    if (currentQuestionIndex < questionnaireData.questions.length - 1) {
      // Анимируем текущий вопрос перед переходом к следующему
      questionsContainerEl.find(`.question-item[data-index="${currentQuestionIndex}"]`).addClass('exit');
      
      // Увеличиваем индекс текущего вопроса
      currentQuestionIndex++;
      
      // Рендерим новый вопрос после небольшой задержки
      setTimeout(() => {
        renderCurrentQuestion();
      }, 200);
    } else {
      // Анимируем контейнер перед отправкой формы
      questionsContainerEl.find('.question-item').addClass('exit');
      
      // Последний вопрос, отправляем форму
      setTimeout(() => {
        // Отключаем атрибут required у невидимых полей перед отправкой
        $('input[required]:not(:visible), textarea[required]:not(:visible)').prop('required', false);
        
        submitForm();
      }, 300);
    }
  };
  
  // Проверка наличия ответа на вопрос
  const checkQuestionAnswer = (question, questionIndex) => {
    switch (question.type) {
      case 'single_choice':
        return $(`.question-item[data-index="${questionIndex}"] input[name="question_${questionIndex}"]:checked`).length > 0;
        
      case 'multiple_choice':
        return $(`.question-item[data-index="${questionIndex}"] input[type="checkbox"]:checked:not(.multiple-choice-validation)`).length > 0;
        
      case 'text':
        return $(`.question-item[data-index="${questionIndex}"] textarea`).val().trim() !== '';
        
      case 'scale':
        return $(`.question-item[data-index="${questionIndex}"] input[name="question_${questionIndex}"]:checked`).length > 0;
        
      case 'tag_cloud':
        return $(`.question-item[data-index="${questionIndex}"] .tag-item.selected`).length > 0;
        
      default:
        return true;
    }
  };
  
  // Отображение всех вопросов (стандартный режим)
  const renderQuestions = () => {
    questionsContainerEl.empty();
    
    $.each(questionnaireData.questions, function(questionIndex, question) {
      renderQuestion(questionsContainerEl, question, questionIndex);
    });
  };
  
  // Отображение одного вопроса
  const renderQuestion = (container, question, questionIndex) => {
    const $questionEl = $('<div>', {
      class: 'question-item',
      'data-index': questionIndex
    });
    
    const $questionTitle = $('<h3>', {
      text: question.text,
      class: 'question-title'
    });
    
    if (question.required) {
      const $requiredMark = $('<span>', {
        class: 'required-mark',
        text: ' *'
      });
      $questionTitle.append($requiredMark);
    }
    
    $questionEl.append($questionTitle);
    
    // Отображение вариантов ответа в зависимости от типа вопроса
    switch (question.type) {
      case 'single_choice':
        renderSingleChoice($questionEl, question, questionIndex);
        break;
      case 'multiple_choice':
        renderMultipleChoice($questionEl, question, questionIndex);
        break;
      case 'text':
        renderTextAnswer($questionEl, question, questionIndex);
        break;
      case 'scale':
        renderScale($questionEl, question, questionIndex);
        break;
      case 'rating': // Обратная совместимость для рейтинга
        renderScale($questionEl, { ...question, scaleMax: 5 }, questionIndex);
        break;
      case 'tag_cloud':
        renderTagCloud($questionEl, question, questionIndex);
        break;
    }
    
    container.append($questionEl);
  };
  
  // Отображение вопроса с одиночным выбором
  const renderSingleChoice = ($container, question, questionIndex) => {
    const $optionsContainer = $('<div>', {
      class: 'radio-options-container'
    });
    
    $.each(question.options, function(optionIndex, option) {
      const $optionContainer = $('<div>', {
        class: 'radio-option'
      });
      
      const $optionInput = $('<input>', {
        type: 'radio',
        id: `question_${questionIndex}_option_${optionIndex}`,
        name: `question_${questionIndex}`,
        value: optionIndex,
        required: question.required
      });
      
      const $optionLabel = $('<label>', {
        for: `question_${questionIndex}_option_${optionIndex}`,
        text: option.text
      });
      
      $optionContainer.append($optionInput, $optionLabel);
      $optionsContainer.append($optionContainer);
    });
    
    $container.append($optionsContainer);
  };
  
  // Отображение вопроса с множественным выбором
  const renderMultipleChoice = ($container, question, questionIndex) => {
    const $optionsContainer = $('<div>', {
      class: 'checkbox-options-container'
    });
    
    // Скрытое поле для проверки заполнения обязательного вопроса с чекбоксами
    if (question.required) {
      const $validationCheckbox = $('<input>', {
        type: 'checkbox',
        class: 'multiple-choice-validation',
        required: true,
        name: `question_${questionIndex}_validation`,
        style: 'display: none;',
        id: `question_${questionIndex}_validation`
      });
      
      $optionsContainer.append($validationCheckbox);
    }
    
    $.each(question.options, function(optionIndex, option) {
      const $optionContainer = $('<div>', {
        class: 'checkbox-option'
      });
      
      const $optionInput = $('<input>', {
        type: 'checkbox',
        id: `question_${questionIndex}_option_${optionIndex}`,
        name: `question_${questionIndex}_option_${optionIndex}`,
        value: 'true'
      });
      
      const $optionLabel = $('<label>', {
        for: `question_${questionIndex}_option_${optionIndex}`,
        text: option.text
      });
      
      // Обработчик изменения значения чекбокса
      if (question.required) {
        $optionInput.on('change', function() {
          const anyChecked = $optionsContainer.find('input[type="checkbox"]:checked:not(.multiple-choice-validation)').length > 0;
          $(`#question_${questionIndex}_validation`).prop('checked', anyChecked);
        });
      }
      
      $optionContainer.append($optionInput, $optionLabel);
      $optionsContainer.append($optionContainer);
    });
    
    $container.append($optionsContainer);
  };
  
  // Отображение текстового вопроса
  const renderTextAnswer = ($container, question, questionIndex) => {
    const $textareaContainer = $('<div>', {
      class: 'textarea-container'
    });
    
    const $textarea = $('<textarea>', {
      id: `question_${questionIndex}_text`,
      name: `question_${questionIndex}_text`,
      rows: 4,
      placeholder: 'Введите ваш ответ здесь...',
      required: question.required
    });
    
    $textareaContainer.append($textarea);
    $container.append($textareaContainer);
  };
  
  // Отображение вопроса с шкалой оценки
  const renderScale = ($container, question, questionIndex) => {
    const minValue = question.scaleMin || 0;
    const maxValue = question.scaleMax || 10;
    const minLabel = question.scaleMinLabel || 'Минимум';
    const maxLabel = question.scaleMaxLabel || 'Максимум';
    
    const $scaleContainer = $('<div>', {
      class: 'scale-container'
    });
    
    const $scaleLabels = $('<div>', {
      class: 'scale-labels'
    });
    
    $scaleLabels.append(
      $('<span>', { class: 'scale-label-min', text: minLabel }),
      $('<span>', { class: 'scale-label-max', text: maxLabel })
    );
    
    const $scaleValues = $('<div>', {
      class: 'scale-values'
    });
    
    // Создаем кнопки для шкалы от min до max
    for (let i = minValue; i <= maxValue; i++) {
      const $scaleItem = $('<div>', {
        class: 'scale-item'
      });
      
      const $scaleInput = $('<input>', {
        type: 'radio',
        id: `question_${questionIndex}_scale_${i}`,
        name: `question_${questionIndex}`,
        value: i,
        required: question.required
      });
      
      const $scaleLabel = $('<label>', {
        for: `question_${questionIndex}_scale_${i}`,
        text: i
      });
      
      $scaleItem.append($scaleInput, $scaleLabel);
      $scaleValues.append($scaleItem);
    }
    
    $scaleContainer.append($scaleLabels, $scaleValues);
    $container.append($scaleContainer);
  };
  
  // Отображение вопроса с облаком тегов
  const renderTagCloud = ($container, question, questionIndex) => {
    const $tagCloudContainer = $('<div>', {
      class: 'tag-cloud-container'
    });
    
    if (question.options && question.options.length > 0) {
      // Предопределенное облако тегов
      $.each(question.options, function(optionIndex, option) {
        if (!option || !option.text) return; // Пропускаем пустые или невалидные опции
        
        const $tagItem = $('<div>', {
          class: 'tag-item',
          text: option.text,
          'data-index': optionIndex,
          click: function() {
            $(this).toggleClass('selected');
            updateTagValidation();
          }
        });
        
        $tagCloudContainer.append($tagItem);
      });
    } else {
      // Пользовательское облако тегов
      const $tagInputContainer = $('<div>', {
        class: 'tag-input-container'
      });
      
      const $tagInput = $('<input>', {
        type: 'text',
        placeholder: 'Введите теги, разделенные пробелом, и нажмите Enter',
        class: 'tag-input'
      });
      
      const $tagItems = $('<div>', {
        class: 'tag-items'
      });
      
      // Обработчик ввода тегов
      $tagInput.on('keypress', function(e) {
        if (e.which === 13) { // Enter
          e.preventDefault();
          
          const inputText = $(this).val().trim();
          if (inputText) {
            // Разбиваем ввод на отдельные теги
            const tags = inputText.split(/\s+/);
            
            // Добавляем каждый тег как отдельный элемент
            tags.forEach(tagText => {
              if (tagText) {
                const $tagItem = $('<div>', {
                  class: 'tag-item selected',
                  text: tagText
                });
                
                const $tagRemove = $('<span>', {
                  class: 'tag-remove',
                  html: '&times;',
                  click: function(e) {
                    e.stopPropagation();
                    $(this).parent().remove();
                    updateTagValidation();
                  }
                });
                
                $tagItem.append($tagRemove);
                $tagItems.append($tagItem);
              }
            });
            
            $(this).val('');
            updateTagValidation();
          }
        }
      });
      
      $tagInputContainer.append($tagInput, $tagItems);
      $tagCloudContainer.append($tagInputContainer);
    }
    
    // Скрытое поле для валидации
    if (question.required) {
      const $validationInput = $('<input>', {
        type: 'text',
        required: true,
        style: 'display: none;',
        id: `question_${questionIndex}_tag_validation`
      });
      
      $tagCloudContainer.append($validationInput);
    }
    
    $container.append($tagCloudContainer);
    
    // Функция для обновления валидации тегов
    function updateTagValidation() {
      if (question.required) {
        const hasSelectedTags = $tagCloudContainer.find('.tag-item.selected').length > 0;
        $(`#question_${questionIndex}_tag_validation`).val(hasSelectedTags ? 'valid' : '');
      }
    }
  };
  
  // Показываем анимацию благодарности
  const showThankYouAnimation = () => {
    // Скрываем форму
    formEl.hide();
    
    // Создаем анимацию благодарности
    const $thankYouEl = $('<div>', {
      class: 'thank-you-animation',
      css: {
        opacity: 0,
        transform: 'scale(0.9)'
      }
    });
    
    const $thankYouIcon = $('<div>', {
      class: 'thank-you-icon',
      html: '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/></svg>'
    });
    
    const $thankYouTitle = $('<h2>', {
      text: 'Спасибо за участие!',
      class: 'thank-you-title'
    });
    
    const $thankYouDescription = $('<p>', {
      text: 'Ваши ответы были успешно записаны. Мы ценим ваше мнение!',
      class: 'thank-you-description'
    });
    
    $thankYouEl.append($thankYouIcon, $thankYouTitle, $thankYouDescription);
    
    // Добавляем анимацию перед результатами
    resultsContainerEl.prepend($thankYouEl);
    
    // Показываем контейнер с результатами
    resultsContainerEl.show();
    
    // Анимируем появление
    setTimeout(() => {
      $thankYouEl.css({
        opacity: 1,
        transform: 'scale(1)'
      });
      
      // Загружаем результаты через некоторое время
      setTimeout(() => {
        loadPollResults();
      }, 1000);
    }, 100);
  };
  
  // Отправка формы
  const submitForm = function() {
    // Отключаем атрибут required у невидимых полей перед отправкой
    $('input[required]:not(:visible), textarea[required]:not(:visible)').prop('required', false);
    
    // Собираем ответы
    const answers = [];
    
    $.each(questionnaireData.questions, function(questionIndex, question) {
      const $questionEl = $(`.question-item[data-index="${questionIndex}"]`);
      
      let optionIndices;
      let selectedOption;
      let selectedOptions;
      let selectedTags;
      let textAnswer;
      let scaleValue;
      
      switch (question.type) {
        case 'single_choice':
          selectedOption = $questionEl.find(`input[name="question_${questionIndex}"]:checked`);
          if (selectedOption.length) {
            answers.push({
              questionIndex,
              optionIndices: [parseInt(selectedOption.val())]
            });
          }
          break;
          
        case 'multiple_choice':
          selectedOptions = $questionEl.find('input[type="checkbox"]:checked:not(.multiple-choice-validation)');
          if (selectedOptions.length) {
            optionIndices = $.map(selectedOptions, function(option) {
              const nameParts = $(option).attr('name').split('_');
              return parseInt(nameParts[nameParts.length - 1]);
            });
            answers.push({
              questionIndex,
              optionIndices
            });
          }
          break;
          
        case 'text':
          textAnswer = $questionEl.find('textarea').val().trim();
          if (textAnswer) {
            answers.push({
              questionIndex,
              textAnswer
            });
          }
          break;
          
        case 'scale':
        case 'rating': // Обратная совместимость
          selectedOption = $questionEl.find(`input[name="question_${questionIndex}"]:checked`);
          if (selectedOption.length) {
            answers.push({
              questionIndex,
              scaleValue: parseInt(selectedOption.val())
            });
          }
          break;
          
        case 'tag_cloud':
          selectedTags = $questionEl.find('.tag-item.selected');
          if (selectedTags.length) {
            const tagTexts = $.map(selectedTags, function(tag) {
              return $(tag).text().replace('×', '').trim();
            });
            answers.push({
              questionIndex,
              tagTexts
            });
          }
          break;
      }
    });
    
    // Отправляем ответы на сервер
    $.ajax({
      url: `${getApiPath()}/vote/${publicLink}`,
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({ answers }),
      success: function(result) {
        if (result.success) {
          // Сохраняем информацию о прохождении опроса
          markAsCompleted();
          
          // Показываем анимацию благодарности вместо сразу скрытия формы
          showThankYouAnimation();
        } else {
          showAlert(`Ошибка: ${result.error}`, 'Ошибка');
        }
      },
      error: function(error) {
        console.error('Error submitting poll:', error);
        showAlert('Не удалось отправить ответы. Пожалуйста, попробуйте позже.', 'Ошибка');
      }
    });
  };
  
  // Загрузка результатов опроса
  const loadPollResults = () => {
    $.ajax({
      url: `${getApiPath()}/results/${publicLink}`,
      method: 'GET',
      success: function(result) {
        if (result.success) {
          renderPollResults(result.data);
        } else {
          pollResultsContainerEl.html(`<p class="error">Ошибка: ${result.error}</p>`);
        }
      },
      error: function(error) {
        console.error('Error loading poll results:', error);
        pollResultsContainerEl.html('<p class="error">Не удалось загрузить результаты. Пожалуйста, попробуйте позже.</p>');
      }
    });
  };
  
  // Отображение результатов опроса
  const renderPollResults = (data) => {
    pollResultsContainerEl.empty();
    
    // Добавляем заголовок с анимацией
    const $resultsTitle = $('<h2>', {
      text: 'Результаты опроса',
      class: 'results-title'
    });
    
    pollResultsContainerEl.append($resultsTitle);
    
    // Отображаем результаты с отложенной анимацией
    data.questions.forEach((question, index) => {
      setTimeout(() => {
        const $questionResult = $('<div>', {
          class: 'question-result',
          css: { opacity: 0, transform: 'translateY(20px)' }
        });
        
        const $questionTitle = $('<h3>', {
          text: question.text,
          class: 'question-title'
        });
        
        $questionResult.append($questionTitle);
        
        // Отображаем результаты в зависимости от типа вопроса
        switch (question.type) {
          case 'single_choice':
          case 'multiple_choice':
            if (question.options && question.options.length > 0) {
              // Находим общее количество голосов
              const totalVotes = question.options.reduce((sum, option) => sum + (option.count || 0), 0);
              
              if (totalVotes > 0) {
                question.options.forEach((option) => {
                  const percent = totalVotes > 0 ? Math.round((option.count || 0) * 100 / totalVotes) : 0;
                  
                  const $optionResult = $('<div>', {
                    class: 'result-bar-container'
                  });
                  
                  const $optionLabel = $('<div>', {
                    class: 'result-label',
                    text: option.text
                  });
                  
                  const $resultBar = $('<div>', {
                    class: 'result-bar'
                  });
                  
                  const $resultBarFill = $('<div>', {
                    class: 'result-bar-fill',
                    css: { width: '0%' }
                  });
                  
                  const $resultPercent = $('<div>', {
                    class: 'result-percent',
                    text: `${percent}% (${option.count || 0} голосов)`
                  });
                  
                  $resultBar.append($resultBarFill);
                  $optionResult.append($optionLabel, $resultBar, $resultPercent);
                  $questionResult.append($optionResult);
                  
                  // Анимируем заполнение полосы после добавления в DOM
                  setTimeout(() => {
                    $resultBarFill.css('width', `${percent}%`);
                  }, 100);
                });
              } else {
                $questionResult.append($('<p>', {
                  text: 'Пока нет голосов для этого вопроса',
                  class: 'no-results'
                }));
              }
            }
            break;
            
          case 'tag_cloud':
            if (question.tags && question.tags.length > 0) {
              const $tagCloud = $('<div>', {
                class: 'results-tag-cloud'
              });
              
              // Находим максимальное количество для масштабирования
              const maxCount = Math.max(...question.tags.map(tag => tag.count || 1));
              
              question.tags.forEach((tag, tagIndex) => {
                // Масштабируем размер тега от 1 до 3 в зависимости от частоты
                const scale = maxCount > 1 ? 1 + (tag.count / maxCount) * 2 : 1;
                
                const $tag = $('<div>', {
                  class: 'result-tag',
                  text: tag.text,
                  css: { 
                    opacity: 0,
                    transform: 'scale(0.5)',
                    fontSize: `${scale}em`
                  }
                });
                
                $tagCloud.append($tag);
                
                // Анимируем появление тега с задержкой
                setTimeout(() => {
                  $tag.css({
                    opacity: 1,
                    transform: 'scale(1)'
                  });
                }, tagIndex * 100);
              });
              
              $questionResult.append($tagCloud);
            } else {
              $questionResult.append($('<p>', {
                text: 'Пока нет тегов для этого вопроса',
                class: 'no-results'
              }));
            }
            break;
            
          case 'scale':
          case 'rating':
            if (question.scaleValues && question.scaleValues.length > 0) {
              const average = question.scaleAverage || 
                (question.scaleValues.reduce((sum, val) => sum + val, 0) / question.scaleValues.length);
              
              const min = Math.min(...question.scaleValues);
              const max = Math.max(...question.scaleValues);
              
              const $scaleAverage = $('<div>', {
                class: 'scale-average',
                html: `Средняя оценка: <span class="highlight">${average.toFixed(1)}</span> (мин: ${min}, макс: ${max})`
              });
              
              $questionResult.append($scaleAverage);
            } else {
              $questionResult.append($('<p>', {
                text: 'Пока нет оценок для этого вопроса',
                class: 'no-results'
              }));
            }
            break;
            
          case 'text':
            if (question.answers && question.answers.length > 0) {
              const $answersContainer = $('<div>', {
                class: 'text-answers-container'
              });
              
              question.answers.forEach((answer, answerIndex) => {
                const $textAnswer = $('<div>', {
                  class: 'text-answer',
                  text: answer,
                  css: { 
                    opacity: 0,
                    transform: 'translateX(20px)'
                  }
                });
                
                $answersContainer.append($textAnswer);
                
                // Анимируем появление ответа с задержкой
                setTimeout(() => {
                  $textAnswer.css({
                    opacity: 1,
                    transform: 'translateX(0)'
                  });
                }, answerIndex * 200);
              });
              
              $questionResult.append($answersContainer);
            } else {
              $questionResult.append($('<p>', {
                text: 'Пока нет текстовых ответов для этого вопроса',
                class: 'no-results'
              }));
            }
            break;
        }
        
        pollResultsContainerEl.append($questionResult);
        
        // Анимируем появление блока результатов
        setTimeout(() => {
          $questionResult.css({
            opacity: 1,
            transform: 'translateY(0)'
          });
        }, 100);
      }, index * 300); // Задержка между вопросами
    });
    
    // Если нет данных для отображения
    if (!data.questions || data.questions.length === 0) {
      pollResultsContainerEl.append($('<p>', {
        text: 'Нет данных для отображения',
        class: 'no-results'
      }));
    }
  };
  
  // Обработка отправки формы
  formEl.on('submit', function(e) {
    e.preventDefault();
    
    // Всегда используем навигацию через кнопки в пошаговом режиме
    return false;
  });
  
  // Инициализация
  loadQuestionnaire();
});