import { ErrorAlert } from "@erp/core/components";
import { UnsavedChangesProvider, useReturnToNavigation } from "@erp/core/hooks";
import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
import { FormProvider } from "react-hook-form";
import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";

import { useTranslation } from "../i18n";
import { SupplierEditorForm, SupplierEditorHeader } from "../shared/ui";

import { useSupplierCreateController } from "./controllers";

export const SupplierCreatePage = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const returnTo = searchParams.get("returnTo") ?? "/suppliers";
  const { navigateBack } = useReturnToNavigation({ fallbackPath: returnTo });
  const controller = useSupplierCreateController({
    onCreated: (supplier) =>
      navigate({
        pathname: `/suppliers/${supplier.id}`,
        search: createSearchParams({ returnTo }).toString(),
      }),
  });

  return (
    <FormProvider {...controller.form}>
      <UnsavedChangesProvider isDirty={controller.form.formState.isDirty}>
        <RdxPageFrame
          contentClassName="bg-muted/20"
          header={
            <SupplierEditorHeader
              formId={controller.formId}
              hasChanges={controller.form.formState.isDirty}
              isSaving={controller.mutation.isPending}
              onCancel={navigateBack}
              title={t("create.title")}
            />
          }
        >
          <RdxPageContainer width="content">
            <RdxEditorLayout>
              <div className="rounded-2xl border border-border/60 bg-background p-4 shadow-xs md:p-6">
                <div className="flex min-w-0 flex-col gap-6">
                  {controller.mutation.isError ? (
                    <ErrorAlert
                      message={controller.mutation.error.message || t("create.error")}
                      title={t("create.error")}
                    />
                  ) : null}
                  <SupplierEditorForm
                    formId={controller.formId}
                    isSubmitting={controller.mutation.isPending}
                    onSubmit={controller.onSubmit}
                  />
                </div>
              </div>
            </RdxEditorLayout>
          </RdxPageContainer>
        </RdxPageFrame>
      </UnsavedChangesProvider>
    </FormProvider>
  );
};