"use client";

import { useRouter } from "next/navigation";
import { OnboardingWizard } from "./wizard";

interface OnboardingFlowProps {
  orgName: string;
}

/**
 * Wraps the onboarding wizard. On successful submission, refreshes the
 * router so the parent server component re-renders with the new pending
 * request visible in the dashboard list.
 *
 * Slice 3: this component used to manage the no_request → pending →
 * provisioning → active state machine, with conditional rendering of
 * `<ProvisioningStatus>`. That state is now reflected at the dashboard
 * level (which renders one `<ProvisioningStatus>` per pending request),
 * so this wrapper does just one thing: show the wizard, then navigate.
 */
export function OnboardingFlow({ orgName }: OnboardingFlowProps) {
  const router = useRouter();

  return (
    <OnboardingWizard
      orgName={orgName}
      onComplete={() => {
        // Navigate back to /dashboard and re-fetch on the server. The
        // parent server component will see the new `pending` row and
        // render its `<ProvisioningStatus>` card automatically.
        router.push("/dashboard");
        router.refresh();
      }}
    />
  );
}