"use client";

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

interface OnboardingFlowProps {
  orgName: string;
  /**
   * The user's display name. Forwarded to the wizard so personal
   * accounts can show the user's own name where they would otherwise
   * see an opaque org name. Ignored for company accounts.
   */
  userName?: string;
  userEmail?: string;
  /**
   * Bug 6: when present, the wizard is rendered in edit mode against
   * the given pending request. See `OnboardingWizard` for the full
   * shape and behavioural contract.
   */
  editingRequest?: React.ComponentProps<
    typeof OnboardingWizard
  >["editingRequest"];
}

/**
 * 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,
  userName,
  userEmail,
  editingRequest,
}: OnboardingFlowProps) {
  const router = useRouter();

  return (
    <OnboardingWizard
      orgName={orgName}
      userName={userName}
      userEmail={userEmail}
      editingRequest={editingRequest}
      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();
      }}
    />
  );
}
