"use client";

import DashboardSidebar from "@/components/DashboardSidebar";
import { useAppSelector } from "@/app/store/hooks";
import { useEffect } from "react";
import { useRouter, usePathname } from "next/navigation";

export default function PathHandler({
  children,
  locale,
}: {
  children: React.ReactNode;
  locale: string;
}) {
  const { user } = useAppSelector((state) => state?.auth);
  const router = useRouter();
  const pathname = usePathname();
  useEffect(() => {
    if (!user?.token) {
      router.push("/login");
    }
  }, [pathname, router, user]);

  const isRequestProduct = pathname.includes("/request-a-product");
  const isCheckout = pathname.includes("/checkout");
  const isChat = pathname.includes("/chat");
  const hideSidebar = isRequestProduct || isChat || isCheckout;

  const mainClass = `px-5 dark:bg-background ${
    isRequestProduct ? 'bg-gradient-to-b from-white to-kzsoftBlue dark:from-background max-sm:bg-gradient-to-b max-sm:from-white max-sm:to-white max-sm:bg-white' : ''
      }
    ${isChat
      ? 'max-md:!px-0' 
      : ''
    }
  }`;

  return (
    <main className={`${mainClass}`}>
      <div className={`max-w-w1660 mx-auto py-5 max-md:pt-0 ${isChat ? 'max-md:pb-0' : ''}`}>
        <div className={`flex ${hideSidebar ? "" : "gap-5"}`}>
          {!isChat && <DashboardSidebar />}
          <div
            className={
              hideSidebar
                ? "w-full"
                : "w-[calc(100%-400px)] max-lg:w-[calc(100%-0px)] max-xl:w-[calc(100%-250px)] max-md:w-[calc(100%-0px)] max-[991px]:w-[calc(100%-200px)]"
            }
          >
            {children}
          </div>
        </div>
      </div>
    </main>
  );
}