const handleFormSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    e.stopPropagation();

    console.group("🔍 FORM SUBMISSION DEBUG - START");

    // ========================================
    // PRE-SUBMISSION STATE
    // ========================================
    console.group("📊 PRE-SUBMISSION STATE");

    console.log("Form State:", {
      isSubmitting: form.state.isSubmitting,
      isValidating: form.state.isValidating,
      isValid: form.state.isValid,
      submissionAttempts: form.state.submissionAttempts,
      canSubmit: form.state.canSubmit,
      isDirty: form.state.isDirty,
      isPristine: form.state.isPristine,
      isSubmitted: form.state.isSubmitted,
      values: form.state.values,
    });

    console.log("Field Meta (Pre-submission):", form.state.fieldMeta);

    // Log each field's detailed state
    Object.entries(form.state.fieldMeta).forEach(([fieldName, meta]) => {
      console.log(`Field "${fieldName}":`, {
        isValid: meta.isValid,
        isValidating: meta.isValidating,
        isTouched: meta.isTouched,
        isBlurred: meta.isBlurred,
        isDirty: meta.isDirty,
        isPristine: meta.isPristine,
        errors: meta.errors,
        errorMap: meta.errorMap,
      });
    });

    // Check for pre-existing errors
    const preSubmissionErrors = Object.values(form.state.fieldMeta).some(
      (meta) => meta.errors && meta.errors.length > 0,
    );
    console.log("Has pre-submission errors:", preSubmissionErrors);

    console.groupEnd(); // PRE-SUBMISSION STATE

    // ========================================
    // SUBMISSION ATTEMPT
    // ========================================
    console.group("🚀 SUBMISSION ATTEMPT");
    console.log("Calling form.handleSubmit()...");

    const submissionStartTime = performance.now();

    try {
      const result = await form.handleSubmit();
      const submissionEndTime = performance.now();

      console.log(
        "form.handleSubmit() completed in:",
        `${submissionEndTime - submissionStartTime}ms`,
      );
      console.log("handleSubmit result:", result);
    } catch (error) {
      console.error("form.handleSubmit() threw an error:", error);
    }

    console.groupEnd(); // SUBMISSION ATTEMPT

    // ========================================
    // POST-SUBMISSION STATE
    // ========================================
    console.group("📈 POST-SUBMISSION STATE");

    console.log("Form State (Post-submission):", {
      isSubmitting: form.state.isSubmitting,
      isValidating: form.state.isValidating,
      isValid: form.state.isValid,
      submissionAttempts: form.state.submissionAttempts,
      canSubmit: form.state.canSubmit,
      isDirty: form.state.isDirty,
      isPristine: form.state.isPristine,
      isSubmitted: form.state.isSubmitted,
      values: form.state.values,
    });

    console.log("Field Meta (Post-submission):", form.state.fieldMeta);

    // Log each field's detailed state after submission
    Object.entries(form.state.fieldMeta).forEach(([fieldName, meta]) => {
      console.log(`Field "${fieldName}" (Post-submission):`, {
        isValid: meta.isValid,
        isValidating: meta.isValidating,
        isTouched: meta.isTouched,
        isBlurred: meta.isBlurred,
        isDirty: meta.isDirty,
        isPristine: meta.isPristine,
        errors: meta.errors,
        errorMap: meta.errorMap,
      });
    });

    console.groupEnd(); // POST-SUBMISSION STATE

    // ========================================
    // ERROR ANALYSIS
    // ========================================
    console.group("🔍 ERROR ANALYSIS");

    const formErrors = form.state.fieldMeta;
    const hasFormErrors = Object.values(formErrors).some(
      (meta) => meta.errors && meta.errors.length > 0,
    );

    console.log("Has form errors after submission:", hasFormErrors);

    if (hasFormErrors) {
      const errorSummary = Object.entries(formErrors)
        .filter(([_, meta]) => meta.errors && meta.errors.length > 0)
        .map(([fieldName, meta]) => ({
          field: fieldName,
          errors: meta.errors,
          isBlurred: meta.isBlurred,
          isTouched: meta.isTouched,
          willShowError:
            (meta.isBlurred || form.state.submissionAttempts > 0) &&
            !meta.isValid,
        }));

      console.warn("Form validation errors:", errorSummary);

      // Check which errors will actually be displayed to user
      const visibleErrors = errorSummary.filter((item) => item.willShowError);
      console.log("Errors that will be visible to user:", visibleErrors);

      focusFirstErrorInput();
    } else {
      console.log("✅ No form errors - submission should have succeeded");
    }

    console.groupEnd(); // ERROR ANALYSIS

    // ========================================
    // ADDITIONAL DEBUGGING INFO
    // ========================================
    console.group("🔧 ADDITIONAL DEBUG INFO");

    // Check if onSubmit was called
    console.log("Form onSubmit function:", form.options.onSubmit);

    // Check validation schema
    console.log("Form validators:", form.options.validators);

    // Check if there are any async operations still pending
    console.log("Document active element:", document.activeElement);

    // Check for any pending promises or timers
    console.log("Current timestamp:", new Date().toISOString());

    console.groupEnd(); // ADDITIONAL DEBUG INFO

    console.groupEnd(); // FORM SUBMISSION DEBUG - END
  };