CedarCopilot/cedar-mail

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

interface SetupPreviewValue {
  /** Tab selected in the right-hand preview. Undefined means "the first one". */
  activeInboxId?: string;
  setActiveInboxId: (id: string | undefined) => void;
}

const SetupPreviewContext = createContext<SetupPreviewValue | null>(null);

/**
 * Shared preview state.
 *
 * The controls and the preview are siblings under the flow shell, but a click on
 * the left has to move the selection on the right — adding a sub-inbox should
 * land you looking at it. This is the one piece of state they both hold.
 */
export function SetupPreviewProvider({ children }: { children: ReactNode }) {
  const [activeInboxId, setActiveInboxId] = useState<string | undefined>(undefined);
  const value = useMemo(() => ({ activeInboxId, setActiveInboxId }), [activeInboxId]);
  return <SetupPreviewContext.Provider value={value}>{children}</SetupPreviewContext.Provider>;
}

export const useSetupPreview = () => {
  const ctx = useContext(SetupPreviewContext);
  if (!ctx) throw new Error('useSetupPreview must be used within SetupPreviewProvider');
  return ctx;
};