import { formClassName, formHelpClassName } from '@admin/components/ui/field-styles';
import type { PermissionSection } from '@admin/components/ui/forms/permission-matrix';
import { Modal } from '@admin/components/ui/modal';
import { RoleFormFields } from '@admin/pages/roles/role-form-fields';
import { useFormResponse } from '@admin/hooks/use-form-response';
import { cn } from '@admin/lib/utils';
import { useForm } from '@inertiajs/react';
import { FormEvent, useEffect } from 'react';

type RoleRecord = {
    id: number;
    name: string;
    permissions?: string[];
    is_protected?: boolean;
};

type EditRoleProps = {
    isOpen: boolean;
    onClose: () => void;
    initialData: RoleRecord | null;
    permissionSections: PermissionSection[];
};

export default function EditRole({ isOpen, onClose, initialData, permissionSections }: EditRoleProps) {
    const { data, setData, put, processing, errors, reset } = useForm({
        name: '',
        permissions: [] as string[],
    });

    const isProtected = Boolean(initialData?.is_protected);

    useEffect(() => {
        if (!initialData) {
            return;
        }

        setData({
            name: initialData.name ?? '',
            permissions: initialData.permissions ?? [],
        });
    }, [initialData, setData]);

    const action = useFormResponse({
        onComplete: () => {
            reset();
            onClose();
        },
        loadingMessage: 'Saving changes...',
    });

    const handleSave = (event?: FormEvent) => {
        event?.preventDefault();

        if (!initialData || isProtected) {
            return;
        }

        put(`/admin/api/update_role/${initialData.id}`, {
            onStart: action.onStart,
            onSuccess: action.onSuccess,
            onError: action.onError,
            preserveScroll: true,
        });
    };

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="Edit role"
            primaryButtonText={isProtected ? undefined : 'Save changes'}
            onPrimaryAction={isProtected ? undefined : handleSave}
            processing={processing}
            size="lg"
        >
            {isProtected && (
                <p className={cn('mb-4', formHelpClassName)}>
                    Super Admin is a system role and cannot be changed here. It always has full access.
                </p>
            )}

            <form className={formClassName} noValidate onSubmit={handleSave}>
                <RoleFormFields
                    name={data.name}
                    permissions={data.permissions}
                    permissionSections={permissionSections}
                    errors={errors}
                    onNameChange={(value) => setData('name', value)}
                    onPermissionsChange={(permissions) => setData('permissions', permissions)}
                    nameDisabled={isProtected}
                    permissionsDisabled={isProtected}
                />
            </form>
        </Modal>
    );
}