"use client";

import type { ReactNode } from "react";

import { AdminAppSidebar } from "@/components/admin/admin-sidebar";
import { ShellToolbar } from "@/components/admin/toolbar";
import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
import { useAdminSessionStore } from "@/stores/admin-session";
import { AdminDocumentTitle } from "@/components/admin/admin-document-title";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator";

export function AdminShell({ children }: { children: ReactNode }) {
  const shellAuthPending = useAdminSessionStore((s) => s.shellAuthPending);

  return (
    <SidebarProvider defaultOpen>
      <AdminDocumentTitle />
      <AdminAppSidebar />
        <SidebarInset className="min-w-0 overflow-x-clip max-md:overflow-x-clip">
        <header className="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-card/90 px-4 shadow-[0_1px_0_rgb(216_230_251_/_45%)] backdrop-blur-md">
          <SidebarTrigger />
          <Separator orientation="vertical" className="mr-1.5 h-4" />
          {shellAuthPending ? (
            <div
              className="flex min-w-0 flex-1 items-center gap-1.5 text-muted-foreground/80"
              aria-hidden
            >
              <span className="h-3 w-12 rounded-full bg-muted/50 motion-safe:animate-pulse" />
              <span className="size-3 rounded-full bg-muted/40 motion-safe:animate-pulse" />
              <span className="h-3 w-28 max-w-[36vw] rounded-full bg-muted/50 motion-safe:animate-pulse [animation-delay:80ms]" />
            </div>
          ) : (
            <AdminBreadcrumb />
          )}
          <div className="ml-auto flex shrink-0 items-center">
            {shellAuthPending ? (
              <div className="flex items-center gap-2.5" aria-hidden>
                <span className="hidden h-8 w-[4.5rem] rounded-lg bg-muted/40 motion-safe:animate-pulse sm:block" />
                <span className="size-8 rounded-lg bg-muted/45 motion-safe:animate-pulse [animation-delay:120ms]" />
              </div>
            ) : (
              <ShellToolbar />
            )}
          </div>
        </header>
        <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-clip px-4 pt-4 pb-6 md:px-5 md:pt-4 md:pb-6">
          {children}
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}
