"use client";

import { useEffect, useCallback } from "react";
import { usePathname } from "next/navigation";
import { useQueryClient, useQuery } from "@tanstack/react-query";

import type { MenuItem } from "@/entities/menu";
import { useMenuStore, useAlertStore } from "@/shared/lib";
import { useTabStore, getTabStoreState } from "@/store/tab-store";
import { getConfig } from "@common/config";
import { getCookie } from "@/shared/lib";
import { getMenuList } from "../../../../packages/common/components/src/api";
import { ENDPOINT } from "@/shared/config";

import { BaseLayout } from "@common/components";
import { StatisticsPageLayout } from "@/shared/ui/statistics-page-layout";

const appConfig = getConfig();
const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
const appSiteId = getCookie("site-id-key") ?? "";
const isLoggedIn = !!userId;

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

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

  const addTab = useTabStore((state) => state.addTab);
  const setActiveTab = useTabStore((state) => state.setActiveTab);
  const setMenuList = useTabStore((state) => state.setMenuList);
  const alert = useAlertStore((state) => state.setMessage);

  const { data: menuListData } = useQuery({
    queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
    queryFn: () => getMenuList(appSiteId),
    enabled: isLoggedIn,
  });

  useEffect(() => {
    if (menuListData) {
      setMenuList(menuListData);
    }
  }, [menuListData, setMenuList]);

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

    // pathname이 변경될 때만 실행되도록 tabs를 직접 가져옴
    const currentTabs = getTabStoreState().tabs;
    const tab = currentTabs.find((t) => t.path === pathname);
    if (tab) {
      setActiveTab(tab.id);
    }
  }, [pathname, setActiveTab]);

  const handleMenuClick = useCallback((item: MenuItem) => {
    setCurrentMenuInfo(item);
    const addTabResult: boolean = addTab(item);

    if (!addTabResult) {
      alert(`최대 추가 할 수 있는 화면 수를 초과 하였습니다.
            기존 화면을 닫은 후 이용해주세요.`);
    }
  }, [setCurrentMenuInfo, addTab]);

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