/* =========================================================
   Tappt dashboard — onboarding flow
   ========================================================= */
const { CARDS: OB_CARDS, LINK_TYPES: OB_LT, typeMeta: ob_meta, AVATAR_COLORS: OB_AV, Store: OB_Store, I: OB_I, BioPreview: OB_Bio, ThemeToggle: OB_ThemeToggle, BrandIcon: OB_Brand } = window;
const { useState: obUseState, useEffect: obUseEffect } = React;

function Onboarding({ user, onDone, themeMode, setThemeMode }) {
  const [step, setStep] = obUseState(0);
  const [draft, setDraft] = obUseState({
    handle: user.handle || '',
    name: user.name || '',
    bio: user.bio || '',
    avatarColor: user.avatarColor || OB_AV[0],
    activeCard: user.activeCard || null,
    links: user.links && user.links.length ? user.links : [],
    verified: true,
  });
  const set = (patch) => setDraft((d) => ({ ...d, ...patch }));

  const TAKEN = ['joker', 'admin', 'tappt', 'max', 'official'];
  const handleClean = draft.handle.toLowerCase().replace(/[^a-z0-9_.]/g, '');
  const handleOk = handleClean.length >= 3 && !TAKEN.includes(handleClean);
  const handleBad = handleClean.length > 0 && (handleClean.length < 3 || TAKEN.includes(handleClean));

  const steps = [
    {
      title: 'Claim your handle',
      sub: 'This is your tappt.io address — the link people land on when they tap your card.',
      valid: handleOk,
      body: (
        <div>
          <div className="input-prefix">
            <span className="pfx">tappt.io/</span>
            <input className="input" placeholder="yourname" value={draft.handle}
              onChange={(e) => set({ handle: e.target.value })} autoFocus />
          </div>
          <div className={'handle-preview'}>
            <span>Your link: <b>tappt.io/{handleClean || 'yourname'}</b></span>
            {handleOk && <span className="handle-status ok">{OB_I.check({ width: 13, height: 13 })} Available</span>}
            {handleBad && <span className="handle-status bad">{handleClean.length < 3 ? 'Too short' : 'Taken'}</span>}
          </div>
        </div>
      ),
    },
    {
      title: 'Who are you?',
      sub: 'Your name and a short bio. You can change these later.',
      valid: draft.name.trim().length > 0,
      body: (
        <div>
          <div className="field">
            <label>Display name</label>
            <input className="input" placeholder="Your name" value={draft.name} onChange={(e) => set({ name: e.target.value })} autoFocus />
          </div>
          <div className="field">
            <label>Bio</label>
            <textarea className="textarea" placeholder="A short line about you" value={draft.bio} onChange={(e) => set({ bio: e.target.value })} maxLength={80} />
          </div>
        </div>
      ),
    },
  ];

  // skip steps already completed during sign-up (handle + name captured there)
  const visible = steps.filter((s) => {
    if (s.title === 'Claim your handle' && user.handle) return false;
    if (s.title === 'Who are you?' && user.name) return false;
    return true;
  });
  const cur = visible[Math.min(step, visible.length - 1)];
  const finish = () => {
    const finalUser = { ...user, ...draft, handle: (draft.handle || user.handle || '').toLowerCase().replace(/[^a-z0-9_.]/g, ''), onboarded: true };
    OB_Store.saveUser(finalUser);
    onDone(finalUser);
  };

  // If sign-up already captured everything (handle + name), there are no steps left to show.
  // Don't render an empty shell (that crashed to a blank screen) — just complete onboarding.
  obUseEffect(() => { if (visible.length === 0) finish(); }, []);
  if (visible.length === 0 || !cur) return null;

  return (
    <div className="onb">
      <div className="onb-top">
        <img className="onb-logo dark-logo" src="assets/logo-white.png" alt="Tappt" />
        <img className="onb-logo light-logo" src="assets/logo-black.png" alt="Tappt" />
        <div className="onb-steps">
          {visible.map((_, i) => <div key={i} className={'s' + (i <= step ? ' on' : '')} />)}
        </div>
        {setThemeMode && OB_ThemeToggle
          ? <OB_ThemeToggle theme={document.documentElement.dataset.theme} onToggle={() => setThemeMode(document.documentElement.dataset.theme === 'light' ? 'dark' : 'light')} />
          : <button className="onb-skip" onClick={finish}>Skip</button>}
      </div>

      <div className="onb-body fade-up" key={step}>
        <h2>{cur.title}</h2>
        <div className="sub">{cur.sub}</div>
        {cur.body}
        <div className="onb-actions">
          {step > 0 && <button className="btn btn-ghost" onClick={() => setStep(step - 1)}>Back</button>}
          {step < visible.length - 1
            ? <button className="btn btn-primary" style={{ flex: 1 }} disabled={!cur.valid} onClick={() => setStep(step + 1)}>Continue {OB_I.arrow({ width: 17, height: 17 })}</button>
            : <button className="btn btn-primary" style={{ flex: 1 }} onClick={finish}>Launch my profile {OB_I.spark({ width: 17, height: 17 })}</button>}
        </div>
      </div>
    </div>
  );
}

window.Onboarding = Onboarding;