"use client";
// import Logout from "@/components/Logout";
// import Providers from "@/components/Provider";
// import Sidenav from "@/components/Sidenav";
import { Provider as Redux } from "react-redux";
import Logout from "@/components/custom/Logout";
import Sidenav from "@/components/custom/Sidenav";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import Providers from "@/components/ui/Provider";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Toaster } from "@/components/ui/toaster";
import { Bell } from "lucide-react";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { store } from "../../redux/store";
import SocketProvider, { socket } from "@/lib/SocketProvider";
import { useSession } from "next-auth/react";
import { useListAllNotificationQuery } from "@/redux/services/settings.api";
import { ListAllNotifications } from "../services/api/login-api";
import NotificationComp from "@/components/custom/NotificationComp";
import PreNotification from "@/components/custom/PreNotification";

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode;
}) {
  const { data: session } = useSession();

  const [isOpen, setIsOpen] = useState(false);
  const notifications = [
    {
      id: 1,
      title: "New message",
      description: "You have a new message from John",
      time: "5 min ago",
    },
    {
      id: 2,
      title: "Meeting reminder",
      description: "Team meeting in 30 minutes",
      time: "10 min ago",
    },
    {
      id: 3,
      title: "Task completed",
      description: "Project X has been marked as complete",
      time: "1 hour ago",
    },
    {
      id: 4,
      title: "Task completed",
      description: "Project X has been marked as complete",
      time: "1 hour ago",
    },
    {
      id: 5,
      title: "Task completed",
      description: "Project X has been marked as complete",
      time: "1 hour ago",
    },
    {
      id: 6,
      title: "Task completed",
      description: "Project X has been marked as complete",
      time: "1 hour ago",
    },
    {
      id: 7,
      title: "Task completed",
      description: "Project X has been marked as complete",
      time: "1 hour ago",
    },
    {
      id: 8,
      title: "Task completed",
      description: "Project X has been marked as complete",
      time: "1 hour ago",
    },
  ];
  //  useEffect(() => {
  //    socket.emit("get_messages", {});
  //    // if (scrollAreaRef.current) {
  //    //   scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
  //    // }
  //  }, [session]);

  //  useEffect(() => {

  //    // socket.emit("get_messages", {
  //    //   senderAdmin: session?.user.id,
  //    //   senderBranch: user.reciever._id,
  //    // });
  //    socket.on("get_messages", (data) => {

  //      //  setMessages((prevMessages: Chats[]) => {
  //      //    // If receiving a single new message
  //      //    if (data.chat) {
  //      //      return [...prevMessages, data.chat];
  //      //    }
  //      //    // If receiving multiple messages
  //      //    if (data.chats) {
  //      //      return data.chats;
  //      //    }
  //      //    return prevMessages;
  //      //  });

  //    });
  //    // if (scrollAreaRef.current) {
  //    //   scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
  //    // }
  //    return () => {
  //      socket.off("get_messages");
  //    };
  //  });
  const pathname = usePathname();
  return (
    <section className="grid h-screen grid-cols-[280px_1fr] bg-white overflow-y-hidden">
      {/* Include shared UI here e.g. a header or sidebar */}
      <Sidenav />
      <div className="flex flex-col overflow-hidden">
        <header className="flex h-14  lg:h-[70px] items-center gap-4 border-b bg-gray-100/40 px-6 dark:bg-gray-800/40">
          <div className="w-auto h-10 m-4 -ml-2.5  p-2">
            <h1 className="text-2xl font-bold mb-6">
              {pathname.split("/")[1] === "dashboard"
                ? "HOME"
                : pathname
                    .split("/")[1] // Split the pathname and take the second part (index 1)
                    .split("-") // Split the string by hyphens
                    .map(
                      (word) =>
                        word.charAt(0).toUpperCase() +
                        word.slice(1).toLowerCase()
                    ) // Capitalize each word
                    .join(" ")
                    .toUpperCase()}
            </h1>
            {/* <h1 className="text-2xl font-bold mb-6">Order Management</h1> */}
          </div>
          <div className="p-1 flex flex-1 items-center gap-4 md:ml-auto md:gap-2 lg:gap-4 justify-end">
            {/* <Button variant={"ghost"}>
              <Bell className="text-[#be063f] fill-[#be063f]" />
            </Button> */}
            <NotificationComp />
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  size="icon"
                  variant="appVariant"
                  className="w-auto bg-gradient-to-b from-[#be063f] to-[#8f0029] rounded-lg text-white  hover:text-slate-300"
                >
                  <h1 className="p-4">ADMIN</h1>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                align="center"
                className="flex justify-center min-w-[2rem]"
              >
                <Logout />
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </header>

        <ScrollArea>
          <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6">
            <Providers>
              <Redux store={store}>
                {/* {children} */}
                <SocketProvider>{children}</SocketProvider>
              </Redux>
            </Providers>
            <Toaster />
          </main>
        </ScrollArea>
      </div>
    </section>
  );
}