"use client"

import * as React from "react"
import { Link, useNavigate } from "react-router"
import { cn } from "@/lib/utils"
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Tip } from "@/components/ui/tip"
import { useScrollStuck } from "@/hooks/use-scroll-stuck"
import { FILTER_LIST_SEARCH_THRESHOLD } from "@exxatdesignux/ui/lib/filter-list-search-threshold"
import { useRowFitLadder } from "@exxatdesignux/ui/hooks/use-row-fit-ladder"
// The page `<h1>` type, shared with `PageHeader` so a record switcher title and a
// plain title are the same size on sibling routes.
import { PAGE_TITLE_TYPE_CLASS } from "@/components/page-header"

export interface PageBreadcrumbMenuOption {
  id: string
  label: string
  href?: string
  onSelect?: () => void
  selected?: boolean
}

export interface PageBreadcrumbTrailItem {
  label: string
  href?: string
  /** Peer options — renders a switcher instead of a static link or label. */
  menu?: PageBreadcrumbMenuOption[]
  menuAriaLabel?: string
}

export interface PageBreadcrumbBackProps {
  /** Destination label (e.g. "Question hub") — spoken on the icon, not shown at rest. */
  label: string
  href: string
  /** Current page title — shown after the back icon once the page scrolls. */
  scrollTitle?: string
  /** Peer record switcher for the title (same menu as breadcrumb leaf / PageHeader). */
  scrollTitleMenu?: PageBreadcrumbMenuOption[]
  scrollTitleMenuAriaLabel?: string
  className?: string
}

export interface PageBreadcrumbTrailProps {
  /** Linkable ancestors (e.g. Question hub). */
  items?: PageBreadcrumbTrailItem[]
  /**
   * Final segment in the trail. Omit when the current page is the `PageHeader`
   * `<h1>` — use ancestors-only above the title (no duplicate label).
   */
  currentPage?: string
  /** Switch among peer records on the current page segment (detail routes). */
  currentPageMenu?: PageBreadcrumbMenuOption[]
  currentPageMenuAriaLabel?: string
  /**
   * Where the trail sits: `header` (SiteHeader / utility bar, ancestors +
   * `currentPage`) or `content` (ancestors only, above a `PageHeader` title).
   *
   * Reaches the DOM as `data-trail-variant` and nothing else. How much of the
   * trail shows is measured from the room the trail is given, so both places
   * collapse on the same evidence rather than on a count picked per variant.
   */
  variant?: "header" | "content"
  className?: string
}

function BreadcrumbMenuOptionMarker({ selected }: { selected?: boolean }) {
  return selected ? (
    <i className="fa-solid fa-check size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
  ) : (
    <span className="size-4 shrink-0" aria-hidden="true" />
  )
}

function RecordMenuTriggerButton({
  label,
  menuAriaLabel,
  isCurrentPage,
  variant = "breadcrumb",
  className,
  ...props
}: React.ComponentProps<"button"> & {
  label: string
  menuAriaLabel?: string
  isCurrentPage?: boolean
  variant?: "breadcrumb" | "title"
}) {
  return (
    <button
      type="button"
      aria-current={isCurrentPage ? "page" : undefined}
      aria-label={menuAriaLabel ?? `Switch ${label}`}
      aria-haspopup="menu"
      // `className` is taken out of the spread and merged. This renders as the
      // child of a `PopoverTrigger asChild` / `DropdownMenuTrigger asChild`, so
      // Radix hands its own className in as a prop, and spreading it last
      // replaced everything below — the title switcher shipped with `cursor-pointer`
      // and nothing else, which cost it its hover colour and left it falling back
      // to the global outset outline that the line-clamped `h1` then clipped.
      className={cn(
        variant === "title"
          ? "inline-flex max-w-full min-w-0 items-center gap-2.5 rounded-md py-0.5 text-left font-inherit text-inherit outline-none hover:text-interactive-hover-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
          : cn(
              "inline-flex h-8 max-w-full min-w-0 items-center gap-1 rounded-md px-0.5 font-sans text-sm leading-5 outline-none",
              "hover:text-interactive-hover-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
              isCurrentPage ? "font-medium text-foreground" : "text-muted-foreground",
            ),
        className,
      )}
      {...props}
    >
      <span className={variant === "title" ? "min-w-0 text-left" : "min-w-0 truncate"}>{label}</span>
      <i
        className={cn(
          "fa-light fa-chevron-down shrink-0 opacity-70",
          variant === "title" ? "ms-0.5 text-sm" : "text-xs",
        )}
        aria-hidden="true"
      />
    </button>
  )
}

function RecordMenuSegment({
  label,
  menu,
  menuAriaLabel,
  isCurrentPage = false,
  variant = "breadcrumb",
}: {
  label: string
  menu: PageBreadcrumbMenuOption[]
  menuAriaLabel?: string
  isCurrentPage?: boolean
  variant?: "breadcrumb" | "title"
}) {
  const navigate = useNavigate()
  const searchable = menu.length > FILTER_LIST_SEARCH_THRESHOLD
  const [open, setOpen] = React.useState(false)
  const [search, setSearch] = React.useState("")

  React.useEffect(() => {
    if (!open) setSearch("")
  }, [open])

  const filteredMenu = React.useMemo(() => {
    const query = search.trim().toLowerCase()
    if (!query) return menu
    return menu.filter(option => option.label.toLowerCase().includes(query))
  }, [menu, search])

  const selectOption = React.useCallback(
    (option: PageBreadcrumbMenuOption) => {
      if (option.href) navigate(option.href)
      else option.onSelect?.()
      setOpen(false)
    },
    [navigate],
  )

  if (searchable) {
    return (
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <RecordMenuTriggerButton
            label={label}
            menuAriaLabel={menuAriaLabel}
            isCurrentPage={isCurrentPage}
            variant={variant}
          />
        </PopoverTrigger>
        <PopoverContent align="start" className="w-[min(20rem,calc(100vw-2rem))] p-0">
          <div className="border-b border-border px-2 py-1.5">
            <div className="relative">
              <i
                className="fa-light fa-magnifying-glass pointer-events-none absolute start-2.5 top-1/2 -translate-y-1/2 text-xs text-muted-foreground"
                aria-hidden="true"
              />
              <Input
                type="search"
                placeholder="Search…"
                value={search}
                onChange={event => setSearch(event.target.value)}
                className={cn("h-8 ps-7 text-xs", search ? "pe-8" : "pe-2")}
                autoFocus
                aria-label={menuAriaLabel ?? `Search ${label}`}
              />
              {search ? (
                <button
                  type="button"
                  aria-label="Clear search"
                  onClick={() => setSearch("")}
                  className="icon-button-chrome absolute end-1.5 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
                >
                  <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
                </button>
              ) : null}
            </div>
          </div>
          <div
            role="menu"
            aria-label={menuAriaLabel ?? `Switch ${label}`}
            className="max-h-[min(24rem,70vh)] overflow-y-auto py-1"
          >
            {filteredMenu.length === 0 ? (
              <p className="px-3 py-2 text-xs text-muted-foreground">No matches.</p>
            ) : (
              filteredMenu.map(option => (
                <button
                  key={option.id}
                  type="button"
                  role="menuitem"
                  onClick={() => selectOption(option)}
                  className="flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-start text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none"
                >
                  <BreadcrumbMenuOptionMarker selected={option.selected} />
                  <span className="min-w-0 truncate">{option.label}</span>
                </button>
              ))
            )}
          </div>
        </PopoverContent>
      </Popover>
    )
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <RecordMenuTriggerButton
          label={label}
          menuAriaLabel={menuAriaLabel}
          isCurrentPage={isCurrentPage}
          variant={variant}
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="max-h-[min(24rem,70vh)] overflow-y-auto">
        {menu.map(option => (
          <DropdownMenuItem
            key={option.id}
            className="gap-2"
            onSelect={option.onSelect}
            asChild={option.href != null ? true : undefined}
          >
            {option.href != null ? (
              <Link to={option.href}>
                <BreadcrumbMenuOptionMarker selected={option.selected} />
                <span className="min-w-0 truncate">{option.label}</span>
              </Link>
            ) : (
              <>
                <BreadcrumbMenuOptionMarker selected={option.selected} />
                <span className="min-w-0 truncate">{option.label}</span>
              </>
            )}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

/** BreadcrumbMenuSegment — peer record switcher for trail segments. */
function BreadcrumbMenuSegment(props: React.ComponentProps<typeof RecordMenuSegment>) {
  return <RecordMenuSegment {...props} />
}

/**
 * Peer record switcher — breadcrumb leaf, utility bar title, or `PageHeader` title.
 */
export function PageRecordMenuSwitcher({
  variant = "breadcrumb",
  isCurrentPage = true,
  ...props
}: React.ComponentProps<typeof RecordMenuSegment>) {
  return <RecordMenuSegment variant={variant} isCurrentPage={isCurrentPage} {...props} />
}

/**
 * Page `<h1>` record switcher — same search/popover menu as breadcrumbs, sized for
 * `PageHeader` titles on detail routes.
 */
export function PageTitleRecordSwitcher(
  props: Omit<React.ComponentProps<typeof RecordMenuSegment>, "variant" | "isCurrentPage">,
) {
  return (
    <h1
      className={cn("line-clamp-2 min-w-0 overflow-hidden break-words", PAGE_TITLE_TYPE_CLASS)}
      suppressHydrationWarning
    >
      <RecordMenuSegment {...props} variant="title" isCurrentPage />
    </h1>
  )
}

function BreadcrumbTrailSegment({
  crumb,
  isCurrentPage = false,
}: {
  crumb: Pick<PageBreadcrumbTrailItem, "label" | "href" | "menu" | "menuAriaLabel">
  isCurrentPage?: boolean
}) {
  if (crumb.menu?.length) {
    return (
      <BreadcrumbMenuSegment
        label={crumb.label}
        menu={crumb.menu}
        menuAriaLabel={crumb.menuAriaLabel}
        isCurrentPage={isCurrentPage}
      />
    )
  }

  if (isCurrentPage) {
    return (
      <BreadcrumbPage className="inline-flex h-8 max-w-full min-w-0 items-center truncate font-sans text-sm font-medium leading-5">
        {crumb.label}
      </BreadcrumbPage>
    )
  }

  if (crumb.href) {
    return (
      <BreadcrumbLink asChild>
        <Link
          to={crumb.href}
          className="inline-flex max-w-[min(100%,10rem)] items-center truncate font-sans text-sm leading-5 text-muted-foreground sm:max-w-[14rem]"
        >
          {crumb.label}
        </Link>
      </BreadcrumbLink>
    )
  }

  return (
    <span className="inline-flex max-w-[min(100%,10rem)] items-center truncate font-sans text-sm leading-5 text-muted-foreground sm:max-w-[14rem]">
      {crumb.label}
    </span>
  )
}

/**
 * Single-step back nav — back icon + parent destination (no chevron trail).
 * Use in `SiteHeader` for focused child routes (composer, wizard) where the
 * page `<h1>` is the current title.
 */
export function PageBreadcrumbBack({
  label,
  href,
  scrollTitle,
  scrollTitleMenu,
  scrollTitleMenuAriaLabel,
  className,
}: PageBreadcrumbBackProps) {
  const isStuck = useScrollStuck()
  const showPageTitle = Boolean(scrollTitle) && isStuck

  return (
    <Breadcrumb className={cn("min-w-0", className)}>
      <BreadcrumbList className="gap-1.5 font-sans tracking-normal">
        <BreadcrumbItem className="min-w-0">
          <BreadcrumbLink asChild>
            <Link
              to={href}
              className="group inline-flex min-w-0 max-w-full items-center gap-1.5 font-sans text-sm text-muted-foreground hover:text-interactive-hover-foreground"
              aria-label={`Back to ${label}`}
            >
              <i
                className="fa-light fa-arrow-left shrink-0 text-xs transition-transform group-hover:-translate-x-0.5"
                aria-hidden="true"
              />
            </Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        {showPageTitle ? (
          <BreadcrumbItem className="min-w-0 flex-1 overflow-hidden">
            {scrollTitleMenu?.length ? (
              <PageRecordMenuSwitcher
                label={scrollTitle!}
                menu={scrollTitleMenu}
                menuAriaLabel={scrollTitleMenuAriaLabel}
              />
            ) : (
              <BreadcrumbPage className="inline-flex h-8 max-w-full min-w-0 items-center truncate font-sans text-sm font-medium leading-5">
                {scrollTitle}
              </BreadcrumbPage>
            )}
          </BreadcrumbItem>
        ) : null}
      </BreadcrumbList>
    </Breadcrumb>
  )
}

/**
 * Product breadcrumb trail — one component for SiteHeader and in-page shells.
 * Uses shadcn `Breadcrumb` primitives with Exxat site-header typography.
 *
 * Every segment keeps its **text label** (never a generic house icon — the first
 * crumb is often a hub like Library, not Home).
 *
 * The trail collapses **only when it runs out of room**, measured, so a page
 * three levels deep in a wide window reads Dashboard → Design system → Tokens
 * rather than hiding a parent it had space for. When the row is short the middle
 * segments move into More (`BreadcrumbEllipsis`), shallowest first, and the
 * current page truncates last.
 *
 * For back-icon + parent label only, use {@link PageBreadcrumbBack}.
 */
const EMPTY_BREADCRUMB_ITEMS: PageBreadcrumbTrailItem[] = []

type TrailSegment = {
  crumb: Pick<PageBreadcrumbTrailItem, "label" | "href" | "menu" | "menuAriaLabel">
  isCurrentPage?: boolean
  key: string
}

/** Name of the control holding the segments the row could not fit. */
const BREADCRUMB_MORE_LABEL = "More breadcrumbs"

function BreadcrumbCollapsedMore({
  segments,
}: {
  segments: TrailSegment[]
}) {
  if (segments.length === 0) return null

  return (
    <BreadcrumbItem className="shrink-0">
      <DropdownMenu>
        {/* Icon-only, so the name is spoken and shown: `Tip` beside `aria-label`,
            same pairing as the tab row's overflow trigger. */}
        <Tip label={BREADCRUMB_MORE_LABEL} side="bottom">
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring"
              aria-label={BREADCRUMB_MORE_LABEL}
            >
              <BreadcrumbEllipsis />
            </button>
          </DropdownMenuTrigger>
        </Tip>
        <DropdownMenuContent align="start" className="max-h-[min(24rem,70vh)] overflow-y-auto">
          <DropdownMenuGroup>
            {segments.map(segment => (
              <DropdownMenuItem
                key={segment.key}
                className="gap-2"
                asChild={segment.crumb.href != null ? true : undefined}
                disabled={
                  segment.isCurrentPage ||
                  (!segment.crumb.href && !segment.crumb.menu?.length)
                }
              >
                {segment.crumb.href != null ? (
                  <Link to={segment.crumb.href}>
                    <span className="min-w-0 truncate">{segment.crumb.label}</span>
                  </Link>
                ) : (
                  <span className="min-w-0 truncate">{segment.crumb.label}</span>
                )}
              </DropdownMenuItem>
            ))}
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </BreadcrumbItem>
  )
}

/**
 * Which segments the row can afford, given how many the measured ladder says
 * fit. Order of sacrifice, from a trail like Dashboard → Design system →
 * Components → Toggle switch:
 *
 *   1. The **root** and the **current page** are kept as long as anything is.
 *      The root is the trail's anchor; the leaf is where you are.
 *   2. Everything between them goes into More, **shallowest first** — the
 *      segments nearest the root are the ones a deep page is least likely to
 *      need, and the immediate parent is the one it is most likely to want.
 *   3. Below two slots even the root goes in, leaving More + the current page.
 *
 * Nothing hides while the trail fits. `fits` counts segments, so it never lands
 * on a shape that shows More next to a hidden list of nothing.
 */
function planTrail(segments: TrailSegment[], fits: number) {
  type Entry =
    | { type: "segment"; segment: TrailSegment }
    | { type: "more"; segments: TrailSegment[] }

  if (fits >= segments.length) {
    return segments.map<Entry>(segment => ({ type: "segment", segment }))
  }

  const last = segments[segments.length - 1]!
  const keepRoot = fits >= 2 && segments.length > 1
  /** Ancestors kept next to the leaf, deepest first, after root and leaf. */
  const keptParents = Math.max(0, fits - (keepRoot ? 2 : 1))
  const parents = segments.slice(keepRoot ? 1 : 0, -1)
  const shown = keptParents > 0 ? parents.slice(-keptParents) : []
  const hidden = keptParents > 0 ? parents.slice(0, -keptParents) : parents

  return [
    ...(keepRoot ? [{ type: "segment", segment: segments[0]! } as Entry] : []),
    ...(hidden.length > 0 ? [{ type: "more", segments: hidden } as Entry] : []),
    ...shown.map<Entry>(segment => ({ type: "segment", segment })),
    { type: "segment", segment: last } as Entry,
  ]
}

function renderTrailSegments(segments: TrailSegment[], fits: number) {
  const entries = planTrail(segments, fits)
  /**
   * The leaf holds a floor while an ancestor could still step aside for it.
   *
   * Without one the row can never report overflow: ancestors do not shrink, so
   * a tight row squeezes the leaf instead, and a leaf that squeezes to nothing
   * keeps `scrollWidth` inside the viewport no matter how long the trail gets.
   * The ladder would then read every trail as fitting. The floor turns that
   * squeeze into the overflow it really is.
   *
   * Once nothing is left to shed the floor has no one to signal, so it lifts and
   * the leaf goes back to truncating rather than being clipped by the trail.
   */
  const leafHoldsFloor = fits > 1 && segments.length > 1

  return entries.map((entry, i) => (
    <React.Fragment key={entry.type === "more" ? "breadcrumb-more" : entry.segment.key}>
      {entry.type === "more" ? (
        <BreadcrumbCollapsedMore segments={entry.segments} />
      ) : (
        <BreadcrumbItem
          className={cn(
            "min-w-0",
            entry.segment.isCurrentPage
              ? cn("flex-1 shrink overflow-hidden", leafHoldsFloor && "min-w-24")
              : "shrink-0 max-w-[min(100%,10rem)] sm:max-w-[14rem]",
          )}
        >
          <BreadcrumbTrailSegment
            crumb={entry.segment.crumb}
            isCurrentPage={entry.segment.isCurrentPage}
          />
        </BreadcrumbItem>
      )}
      {i < entries.length - 1 ? (
        <BreadcrumbSeparator className="shrink-0 text-muted-foreground [&>i]:text-xs" />
      ) : null}
    </React.Fragment>
  ))
}

export function PageBreadcrumbTrail({
  items = EMPTY_BREADCRUMB_ITEMS,
  currentPage,
  currentPageMenu,
  currentPageMenuAriaLabel,
  variant = "content",
  className,
}: PageBreadcrumbTrailProps) {
  const trailItems = items ?? EMPTY_BREADCRUMB_ITEMS

  const segments = React.useMemo<TrailSegment[]>(() => {
    const next: TrailSegment[] = trailItems.map((crumb, i) => ({
      crumb,
      key: `ancestor-${crumb.label}-${i}`,
    }))
    if (currentPage != null) {
      next.push({
        key: `current-${currentPage}`,
        isCurrentPage: true,
        crumb: {
          label: currentPage,
          menu: currentPageMenu,
          menuAriaLabel: currentPageMenuAriaLabel,
        },
      })
    }
    return next
  }, [trailItems, currentPage, currentPageMenu, currentPageMenuAriaLabel])

  // Same ladder the tab rows use, minus its label rung: a crumb is a label, so
  // it has no icon to fall back to and can only step into More.
  const listRef = React.useRef<HTMLOListElement>(null)
  const { visible: fits } = useRowFitLadder({
    viewportRef: listRef,
    count: segments.length,
    canCollapse: false,
    enabled: true,
  })

  return (
    <Breadcrumb
      className={cn(
        // `px-1 -mx-1` is room for a focus ring, not spacing. The trail clips so
        // a long crumb truncates, and the first and last crumbs sit flush with
        // that clip, so their focus outline lost its near edge. The negative
        // margin keeps the trail starting where it did. The list below must not
        // clip as well, or it would cut the ring back at the old boundary.
        "flex h-8 min-w-0 max-w-full items-center overflow-hidden px-1 -mx-1",
        className,
      )}
      aria-label="Breadcrumb"
      data-trail-variant={variant}
    >
      <BreadcrumbList
        ref={listRef}
        // h-8 + items-center: leaf and icons share the utility-bar midline.
        // flex-nowrap on both variants: the row has to be able to overflow for the
        // ladder to see that it does. A wrapping trail always "fits", so it would
        // keep every crumb and pay for them with a second line.
        className="flex h-8 w-full min-w-0 flex-nowrap items-center gap-1 font-sans tracking-normal"
      >
        {renderTrailSegments(segments, fits)}
      </BreadcrumbList>
    </Breadcrumb>
  )
}