cameleer-server/ui/src/pages/Alerts/RuleEditor/ReviewStep.tsx

import { useMemo } from 'react';
import { Alert, Toggle } from '@cameleer/design-system';
import { toRequest, type FormState } from './form-state';

/**
 * Pure helper: returns a human-readable reason why saving should be blocked,
 * or null when the rule is safe to save (from the wizard's perspective).
 *
 * Currently covers: a rule with no webhooks AND no targets would be rejected
 * at the server edge (Task 3.3 validator) and would never notify anyone, so
 * the wizard blocks it earlier with a clear reason. The helper is exported
 * so `RuleEditorWizard` can also drive the Save button's `disabled` state
 * off the same single source of truth.
 */
export function computeSaveBlockReason(form: FormState): string | null {
  const noWebhooks = (form.webhooks ?? []).length === 0;
  const noTargets = (form.targets ?? []).length === 0;
  if (noWebhooks && noTargets) {
    return 'Add at least one webhook or target \u2014 a rule with no recipients never notifies anyone.';
  }
  return null;
}

export function ReviewStep({
  form,
  setForm,
}: {
  form: FormState;
  setForm?: (f: FormState) => void;
}) {
  const req = toRequest(form);
  const saveBlockReason = useMemo(() => computeSaveBlockReason(form), [form]);
  return (
    <div style={{ display: 'grid', gap: 12, maxWidth: 720 }}>
      {saveBlockReason && (
        <Alert variant="error" title="Rule cannot be saved yet">
          {saveBlockReason}
        </Alert>
      )}
      <div>
        <strong>Name:</strong> {form.name}
      </div>
      <div>
        <strong>Severity:</strong> {form.severity}
      </div>
      <div>
        <strong>Scope:</strong> {form.scopeKind}
        {form.scopeKind !== 'env' &&
          ` (app=${form.appSlug}${form.routeId ? `, route=${form.routeId}` : ''}${form.agentId ? `, agent=${form.agentId}` : ''})`}
      </div>
      <div>
        <strong>Condition kind:</strong> {form.conditionKind}
      </div>
      <div>
        <strong>Intervals:</strong> eval {form.evaluationIntervalSeconds}s &middot; for {form.forDurationSeconds}s &middot; re-notify {form.reNotifyMinutes}m
      </div>
      <div>
        <strong>Targets:</strong> {form.targets.length}
      </div>
      <div>
        <strong>Webhooks:</strong> {form.webhooks.length}
      </div>
      {setForm && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Toggle
            checked={form.enabled}
            onChange={(e) => setForm({ ...form, enabled: e.target.checked })}
            label="Enabled on save"
          />
        </div>
      )}
      <details>
        <summary>Raw request JSON</summary>
        <pre
          style={{
            fontSize: 11,
            background: 'var(--code-bg)',
            padding: 8,
            borderRadius: 6,
            overflow: 'auto',
          }}
        >
          {JSON.stringify(req, null, 2)}
        </pre>
      </details>
    </div>
  );
}