"use client";

import { NotificationBell } from "@/components/notification-bell";
import { utilityBarActionButtonClass } from "@/components/utility-bar-chrome";
import { UtilityBarSchoolSwitcher } from "@/components/utility-bar-school-switcher";
import {
  AskLeoUtilityControl,
  HelpTrigger,
  OnboardingTrigger,
  SearchTrigger,
  SupportChatTrigger,
  UtilityBarBackLeadingCluster,
  UtilityBarBreadcrumbLeadingCluster,
  UtilityBarLeadingCluster,
  UtilityBarMoreMenu,
  WorkspaceBrandMark,
} from "@/components/utility-bar-slot";
import {
  UtilityBarWhatsNew,
  UtilityBarWhatsNewInMore,
} from "@/components/utility-bar-whats-new";
import { WhatsNewProvider } from "@/components/product-home/product-home-parts";
import { WhatsNewSheetProvider } from "@/components/whats-new-sheet-context";
import { UtilityUserMenu } from "@/components/utility-user-menu";

function UtilityBarSurface({
  label,
  children,
  minWidthClassName,
}: {
  label: string;
  children: React.ReactNode;
  minWidthClassName: string;
}) {
  return (
    <WhatsNewProvider>
      <WhatsNewSheetProvider>
        <div
          role="region"
          aria-label={`${label} scroll area`}
          tabIndex={0}
          className="w-full overflow-x-auto border-y border-border bg-background outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
        >
          <nav
            aria-label={label}
            inert
            data-slot="utility-bar"
            className={`relative flex h-(--shell-utility-bar-height) min-h-(--shell-utility-bar-height) w-full ${minWidthClassName} shrink-0 items-center gap-1 bg-background pe-2 sm:pe-3`}
          >
            {children}
          </nav>
        </div>
      </WhatsNewSheetProvider>
    </WhatsNewProvider>
  );
}

export function UtilityBarComfortPreview() {
  return (
    <UtilityBarSurface
      label="Comfort utility bar preview"
      minWidthClassName="min-w-[48rem]"
    >
      <UtilityBarLeadingCluster />
      <div className="ms-auto flex shrink-0 items-center gap-1">
        <SearchTrigger />
        <NotificationBell className={utilityBarActionButtonClass} />
        <UtilityBarWhatsNew className={utilityBarActionButtonClass} />
        <HelpTrigger />
        <SupportChatTrigger />
        <OnboardingTrigger />
        <AskLeoUtilityControl showLabel />
        <div className="mx-1 h-5 w-px shrink-0 bg-border" aria-hidden="true" />
        <UtilityBarSchoolSwitcher compact={false} showProgram={false} />
        <UtilityUserMenu />
      </div>
    </UtilityBarSurface>
  );
}

export function UtilityBarDensePreview() {
  return (
    <UtilityBarSurface
      label="Dense utility bar preview"
      minWidthClassName="min-w-[34rem]"
    >
      <UtilityBarDenseContent />
    </UtilityBarSurface>
  );
}

export function UtilityBarDenseContent() {
  return (
    <>
      <UtilityBarLeadingCluster compactDensity markOnly showBreadcrumbDivider />
      <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
        Current page
      </span>
      <div className="ms-auto flex shrink-0 items-center gap-1">
        <NotificationBell className={utilityBarActionButtonClass} />
        <UtilityBarWhatsNewInMore>
          {({ menuItem, unseenCount }) => (
            <UtilityBarMoreMenu
              whatsNewItem={menuItem}
              whatsNewUnseen={unseenCount}
            />
          )}
        </UtilityBarWhatsNewInMore>
        <AskLeoUtilityControl showLabel={false} />
        <div className="mx-1 h-5 w-px shrink-0 bg-border" aria-hidden="true" />
        <UtilityBarSchoolSwitcher compact showProgram={false} />
        <UtilityUserMenu />
      </div>
    </>
  );
}

export function UtilityBarBackPreview() {
  return (
    <UtilityBarSurface
      label="Back mode utility bar preview"
      minWidthClassName="min-w-96"
    >
      <UtilityBarBackLeadingCluster href="/design-os" label="Records" />
      <div className="ms-auto">
        <AskLeoUtilityControl showLabel />
      </div>
    </UtilityBarSurface>
  );
}

export function UtilityBarBreadcrumbPreview() {
  return (
    <UtilityBarSurface
      label="Breadcrumb mode utility bar preview"
      minWidthClassName="min-w-[40rem]"
    >
      <UtilityBarBreadcrumbLeadingCluster
        items={[
          { label: "Learning activities", href: "/design-os/learning-activities" },
          { label: "All courses", href: "/design-os/learning-activities/courses" },
        ]}
      />
      <div className="ms-auto">
        <AskLeoUtilityControl showLabel />
      </div>
    </UtilityBarSurface>
  );
}

export function UtilityBarProductlessPreview() {
  return (
    <UtilityBarSurface
      label="Productless utility bar preview"
      minWidthClassName="min-w-[40rem]"
    >
      <WorkspaceBrandMark />
      <div className="ms-auto flex shrink-0 items-center gap-1">
        <NotificationBell className={utilityBarActionButtonClass} />
        <UtilityBarWhatsNew className={utilityBarActionButtonClass} />
        <OnboardingTrigger />
        <HelpTrigger />
        <SupportChatTrigger />
        <div className="mx-1 h-5 w-px shrink-0 bg-border" aria-hidden="true" />
        <UtilityUserMenu />
      </div>
    </UtilityBarSurface>
  );
}