/**
 * 우측 메뉴
 */
"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";

export type AnchorSection = {
  id: string;
  label: string;
};

export type BusinessSubNavMenu = {
  key: string;
  label: string;
  href?: string;
  current?: boolean;
  defaultOpen?: boolean;
  sections?: AnchorSection[];
};

type BusinessSubNavProps = {
  menus?: BusinessSubNavMenu[];
  offsetTop?: number;
  className?: string;
};

export default function BusinessSubNav({
  menus = [],
  offsetTop = 120,
  className = "",
}: BusinessSubNavProps) {
  const [activeId, setActiveId] = useState("");
  const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});

  const allSections = useMemo(
    () => menus.flatMap((menu) => menu.sections ?? []),
    [menus]
  );

  useEffect(() => {
    const initialOpenState: Record<string, boolean> = {};

    menus.forEach((menu) => {
      initialOpenState[menu.key] = menu.defaultOpen ?? menu.current ?? false;
    });

    setOpenMenus(initialOpenState);
  }, [menus]);

useEffect(() => {
  if (!allSections.length) return;

  const targets = allSections
    .map((section) => document.getElementById(section.id))
    .filter(Boolean) as HTMLElement[];

  if (!targets.length) return;

  let rafId = 0;

  const updateActiveSection = () => {
    const baseLine = offsetTop + 500;
    let nextActiveId = targets[0]?.id ?? "";

    for (const el of targets) {
      const { top } = el.getBoundingClientRect();
      if (top <= baseLine) {
        nextActiveId = el.id;
        continue;
      }

      break;
    }

    setActiveId((prev) => (prev === nextActiveId ? prev : nextActiveId));
  };

  const requestUpdate = () => {
    if (rafId) return;

    rafId = window.requestAnimationFrame(() => { // 예약번호 반환
      updateActiveSection();
      rafId = 0;
    });
  };

  const hash = window.location.hash.replace("#", "");
  const initialActive =
    allSections.find((section) => section.id === hash)?.id ??
    allSections[0]?.id ??
    "";

  setActiveId(initialActive);
  updateActiveSection();

  window.addEventListener("scroll", requestUpdate, { passive: true });
  window.addEventListener("resize", requestUpdate);

  return () => {
    window.removeEventListener("scroll", requestUpdate);
    window.removeEventListener("resize", requestUpdate);

    if (rafId) {
      window.cancelAnimationFrame(rafId);
    }
  };
}, [allSections, offsetTop]);

  useEffect(() => {
    if (!activeId) return;

    const parentMenu = menus.find((menu) =>
        (menu.sections ?? []).some((section) => section.id === activeId)
    );

    if (!parentMenu) return;

    setOpenMenus(() => {
      const nextOpenState: Record<string, boolean> = {};

      menus.forEach((menu) => {
        nextOpenState[menu.key] = menu.key === parentMenu.key;
      });

      return nextOpenState;
    });
  }, [activeId, menus]);

  const handleMove = (id: string) => {
    setActiveId(id);

    const target = document.getElementById(id);
    if (!target) return;

    window.history.replaceState(null, "", `#${id}`);

    const top = target.getBoundingClientRect().top + window.scrollY - offsetTop;

    window.scrollTo({
      top,
      behavior: "smooth",
    });
  };

  const toggleMenu = (key: string) => {
    setOpenMenus((prev) => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  if (!menus.length) return null;

  return (
    <aside className={`fixed right-2 top-[110px] z-50 w-[260px] ${className}`}>
      <div className="overflow-hidden bg-white">
        {menus.map((menu) => {
          const isOpen = openMenus[menu.key] ?? false;
          const hasChildren = (menu.sections?.length ?? 0) > 0;
          const isCurrentGroup = (menu.sections ?? []).some(
            (section) => section.id === activeId
          );

          return (
            <div
              key={menu.key}
            >
              <div className="flex items-center justify-between px-5 py-2">
                {menu.href ? (
                  <Link
                    href={menu.href}
                    className={[
                      "text-[16px] font-medium tracking-[-0.02em]",
                      isCurrentGroup || menu.current
                        ? "text-sky-500"
                        : "text-[#767676]",
                    ].join(" ")}
                  >
                    {menu.label}
                  </Link>
                ) : (
                  <button
                    type="button"
                    onClick={() => {
                      if (hasChildren) toggleMenu(menu.key);
                    }}
                    className={[
                      "text-left text-[16px] font-medium tracking-[-0.02em]",
                      isCurrentGroup || menu.current
                        ? "text-sky-500"
                        : "text-[#767676]",
                    ].join(" ")}
                  >
                    {menu.label}
                  </button>
                )}

                {hasChildren && (
                  <button
                    type="button"
                    onClick={() => toggleMenu(menu.key)}
                    className={[
                      "ml-2 shrink-0",
                      isCurrentGroup || menu.current
                        ? "text-sky-500"
                        : "text-[#767676]",
                    ].join(" ")}
                    aria-label={`${menu.label} 드롭다운 토글`}
                  >
                    {isOpen ? (
                      <ChevronUp className="h-5 w-5" />
                    ) : (
                      <ChevronDown className="h-5 w-5" />
                    )}
                  </button>
                )}
              </div>

              {hasChildren && isOpen && (
                <div className="relative px-5 pb-5">
                  <div className="absolute left-[31px] top-[6px] bottom-[14px] w-[2px] bg-[#CDD5DB]" />

                  <ul className="space-y-4 pl-2">
                    {menu.sections!.map((section) => {
                      const active = activeId === section.id;

                      return (
                        <li key={section.id}>
                          <button
                            type="button"
                            onClick={() => handleMove(section.id)}
                            className="flex items-start gap-3 text-left"
                          >
                            <span
                              className={[
                                "relative z-[1] mt-[6px] -ml-[2px] h-[11px] w-[11px] shrink-0 rounded-full border",
                                active
                                  ? "border-sky-500 bg-sky-500"
                                  : "border-[#BFC7CF] bg-white",
                              ].join(" ")}
                            />
                            <span
                              className={[
                                "break-keep text-[14px] leading-[1.45] transition-colors",
                                active
                                  ? "text-[#4A4A4A]"
                                  : "text-[#D1D7DE] hover:text-[#7B8794]",
                              ].join(" ")}
                            >
                              {section.label}
                            </span>
                          </button>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </aside>
  );
}