import { AttributeType, User } from '@zeniai/client-epic-state';
/**
 * Approval Rules 3.0 — Set Approval Stages form section.
 *
 * Renders the third FormSection of the rule create/edit form. Holds:
 *
 *   ┌────────────────────────────────────────────────────────────┐
 *   │ 1. [Require|Notify] [Specific Person ▾] [users…] [🗑]      │
 *   │ 2. [Require|Notify] [Role ▾]            [Manager  ▾] [🗑]  │
 *   │ Clear All                          ⊕ Add Approval Stage   │
 *   │ ─────────────────────────────────────────────────────────  │
 *   │ Separation of Duties                                   ⏺  │
 *   │ Enabling separation of duties prevent ...                  │
 *   └────────────────────────────────────────────────────────────┘
 *
 * Stage rows are owned by `formData.steps`. The component reads the
 * list length from form state via `useWatch` indirectly through the
 * stagesValue prop, and lets the parent own the add / remove / clear
 * actions (mirroring the ConditionRow pattern). The parent is also
 * responsible for translating the form-data shape to canonical
 * `Step[]` at save time in the screen connector.
 *
 * The Separation of Duties toggle sits inside the same FormSection
 * card per product spec — SoD is a stage-modifier, so visually it
 * belongs with the stages it modifies.
 */
export interface ApprovalStagesSectionProps {
    /**
     * Pool of users surfaced inside the "Specific Person" multi-select
     * on each row. Resolved by the parent — in production, this is the
     * tenant's filtered approver list.
     */
    allUsers: User[];
    /** Form-state key for the SoD boolean toggle. */
    separationOfDutiesFieldName: string;
    /**
     * Stage 'fields' produced by 'useFieldArray' in the parent. Each
     * carries a stable 'id' the section uses as the React key so React
     * physically reorders DOM nodes on drag-drop — which in turn
     * forces each row's 'index' / 'fieldNameBase' props to update and
     * its Controllers to re-bind to the new form-state paths. Keying
     * by index instead silently broke drag-and-drop because the
     * positionally-keyed rows kept stale Controller bindings.
     */
    stageFields: ReadonlyArray<{
        id: string;
    }>;
    /**
     * Form-state key prefix for stage rows — typically `"steps"`. Each
     * row's full path is `${stagesFieldName}.${index}`.
     */
    stagesFieldName: string;
    /** Role options for stage rows — reimbursement passes API `allAttributes`. */
    stageRoleOptions?: AttributeType[];
    onAddStage: () => void;
    onClearAllStages: () => void;
    onRemoveStage: (index: number) => void;
    /**
     * Called when the user drops a dragged stage row onto another row.
     * The parent re-orders the form-state 'steps' array so the new
     * order propagates to the save payload via the existing
     * 'createSteps' iteration. Optional — when omitted the rows render
     * without drag handlers attached (handle stays visible but inert).
     */
    onReorderStages?: (dragIndex: number, hoverIndex: number) => void;
}
export declare function ApprovalStagesSection({ allUsers, stageFields, stagesFieldName, separationOfDutiesFieldName, onAddStage, onClearAllStages, onRemoveStage, onReorderStages, stageRoleOptions, }: ApprovalStagesSectionProps): import("react/jsx-runtime").JSX.Element;
export default ApprovalStagesSection;