/* Nudge — onboarding.jsx: first-run flow.
   Three steps: Welcome (name) → How it works → First capture.
   Replaces the whole app until complete. Mounted by mountNudge()
   in app.jsx when braindump.onboarded isn't set and the board is
   empty. onComplete() persists the flag and swaps in the real app.
   Self-contained: uses global DumpStore + DumpAPI only. */

function OnbDots({ step }) {
  return (
    <div className="onb-dots" aria-hidden="true">
      {[0, 1, 2].map((i) => <span key={i} className={'onb-dot' + (i === step ? ' on' : '')}></span>)}
    </div>
  );
}

/* Step 1 — Welcome + optional name */
function OnbWelcome({ name, setName, onNext }) {
  const ref = useRef(null);
  useEffect(() => { const t = setTimeout(() => ref.current && ref.current.focus(), 120); return () => clearTimeout(t); }, []);
  const submit = (e) => { e.preventDefault(); onNext(); };
  return (
    <div className="onb-step onb-welcome">
      <div className="onb-logo"><span className="onb-mark"></span></div>
      <h1 className="onb-title">Enstow carries your list<br />so you don’t have to.</h1>
      <form className="onb-nameform" onSubmit={submit}>
        <label className="onb-name-label" htmlFor="onb-name-input">What should we call you? <span className="onb-optional">optional</span></label>
        <input id="onb-name-input" ref={ref} className="onb-name" type="text" placeholder="First name — or skip it"
          value={name} onChange={(e) => setName(e.target.value)} aria-label="Your name (optional)" />
        <p className="onb-name-help">You can change this anytime in Settings.</p>
        <button className="btn btn-primary onb-cta" type="submit">Let’s go →</button>
        <button type="button" className="onb-skip" onClick={onNext}>Skip for now →</button>
      </form>
      <OnbDots step={0} />
    </div>
  );
}

/* Step 2 — How it works */
function OnbHow({ onNext }) {
  const blocks = [
    { icon: Icons.capture(22), title: 'Capture', body: 'Offload whatever’s in your head — tasks, errands, worries, half-formed ideas. Don’t filter it.' },
    { icon: Icons.sparkle(22), title: 'Sort', body: 'Enstow reads what you wrote and organises it for you. No categories to choose. No decisions.' },
    { icon: Icons.timer(22), title: 'Focus', body: 'When you’re ready to act, Enstow tells you what to do next. One thing at a time.' }
  ];
  return (
    <div className="onb-step onb-how">
      <h2 className="onb-h2">Here’s all you need to know.</h2>
      <div className="onb-blocks">
        {blocks.map((b) => (
          <div className="onb-block" key={b.title}>
            <span className="onb-block-icon">{b.icon}</span>
            <div className="onb-block-text">
              <span className="onb-block-title">{b.title}</span>
              <p className="onb-block-body">{b.body}</p>
            </div>
          </div>
        ))}
      </div>
      <button className="btn btn-primary onb-cta" onClick={onNext}>Got it →</button>
      <OnbDots step={1} />
    </div>
  );
}

/* Step 3 — First capture (the win) */
function OnbCapture({ onComplete }) {
  const ref = useRef(null);
  const [text, setText] = useState('');
  const [busy, setBusy] = useState(false);
  const [idle, setIdle] = useState(false); // after 3s of no typing with empty field → offer skip
  const [summary, setSummary] = useState(null);
  const idleTimer = useRef(null);

  useEffect(() => { const t = setTimeout(() => ref.current && ref.current.focus(), 120); return () => clearTimeout(t); }, []);

  // Offer "Skip for now" once they've sat on an empty field for 3s.
  useEffect(() => {
    clearTimeout(idleTimer.current);
    if (text.trim()) { setIdle(false); return; }
    idleTimer.current = setTimeout(() => setIdle(true), 3000);
    return () => clearTimeout(idleTimer.current);
  }, [text]);

  const finishTo = (route) => { try { localStorage.setItem('braindump.onboarded', 'true'); } catch (e) {} onComplete(route); };

  const go = async () => {
    const raw = text.trim();
    if (!raw) { finishTo('capture'); return; } // empty → skip
    setBusy(true);
    try {
      const n = await DumpAPI.processDump(raw);
      const after = DumpStore.getState();
      const inbox = after.tasks.filter((t) => t.bucket === 'inbox');
      const clarifyN = inbox.filter((t) => (window.needsClarify ? needsClarify(t) : false)).length;
      const twoN = after.tasks.filter((t) => t.minutes && t.minutes <= 2).length;
      setSummary({ n: n || 0, clarifyN: clarifyN, twoN: twoN });
      setBusy(false);
    } catch (e) {
      DumpAPI.toast(e && e.friendly ? e.message : 'Something went wrong — try again.');
      setBusy(false);
    }
  };
  const proceed = () => finishTo(summary && summary.clarifyN > 0 ? 'clarify' : 'tasks');

  if (summary) {
    return (
      <div className="onb-step onb-capture">
        <span className="onb-sum-mark">{Icons.sparkle(26)}</span>
        <h2 className="onb-h2">Here’s what I found.</h2>
        <p className="onb-lead">Sorted {summary.n} thing{summary.n === 1 ? '' : 's'} for you — no filing required.</p>
        <ul className="onb-sum-list">
          {summary.clarifyN > 0 ? <li>{summary.clarifyN} need one quick question</li> : null}
          {summary.twoN > 0 ? <li>{summary.twoN} tiny task{summary.twoN === 1 ? '' : 's'} to do on Today</li> : null}
          {summary.clarifyN === 0 && summary.twoN === 0 ? <li>All {summary.n} ready on your board</li> : null}
        </ul>
        <button className="btn btn-primary onb-cta" onClick={proceed}>
          {summary.clarifyN > 0 ? 'Answer a couple of questions →' : 'See my board →'}
        </button>
        <OnbDots step={2} />
      </div>
    );
  }

  return (
    <div className="onb-step onb-capture">
      <h2 className="onb-h2">Now try it.</h2>
      <p className="onb-lead">What’s been on your mind lately? Could be anything — an errand, a worry, something you keep forgetting. Just type it out, one thing per comma.</p>
      <textarea ref={ref} className="dump-box onb-box" readOnly={busy} value={text}
        placeholder="e.g. book dentist, reply to Sam about Friday, buy Leo’s shoes, that thing about the car…"
        onChange={(e) => setText(e.target.value)}></textarea>
      <p className="onb-box-hint">No categories, no decisions — sorting is our job.</p>
      <button className="btn btn-primary onb-cta" onClick={go} disabled={busy}>
        {busy ? <span className="spinner"></span> : null}
        {busy ? 'Reading what you wrote…' : (idle && !text.trim() ? 'Skip for now →' : 'Sort it out →')}
      </button>
      <OnbDots step={2} />
    </div>
  );
}

function OnboardingFlow({ onComplete }) {
  const startName = (() => { try { return DumpStore.getState().settings.userName || ''; } catch (e) { return ''; } })();
  const [step, setStep] = useState(0);
  const [name, setName] = useState(startName);

  // Persist the name immediately so a mid-flow reload keeps it (spec edge case).
  const commitName = () => {
    const n = name.trim();
    DumpStore.set((s) => ({ settings: { ...s.settings, userName: n } }));
  };
  const toHow = () => { commitName(); setStep(1); };

  return (
    <div className="onb-root" data-screen-label="Onboarding">
      <div className="onb-stage">
        {step === 0 ? <OnbWelcome name={name} setName={setName} onNext={toHow} />
          : step === 1 ? <OnbHow onNext={() => setStep(2)} />
            : <OnbCapture onComplete={onComplete} />}
      </div>
    </div>
  );
}

window.OnboardingFlow = OnboardingFlow;