'use client';

import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';

type MobileChromeState = {
  title: string | null;
  primaryAction: ReactNode | null;
  showBackButton: boolean;
};

type MobileChromeApi = MobileChromeState & {
  setChrome: (next: Partial<MobileChromeState>) => void;
};

const MobileChromeContext = createContext<MobileChromeApi | null>(null);

export function MobileLayoutProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<MobileChromeState>({
    title: null,
    primaryAction: null,
    showBackButton: false,
  });

  const setChrome = useCallback((next: Partial<MobileChromeState>) => {
    setState((prev) => ({ ...prev, ...next }));
  }, []);

  const value = useMemo<MobileChromeApi>(() => ({ ...state, setChrome }), [state, setChrome]);

  return <MobileChromeContext.Provider value={value}>{children}</MobileChromeContext.Provider>;
}

const NOOP_SET_CHROME = () => {};
const NOOP_CHROME: MobileChromeApi = {
  title: null,
  primaryAction: null,
  showBackButton: false,
  setChrome: NOOP_SET_CHROME,
};

/**
 * Page-level hook to push a title / back-button / primary action into the
 * mobile topbar. Both the desktop and mobile shells render the same
 * children, so this hook MUST be safe to call from either tree. When the
 * provider is missing (desktop tree), it returns a no-op so callers don't
 * have to branch on shell type.
 */
export function useMobileChrome() {
  const ctx = useContext(MobileChromeContext);
  return ctx ?? NOOP_CHROME;
}