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 PermissionGroupFormFieldsProps = {
    name: string;
    description: string;
    permissions: string[];
    permissionSections: PermissionSection[];
    errors: Partial<Record<'name' | 'description' | 'permissions', string>>;
    onNameChange: (value: string) => void;
    onDescriptionChange: (value: string) => void;
    onPermissionsChange: (permissions: string[]) => void;
};

export function PermissionGroupFormFields({
    name,
    description,
    permissions,
    permissionSections,
    errors,
    onNameChange,
    onDescriptionChange,
    onPermissionsChange,
}: PermissionGroupFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Group name"
                helpText="Used as the label when assigning permissions to roles."
                error={errors.name}
                inputProps={{
                    value: name,
                    onChange: (event) => onNameChange(event.target.value),
                    required: true,
                    placeholder: 'Marketing team',
                }}
            />

            <FormGroup
                as="textarea"
                label="Description"
                helpText="Optional note for other admins."
                error={errors.description}
                inputProps={{
                    value: description,
                    onChange: (event) => onDescriptionChange(event.target.value),
                    rows: 3,
                    placeholder: 'Can manage homepage sliders and testimonials only.',
                }}
            />

            <div className="mb-2">
                <p className={cn('mb-0', formHelpClassName)}>
                    Select permissions from the module groups below. Built-in module groups are listed in the table; save a
                    custom group here to reuse it when editing roles.
                </p>
                {errors.permissions && <p className="text-danger text-sm mt-2">{errors.permissions}</p>}
            </div>

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