// FRD step metadata + the rail nav + the router that renders the active step.

const STEPS = [
  { n: 1, key: "intake",   title: "Region & Photo",   short: "Intake" },
  { n: 2, key: "analysis", title: "Face & Nose Analysis", short: "Analysis" },
  { n: 3, key: "recommend",title: "Style Recommendation", short: "Styles" },
  { n: 4, key: "reference",title: "Reference Simulation", short: "Reference" },
  { n: 5, key: "adjust",   title: "Manual Adjustment", short: "Adjust" },
  { n: 7, key: "final",    title: "Final Simulation",  short: "Final" },
  { n: 8, key: "export",   title: "Save & Export",     short: "Export" },
];

const StepRail = ({ step, setStep, hasSession }) => (
  <div className="step-rail">
    {STEPS.map((s) => {
      const reachable = s.key === "intake" || hasSession;
      const active = step === s.key;
      return (
        <button
          key={s.key}
          className={`step-pill ${active ? "active" : ""} ${reachable ? "" : "disabled"}`}
          onClick={() => reachable && setStep(s.key)}
          disabled={!reachable}
        >
          <span className="step-n">{s.n}</span>
          <span className="step-title">{s.title}</span>
        </button>
      );
    })}
  </div>
);

const StepRouter = ({ step, ctx }) => {
  switch (step) {
    case "intake":   return <IntakeStep ctx={ctx} />;
    case "analysis": return <AnalysisScreen ctx={ctx} />;
    case "adjust":   return <AdjustStep ctx={ctx} />;
    case "final":    return <FinalStep ctx={ctx} />;
    case "recommend":return <RecommendStep ctx={ctx} />;
    case "reference":return <ReferenceStep ctx={ctx} />;
    case "export":   return <PlaceholderStep title="Save · Compare · Share · Export"
      body="Save looks, compare regional aesthetics, and export or share your session with a clinician." />;
    default:         return <IntakeStep ctx={ctx} />;
  }
};

Object.assign(window, { STEPS, StepRail, StepRouter });