// AXIS-1 — Onboarding happens in chat. Guided quick-reply flow; finishing
// unlocks Today (with the period widget). Typing a free message instead
// "breaks out" into the standard chat (onEscape) without finishing onboarding.
function OnboardingChat({ onComplete, onEscape }) {
  const STEPS = [
    { q: "Hi — I'm Axis, your health companion. A few quick questions and your space is ready. What brings you here?", chips: ['Sleep', 'Energy & mood', 'Cycle & symptoms', 'Just exploring'] },
    { q: "Got it. Roughly where are you in your cycle right now?", chips: ['Early', 'Mid', 'Late', "I don't track this"] },
    { q: 'And how do you like to keep notes?', chips: ['Quick taps', 'Journaling', 'Voice'] },
  ];
  const [msgs, setMsgs] = React.useState([{ role: 'axis', text: STEPS[0].q, chips: STEPS[0].chips }]);
  const [step, setStep] = React.useState(0);
  const [done, setDone] = React.useState(false);
  const [draft, setDraft] = React.useState('');
  const endRef = React.useRef(null);
  React.useEffect(() => { endRef.current && endRef.current.scrollIntoView({ block: 'end' }); }, [msgs]);

  const Avatar = window.DSAxisAvatar || (() => <span style={{ width: 26, height: 26, borderRadius: 8, background: M.axis, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: `500 13px/1 ${M.sans}` }}>A</span>);

  function pick(chip) {
    const next = step + 1;
    const out = [...msgs.map((m) => ({ ...m, chips: undefined })), { role: 'user', text: chip }];
    if (next < STEPS.length) { out.push({ role: 'axis', text: STEPS[next].q, chips: STEPS[next].chips }); setStep(next); }
    else { out.push({ role: 'axis', text: "That's everything I need — your space is ready." }); setDone(true); }
    setMsgs(out);
  }
  function sendFree() { const t = draft.trim(); if (!t) return; onEscape(t); }

  return (
    <div style={{ background: M.canvas, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '10px 16px', borderBottom: `1px solid ${M.rule}`, display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
        <div style={{ width: 24, height: 24, borderRadius: 7, background: M.axis, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: `500 13px/1 ${M.sans}` }}>A</div>
        <div style={{ font: `500 15px/1 ${M.sans}`, color: M.ink }}>Setting up your space</div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 16px 8px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {msgs.map((m, i) => m.role === 'user' ? (
          <div key={i} style={{ alignSelf: 'flex-end', maxWidth: '80%', background: M.axis, color: '#fff', borderRadius: '16px 16px 4px 16px', padding: '10px 13px', font: `400 14px/1.4 ${M.sans}` }}>{m.text}</div>
        ) : (
          <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', maxWidth: '88%' }}>
            <div style={{ marginTop: 2 }}><Avatar size={26} radius={8} /></div>
            <div>
              <div style={{ background: M.surface, border: `1px solid ${M.rule}`, borderRadius: '16px 16px 16px 4px', padding: '11px 14px', font: `400 14px/1.5 ${M.sans}`, color: M.ink }}>{m.text}</div>
              {m.chips && (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginTop: 10 }}>
                  {m.chips.map((c) => (
                    <button key={c} onClick={() => pick(c)} style={{ background: M.surface, border: `1px solid ${M.axis}`, color: M.axisDark, borderRadius: 999, padding: '8px 13px', font: `500 13px/1 ${M.sans}`, cursor: 'pointer' }}>{c}</button>
                  ))}
                </div>
              )}
            </div>
          </div>
        ))}
        {done && (
          <div style={{ marginTop: 6 }}>
            <DSButton full onClick={onComplete}>Enter Axis</DSButton>
          </div>
        )}
        <div ref={endRef} />
      </div>

      <div style={{ borderTop: `1px solid ${M.rule}`, padding: '10px 12px', background: M.canvas, flexShrink: 0 }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <input value={draft} onChange={(e) => setDraft(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') sendFree(); }}
            placeholder="Or just type to chat with Axis…"
            style={{ flex: 1, padding: '11px 14px', borderRadius: 12, border: `1px solid ${M.rule}`, background: M.surface, font: `400 14px/1 ${M.sans}`, color: M.ink, outline: 'none' }} />
          <button onClick={sendFree} aria-label="Send" style={{ width: 42, height: 42, borderRadius: 12, background: M.axis, color: '#fff', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.MIcons.ArrowUp size={18} />
          </button>
        </div>
        <div style={{ font: `400 11px/1.4 ${M.sans}`, color: M.inkFaint, marginTop: 7, textAlign: 'center' }}>
          Answer the prompts to finish — or type anything to jump straight into chat.
        </div>
      </div>
    </div>
  );
}
window.OnboardingChat = OnboardingChat;