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

export function ReviewStep({
  form,
  setForm,
}: {
  form: FormState;
  setForm?: (f: FormState) => void;
}) {
  const req = toRequest(form);
  return (
    <div style={{ display: 'grid', gap: 12, maxWidth: 720 }}>
      <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>
  );
}