/**
 * ➡️ 경로 : 하수관망도 모든 페이지
 * 
 * 📄 Map Layout
 * Next.js App Router (app/) 기반 맵 레이아웃 컴포넌트
 *
 * - 메뉴 클릭 이벤트 처리 및 라우팅
 * - 현재 메뉴 정보 Zustand를 통한 상태 관리
 * - 시도/시군구/사업 구분/사업 유형 데이터 초기 로드
 * - NoFooterLayout을 통한 공통 레이아웃 적용
 * - QueryClient를 통한 데이터 캐싱 및 관리
 * - 경로 변경 시 메뉴 정보 동기화
 */
"use client";

import React, { useEffect } from 'react';
import { usePathname, useRouter } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { NoFooterLayout } from "@common/components";
import type { MenuItem } from "@/entities/menu";
import { useMenuStore } from "@/shared/lib";
import useStore from "@/store/useStore";

export default function MapLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const queryClient = useQueryClient();

  const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);

  const { fetchCtpv, fetchSgg, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();

  useEffect(() => {
    fetchCtpv();
    fetchSgg();
    fetchBIZ_SE_CD();
    fetchBIZ_TY_CD();
  }, []);

  const handleMenuClick = (item: MenuItem) => {
    setCurrentMenuInfo(item);
    router.push(item.urlPath);
  };

  return (
    <NoFooterLayout
      queryClient={queryClient}
      currentPath={pathname ?? ""}
      handleMenuClick={handleMenuClick}
    >
      {children}
    </NoFooterLayout>
  );
}