PaperClipAI/ui/src/context/BreadcrumbContext.tsx

import { createContext, useCallback, useContext, useEffect, useState, type ReactNode, type MouseEventHandler } from "react";

export interface Breadcrumb {
  label: string;
  href?: string;
  /** Optional handler for preserving local work before navigating. */
  onClick?: MouseEventHandler<HTMLAnchorElement>;
  /**
   * Optional task identifier (e.g. "PAP-1204") rendered in gray monospace
   * between the leading glyph and the label.
   */
  identifier?: string;
  /** Optional node rendered before the label (e.g. a status glyph). */
  leading?: ReactNode;
  /**
   * Stable identity for `leading` so equality/diffing works without comparing
   * React nodes by reference (which always differ across renders). Set this to
   * a primitive that changes only when the rendered `leading` should change.
   */
  leadingKey?: string;
  /** Optional action beside the label, outside the breadcrumb link. */
  trailing?: ReactNode;
  /** Stable identity for the action, following leadingKey semantics. */
  trailingKey?: string;
  /** Optional control that replaces the visible label and its leading/trailing nodes. */
  control?: ReactNode;
  /** Stable identity for the control, following leadingKey semantics. */
  controlKey?: string;
}

interface BreadcrumbContextValue {
  breadcrumbs: Breadcrumb[];
  setBreadcrumbs: (crumbs: Breadcrumb[]) => void;
  breadcrumbToolbar: ReactNode | null;
  setBreadcrumbToolbar: (node: ReactNode | null) => void;
  breadcrumbPanelControl: BreadcrumbPanelControl | null;
  setBreadcrumbPanelControl: (control: BreadcrumbPanelControl | null) => void;
  mobileToolbar: ReactNode | null;
  setMobileToolbar: (node: ReactNode | null) => void;
}

export interface BreadcrumbPanelControl {
  open: boolean;
  onToggle: () => void;
}

interface BreadcrumbProviderProps {
  children: ReactNode;
  companyName?: string | null;
}

const BreadcrumbContext = createContext<BreadcrumbContextValue | null>(null);

function breadcrumbsEqual(left: Breadcrumb[], right: Breadcrumb[]) {
  if (left === right) return true;
  if (left.length !== right.length) return false;
  for (let index = 0; index < left.length; index += 1) {
    if (
      left[index]?.label !== right[index]?.label
      || left[index]?.onClick !== right[index]?.onClick
      || left[index]?.href !== right[index]?.href
      || left[index]?.identifier !== right[index]?.identifier
      || left[index]?.leadingKey !== right[index]?.leadingKey
      || left[index]?.trailingKey !== right[index]?.trailingKey
      || left[index]?.controlKey !== right[index]?.controlKey
    ) {
      return false;
    }
  }
  return true;
}

export function buildDocumentTitle(breadcrumbs: Breadcrumb[], companyName?: string | null) {
  const pageParts = breadcrumbs.length === 0
    ? []
    : [...breadcrumbs].reverse().map((breadcrumb) => breadcrumb.label);
  const companyPart = companyName?.trim() ? [companyName.trim()] : [];
  const parts = [...pageParts, ...companyPart, "Paperclip"];
  return parts.join(" • ");
}

export function BreadcrumbProvider({ children, companyName }: BreadcrumbProviderProps) {
  const [breadcrumbs, setBreadcrumbsState] = useState<Breadcrumb[]>([]);
  const [breadcrumbToolbar, setBreadcrumbToolbarState] = useState<ReactNode | null>(null);
  const [breadcrumbPanelControl, setBreadcrumbPanelControlState] =
    useState<BreadcrumbPanelControl | null>(null);
  const [mobileToolbar, setMobileToolbarState] = useState<ReactNode | null>(null);

  const setBreadcrumbs = useCallback((crumbs: Breadcrumb[]) => {
    setBreadcrumbsState((current) => (breadcrumbsEqual(current, crumbs) ? current : crumbs));
  }, []);

  const setMobileToolbar = useCallback((node: ReactNode | null) => {
    setMobileToolbarState(node);
  }, []);

  const setBreadcrumbToolbar = useCallback((node: ReactNode | null) => {
    setBreadcrumbToolbarState(node);
  }, []);

  const setBreadcrumbPanelControl = useCallback((control: BreadcrumbPanelControl | null) => {
    setBreadcrumbPanelControlState(control);
  }, []);

  useEffect(() => {
    document.title = buildDocumentTitle(breadcrumbs, companyName);
  }, [breadcrumbs, companyName]);

  return (
    <BreadcrumbContext.Provider
      value={{
        breadcrumbs,
        setBreadcrumbs,
        breadcrumbToolbar,
        setBreadcrumbToolbar,
        breadcrumbPanelControl,
        setBreadcrumbPanelControl,
        mobileToolbar,
        setMobileToolbar,
      }}
    >
      {children}
    </BreadcrumbContext.Provider>
  );
}

export function useBreadcrumbs() {
  const ctx = useContext(BreadcrumbContext);
  if (!ctx) {
    throw new Error("useBreadcrumbs must be used within BreadcrumbProvider");
  }
  return ctx;
}