lotteryAdmin/src/components/admin/admin-sidebar.tsx

"use client";

import Link from "next/link";
import { useMemo, type ReactElement } from "react";
import { useTranslation } from "react-i18next";

import {
  AdminSidebarNav,
  AdminSidebarNavSkeleton,
} from "@/components/admin/admin-sidebar-nav";
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarSeparator,
} from "@/components/ui/sidebar";
import { ADMIN_BASE } from "@/modules/_config/admin-nav";
import { useAdminProfile, useAdminSessionStore } from "@/stores/admin-session";

function AdminSidebarSkeleton(): ReactElement {
  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="flex shrink-0 flex-col gap-0 border-b border-sidebar-border px-2 py-2">
        <SidebarMenu className="h-full w-full">
          <SidebarMenuItem className="h-full">
            <div className="flex h-10 w-full items-center px-1 group-data-[collapsible=icon]:justify-center">
              <img
                src="/logo.png"
                alt="N lotto"
                className="h-auto max-h-10 w-full object-contain object-left opacity-95 group-data-[collapsible=icon]:max-h-8 group-data-[collapsible=icon]:object-center"
              />
            </div>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent className="relative min-h-0 overflow-hidden p-0">
        <div
          className="pointer-events-none absolute inset-x-0 bottom-0 h-40 opacity-50 group-data-[collapsible=icon]:hidden"
          aria-hidden
        >
          <img
            src="/image6.png"
            alt=""
            className="h-full w-full object-cover object-bottom"
          />
          <div className="absolute inset-x-0 top-0 h-20 bg-linear-to-b from-sidebar to-transparent" />
          <div className="absolute inset-0 bg-sidebar/20" />
        </div>
        <div className="relative z-10 min-h-0 flex-1 overflow-y-auto overscroll-contain pb-2">
          <AdminSidebarNavSkeleton />
        </div>
      </SidebarContent>
      <SidebarSeparator />
      <SidebarRail />
    </Sidebar>
  );
}

export function AdminAppSidebar() {
  const shellAuthPending = useAdminSessionStore((s) => s.shellAuthPending);
  const profile = useAdminProfile();

  const visibleNav = useMemo(
    () => (profile?.navigation ?? []).filter((item) => item.segment !== "risk"),
    [profile?.navigation],
  );

  if (shellAuthPending) {
    return <AdminSidebarSkeleton />;
  }

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="flex shrink-0 flex-col gap-0 border-b border-sidebar-border px-2 py-2">
        <SidebarMenu className="h-full w-full">
          <SidebarMenuItem className="h-full">
            <SidebarMenuButton
              render={<Link href={ADMIN_BASE} />}
              className="h-10 min-h-0 justify-start px-1 py-0 hover:bg-transparent group-data-[collapsible=icon]:justify-center"
            >
              <div className="flex h-10 w-full items-center group-data-[collapsible=icon]:size-10 group-data-[collapsible=icon]:justify-center">
                <img
                  src="/logo.png"
                  alt="N lotto"
                  className="h-auto max-h-10 w-full object-contain object-left group-data-[collapsible=icon]:max-h-8 group-data-[collapsible=icon]:object-center"
                />
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
        {profile?.agent ? (
          <p
            className="truncate px-1 pb-1 text-[11px] leading-tight font-medium text-sidebar-foreground/60 group-data-[collapsible=icon]:hidden"
            title={profile.agent.name}
          >
            {profile.agent.name}
            <span className="text-sidebar-foreground/40"> · {profile.agent.code}</span>
          </p>
        ) : null}
      </SidebarHeader>
      <SidebarContent className="relative min-h-0 overflow-hidden p-0">
        <div
          className="pointer-events-none absolute inset-x-0 bottom-0 h-40 opacity-50 group-data-[collapsible=icon]:hidden"
          aria-hidden
        >
          <img
            src="/image6.png"
            alt=""
            className="h-full w-full object-cover object-bottom"
          />
          <div className="absolute inset-x-0 top-0 h-20 bg-linear-to-b from-sidebar to-transparent" />
          <div className="absolute inset-0 bg-sidebar/20" />
        </div>
        <div className="relative z-10 min-h-0 flex-1 overflow-y-auto overscroll-contain pb-2">
          <AdminSidebarNav items={visibleNav} />
        </div>
      </SidebarContent>
      <SidebarSeparator />
      <SidebarRail />
    </Sidebar>
  );
}