CedarCopilot/cedar-mail

import { Check, Home } from 'lucide-react';
import { cn } from '@/lib/utils';
import { SetupPreviewFrame } from '../components/SetupPreviewFrame';
import { useSetupPipeline } from '../hooks/use-setup-pipeline';

/**
 * A library of pipeline views. Each one selected becomes a tab on /pipeline —
 * the same tabs the real strip renders, created through the same mutation, so
 * what the preview shows is what the user will find when they get there.
 */
export function PipelineStepBody() {
  const { templates, has, add } = useSetupPipeline();

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-2 gap-3">
        {templates.map((template) => {
          const added = has(template);
          return (
            <button
              key=[redacted]
              type="button"
              disabled={added}
              onClick={() => void add(template)}
              className={cn(
                'border-border flex items-center gap-2 rounded-md border p-3 text-left transition-colors',
                added
                  ? 'bg-sunken cursor-default'
                  : 'bg-background hover:border-foreground/30 cursor-pointer',
              )}
            >
              <span className="text-muted-foreground shrink-0">{template.icon}</span>
              <span className="min-w-0 flex-1 text-sm font-medium">{template.title}</span>
              {added && <Check className="h-3.5 w-3.5 shrink-0 text-emerald-600" />}
            </button>
          );
        })}
      </div>
    </div>
  );
}

export function PipelineStepPreview() {
  const { tabs } = useSetupPipeline();

  return (
    <SetupPreviewFrame label="Your pipeline tabs">
      <div className="flex h-full flex-col">
        <div className="flex shrink-0 items-end gap-1 overflow-x-auto border-b px-2 pt-2">
          <span className="text-muted-foreground flex shrink-0 items-center gap-1 rounded-t-md px-2.5 py-1.5 text-xs">
            <Home className="h-3.5 w-3.5" />
          </span>
          {tabs.map((canvas) => (
            <span
              key=[redacted]
              className="bg-background text-foreground flex shrink-0 items-center gap-1.5 rounded-t-md border border-b-0 px-2.5 py-1.5 text-xs"
            >
              <span
                className="h-2 w-2 shrink-0 rounded-full ring-1 ring-black/10 dark:ring-white/10"
                style={{ backgroundColor: canvas.colour ?? '#9aa0a6' }}
              />
              {canvas.title}
            </span>
          ))}
        </div>
        {tabs.length === 0 ? (
          <p className="text-muted-foreground p-6 text-center text-xs">
            Pick a view and it appears here as a tab.
          </p>
        ) : (
          <div className="flex flex-col gap-2 p-4">
            {/* A sketch of a canvas body — enough to read as a table without pretending
                to render deals the user may not have synced yet. */}
            {Array.from({ length: 5 }).map((_, row) => (
              <div key=[redacted] className="flex items-center gap-3">
                <span className="bg-muted h-3 w-3 shrink-0 rounded-full" />
                <span className="bg-muted h-3 flex-1 rounded" />
                <span className="bg-muted h-3 w-16 shrink-0 rounded" />
                <span className="bg-muted h-3 w-10 shrink-0 rounded" />
              </div>
            ))}
          </div>
        )}
      </div>
    </SetupPreviewFrame>
  );
}