'use client';

import { createContext, 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 value = useMemo<MobileChromeApi>(
    () => ({
      ...state,
      setChrome: (next) => setState((prev) => ({ ...prev, ...next })),
    }),
    [state],
  );

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

/**
 * Page-level hook to push a title / back-button / primary action into the
 * mobile topbar. The provider is only mounted by `<MobileLayout>`, so
 * desktop-shell renders never call into this context.
 */
export function useMobileChrome() {
  const ctx = useContext(MobileChromeContext);
  if (!ctx) {
    throw new Error('useMobileChrome must be used inside <MobileLayoutProvider>');
  }
  return ctx;
}