// Onboarding — seven steps, one question each. The three textarea steps feed
// Claude directly (name/age/situation/struggles/goals/lang_pref/delivery_hour).
const { useState: useState_O } = React;

const STEPS = [
  {
    id: "name",
    eyebrow: "Step 1 of 7",
    question: "What do they call you?",
    help: "First name is enough.",
    kind: "text",
    placeholder: "Kaku"
  },
  {
    id: "age",
    eyebrow: "Step 2 of 7",
    question: "How old are you?",
    help: "Context, not judgement.",
    kind: "choice",
    options: ["Under 25", "25 – 34", "35 – 44", "45 – 54", "55 +"]
  },
  {
    id: "situation",
    eyebrow: "Step 3 of 7",
    question: "What’s going on in your life right now?",
    help: "A few honest sentences. This shapes every affirmation you hear.",
    kind: "textarea",
    placeholder: "Company just got acquired. Trying to figure out what’s next.",
    minChars: 20
  },
  {
    id: "struggles",
    eyebrow: "Step 4 of 7",
    question: "What’s the #1 thing you want to fix?",
    help: "Be specific. \"Sleep, weight, motivation\" beats \"feel better\".",
    kind: "textarea",
    placeholder: "Weight crept up. Mornings feel heavy. Keep drifting to my phone.",
    minChars: 20
  },
  {
    id: "goals",
    eyebrow: "Step 5 of 7",
    question: "Where do you want to be in 6 months?",
    help: "Name it in your own words. No templates.",
    kind: "textarea",
    placeholder: "Back in shape. A business I’ve shipped. Calmer mornings.",
    minChars: 20
  },
  {
    id: "lang_pref",
    eyebrow: "Step 6 of 7",
    question: "Which language feels most like you?",
    help: "Your affirmations will be written in this.",
    kind: "choice",
    options: ["English", "Hindi", "Hinglish"]
  },
  {
    id: "delivery_hour",
    eyebrow: "Step 7 of 7",
    question: "When do you listen?",
    help: "We’ll time the drop for then.",
    kind: "choice",
    options: [
      "Before 7 AM",
      "7 – 9 AM",
      "Commute",
      "Evening",
      "No fixed time"
    ]
  }
];

function Onboarding({ onComplete, errorMessage }) {
  const [step, setStep] = useState_O(0);
  const [answers, setAnswers] = useState_O({});
  const [submitting, setSubmitting] = useState_O(false);
  const s = STEPS[step];

  const setAnswer = (v) => setAnswers(a => ({ ...a, [s.id]: v }));
  const value = answers[s.id];
  const trimmed = typeof value === "string" ? value.trim() : "";
  const canNext =
    s.kind === "text"     ? trimmed.length > 0 :
    s.kind === "textarea" ? trimmed.length >= (s.minChars || 1) :
    value !== undefined;

  const next = async () => {
    if (!canNext || submitting) return;
    if (step === STEPS.length - 1) {
      setSubmitting(true);
      try { await onComplete(answers); } finally { setSubmitting(false); }
    } else {
      setStep(step + 1);
    }
  };
  const back = () => step > 0 && setStep(step - 1);

  return (
    <div className="onboard">
      <div className="onboard-dots">
        {STEPS.map((_, i) => (
          <div
            key={i}
            className={`onboard-dot ${i === step ? "active" : i < step ? "done" : ""}`}
          />
        ))}
      </div>

      <div className="onboard-step" key={step}>
        <div className="onboard-eyebrow">{s.eyebrow}</div>
        <div className="onboard-question" dangerouslySetInnerHTML={{__html: s.question}}/>
        <div className="onboard-help" dangerouslySetInnerHTML={{__html: s.help}}/>

        {s.kind === "text" && (
          <div className="onboard-field">
            <input
              className="text-input"
              placeholder={s.placeholder}
              value={value || ""}
              onChange={e => setAnswer(e.target.value)}
              autoFocus
            />
          </div>
        )}

        {s.kind === "textarea" && (
          <div className="onboard-field">
            <textarea
              className="text-input onboard-textarea"
              placeholder={(s.placeholder || "").replace(/&rsquo;/g, "\u2019")}
              value={value || ""}
              onChange={e => setAnswer(e.target.value)}
              rows={4}
              autoFocus
            />
            <div className="onboard-charcount">
              {trimmed.length < (s.minChars || 0)
                ? `${s.minChars - trimmed.length} more chars`
                : `${trimmed.length} chars`}
            </div>
          </div>
        )}

        {s.kind === "choice" && (
          <div className="onboard-choices">
            {s.options.map(opt => (
              <button
                key={opt}
                className={`onboard-choice ${value === opt ? "on" : ""}`}
                onClick={() => setAnswer(opt)}
              >
                <span className="mark"/>
                <span>{opt}</span>
              </button>
            ))}
          </div>
        )}

        {errorMessage && step === STEPS.length - 1 && (
          <div className="onboard-error" role="alert">{errorMessage}</div>
        )}

        <div className="onboard-nav">
          {step > 0 ? (
            <button className="onboard-skip" onClick={back} disabled={submitting}>Back</button>
          ) : (
            <span className="onboard-skip" aria-hidden="true"/>
          )}
          <button className="onboard-next" onClick={next} disabled={!canNext || submitting}>
            {submitting ? "Saving…" : step === STEPS.length - 1 ? "Begin" : "Next"}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Onboarding });