// onboarding.jsx — анкета при первом входе: цель (7 вариантов из data/goals.json + своя),
// уровень владения ИИ 1–5, роль, чем готов делиться. Сохраняется в app.profiles
// (PUT /api/profile), в ответ — 3 рекомендованных материала по цели.

const ERR_TEXT_PROFILE = {
  bad_goal: 'Выберите цель.', goal_custom_required: 'Опишите свою цель в паре слов.',
  bad_level: 'Отметьте уровень владения ИИ.', bad_role: 'Выберите роль.',
};

function Onboarding({ nav }) {
  const cfg = CFG();
  const prev = ME().profile;
  const [goal, setGoal] = React.useState(prev ? prev.goal : '');
  const [goalCustom, setGoalCustom] = React.useState((prev && prev.goal_custom) || '');
  const [level, setLevel] = React.useState(prev ? prev.ai_level : 0);
  const [role, setRole] = React.useState(prev ? prev.role : '');
  const [roleCustom, setRoleCustom] = React.useState((prev && prev.role_custom) || '');
  const [share, setShare] = React.useState(prev ? (prev.share || []) : []);
  const [shareCustom, setShareCustom] = React.useState((prev && prev.share_custom) || '');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [done, setDone] = React.useState(null);

  const toggleShare = (id) => setShare(s => s.includes(id) ? s.filter(x => x !== id) : s.concat(id));
  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    if (!goal) return setErr(ERR_TEXT_PROFILE.bad_goal);
    if (goal === 'other' && !goalCustom.trim()) return setErr(ERR_TEXT_PROFILE.goal_custom_required);
    if (!level) return setErr(ERR_TEXT_PROFILE.bad_level);
    if (!role) return setErr(ERR_TEXT_PROFILE.bad_role);
    setBusy(true); setErr('');
    try {
      const r = await fetch('/api/profile', { method:'PUT', credentials:'same-origin', headers:{ 'Content-Type':'application/json' },
        body: JSON.stringify({ goal, goal_custom: goalCustom, ai_level: level, role, role_custom: roleCustom, share, share_custom: shareCustom }) });
      const j = await r.json().catch(()=>null);
      if (r.ok && j && j.ok) {
        window.__ME = { ...ME(), profile: j.profile };
        setDone(j.recommended || []);
        window.scrollTo(0, 0);
      } else setErr(ERR_TEXT_PROFILE[j && j.error] || 'Не удалось сохранить — попробуйте ещё раз.');
    } catch (e2) { setErr('Сервер не ответил, попробуйте через минуту.'); }
    setBusy(false);
  };
  const skip = () => { try { sessionStorage.setItem('cm_onboarding_skip', '1'); } catch (e) {} nav('home'); };

  if (done) {
    const g = (cfg.goals || []).find(x => x.id === goal);
    return (
      <div className="os-frame">
        <Sidebar active="home" nav={nav}/>
        <div className="os-main">
          <Topbar crumbs={['Сообщество', 'Анкета']}/>
          <div className="os-content">
            <div>
              <div className="os-eyebrow" style={{ marginBottom: 10 }}>Анкета сохранена</div>
              <h1 className="os-h1">С чего начать.</h1>
              <p className="os-sub" style={{ marginTop: 8, maxWidth: 620 }}>
                Цель — <b style={{ color:'var(--ink)' }}>{goal === 'other' ? goalCustom : g && g.title}</b>. Вот три материала под неё;
                цель можно поменять в профиле.
              </p>
            </div>
            <div className="cm-grid-3">{done.map(r => <MatCard key={r.slug} it={r} nav={nav}/>)}</div>
            <div><button className="os-btn" onClick={()=>nav('home')}>На главную →</button></div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="os-frame">
      <Sidebar active="home" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Анкета']}/>
        <form className="os-content cm-form" onSubmit={submit} noValidate>
          <div>
            <div className="os-eyebrow" style={{ marginBottom: 10 }}>{prev ? 'Анкета участника' : 'Первый вход · 2 минуты'}</div>
            <h1 className="os-h1">Зачем вы в сообществе?</h1>
            <p className="os-sub" style={{ marginTop: 8, maxWidth: 620 }}>
              По ответам подберём материалы, напомним о цели и подскажем, с кем из участников стоит пообщаться.
            </p>
          </div>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">1</span>Главная цель на ближайшие месяцы</legend>
            <div className="cm-goals">
              {(cfg.goals || []).map(g => (
                <label key={g.id} className={`cm-opt${goal === g.id ? ' on' : ''}`}>
                  <input type="radio" name="goal" value={g.id} checked={goal === g.id} onChange={()=>{ setGoal(g.id); setErr(''); }}/>
                  <span className="cm-opt-t">{g.title}</span>
                  {g.hint && <span className="cm-opt-d">{g.hint}</span>}
                </label>
              ))}
              <label className={`cm-opt${goal === 'other' ? ' on' : ''}`}>
                <input type="radio" name="goal" value="other" checked={goal === 'other'} onChange={()=>{ setGoal('other'); setErr(''); }}/>
                <span className="cm-opt-t">Своя цель</span>
                <span className="cm-opt-d">Напишите своими словами</span>
              </label>
            </div>
            {goal === 'other' && (
              <input className="os-login-input" style={{ marginTop: 10 }} type="text" maxLength={300} autoFocus
                     placeholder="Например: научить отдел продаж готовить КП с ИИ" value={goalCustom}
                     onChange={e=>setGoalCustom(e.target.value)} aria-label="Своя цель"/>
            )}
          </fieldset>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">2</span>Как вы сейчас владеете ИИ</legend>
            <div className="cm-levels" role="radiogroup">
              {(cfg.levels || []).map(l => (
                <label key={l.id} className={`cm-level${level === l.id ? ' on' : ''}`}>
                  <input type="radio" name="level" value={l.id} checked={level === l.id} onChange={()=>{ setLevel(l.id); setErr(''); }}/>
                  <span className="cm-level-n">{l.id}</span>
                  <span className="cm-level-t">{l.title}</span>
                  <span className="cm-level-d">{l.hint}</span>
                </label>
              ))}
            </div>
          </fieldset>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">3</span>Ваша роль</legend>
            <div className="os-chips">
              {(cfg.roles || []).map(r => (
                <button type="button" key={r.id} className={role === r.id ? 'on' : ''} aria-pressed={role === r.id}
                        onClick={()=>{ setRole(r.id); setErr(''); }}>{r.title}</button>
              ))}
            </div>
            {role === 'other' && (
              <input className="os-login-input" style={{ marginTop: 10 }} type="text" maxLength={120}
                     placeholder="Кем вы работаете" value={roleCustom} onChange={e=>setRoleCustom(e.target.value)} aria-label="Роль"/>
            )}
          </fieldset>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">4</span>Чем готовы делиться с участниками <span className="cm-q-opt">можно несколько или ничего</span></legend>
            <div className="os-chips">
              {(cfg.share || []).map(s => (
                <button type="button" key={s.id} className={share.includes(s.id) ? 'on' : ''} aria-pressed={share.includes(s.id)}
                        onClick={()=>toggleShare(s.id)}>{share.includes(s.id) ? '✓ ' : ''}{s.title}</button>
              ))}
            </div>
            <input className="os-login-input" style={{ marginTop: 10 }} type="text" maxLength={300}
                   placeholder="Или своими словами (необязательно)" value={shareCustom} onChange={e=>setShareCustom(e.target.value)}
                   aria-label="Чем готовы делиться"/>
          </fieldset>

          {err && <div className="os-login-err show" role="alert">{err}</div>}
          <div style={{ display:'flex', gap: 12, alignItems:'center', flexWrap:'wrap' }}>
            <button className="os-btn tg" type="submit" disabled={busy} style={{ height: 48 }}>
              {busy ? 'Сохраняем…' : prev ? 'Сохранить' : 'Готово — подобрать материалы →'}
            </button>
            {!prev && <button type="button" className="os-btn ghost" onClick={skip}>Заполнить позже</button>}
            {prev && <button type="button" className="os-btn ghost" onClick={()=>nav('profile')}>Отмена</button>}
          </div>
        </form>
      </div>
    </div>
  );
}
window.Onboarding = Onboarding;