import { FormGroup } from '@admin/components/ui/forms/form-group';
import { PermissionMatrix, type PermissionSection } from '@admin/components/ui/forms/permission-matrix';
import { formHelpClassName } from '@admin/components/ui/field-styles';
import { cn } from '@admin/lib/utils';

type RoleFormFieldsProps = {
    name: string;
    permissions: string[];
    permissionSections: PermissionSection[];
    errors: Partial<Record<'name' | 'permissions', string>>;
    onNameChange: (value: string) => void;
    onPermissionsChange: (permissions: string[]) => void;
    nameDisabled?: boolean;
    permissionsDisabled?: boolean;
};

export function RoleFormFields({
    name,
    permissions,
    permissionSections,
    errors,
    onNameChange,
    onPermissionsChange,
    nameDisabled = false,
    permissionsDisabled = false,
}: RoleFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Role key"
                helpText="Lowercase letters, numbers, and underscores only (e.g. content_editor)."
                error={errors.name}
                inputProps={{
                    value: name,
                    onChange: (event) => onNameChange(event.target.value),
                    required: true,
                    disabled: nameDisabled,
                    placeholder: 'content_editor',
                    pattern: '[a-z][a-z0-9_]*',
                }}
            />

            <div className="mb-2">
                <p className={cn('mb-0', formHelpClassName)}>
                    Use general access for broad shortcuts, granular permissions for per-module control, or custom groups you
                    create under Administration → Permission groups.
                </p>
                {errors.permissions && <p className="text-danger text-sm mt-2">{errors.permissions}</p>}
            </div>

            <PermissionMatrix
                sections={permissionSections}
                selected={permissions}
                onChange={onPermissionsChange}
                disabled={permissionsDisabled}
            />
        </>
    );
}