import $ from "jquery";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
import { initIntroAnimation } from "./introAnimation.js";

gsap.registerPlugin(ScrollTrigger);

// 스무스 스크롤 (Lenis) ↔ ScrollTrigger 연동
const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

$(function () {
  initIntroAnimation();
  const $gnb = $("#gnb");
  const $hamburger = $(".gnb__hamburger");
  const $mobileNav = $(".gnb__mobileNav");
  const $mobileNavClose = $(".gnb__mobileNavClose");

  // 섹션 → nav 귀속 맵
  const sectionToNav = {
    intro: "intro",
    about: "about",
    history: "history",
    vision: "vision",
    project: "project",
    contact: "contact",
  };

  // GNB 스크롤 배경
  ScrollTrigger.create({
    start: "40px top",
    onEnter: () => $gnb.addClass("isScrolled"),
    onLeaveBack: () => $gnb.removeClass("isScrolled"),
  });

  // 현재 섹션에 따라 GNB 활성화
  const $navLinks = $(".gnb__navLink");
  const sections = $("section[id]").toArray();
  // 흰 배경 섹션 — 이 구간에서는 GNB를 다크 텍스트로 전환(흰 텍스트가 흰 배경에 묻히는 것 방지)
  const lightSections = ["history", "contact"];

  function setActiveNav(navId) {
    $navLinks.each(function () {
      const href = $(this).attr("href").replace("#", "");
      $(this).toggleClass("isActive", href === navId);
    });
  }

  function updateActiveNav() {
    const scrollY = window.scrollY + window.innerHeight / 3;
    let current = "";

    sections.forEach((el) => {
      if (el.offsetTop <= scrollY) {
        current = sectionToNav[el.id] || current;
      }
    });

    setActiveNav(current);
    $gnb.toggleClass("isLight", lightSections.includes(current));
    $gnb.toggleClass("isPastHome", current !== "intro");
  }

  ScrollTrigger.create({
    trigger: document.body,
    start: "top top",
    end: "max",
    onUpdate: updateActiveNav,
  });

  updateActiveNav();

  // 섹션 이동 링크 클릭 시 Lenis로 부드럽게 스크롤
  $(".gnb__navLink, .gnb__mobileNavLink, .gnb__logo, .scrollDown").on("click", function (e) {
    e.preventDefault();
    lenis.scrollTo($(this).attr("href"));
  });

  // 햄버거 메뉴
  $hamburger.on("click", function () {
    const isOpen = $hamburger.toggleClass("isOpen").hasClass("isOpen");
    $hamburger.attr("aria-expanded", isOpen);
    $mobileNav.toggleClass("isOpen", isOpen);
  });

  // 모바일 메뉴 링크 클릭 시 닫기
  $(".gnb__mobileNavLink").on("click", function () {
    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
    $mobileNav.removeClass("isOpen");
  });

  // 모바일 메뉴 닫기 버튼
  $mobileNavClose.on("click", function () {
    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
    $mobileNav.removeClass("isOpen");
  });

  // History 아코디언 (단일 열림 — 한 그룹을 열면 나머지는 닫힘)
  $(".history__yearToggle").on("click", function () {
    const $group = $(this).closest(".history__yearGroup");
    const $list = $("#" + $(this).attr("aria-controls"));
    const isOpen = $group.hasClass("isOpen");

    $(".history__yearGroup")
      .not($group)
      .each(function () {
        const $otherToggle = $(this).find(".history__yearToggle");
        $(this).removeClass("isOpen");
        $otherToggle.attr("aria-expanded", false);
        $("#" + $otherToggle.attr("aria-controls")).attr("hidden", "");
      });

    $group.toggleClass("isOpen", !isOpen);
    $(this).attr("aria-expanded", !isOpen);

    if (isOpen) {
      $list.attr("hidden", "");
    } else {
      $list.removeAttr("hidden");
    }
  });

  // PROJECT 더보기 (처음 10개 노출, 클릭 시 나머지 노출)
  $(".btnMore").on("click", function (e) {
    e.preventDefault();
    $(".project__card[hidden]").removeAttr("hidden");
    $(this).closest(".project__more").hide();
  });

  // 개인정보 수집·이용 동의 모달
  $("[data-modal-open]").on("click", function () {
    $("#" + $(this).data("modal-open")).removeAttr("hidden");
  });

  $("[data-modal-close]").on("click", function () {
    $(this).closest(".privacyModal").attr("hidden", "");
  });

  // 모달 안의 동의 체크박스를 체크하면 문의 폼의 동의 체크박스도 같이 체크되고, 모달은 닫힘
  $("#privacyModalAgree").on("change", function () {
    $(".contactForm__checkboxInput").not(this).prop("checked", this.checked);

    if (this.checked) {
      $(this).closest(".privacyModal").attr("hidden", "");
    }
  });

  $(document).on("keydown", function (e) {
    if (e.key === "Escape") {
      $(".privacyModal:not([hidden])").attr("hidden", "");
    }
  });

  // SEND 유효성 검증
  $(".contactForm").on("submit", function (e) {
    e.preventDefault();
    const $form = $(this);
    let isValid = true;

    $form.find(".contactForm__input").each(function () {
      if (!$(this).val().trim()) isValid = false;
    });
    if (!$form.find(".contactForm__checkboxInput").prop("checked")) isValid = false;

    if (!isValid) {
      alert("필수 항목을 확인해 주세요");
      return;
    }

    alert("전송 완료");
    $form.trigger("reset");
  });

  // Contact 아코디언
  $(".contactAccordion__header").on("click", function () {
    const $item = $(this).closest(".contactAccordion__item");
    const $body = $("#" + $(this).attr("aria-controls"));
    const isOpen = $item.hasClass("isOpen");

    $item.toggleClass("isOpen", !isOpen);
    $(this).attr("aria-expanded", !isOpen);

    if (isOpen) {
      $body.attr("hidden", "");
    } else {
      $body.removeAttr("hidden");
    }
  });
});
