// layout.tsx
import {
  HiArrowSmRight,
  HiChartPie,
  HiInbox,
  HiShoppingBag,
  HiTable,
  HiUser,
  HiViewBoards,
} from "react-icons/hi";


export const metadata: Metadata = {
  title: "Create T3 Turbo",
  description: "Simple monorepo with shared backend for web & mobile apps",
};

const menuGroups: MenuGroup[] = [
  {
    label: "Dashboard",
    icon: <HiViewBoards />,
    route: "/platform/dashboard",
    items: [],
  },
  {
    label: "Subscriptions",
    icon: <HiShoppingBag />,
    items: [
      { label: "Plans", route: "/platform/subscriptions/plans" },
      { label: "Products", route: "/platform/subscriptions/products" },
      { label: "Transactions", route: "/platform/subscriptions/transactions" },
    ],
  },
  {
    label: "Reports",
    icon: <HiChartPie />,
    items: [
      { label: "Overview", route: "/platform/reports" },
      { label: "Analytics", route: "/platform/reports/analytics" },
      { label: "Sales", route: "/platform/reports/sales" },
    ],
  },
];
export default function PlatformLayout({ children }: { children: any }) {
  const currSession = session();
  console.log("layout session", currSession);
  if (!currSession) {
    redirect("/auth");
  }
  // You can await this here if you don't want to show Suspense fallback below
  // void api.post.all.prefetch();
  return (
    <HydrateClient>
      <Suspense fallback={<LoadingPage />}>
        <DefaultLayout
          sideMenuItems={menuGroups}
          notifications={[]}
          user={{
            userAvatar: "https://ui-avatars.com/api/?format=png",
            fullname: "John Doe",
            profileLink: "/platform/user/me",
            settingsLink: "/platform/user/settings",
            logoutLink: "/platform/user/logout",
          }}
        >
          <div className="flex flex-col rounded-md bg-gray-100">
            <div className="rounded-t-md bg-gray-200 p-4 font-bold">
              Current Session
            </div>
            <pre className="whitespace-pre-wrap break-all px-4 py-6">
              {JSON.stringify(currSession, null, 2)}
            </pre>
          </div>
          {children}
        </DefaultLayout>
      </Suspense>
    </HydrateClient>
  );
}

// types.ts
import type { ComponentProps, FC } from "react";
import type { IconType } from "react-icons";

export interface SidebarProps {
  items: MenuGroup[];
  sidebarOpen: boolean;
  setSidebarOpen: (arg: boolean) => void;
}
export interface MenuGroup {
  label: string;
  icon: any;
  route?: string;
  items: MenuGroupItem[];
}
export interface MenuGroupItem {
  icon?: any;
  label: string;
  route: string;
  children?: MenuGroupItem[];
}
// sidemenu.tsx

export const SidebarArea = ({
  sidebarOpen,
  setSidebarOpen,
  items,
}: SidebarProps) => {
  const renderSideItemNoCollapsed = (item: MenuGroup) => (
    <Sidebar.Item href={item.route} icon={item.icon}>
      {item.label}
    </Sidebar.Item>
  );
  const renderSideItemWithChildren = (item: MenuGroup, rootIndex: number) => (
    <Sidebar.Collapse icon={item.icon} label={item.label}>
      {item.items.map((t, index) => (
        <Sidebar.Item key={`${rootIndex}_${index}`} href={t.route}>{t.label}</Sidebar.Item>
      ))}
    </Sidebar.Collapse>
  );
  return (
    <ClickOutside onClick={() => setSidebarOpen(false)}>
      <aside
        className={`z-9999 w-72.5 border-stroke dark:border-stroke-dark dark:bg-gray-dark absolute left-0 top-0 flex h-screen flex-col overflow-y-hidden border-r bg-white lg:static lg:translate-x-0 ${sidebarOpen
          ? "translate-x-0 duration-300 ease-linear"
          : "-translate-x-full"
          }`}
      >
        {/* <!-- SIDEBAR HEADER --> */}
        <div className="py-5.5 lg:py-6.5 flex items-center justify-between gap-2 px-6 xl:py-10">
          <Link href="/">
            <Image
              width={176}
              height={32}
              src={"/images/logo/logo-dark.svg"}
              alt="Logo"
              priority
              className="dark:hidden"
              style={{ width: "auto", height: "auto" }}
            />
            <Image
              width={176}
              height={32}
              src={"/images/logo/logo.svg"}
              alt="Logo"
              priority
              className="hidden dark:block"
              style={{ width: "auto", height: "auto" }}
            />
          </Link>

          <button
            onClick={() => setSidebarOpen(!sidebarOpen)}
            className="block lg:hidden"
            title="Toggle Sidebar"
          >
            <svg
              className="fill-current"
              width="20"
              height="18"
              viewBox="0 0 20 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M19 8.175H2.98748L9.36248 1.6875C9.69998 1.35 9.69998 0.825 9.36248 0.4875C9.02498 0.15 8.49998 0.15 8.16248 0.4875L0.399976 8.3625C0.0624756 8.7 0.0624756 9.225 0.399976 9.5625L8.16248 17.4375C8.31248 17.5875 8.53748 17.7 8.76248 17.7C8.98748 17.7 9.17498 17.625 9.36248 17.475C9.69998 17.1375 9.69998 16.6125 9.36248 16.275L3.02498 9.8625H19C19.45 9.8625 19.825 9.4875 19.825 9.0375C19.825 8.55 19.45 8.175 19 8.175Z"
                fill=""
              />
            </svg>
          </button>
        </div>
        {/* <!-- SIDEBAR HEADER --> */}

        <Sidebar aria-label="Sabo Backoffice">
          <Sidebar.Logo href="#" img="/logo.svg" imgAlt="Sabo Backoffice">
            Sabo Backoffice
          </Sidebar.Logo>
          <Sidebar.Items key={'root'}>
            {items.map((group, groupIndex) => (
              <Sidebar.ItemGroup>
                {group.items.length === 0 && renderSideItemNoCollapsed(group)}
                {group.items.length > 0 && renderSideItemWithChildren(group, groupIndex)}
              </Sidebar.ItemGroup>
            ))}
          </Sidebar.Items>
        </Sidebar>
      </aside>
    </ClickOutside>
  );
};
// error

│ Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <svg />. Did you accidentally export a JSX literal instead of a component?
│     at eval (webpack-internal:///(ssr)/../../node_modules/flowbite-react/dist/esm/components/Sidebar/SidebarItem.mjs:41:96)
│     at ul
│     at SidebarItemGroup (webpack-internal:///(ssr)/../../node_modules/flowbite-react/dist/esm/components/Sidebar/SidebarItemGroup.mjs:15:29)
│     at div
│     at SidebarItems (webpack-internal:///(ssr)/../../node_modules/flowbite-react/dist/esm/components/Sidebar/SidebarItems.mjs:13:25)
│     at div
│     at nav
│     at SidebarComponent (webpack-internal:///(ssr)/../../node_modules/flowbite-react/dist/esm/components/Sidebar/Sidebar.mjs:27:29)
│     at aside
│     at div
│     at ClickOutside (webpack-internal:///(ssr)/../../packages/ui/src/Common/Events/ClickOutside.tsx:10:25)
│     at SidebarArea (webpack-internal:///(ssr)/../../packages/ui/src/Backoffice/Sidebar/index.tsx:20:24)
│     at div
│     at DefaultLayout (webpack-internal:///(ssr)/../../packages/ui/src/Backoffice/Layouts/DefaultLaout.tsx:12:26)
│     at Lazy
│     at Suspense
│     at HydrationBoundary (webpack-internal:///(ssr)/../../node_modules/@tanstack/react-query/build/modern/HydrationBoundary.js:12:28)
│     at Lazy
│     at InnerLayoutRouter (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/layout-router.js:249:11)
│     at RedirectErrorBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/redirect-boundary.js:63:9)
│     at RedirectBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/redirect-boundary.js:71:11)
│     at NotFoundErrorBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/not-found-boundary.js:76:9)
│     at NotFoundBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/not-found-boundary.js:84:11)
│     at LoadingBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/layout-router.js:354:11)
│     at ErrorBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/error-boundary.js:151:11)
│     at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/layout-router.js:160:9)
│     at ScrollAndFocusHandler (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/layout-router.js:235:11)
│     at RenderFromTemplateContext (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/render-from-template-context.js:13:71)
│     at Lazy
│     at OuterLayoutRouter (webpack-internal:///(ssr)/../../node_modules/next/dist/esm/client/components/layout-router.js:377:11)
│     at Lazy
│     at TRPCProvider (webpack-internal:///(ssr)/../../node_modules/@trpc/react-query/dist/shared/hooks/createHooksInternal.mjs:43:17)
│     at QueryClientProvider (webpack-internal:///(ssr)/../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:23:30)
│     at TRPCReactProvider (webpack-internal:///(ssr)/./src/trpc/react.tsx:39:92)
│     at Lazy
│     at DefaultPropsProvider (webpack-internal:///(ssr)/../../node_modules/@mui/system/esm/DefaultPropsProvider/DefaultPropsProvider.js:17:33)
│     at RtlProvider (webpack-internal:///(ssr)/../../node_modules/@mui/system/esm/RtlProvider/index.js:22:7)
│     at ThemeProvider (webpack-internal:///(ssr)/../../node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:45:5)
│     at ThemeProvider (webpack-internal:///(ssr)/../../node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:61:13)
│     at ThemeProvider (webpack-internal:///(ssr)/../../node_modules/@mui/material/styles/ThemeProvider.js:25:18)
│     at Lazy
│     at AppRouterCacheProvider (webpack-internal:///(ssr)/../../node_modules/@mui/material-nextjs/v13-appRouter/appRouterV13.js:24:13)