/* BridgeWell Calculator — OnboardingWizard.
   Direct port of src/components/OnboardingWizard.tsx (animations via CSS,
   not framer-motion). */

const { useState: useWState } = React;

const WIZ_STEPS = [
  {
    key: "studentPopulation",
    Icon: window.Users,
    title: "How many students are in your school or district?",
    subtitle: "We'll use this to estimate screening time, clinical impact, and revenue potential.",
    placeholder: "e.g. 4,500",
    type: "number",
    min: 1, max: 100000,
  },
  {
    key: "availableStaff",
    Icon: window.UserCheck,
    title: "How many staff can administer screenings?",
    subtitle: "Counselors, nurses, trained paraprofessionals — anyone who can run the tool.",
    placeholder: "e.g. 5",
    type: "number",
    min: 1, max: 500,
  },
  {
    key: "screeningsPerYear",
    Icon: window.CalendarDays,
    title: "How often will you screen each year?",
    subtitle: "Screening twice a year doubles your revenue and improves early identification.",
    type: "radio",
  },
  {
    key: "insuranceCoverage",
    Icon: window.ShieldCheck,
    title: "What percentage of students have insurance coverage?",
    subtitle: "Medi-Cal, Commercial Insurance, or other billable coverage. An estimate is fine.",
    type: "slider",
  },
];

function OnboardingWizard({ onComplete, onSkip }) {
  const [currentStep, setCurrentStep] = useWState(0);
  const [direction, setDirection] = useWState(1);
  const [values, setValues] = useWState({
    studentPopulation: 4500,
    availableStaff: 5,
    screeningsPerYear: 1,
    insuranceCoverage: 50,
  });

  const results = window.useScreeningCalculator(values);
  const step = WIZ_STEPS[currentStep];
  const isLastStep = currentStep === WIZ_STEPS.length - 1;
  const Icon = step.Icon;

  const goNext = () => {
    if (isLastStep) {
      onComplete(values);
    } else {
      setDirection(1);
      setCurrentStep((s) => s + 1);
    }
  };
  const goBack = () => {
    setDirection(-1);
    setCurrentStep((s) => Math.max(0, s - 1));
  };

  const progressPct = ((currentStep + 1) / (WIZ_STEPS.length + 1)) * 100;

  return (
    <div className="wiz-root">
      <div className="wiz-progress">
        <div className="wiz-progress-fill" style={{ width: progressPct + "%" }}></div>
      </div>

      <div className="wiz-stage">
        <div className="wiz-card">
          <div
            key={currentStep}
            className={`wiz-slide ${direction >= 0 ? "wiz-slide-enter" : "wiz-slide-enter-back"}`}
          >
            <div className="wiz-icon-tile"><Icon /></div>

            <div className="wiz-text">
              <h2>{step.title}</h2>
              <p>{step.subtitle}</p>
            </div>

            <div className="wiz-input-wrap">
              {step.type === "number" && (
                <input
                  type="number"
                  className="wiz-num-input tabular"
                  value={values[step.key]}
                  onChange={(e) => {
                    const v = parseInt(e.target.value, 10);
                    const safe = isNaN(v) ? step.min : v;
                    setValues((prev) => ({
                      ...prev,
                      [step.key]: Math.max(step.min, Math.min(step.max, safe)),
                    }));
                  }}
                  min={step.min}
                  max={step.max}
                  placeholder={step.placeholder}
                  autoFocus
                />
              )}

              {step.type === "radio" && (
                <div className="wiz-radio-grid" role="group" aria-label="Screenings per year">
                  {[1, 2].map((n) => (
                    <button
                      type="button"
                      key={n}
                      className={`wiz-radio-card ${values.screeningsPerYear === n ? "is-active" : ""}`}
                      onClick={() => setValues((p) => ({ ...p, screeningsPerYear: n }))}
                      aria-pressed={values.screeningsPerYear === n}
                    >
                      <span className="wiz-radio-num">{n}×</span>
                      <span className="wiz-radio-lbl">{n === 1 ? "Once a year" : "Twice a year"}</span>
                    </button>
                  ))}
                </div>
              )}

              {step.type === "slider" && (
                <div className="wiz-slider-wrap">
                  <div className="wiz-slider-value">
                    <span className="tabular">{values.insuranceCoverage}%</span>
                  </div>
                  <input
                    type="range"
                    min={0}
                    max={100}
                    step={1}
                    value={values.insuranceCoverage}
                    onChange={(e) =>
                      setValues((p) => ({ ...p, insuranceCoverage: Number(e.target.value) }))
                    }
                    className="bw-slider lg"
                    style={{ "--pct": values.insuranceCoverage + "%" }}
                  />
                  <div className="wiz-slider-bounds"><span>0%</span><span>100%</span></div>
                </div>
              )}
            </div>

            {currentStep >= 1 && (
              <div className="wiz-teaser">
                <p className="wiz-teaser-lbl">Estimated Gross Revenue</p>
                <p className="wiz-teaser-val">
                  <window.AnimatedNumber
                    value={results.grossRevenue}
                    prefix="$"
                    decimals={0}
                    className="tabular"
                  />
                </p>
              </div>
            )}
          </div>

          <div className="wiz-nav">
            <button
              type="button"
              className="wiz-btn wiz-btn-ghost"
              onClick={goBack}
              disabled={currentStep === 0}
            >
              <window.ArrowLeft />
              Back
            </button>

            <div className="wiz-dots" aria-hidden="true">
              {WIZ_STEPS.map((_, i) => {
                let cls = "";
                if (i === currentStep) cls = "is-current";
                else if (i < currentStep) cls = "is-done";
                return <span key={i} className={`wiz-dot ${cls}`}></span>;
              })}
            </div>

            <button type="button" className="wiz-btn wiz-btn-primary" onClick={goNext}>
              {isLastStep ? (
                <>
                  See Results
                  <window.Sparkles />
                </>
              ) : (
                <>
                  Next
                  <window.ArrowRight />
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.OnboardingWizard = OnboardingWizard;