/**
 * EligibilityCheckFlow - Container for eligibility check multi-step flow
 *
 * Orchestrates the step rendering based on store state.
 * Two paths:
 * 1. "Create Account & Submit" → OTP → Complete Account → Success
 * 2. "Just Submit Request" → Success (guest)
 */

"use client";

import { useEffect } from "react";
import { useEligibilityCheckStore } from "../../stores/eligibility-check.store";
import { FormStep, OtpStep, CompleteAccountStep, SuccessStep } from "./steps";

interface EligibilityCheckFlowProps {
  /** Optional callback when flow completes */
  onComplete?: () => void;
}

export function EligibilityCheckFlow({ onComplete }: EligibilityCheckFlowProps) {
  const { step, reset, cleanup } = useEligibilityCheckStore();

  // Reset store on mount, cleanup on unmount to prevent memory leaks
  useEffect(() => {
    reset();
    return () => {
      cleanup();
    };
  }, [reset, cleanup]);

  // Notify parent when flow completes
  useEffect(() => {
    if (step === "success" && onComplete) {
      onComplete();
    }
  }, [step, onComplete]);

  const renderStep = () => {
    switch (step) {
      case "form":
        return <FormStep />;
      case "otp":
        return <OtpStep />;
      case "complete-account":
        return <CompleteAccountStep />;
      case "success":
        return <SuccessStep />;
      default:
        return <FormStep />;
    }
  };

  return <div className="w-full max-w-md mx-auto">{renderStep()}</div>;
}
