/* eslint-disable @typescript-eslint/no-explicit-any */

import { useEffect } from "react";
import styles from "./members-layout.module.scss";
import MemberSidebar from "@/components/members/member-sidebar";
import MemberNavbar from "@/components/members/member-navbar";
import Flash from "@/components/shared/Flash";
import { Head, usePage, router } from "@inertiajs/react";
import MemberWelcome from "@/components/members/member-welcome";

interface FlashProps {
  success?: string | null;
  error?: string | null;
  warning?: string | null;
  info?: string | null;
  flash_id?: number | null; 
}

const MembersLayout = ({ children, title }: any) => {
  const { props } = usePage<{ flash?: FlashProps }>();

  useEffect(() => {
    const handleNavigation = () => {
      window.history.scrollRestoration = "manual";

      requestAnimationFrame(() => {
        const scrollContainer = document.querySelector(
          `.${styles["layout__content__body"]}`
        ) as HTMLElement;

        if (scrollContainer) {
          scrollContainer.scrollTo({
            top: 0,
            behavior: "smooth",
          });
        }

        // fallback (in case)
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      });
    };

    const removeListener = router.on("navigate", handleNavigation);

    return () => removeListener();
  }, []);

  return (
    <>
      <Head title={title} />

      <Flash
        success={props.flash?.success}
        error={props.flash?.error}
        flash_id={props.flash?.flash_id} 
      />

      <div className={styles.layout}>
        
        {/* ================= LEFT SIDEBAR ================= */}
        <aside className={styles.layout__sidebar}>
          <MemberSidebar />
        </aside>

        {/* ================= MAIN CONTENT ================= */}
        <main className={styles.layout__content}>
          
          {/* NAVBAR (DESKTOP ONLY) */}
          <div className={styles.layout__content__navbar}>
            <MemberNavbar />
          </div>

          {/* MOBILE WELCOME */}
          <div className={styles.mobileWelcome}>
            <MemberWelcome />
          </div>

          {/* BODY */}
          <div className={styles.layout__content__body}>
            {children}
          </div>

        </main>
      </div>
    </>
  );
};

export default MembersLayout;