import { AdminNav } from "./AdminNav";
import { AdminBreadcrumb } from "./AdminBreadcrumb";
import { Container } from "@/components/Container";
import { SignOutButton } from "@/app/account/SignOutButton";

type Props = {
  children: React.ReactNode;
  adminName?: string | null;
  pendingCount?: number;
};

/**
 * Page-level chrome for the /admin section: left sidebar with section nav,
 * a sticky topbar with breadcrumb + identity, and the main content column.
 * Expected to be mounted once in src/app/admin/layout.tsx.
 */
export function AdminShell({ children, adminName, pendingCount }: Props) {
  return (
    <div className="bg-[var(--color-line)]/25 min-h-[calc(100vh-140px)]">
      <Container className="py-6 md:py-8">
        <div className="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)]">
          <aside className="lg:sticky lg:top-6 lg:self-start">
            <div className="rounded-2xl border border-[var(--color-line)] bg-white p-3 shadow-[0_1px_0_rgba(10,15,46,0.02)]">
              <div className="mb-4 flex items-center gap-2 px-2 pt-1">
                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-blue)] text-white">
                  <span className="font-display text-[14px] font-extrabold">O</span>
                </div>
                <div className="min-w-0">
                  <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
                    OrthoGlobe
                  </div>
                  <div className="truncate font-display text-[14px] font-extrabold text-[var(--color-ink)]">
                    Admin
                  </div>
                </div>
              </div>
              <AdminNav pendingCount={pendingCount} />
              {adminName && (
                <div className="mt-5 border-t border-[var(--color-line)] px-2 pt-3">
                  <div className="flex items-center gap-2 text-[12px] text-[var(--color-slate)]">
                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--color-mist)] text-[11px] font-bold text-[var(--color-blue)]">
                      {adminName.charAt(0).toUpperCase()}
                    </div>
                    <div className="min-w-0">
                      <div className="truncate text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
                        Signed in as
                      </div>
                      <div className="truncate text-[13px] font-semibold text-[var(--color-ink)]">
                        {adminName}
                      </div>
                    </div>
                  </div>
                  <div className="mt-3">
                    <SignOutButton />
                  </div>
                </div>
              )}
            </div>
          </aside>

          <div className="min-w-0">
            <div className="mb-4 rounded-xl border border-[var(--color-line)] bg-white px-4 py-2.5">
              <AdminBreadcrumb />
            </div>
            {children}
          </div>
        </div>
      </Container>
    </div>
  );
}
