CedarCopilot/cedar-mail

import { useState } from 'react';
import { useInboxes } from '@/modules/threads/hooks/use-inboxes';
import { SetupPreviewFrame } from '../components/SetupPreviewFrame';
import { SplitTemplateGallery } from '../components/SplitTemplateGallery';
import { PreviewInbox } from '../preview/PreviewInbox';
import { useSetupSplits } from '../hooks/use-setup-splits';

/**
 * Pick sub-inboxes against a sample feed.
 *
 * Sample rather than real mail, deliberately: what this step has to teach is
 * that a sub-inbox REMOVES its mail from the main feed unless it is set to
 * mirror. Ten known threads make that legible on the first click. The next step
 * repeats the same picker against the user's actual mail.
 */
export function SubInboxStepBody() {
  const { templates, isApplied, toggle } = useSetupSplits();

  return <SplitTemplateGallery templates={templates} isApplied={isApplied} onToggle={toggle} />;
}

export function SubInboxStepPreview() {
  const { inboxes, inboxLayout, hasCustomInboxOrder } = useInboxes();
  const [activeId, setActiveId] = useState<string | undefined>(undefined);

  return (
    <SetupPreviewFrame label="Sample inbox">
      <PreviewInbox
        inboxes={inboxes}
        inboxLayout={inboxLayout}
        hasCustomInboxOrder={hasCustomInboxOrder}
        activeInboxId={activeId}
        onSelectInbox={setActiveId}
      />
    </SetupPreviewFrame>
  );
}