'use client';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger
} from '@/components/ui/collapsible';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger
} from '@/components/ui/sidebar';
import { navItems } from '@/constants/data';
import { Bell, Calendar, ChevronRight, CircleDollarSign, CircleHelp, Clock, FileText, GalleryVerticalEnd, Landmark, LogOut, Phone, } from 'lucide-react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import * as React from 'react';
import { Icons } from '../icons';
import { Button } from '../ui/button';
import { useGlobalContext } from '@/context/Provider';
import { ScrollArea } from '../ui/scroll-area';
import { BUCKET_ROOT } from '@/utils/apis';
import SidebarModal from '../rightSidebar/page';
import ProfileImg from "../../assets/images/profileimg.png"
import CurrencyDialog from './CurrencyDialog';
import { useBreadcrumbs } from '@/hooks/use-breadcrumbs';
import LogoutDialog from '../ui/logoutModal';
import moment from "moment";
export const company = {
  name: 'Acme Inc',
  logo: GalleryVerticalEnd,
  plan: 'Enterprise'
};

export default function AppSidebar({
  children
}: {
  children: React.ReactNode;
}) {
  const items = useBreadcrumbs();
  const [activeModal, setActiveModal] = React.useState<string | null>(null);
  const [currencyModal, setcurrencyModal] = React.useState(false);
  const [logoutModal, setLogoutModal] = React.useState(false)
  const [mounted, setMounted] = React.useState(false);
  const router = useRouter()
  const pathname = usePathname();
  

  // const router= useRouter()

  const { userInfo } = useGlobalContext()
 
  React.useEffect(() => {
    setMounted(true);
    // getProfile();
  }, []);
  // React.useEffect(() => {
    
  // }, [userInfo]);

  if (!mounted) {
    return null;
  }
  function cleanUrl(url: string) {
    // Match a MongoDB ObjectId-like pattern
    const idRegex = /\/[a-f0-9]{24}(\/|$)/;
    const idMatch = url.match(idRegex);

    if (idMatch) {
      return url.substring(0, idMatch.index);
    }
    if (url.includes('generate')) {
      const pageIndex = url.indexOf('/generate');
      return url.substring(0, pageIndex);
    }

    const pageIndex = url.indexOf('/page');
    if (pageIndex !== -1) {
      return url.substring(0, pageIndex);
    }

    return url; // Return original URL if no match
  }

// console.log('userInfo',userInfo)



  return (
    <>

      <SidebarProvider className='sidebar-layout'>
        {/* ..........sidebar......... */}
        <Sidebar collapsible="icon">
          <SidebarHeader>
            <div className="flex border-b-2 gap-6 pb-6 border-common  items-center justify-center text-sidebar-primary-foreground">
              <div className='group-data-[collapsible=icon]:hidden'><Link href={"/home"}><span className='text-[#1C1D22] font-[700] text-[30px]'>{userInfo?.restaurant_id?.restaurant_name}</span></Link></div>
              {/* <Popover>
                <PopoverTrigger>
                  <NotificationBadge
                    label={state?.unreadCount > 0 ? state?.unreadCount : userInfo?.unread_notification_count}
                  > */}
              <Button type='button' variant='outline' className='h-[36px] w-[36px] rounded-full bg-[#1C1D2214] p-0 '>
                {/* <Icons.Plus /> */}
                <SidebarTrigger className="-ml-1" />
              </Button>
              {/* </NotificationBadge >
                </PopoverTrigger>
               
              </Popover> */}
            </div>
          </SidebarHeader>
          <ScrollArea className={userInfo?.current_plan?.plan_name ? `h-[calc(100vh-328px)]` : `h-[calc(100vh-200px)]`}>
            <SidebarContent className="overflow-x-hidden ">
              <SidebarGroup>
                {/* <SidebarGroupLabel>MAIN MENU</SidebarGroupLabel> */}
                <SidebarMenu>
                  {navItems.map((item) => {
                    const isActiveParent = pathname === item?.url || item?.items?.some((subItem) => cleanUrl(pathname) === cleanUrl(subItem?.url));
                    return item?.items && item?.items?.length > 0 ? (
                      <Collapsible
                        key={item.title}
                        asChild
                        defaultOpen={isActiveParent}
                        className="group/collapsible"
                      >
                        <SidebarMenuItem>
                          <CollapsibleTrigger asChild>
                            <SidebarMenuButton
                              tooltip={item.title}
                              isActive={isActiveParent}
                            >
                              {/* {item.icon && null} */}
                              <span>{item?.title}</span>
                              <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                            </SidebarMenuButton>
                          </CollapsibleTrigger>
                          <CollapsibleContent>
                            <SidebarMenuSub
                              className='pl-0'>
                              {item.items?.map((subItem) => (
                                <SidebarMenuSubItem key={subItem.title} >
                                  <SidebarMenuSubButton
                                    className='pl-0'
                                    asChild
                                    isActive={cleanUrl(pathname) === cleanUrl(subItem.url)}
                                  >
                                    <Link href={subItem.url}>
                                      <span>{(cleanUrl(pathname) === cleanUrl(subItem.url)) ? <Icons.Minus /> : <Icons.Minus />}</span>
                                      <span>{subItem.title}</span>
                                    </Link>
                                  </SidebarMenuSubButton>
                                </SidebarMenuSubItem>
                              ))}
                            </SidebarMenuSub>
                          </CollapsibleContent>
                        </SidebarMenuItem>
                      </Collapsible>
                    ) : item.isSidebar ?
                      (<SidebarMenuItem key={item.title}>
                        <SidebarMenuButton
                          asChild
                          tooltip={item.title}
                          isActive={cleanUrl(pathname) === cleanUrl(item.url)}
                        >
                          <div onClick={() => setActiveModal(item.url)}>
                            <span>{item.title}</span>
                          </div>
                        </SidebarMenuButton>
                      </SidebarMenuItem>) : (
                        <SidebarMenuItem key={item.title}>
                          <SidebarMenuButton
                            asChild
                            tooltip={item.title}
                            isActive={cleanUrl(pathname) === cleanUrl(item.url)}
                          >
                            <Link href={item.url}>
                              {/* {(item?.icon === "DashBoard" && cleanUrl(pathname) === cleanUrl(item.url)) ? <Icons.DashboardColoured /> : <Icon className='h-5 w-5' />} */}
                              <span>{item.title}</span>
                              {item.title === "Menu" && <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />}
                            </Link>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      );
                  })}
                </SidebarMenu>
              </SidebarGroup>
            </SidebarContent>
          </ScrollArea>
          {/* hide when collapsed */}
         
          <SidebarRail />
        </Sidebar>

        {/* ......header...... */}
        <SidebarInset className='bg-black'>
          <header className="header px-5  flex flex-col h-[13vh] shrink-0 items-center gap-1 justify-between transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
            <div className='w-full  flex flex-row justify-between' > <div className="flex items-center gap-2">
              <span className="text-[20px] font-[700] text-[#1C1D22]">Welcome back, {userInfo?.name} 👋</span>
              {/* ...Breadcrumbs............. */}
              {/* <div className='hidden md:block'>
                <Breadcrumbs />
              </div> */}
            </div>
              <div className='flex gap-2 items-center' >
                {/* card one */}
                <div className='profile-card-1 h-11 bg-white rounded-lg px-3  flex  items-center flex-row gap-4'>
                  <div className='flex justify-center gap-1 items-center'>
                    <span><Calendar size={18} /></span>
                    {/* temperory check to show credit if greater then 0 */}
                    <p className='font-medium text-[16px] text-[#999999]'>{moment().format('D MMMM YYYY')}</p>
                  </div>


                </div>
                {/* card two */}
                <div className='profile-card h-11 items-center  flex flex-row gap-2 md:gap-4'>

                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <div className='w-[40px] h-[40px] rounded-full'>{userInfo?.image ?<img src={BUCKET_ROOT+userInfo?.image } width={40} height={40} className="rounded-full" />:<img src={ProfileImg.src} width={40} height={40} className="rounded-full" />} </div>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className='relative right-4 p-3 font-semibold bg-white'>
                      <DropdownMenuItem onClick={() => setActiveModal("profile")}>
                        {/* <Icons.Profile />
                      <span className="ml-2 text-sm font-normal">My Profile</span> */}
                        <div className="w-full flex flex-row gap-4">
                          <div className="flex justify-center items-center">
                            <img src={ProfileImg.src} width={40} height={40} className="rounded-full" />
                          </div>
                          <div className="flex flex-col justify-center items-start">
                            <span className="text-[14px] text-[#2a2a2a] font-[600]">{userInfo?.restaurant_id?.restaurant_name}</span>
                            <span className="text-[12px] text-[#999999] font-[500]">{userInfo?.email}</span>
                            <span className="flex flex-row gap-2 items-center text-[12px] text-[#121212] font-[400]">Edit Profile <ChevronRight size={15} /></span>
                          </div>
                        </div>
                      </DropdownMenuItem>
                      {/* <DropdownMenuSeparator />
                      <DropdownMenuItem onClick={() => setActiveModal("settings")}>
                        <div className="w-[24px] h-[24px] bg-[#FEE398] rounded-md flex justify-center items-center">
                          <Bell size={15} />
                        </div>
                        <span className="ml-2 text-sm font-normal">Notifications</span>
                      </DropdownMenuItem>
                      <DropdownMenuSeparator /> */}
                      <DropdownMenuItem onClick={() => setActiveModal("bankDetails")}>
                        <div className="w-[24px] h-[24px] bg-[#FEE398] rounded-md flex justify-center items-center">
                          <Landmark size={15} />
                        </div>
                        <span className="ml-2 text-sm font-normal">Bank Details</span>
                      </DropdownMenuItem>

                      {/* <DropdownMenuItem onClick={() => { setcurrencyModal(true); setActiveModal("") }}>
                        <div className="w-[24px] h-[24px] bg-[#FEE398] rounded-md flex justify-center items-center">
                          <CircleDollarSign size={15} />
                        </div>
                        <span className="ml-2 text-sm font-normal">Currency & Language</span>
                      </DropdownMenuItem> */}

                      <DropdownMenuItem onClick={() => setActiveModal("timings")}>
                        <div className="w-[24px] h-[24px] bg-[#FEE398] rounded-md flex justify-center items-center">
                          <Clock size={15} />
                        </div>
                        <span className="ml-2 text-sm font-normal">Timing</span>
                      </DropdownMenuItem>

                      <DropdownMenuItem onClick={() => setActiveModal("support")}>
                        <div className="w-[24px] h-[24px] bg-[#FEE398] rounded-md flex justify-center items-center">
                          <CircleHelp size={15} /> </div>
                        <span className="ml-2 text-sm font-normal">Support</span>
                      </DropdownMenuItem>

                      <DropdownMenuItem onClick={() => setActiveModal("contact")}>
                        <div className="w-[24px] h-[24px] bg-[#FEE398] rounded-md flex justify-center items-center">
                          <Phone size={15} /></div>
                        <span className="ml-2 text-sm font-normal">Contact Us</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => router.push("/terms")}>
                        <div className="w-[24px] h-[24px] bg-[#FEE398] rounded-md flex justify-center items-center">
                          <FileText size={15} /></div>
                        <span className="ml-2 text-sm font-normal">Terms of Service</span>
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem onClick={() => { setLogoutModal(true); setActiveModal(null) }}>
                        <div className="w-[24px] h-[24px] bg-[#FEE398] rounded-md flex justify-center items-center">
                          <LogOut size={15} /></div>
                        <span className="ml-2 text-sm font-normal">Log out</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                  {/* <div className="flex items-center gap-2 px-4">
                  <ThemeToggle />
                </div> */}
                </div>
              </div></div>
            {items?.length > 0 && (items?.[items?.length - 1].title==="Earning") ? <div className='w-full flex justify-start items-start gap-2'>
               <span className=' text-[#1C1D22] text-[16px] font-[600] p-2' style={{ borderBottom: "2px solid #333" }}>
                {items?.[items?.length - 1].title==="Earning"?"Today":items?.[items?.length - 1].title}
                </span>
                <span className=' text-[#999999] text-[16px] font-[600] p-2' >
                This week
                </span>
                <span className=' text-[#999999] text-[16px] font-[600] p-2' >
                This month
                </span>
                </div> : <div className='w-full flex justify-start items-start gap-2'>
               <span className=' text-[#1C1D22] text-[16px] font-[600] p-2' style={{ borderBottom: "2px solid #333" }}>
                {items?.[items?.length - 1].title}
                </span>
                </div>}
          </header >
          {/* page main content */}
          {children}
        </SidebarInset >
      </SidebarProvider >
      {activeModal && <SidebarModal type={activeModal} onClose={() => setActiveModal("")} />}
      <CurrencyDialog
        isOpen={currencyModal}
        onClose={() => setcurrencyModal(false)}
      // onSave={handleProfileSave}
      />
      <LogoutDialog
        isOpen={logoutModal}
        onClose={() => setLogoutModal(false)}
      // onSave={handleProfileSave}
      />
    </>
  );
}