import { AppBreadcrumb, AppContent } from "@repo/rdx-ui/components";
import { useNavigate } from "react-router-dom";

import { FormCommitButtonGroup, UnsavedChangesProvider } from "@erp/core/hooks";
import { showErrorToast, showSuccessToast } from "@repo/shadcn-ui/lib/utils";
import { useState } from "react";
import { FieldErrors } from "react-hook-form";
import { CustomerEditForm, ErrorAlert } from "../../components";
import { useCreateCustomerMutation } from "../../hooks";
import { useTranslation } from "../../i18n";
import { CustomerFormData, defaultCustomerFormData } from "../../schemas";

export const CustomerCreate = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [isDirty, setIsDirty] = useState(false);

  // 2) Estado de creación (mutación)
  const {
    mutate,
    isPending: isCreating,
    isError: isCreateError,
    error: createError,
  } = useCreateCustomerMutation();

  // 3) Submit con navegación condicionada por éxito
  const handleSubmit = (formData: CustomerFormData) => {
    mutate(
      { data: formData },
      {
        onSuccess(data) {
          setIsDirty(false);
          showSuccessToast(t("pages.create.successTitle"), t("pages.create.successMsg"));

          // El timeout es para que a React le dé tiempo a procesar
          // el cambio de estado de isDirty / setIsDirty.
          setTimeout(() => {
            navigate("/customers/list", {
              state: { customerId: data.id, isNew: true },
              replace: true,
            });
          }, 0);
        },
        onError(error) {
          showErrorToast(t("pages.create.errorTitle"), error.message);
        },
      }
    );
  };

  const handleError = (errors: FieldErrors<CustomerFormData>) => {
    console.error("Errores en el formulario:", errors);
    // Aquí puedes manejar los errores, por ejemplo, mostrar un mensaje al usuario
  };

  return (
    <>
      <AppBreadcrumb />
      <AppContent>
        <UnsavedChangesProvider isDirty={isDirty}>
          <div className='flex items-center justify-between space-y-4 px-6'>
            <div className='space-y-2'>
              <h2 className='text-2xl font-bold tracking-tight text-balance scroll-m-2'>
                {t("pages.create.title")}
              </h2>
              <p className='text-muted-foreground scroll-m-20 tracking-tight text-balance'>
                {t("pages.create.description")}
              </p>
            </div>
            <FormCommitButtonGroup
              cancel={{
                to: "/customers/list",
              }}
              submit={{
                formId: "customer-create-form",
                disabled: isCreating,
                isLoading: isCreating,
              }}
            />
          </div>
          {/* Alerta de error de actualización (si ha fallado el último intento) */}
          {isCreateError && (
            <ErrorAlert
              title={t("pages.create.errorTitle", "No se pudo guardar los cambios")}
              message={
                (createError as Error)?.message ??
                t("pages.create.errorMsg", "Revisa los datos e inténtalo de nuevo.")
              }
            />
          )}

          <div className='flex flex-1 flex-col gap-4 p-4'>
            <CustomerEditForm
              formId={"customer-create-form"} // para que el botón del header pueda hacer submit
              initialValues={defaultCustomerFormData}
              onSubmit={handleSubmit}
              onError={handleError}
              onDirtyChange={setIsDirty}
            />
          </div>
        </UnsavedChangesProvider>
      </AppContent>
    </>
  );
};