"use client"

/**
 * Workspace chrome on every new home that picks a program at the top.
 *
 * Order is the IA: greeting on the left, matching pills on the right (program
 * picker beside Administrator when this session has the console). Administrator
 * is not a program and is not an app in Your App. The picker stamps
 * school-family apps only.
 */

import * as React from "react"

import type { ScopeSwitcherBag } from "@/components/scope-switcher-menu"
import { NAV_USER } from "@/lib/mock/navigation"
import { adminConsoleHref, type ProductHomeCard } from "@/lib/product-home"
import { cn } from "@/lib/utils"
import { administratorScopeCaption } from "@/lib/workspace-role"

import { AdminAppCardDoor, useAdminAppScope } from "./admin-app-picker"
import { ProductMarkTile } from "./product-mark-tile"
import { firstName } from "./product-home-parts"
import { HOME_HEADER_PILL_CLASS, ProductScopePicker } from "./product-scope-picker"

export function AdministratorHeaderDoor({
  card,
  onOpen,
}: {
  card: ProductHomeCard
  onOpen: (card: ProductHomeCard) => void
}) {
  const appScope = useAdminAppScope(card)
  const caption = administratorScopeCaption()
  const href = appScope?.href ?? card.href ?? adminConsoleHref()
  const open = () => onOpen({ ...card, href })
  const name = caption ? `${card.label}, ${caption}` : card.label

  const face = (
    <>
      <ProductMarkTile card={card} className="shrink-0" glyphOnly />
      <span className="min-w-0 truncate font-medium text-foreground">{card.label}</span>
    </>
  )

  const triggerClass = cn(HOME_HEADER_PILL_CLASS, "py-1.5")
  const chevron = (
    <i
      className="fa-light fa-chevron-down shrink-0 text-xs text-muted-foreground"
      aria-hidden="true"
    />
  )

  if (appScope) {
    return (
      <AdminAppCardDoor
        scope={appScope}
        card={card}
        onOpen={onOpen}
        className={triggerClass}
      >
        {face}
        {chevron}
      </AdminAppCardDoor>
    )
  }

  return (
    <button type="button" aria-label={`Open ${name}`} className={triggerClass} onClick={open}>
      {face}
    </button>
  )
}

export function CampusWorkspaceChrome({
  heading,
  headingClassName,
  campusScope,
  administrator,
  onOpen,
  pickerClassName,
}: {
  heading: React.ReactNode
  headingClassName?: string
  campusScope: ScopeSwitcherBag
  administrator: ProductHomeCard | null
  onOpen: (card: ProductHomeCard) => void
  pickerClassName?: string
}) {
  return (
    <header className="flex w-full min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-3">
      <h1
        className={cn(
          "min-w-0 font-heading font-semibold leading-tight tracking-tight text-balance",
          headingClassName,
        )}
      >
        {heading}
      </h1>
      <div className="ms-auto flex min-w-0 flex-wrap items-center justify-end gap-2">
        <ProductScopePicker
          scope={campusScope}
          variant="inline"
          className={pickerClassName}
        />
        {administrator ? (
          <AdministratorHeaderDoor card={administrator} onOpen={onOpen} />
        ) : null}
      </div>
    </header>
  )
}

export function campusGreetingName(greeting: string): string {
  return `${greeting}, ${firstName(NAV_USER.name)}`
}