// 모바일 메뉴 열기와 닫기
const mobileMenuButton = document.querySelector(".mobile-menu-button");
const mainNavigation = document.querySelector(".main-navigation");
const navigationLinks = document.querySelectorAll(".main-navigation a");

mobileMenuButton.addEventListener("click", function () {
  const isMenuOpen = mainNavigation.classList.toggle("is-open");

  mobileMenuButton.classList.toggle("is-open");
  mobileMenuButton.setAttribute("aria-expanded", isMenuOpen);
  mobileMenuButton.setAttribute(
    "aria-label",
    isMenuOpen ? "메뉴 닫기" : "메뉴 열기"
  );
});

// 메뉴 링크를 누르면 모바일 메뉴 닫기
navigationLinks.forEach(function (link) {
  link.addEventListener("click", function () {
    mainNavigation.classList.remove("is-open");
    mobileMenuButton.classList.remove("is-open");
    mobileMenuButton.setAttribute("aria-expanded", "false");
    mobileMenuButton.setAttribute("aria-label", "메뉴 열기");
  });
});

// FAQ 답변 열기와 닫기
const faqButtons = document.querySelectorAll(".faq-button");

faqButtons.forEach(function (button) {
  button.addEventListener("click", function () {
    const currentFaqItem = button.closest(".faq-item");
    const wasOpen = currentFaqItem.classList.contains("is-open");

    faqButtons.forEach(function (otherButton) {
      const otherFaqItem = otherButton.closest(".faq-item");

      otherFaqItem.classList.remove("is-open");
      otherButton.setAttribute("aria-expanded", "false");
    });

    if (!wasOpen) {
      currentFaqItem.classList.toggle("is-open");
      button.setAttribute("aria-expanded", "true");
    }
  });
});

// 갤러리 이미지 확대 모달
const galleryItems = document.querySelectorAll(".gallery-item");
const galleryModal = document.querySelector(".gallery-modal");
const modalImage = document.querySelector(".modal-image");
const modalCloseButton = document.querySelector(".modal-close-button");

function openGalleryModal(imagePath, imageAlt) {
  modalImage.src = imagePath;
  modalImage.alt = imageAlt;
  galleryModal.classList.add("is-open");
  galleryModal.setAttribute("aria-hidden", "false");
  document.body.classList.add("modal-open");
  modalCloseButton.focus();
}

function closeGalleryModal() {
  galleryModal.classList.remove("is-open");
  galleryModal.setAttribute("aria-hidden", "true");
  document.body.classList.remove("modal-open");
  modalImage.src = "";
  modalImage.alt = "";
}

galleryItems.forEach(function (item) {
  item.addEventListener("click", function () {
    const imagePath = item.dataset.fullImage;
    const imageAlt = item.querySelector("img").alt;

    openGalleryModal(imagePath, imageAlt);
  });
});

modalCloseButton.addEventListener("click", closeGalleryModal);

galleryModal.addEventListener("click", function (event) {
  if (event.target === galleryModal) {
    closeGalleryModal();
  }
});

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape" && galleryModal.classList.contains("is-open")) {
    closeGalleryModal();
  }
});

// 예약 폼 필수 입력값 확인
const reservationForm = document.querySelector("#reservation-form");
const customerName = document.querySelector("#customer-name");
const customerPhone = document.querySelector("#customer-phone");
const visitDate = document.querySelector("#visit-date");
const visitTime = document.querySelector("#visit-time");
const guestCount = document.querySelector("#guest-count");
const inquiryMessage = document.querySelector("#inquiry-message");
const formSuccessMessage = document.querySelector("#form-success-message");

function showError(inputElement, errorElementId, message) {
  const errorElement = document.querySelector(errorElementId);

  inputElement.classList.add("input-error");
  inputElement.setAttribute("aria-invalid", "true");
  errorElement.textContent = message;
}

function clearError(inputElement, errorElementId) {
  const errorElement = document.querySelector(errorElementId);

  inputElement.classList.remove("input-error");
  inputElement.removeAttribute("aria-invalid");
  errorElement.textContent = "";
}

reservationForm.addEventListener("submit", function (event) {
  event.preventDefault();

  let isFormValid = true;
  formSuccessMessage.textContent = "";

  if (customerName.value.trim() === "") {
    showError(
      customerName,
      "#customer-name-error",
      "이름을 입력해 주세요."
    );
    isFormValid = false;
  } else {
    clearError(customerName, "#customer-name-error");
  }

  if (customerPhone.value.trim() === "") {
    showError(
      customerPhone,
      "#customer-phone-error",
      "연락처를 입력해 주세요."
    );
    isFormValid = false;
  } else {
    clearError(customerPhone, "#customer-phone-error");
  }

  if (visitDate.value === "") {
    showError(
      visitDate,
      "#visit-date-error",
      "방문 날짜를 선택해 주세요."
    );
    isFormValid = false;
  } else {
    clearError(visitDate, "#visit-date-error");
  }

  if (visitTime.value === "") {
    showError(
      visitTime,
      "#visit-time-error",
      "방문 시간을 선택해 주세요."
    );
    isFormValid = false;
  } else {
    clearError(visitTime, "#visit-time-error");
  }

  if (guestCount.value === "") {
    showError(
      guestCount,
      "#guest-count-error",
      "방문 인원을 선택해 주세요."
    );
    isFormValid = false;
  } else {
    clearError(guestCount, "#guest-count-error");
  }

  if (inquiryMessage.value.trim() === "") {
    showError(
      inquiryMessage,
      "#inquiry-message-error",
      "문의 내용을 입력해 주세요."
    );
    isFormValid = false;
  } else {
    clearError(inquiryMessage, "#inquiry-message-error");
  }

  if (isFormValid) {
    formSuccessMessage.textContent =
      "예약 문의가 접수되었습니다. 확인 후 연락드리겠습니다.";

    reservationForm.reset();
  }
});
