CedarCopilot/cedar-mail

import { useState } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { Switch } from '@/components/ui/switch';
import { useInboxes } from '@/modules/threads/hooks/use-inboxes';
import { cn } from '@/lib/utils';
import { SetupPreviewFrame } from '../components/SetupPreviewFrame';
import { PreviewInbox } from '../preview/PreviewInbox';

/**
 * The layout options, rendered with the same controls as the inbox's own Edit
 * dialog — the Tabs/Containers switch and the Important + Other toggle with its
 * Gmail-important checkbox. Same writes, same look, so nothing has to be
 * relearned when the user opens that dialog later.
 */
export function InboxDisplayStepBody() {
  const { inboxLayout, setInboxLayout, importantSignal, setImportantSignal } = useInboxes();

  return (
    <div className="space-y-5">
      <div className="space-y-2">
        <p className="text-foreground text-base font-semibold">Display mode</p>
        <div className="border-border bg-sunken/40 flex items-center justify-end gap-2 rounded-md border p-3">
          <span
            className={cn(
              'text-xs',
              inboxLayout !== 'stacked' ? 'text-foreground font-medium' : 'text-muted-foreground',
            )}
          >
            Tabs
          </span>
          <Switch
            aria-label="Toggle stacked inbox layout"
            checked={inboxLayout === 'stacked'}
            onCheckedChange={(checked) => setInboxLayout(checked ? 'stacked' : 'inbox')}
          />
          <span
            className={cn(
              'text-xs',
              inboxLayout === 'stacked' ? 'text-foreground font-medium' : 'text-muted-foreground',
            )}
          >
            Containers
          </span>
        </div>
      </div>

      <div className="space-y-2">
        <p className="text-foreground text-base font-semibold">Important + Other</p>
        <div className="border-border bg-background rounded-md border border-t-4 border-t-slate-300">
          <div className="flex items-center gap-1.5 p-3 text-sm font-medium">
            <span className="flex-1">
              {inboxLayout === 'important_other' ? 'Important + Other' : 'Inbox'}
            </span>
            <Switch
              aria-label="Split Important and Other"
              checked={inboxLayout === 'important_other'}
              onCheckedChange={(checked) =>
                setInboxLayout(checked ? 'important_other' : 'inbox')
              }
            />
          </div>
          {inboxLayout === 'important_other' && (
            <label className="border-border flex cursor-pointer items-center gap-2 border-t px-3 py-2 text-xs">
              <Checkbox
                checked={importantSignal === 'gmail_important'}
                onCheckedChange={(checked) =>
                  setImportantSignal(checked ? 'gmail_important' : 'category_personal')
                }
              />
              <span className="text-muted-foreground">Use Gmail&apos;s Important label</span>
            </label>
          )}
        </div>
      </div>
    </div>
  );
}

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

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