import { usePage } from "@inertiajs/react";
import { motion } from "motion/react";
import { type ReactNode, useEffect, useState } from "react";

import AppFooter from "@/back/Components/Layout/AppFooter";
import AppHeader from "@/back/Components/Layout/AppHeader";
import AppSidebar from "@/back/Components/Layout/Sidebar/AppSidebar";
import { ThemeProvider } from "@/back/providers/ThemeProvider";
import AppHead from "@/components/layout/AppHead";
import { SidebarProvider, useSidebar } from "@/components/ui/sidebar";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";

interface AuthenticatedLayoutProps {
  title: string;
  beforeNode?: ReactNode;
  afterNode?: ReactNode;
  children: ReactNode;
}

function LayoutContent({
  title,
  beforeNode,
  afterNode,
  children,
}: Omit<AuthenticatedLayoutProps, "children"> & { children: ReactNode }) {
  const { open } = useSidebar();
  const [isSm, setIsSm] = useState<boolean>(() =>
    typeof window !== "undefined"
      ? window.matchMedia("(max-width: 767px)").matches
      : false,
  );

  let sidebarVar = "0px";
  if (!isSm) {
    sidebarVar = open ? "var(--sidebar-width)" : "var(--sidebar-width-icon)";
  }

  useEffect(() => {
    const handler = (e: MediaQueryListEvent) => {
      setIsSm(e.matches);
    };
    const mediaQuery = window.matchMedia("(max-width: 767px)");
    mediaQuery.addEventListener("change", handler);
    return () => {
      mediaQuery.removeEventListener("change", handler);
    };
  }, []);

  return (
    <>
      <AppSidebar />
      <motion.main
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.3 }}
        style={{ maxWidth: `calc(100% - ${sidebarVar})` }}
        className="relative flex flex-col justify-between transition-[max-width] duration-200 ease-linear w-full px-8"
      >
        <div className="container flex flex-col justify-between mx-auto">
          <AppHeader />
          <div className="flex justify-between items-center py-4">
            <AppHead title={title} />
            <div className="flex justify-start items-center">
              {beforeNode}
              <h1
                className={`scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl${
                  beforeNode ? " ms-2" : ""
                }`}
              >
                {title}
              </h1>
            </div>
            {afterNode}
          </div>
          {children}
        </div>
        <Toaster />
        <AppFooter />
      </motion.main>
    </>
  );
}

const localCollapsed = localStorage.getItem("vite-ui-collapsed");

export default function AuthenticatedLayout({
  title,
  beforeNode,
  afterNode,
  children,
}: AuthenticatedLayoutProps) {
  const isCollapsed = typeof window !== "undefined" ? localCollapsed : null;

  const { locale } = usePage().props.appEnv as {
    locale: string;
  };

  return (
    <ThemeProvider key={locale}>
      <SidebarProvider defaultOpen={!isCollapsed}>
        <TooltipProvider>
          <LayoutContent
            title={title}
            beforeNode={beforeNode}
            afterNode={afterNode}
          >
            {children}
          </LayoutContent>
        </TooltipProvider>
      </SidebarProvider>
    </ThemeProvider>
  );
}