Navigation, state management, create rule button integration

app/create/hooks/useCreateFlowNavigation.ts

@@ -0,0 +1,81 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback } from "react";
+import type { CreateFlowStep } from "../types";
+import { getNextStep, getPreviousStep, isValidStep } from "../utils/flowSteps";
+
+/**
+ * Options passed to navigation handlers (e.g. for blur before navigate)
+ */
+const blurActiveElement = (): void => {
+  if (
+    typeof document !== "undefined" &&
+    document.activeElement instanceof HTMLElement
+  ) {
+    document.activeElement.blur();
+  }
+};
+
+/**
+ * Hook for Create Rule Flow navigation.
+ *
+ * Must be used within the create flow (pathname like /create/[step]).
+ * Uses the current step from the URL and provides type-safe navigation.
+ */
+export function useCreateFlowNavigation(): {
+  currentStep: CreateFlowStep | null;
+  goToNextStep: () => void;
+  goToPreviousStep: () => void;
+  goToStep: (_step: CreateFlowStep) => void;
+  canGoNext: () => boolean;
+  canGoBack: () => boolean;
+  nextStep: CreateFlowStep | null;
+  previousStep: CreateFlowStep | null;
+} {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const currentStep = (pathname?.split("/").pop() ??
+    null) as CreateFlowStep | null;
+  const validStep = isValidStep(currentStep) ? currentStep : null;
+
+  const nextStep = getNextStep(validStep);
+  const previousStep = getPreviousStep(validStep);
+
+  const goToNextStep = useCallback(() => {
+    blurActiveElement();
+    if (nextStep) {
+      router.push(`/create/${nextStep}`);
+    }
+  }, [router, nextStep]);
+
+  const goToPreviousStep = useCallback(() => {
+    blurActiveElement();
+    if (previousStep) {
+      router.push(`/create/${previousStep}`);
+    }
+  }, [router, previousStep]);
+
+  const goToStep = useCallback(
+    (step: CreateFlowStep) => {
+      blurActiveElement();
+      router.push(`/create/${step}`);
+    },
+    [router],
+  );
+
+  const canGoNext = useCallback(() => nextStep !== null, [nextStep]);
+  const canGoBack = useCallback(() => previousStep !== null, [previousStep]);
+
+  return {
+    currentStep: validStep,
+    goToNextStep,
+    goToPreviousStep,
+    goToStep,
+    canGoNext,
+    canGoBack,
+    nextStep,
+    previousStep,
+  };
+}