const skazkiData = {
  "skazki": [
    { "title": "Волшебный мир принцесс", "photoUrl": "img/card-ph-1.png", "description": "Описание сказки 1" },
    { "title": "Космическое путешествие", "photoUrl": "url_to_photo2.jpg", "description": "Описание сказки 2" },
    { "title": "Мир видеоигр", "photoUrl": "url_to_photo3.jpg", "description": "Описание сказки 3" },
    { "title": "Вселенная супергероев", "photoUrl": "url_to_photo4.jpg", "description": "Описание сказки 4" },
    { "title": "Академия магии", "photoUrl": "url_to_photo5.jpg", "description": "Описание сказки 5" },
    { "title": "Средневековые легенды", "photoUrl": "url_to_photo6.jpg", "description": "Описание сказки 6" },
    { "title": "Чудесный мир аниме", "photoUrl": "url_to_photo7.jpg", "description": "Описание сказки 7" },
    { "title": "Русские сказки", "photoUrl": "url_to_photo8.jpg", "description": "Описание сказки 8" },
    { "title": "Реализм", "photoUrl": "url_to_photo9.jpg", "description": "Описание сказки 9" }
  ]
};

const kidPhotoInput = document.getElementById("kidPhoto");
const kidPhotoPreview = document.getElementById("kidPhotoContainer"); // Элемент <img> для показа фото

kidPhotoInput.addEventListener("change", function () {
  const file = kidPhotoInput.files[0];

  if (!file) return; // Если файл не выбран - ничего не делаем

  if (!file.type.startsWith("image/")) {
      alert("Файл должен быть изображением");
      kidPhotoInput.value = ""; // Очищаем input
      return;
  } else if (file.size > 8 * 1024 * 1024) {
      alert("Файл не должен превышать 8MB");
      kidPhotoInput.value = ""; // Очищаем input
      return;
  }

  const reader = new FileReader();
  reader.onload = function (e) {
      kidPhotoPreview.src = e.target.result; // Устанавливаем превью

      // Закрываем модальное окно Bootstrap
      const modal = bootstrap.Modal.getInstance(document.getElementById("modalPhoto"));
      if (modal) modal.hide();

      // Добавляем класс up-done к элементу с классом upload-success
      document.querySelector(".upload-success")?.classList.add("up-done");
  };
  reader.readAsDataURL(file);
});

function updatePopup(index) {
  const skazka = skazkiData.skazki[index];
  if (!skazka) return;

  setTimeout(() => {
    document.querySelector('.skazka_title').textContent = skazka.title;
    document.querySelector('.skazka_description').textContent = skazka.description;
    document.querySelector('.skazka_photo').src = skazka.photoUrl;
  }, 100);
}

document.querySelectorAll('[class^="popup-open"]').forEach((button, index) => {
  button.addEventListener('click', () => updatePopup(index));
});

document.addEventListener('DOMContentLoaded', () => {
  const createButton = document.querySelector('.create-btn');
  const progressContainer = document.querySelector('.progress-container');
  const progressBar = document.querySelector('.progress-bar');
  const modalOrder = new bootstrap.Modal(document.getElementById('modalOrder'));

  createButton.addEventListener('click', () => {
    // Сбрасываем анимацию прогресс-бара
    progressBar.style.transition = 'none';
    progressBar.style.width = '0%';

    // Делаем контейнер видимым
    progressContainer.style.opacity = 1;
    progressContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });

    // Запускаем анимацию заново с небольшой задержкой
    setTimeout(() => {
      progressBar.style.transition = 'width 5s linear';
      progressBar.style.width = '100%';
    }, 50);

    // Показываем модальное окно после завершения анимации
    setTimeout(() => {
      modalOrder.show();
    }, 5000);
  });
});


const phoneInput = document.querySelector("#phoneAuth");
const errorDiv = document.querySelector("#phoneError");

// Автоподстановка +7 при фокусе
phoneInput.addEventListener("focus", () => {
  if (!phoneInput.value) {
    phoneInput.value = "+7";
  }
});

// Блокируем ввод нецифровых символов и ограничиваем длину
phoneInput.addEventListener("input", () => {
  phoneInput.value = phoneInput.value.replace(/[^\d+]/g, ''); // Оставляем только цифры и +
  if (!phoneInput.value.startsWith("+7")) {
    phoneInput.value = "+7"; // Если пользователь удалил, вернуть +7
  }
});

// Валидация номера: строго +7 и 10 цифр после
function validatePhoneNumber() {
  const number = phoneInput.value;
  if (/^\+7\d{10}$/.test(number)) {
    errorDiv.style.display = "none";
    return true;
  } else {
    errorDiv.style.display = "block";
    errorDiv.textContent = "Введите номер в формате +7XXXXXXXXXX";
    return false;
  }
}

// Валидация на событиях
phoneInput.addEventListener("blur", validatePhoneNumber);
phoneInput.addEventListener("input", validatePhoneNumber);



document.addEventListener('DOMContentLoaded', () => {
  const buttons = document.querySelectorAll('.button-par');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('active-btn'));

      button.classList.add('active-btn');
    });
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const hairSelect = document.getElementById("hair-select");
  const eyeSelect = document.getElementById("eye-select");
  const pickHair = document.getElementById("pick-hair");
  const pickEye = document.getElementById("pick-eye");
  const hairSelectedImg = document.getElementById("hair-selected-img");
  const eyeSelectedImg = document.getElementById("eye-selected-img");
  const sendButton = document.getElementById("sendTo");
  const polMan = document.getElementById("polMan");
  const polWoman = document.getElementById("polWoman");

  let selectedStoryId = null;
  let selectedHairId = null;
  let selectedEyeId = null;
  let gender = "";
  let selectedOption = null; 

  // Функция скрытия/показа блоков выбора
  const toggleVisibility = (toShow, toHide) => {
    toShow.classList.toggle("d-none");
    toHide.classList.add("d-none");
  };

  hairSelect.addEventListener("click", () => toggleVisibility(pickHair, pickEye));
  eyeSelect.addEventListener("click", () => toggleVisibility(pickEye, pickHair));

  // Выбор цвета волос
  document.querySelectorAll(".pick-hair-option").forEach((img) => {
    img.addEventListener("click", (e) => {
      const src = e.target.dataset.src;
      const id = e.target.id;
      hairSelectedImg.src = src;
      selectedHairId = id;
      pickHair.classList.add("d-none");

      console.log("Выбранный цвет волос:", selectedHairId);
    });
  });

  // Выбор цвета глаз
  document.querySelectorAll(".pick-eye-option").forEach((img) => {
    img.addEventListener("click", (e) => {
      const src = e.target.dataset.src;
      const id = e.target.id;
      eyeSelectedImg.src = src;
      selectedEyeId = id;
      pickEye.classList.add("d-none");

      console.log("Выбранный цвет глаз:", selectedEyeId);
    });
  });

  //Выбор стори стайл
  const cards = document.querySelectorAll('.card-par');
  cards.forEach(card => {
    card.addEventListener('click', (event) => {
      cards.forEach(c => c.classList.remove('active-par'));

      card.classList.add('active-par');

      selectedStoryId = event.currentTarget.id;

      console.log(selectedStoryId);
    });
  });

  // Функция обновления пола
  const updateGender = () => {
    updateImages(); // Меняем картинки при выборе пола
    if (polMan.classList.contains("active-btn")) {
      gender = "Мальчик";
    } else if (polWoman.classList.contains("active-btn")) {
      gender = "Девочка";
    } else {
      gender = "";
    }
  };

  polMan.addEventListener("click", updateGender);
  polWoman.addEventListener("click", updateGender);


  const images = {
    storyStyle1: {
      boy: "img/card-ph-b-1.png",
      girl: "img/card-ph-g-1.png"
    },
    storyStyle2: {
      boy: "img/card-ph-b-2.png",
      girl: "img/card-ph-g-2.png"
    },
    storyStyle3: {
      boy: "img/card-ph-b-3.png",
      girl: "img/card-ph-g-3.png"
    },
    storyStyle4: {
      boy: "img/card-ph-b-4.png",
      girl: "img/card-ph-g-4.png"
    },
    storyStyle5: {
      boy: "img/card-ph-b-5.png",
      girl: "img/card-ph-g-5.png"
    },
    storyStyle6: {
      boy: "img/card-ph-b-6.png",
      girl: "img/card-ph-g-6.png"
    },
    storyStyle7: {
      boy: "img/card-ph-b-7.png",
      girl: "img/card-ph-g-7.png"
    },
    storyStyle8: {
      boy: "img/card-ph-b-8.png",
      girl: "img/card-ph-g-8.png"
    },
    storyStyle9: {
      boy: "img/card-ph-b-9.png",
      girl: "img/card-ph-g-9.png"
    }
  };

  const updateImages = () => {
    const selectedGender = polMan.classList.contains("active-btn") ? "boy" :
      polWoman.classList.contains("active-btn") ? "girl" : null;

    if (!selectedGender) return; // Если пол не выбран, не меняем картинки

    document.querySelectorAll(".card-par").forEach(card => {
      const id = card.id;
      const img = card.querySelector(".card-img-top");

      if (images[id] && images[id][selectedGender]) {
        img.src = images[id][selectedGender];
      }
    });
  };
  
  // Функция для выбора мессенджера
document.querySelectorAll(".msg-option").forEach((msgOption) => {
  msgOption.addEventListener("click", (e) => {
    const option = e.target.closest(".msg-option").getAttribute("data-option");
    selectedOption = option; // Обновляем выбранный мессенджер

    console.log("Выбранный мессенджер:", selectedOption);

    // Получаем все бейджи с нужными классами
    const tgBadges = document.querySelectorAll(".badge1");
    const waBadges = document.querySelectorAll(".badge2");

    // Скрываем все бейджи
    tgBadges.forEach(badge => badge.style.display = "none");
    waBadges.forEach(badge => badge.style.display = "none");

    // Показываем выбранные бейджи
    if (selectedOption === "tg") {
        tgBadges.forEach(badge => badge.style.display = "block");
    } else if (selectedOption === "wa") {
        console.log("Активируем WA badge");
        waBadges.forEach(badge => badge.style.display = "block");
    }
  });
});

document.body.addEventListener("click", async (event) => {
    if (event.target && event.target.id === "sendTo") {
        const button = event.target; // Получаем элемент кнопки
        button.disabled = true; // Отключаем кнопку

        let errors = [];

        updateGender(); // Проверяем пол перед отправкой
        if (!gender) errors.push("Пол не выбран");

        // Получение значений из input
        const kidName = document.getElementById("kidName").value.trim();
        const kidAge = document.getElementById("kidAge").value.trim();
        const storyMoral = document.getElementById("storyMoral").value.trim();
        const fullStoryMoral = storyMoral ? "Мораль сказки - " + storyMoral : "";
        const storyTem = document.getElementById("storyTem").value.trim();
        const dopHero = document.getElementById("dopHero").value.trim();
        const phoneClient = document.getElementById("phoneAuth").value.trim();

        if (!kidName) errors.push("Имя ребенка не заполнено");
        if (!kidAge) errors.push("Возраст ребенка не заполнен");
        if (!phoneClient) errors.push("Телефон не заполнен");
        if (!selectedOption) errors.push("Мессенджер не выбран");

        const hairMap = {
            hair1: "Светлый", hair2: "Русый", hair3: "Рыжий",
            hair4: "Темный", hair5: "Черный",
        };
        const eyeMap = {
            eye1: "Зеленый", eye2: "Голубой", eye3: "Ореховый",
            eye4: "Карий", eye5: "Серый",
        };

        const selectedHair = hairMap[selectedHairId] || "";
        const selectedEye = eyeMap[selectedEyeId] || "";

        if (!selectedHair) errors.push("Цвет волос не выбран");
        if (!selectedEye) errors.push("Цвет глаз не выбран");

        const storyStyleMap = {
            storyStyle1: "1", storyStyle2: "2", storyStyle3: "3",
            storyStyle4: "4", storyStyle5: "5", storyStyle6: "6",
            storyStyle7: "7", storyStyle8: "8", storyStyle9: "9",
        };

        const selectedStory = storyStyleMap[selectedStoryId] || "";
        if (!selectedStory) errors.push("Стиль сказки не выбран");

        const kidPhotoInput = document.getElementById("kidPhoto");
        const kidPhoto = kidPhotoInput.files[0];

        // Проверяем фото (если загружено)
        if (kidPhoto) {
            if (!kidPhoto.type.startsWith("image/")) {
                errors.push("Файл должен быть изображением");
            } else if (kidPhoto.size > 8 * 1024 * 1024) {
                errors.push("Файл не должен превышать 8MB");
            }
        }

        if (errors.length > 0) {
            alert("Ошибка:\n" + errors.join("\n"));
            button.disabled = false; // Включаем кнопку обратно в случае ошибки
            return;
        }

        const formData = new FormData();
        formData.append("gender", gender);
        formData.append("kidName", kidName);
        formData.append("kidAge", kidAge);
        formData.append("storyMoral", fullStoryMoral || "");
        formData.append("hairColor", selectedHair);
        formData.append("eyeColor", selectedEye);
        formData.append("selectedStory", selectedStory);
        formData.append("storyTem", storyTem);
        formData.append("dopHero", dopHero || "");
        formData.append("phoneClient", phoneClient);
        formData.append("selectedOption", selectedOption);

        if (kidPhoto) {
            formData.append("kidPhoto", kidPhoto);
        }

        console.log("Отправляемые данные:", formData);

        try {
            if (kidPhoto && kidPhoto.size > 2 * 1024 * 1024) {
                console.log("Файл больше 1MB, добавляем задержку перед отправкой...");
                await new Promise(resolve => setTimeout(resolve, 1000));
            }

            const response = await fetch("/api/getPrompt.php", {
                method: "POST",
                body: formData,
            });

            if (!response.ok) {
                throw new Error(`Ошибка при запросе: ${response.status}`);
            }

            const data = await response.json();
            console.log("Ответ сервера:", data);

            const promptId = data?.api_response?.prompt_id;
            if (promptId) {
                if (selectedOption === "wa") {
                    window.location.href = "https://wa.me/79520420255?text=Это%20автоматическое%20сообщение.%20Отправьте%20его%20для%20получения%20сказки!";
                } else if (selectedOption === "tg") {
                    window.location.href = `https://t.me/storyai_order_bot?start=${promptId}`;
                }
            } else {
                console.error("Ошибка: prompt_id отсутствует в ответе сервера");
                alert("Ошибка: prompt_id отсутствует в ответе сервера");
                button.disabled = false; // Включаем кнопку обратно в случае ошибки
            }
        } catch (error) {
            console.error("Ошибка с fetch:", error);
            alert("Произошла ошибка при отправке данных. Ошибка: " + error.message);
            button.disabled = false; // Включаем кнопку обратно в случае ошибки
        }
    }
});

document.getElementById("payButton").addEventListener("click", function () {
    const selectedAmount = document.querySelector('input[name="flexRadioDefault"]:checked').value;

    fetch("api/payment.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
            amount: selectedAmount, 
            phone: document.getElementById("phoneAuth").value.trim() 
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.confirmation_url) {
            setTimeout(() => {
                window.open(data.confirmation_url, '_blank');
            }, 500); // Небольшая задержка перед открытием окна
        } else {
            alert("Ошибка при создании платежа");
        }
    })
    .catch(error => console.error("Ошибка:", error));
});


});

document.addEventListener('DOMContentLoaded', () => {
  const phoneInput = document.querySelector("#phoneAuth");
  const errorDiv = document.querySelector("#phoneError");
  const modalBody = document.querySelector('#modalOrder .modal-body');
  const checkButton = document.getElementById('check');
  const payCheckButton = document.getElementById('checkPay');
  phoneInput.value = "+7";

  // Автоподстановка +7 при фокусе
  phoneInput.addEventListener("DOM", () => {
    if (!phoneInput.value) {
      phoneInput.value = "+7";
    }
  });

  // Блокируем ввод нецифровых символов и ограничиваем длину
  phoneInput.addEventListener("input", () => {
    phoneInput.value = phoneInput.value.replace(/[^\d+]/g, ''); // Оставляем только цифры и +
    if (!phoneInput.value.startsWith("+7")) {
      phoneInput.value = "+7"; // Если пользователь удалил, вернуть +7
    }
  });

  // Валидация номера: строго +7 и 10 цифр после
  function validatePhoneNumber() {
    const number = phoneInput.value;
    if (/^\+7\d{10}$/.test(number)) {
      errorDiv.style.display = "none";
      return true;
    } else {
      errorDiv.style.display = "block";
      errorDiv.textContent = "Введите номер в формате +7XXXXXXXXXX";
      return false;
    }
  }

  // Функция отправки номера на сервер (только при успешной валидации)
  async function checkClient() {
    if (!validatePhoneNumber()) return; // Проверка, если невалидно — не отправлять

    const phone = phoneInput.value;

    try {
      const response = await fetch('/api/auth.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ phone }),
      });

      if (!response.ok) {
        throw new Error('Ошибка сети');
      }

      const result = await response.json();
      renderModal(result);
    } catch (error) {
      modalBody.innerHTML = `<p style="color:red;">Ошибка запроса: ${error.message}</p>`;
    }
  }


  function renderModal(data) {
    // Скрываем все блоки модала
    const allBlocks = modalBody.querySelectorAll('.modal-block');
    allBlocks.forEach(block => block.style.display = 'none');

    // Проверяем статус и показываем нужный блок
    if (data.status === 'created') {
      document.getElementById('createdBlock').style.display = 'block';
    } else if (data.status === 'exists') {
      const countOrdersElement = document.getElementById('countOrders');
      if (countOrdersElement) {
        countOrdersElement.textContent = data.count_orders;
      }

      if (data.count_orders === 0) {
        // Если попыток нет — показываем блок оплаты
        document.getElementById('zeroBlock').style.display = 'block';
      } else {
        // Если есть попытки — обычный блок
        document.getElementById('existsBlock').style.display = 'block';
      }
    } else {
      // Ошибка
      const errorMessageElement = document.getElementById('errorMessage');
      if (errorMessageElement) {
        errorMessageElement.textContent = data.error;
      }
      document.getElementById('errorBlock').style.display = 'block';
    }
  }




  // Назначаем обработчик на кнопку
  checkButton.addEventListener('click', checkClient);
  payCheckButton.addEventListener('click', checkClient);

  // Валидация на событиях
  phoneInput.addEventListener("blur", validatePhoneNumber);
  phoneInput.addEventListener("input", validatePhoneNumber);
});