/* ============================================================
   screen_onboarding.jsx — первый запуск: выбор языка + опросник
   Правила для аудитории с низкой цифровой грамотностью:
   - один вопрос на экран, ответ — крупная карточка (тап)
   - никакого ввода текста и клавиатуры
   - всегда видно «Вопрос 2 из 5» и кнопка «Назад»
   ============================================================ */

/* ---------- шаг 0: язык ---------- */
function LangPick({ setLang, onNext }) {
  const pick = (l) => { setLang(l); onNext(); };
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 24px 40px', gap: 14 }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, marginBottom: 14, animation: 'fadeUp .5s both' }}>
        <BrandMark size={72} />
        <div style={{ fontSize: 21, fontWeight: 800, letterSpacing: '-.4px', textAlign: 'center' }}>Tilni tanlang · Выбери язык</div>
      </div>
      {[['uz', 'O‘zbekcha', 'UZ'], ['ru', 'Русский', 'RU']].map(([code, name, short], i) => (
        <button key={code} onClick={() => pick(code)} style={{
          height: 72, borderRadius: 'var(--r-lg)', display: 'flex', alignItems: 'center', gap: 14, padding: '0 18px',
          background: 'var(--surface)', border: '1.5px solid var(--border)', boxShadow: 'var(--shadow-1)',
          animation: `fadeUp .5s var(--ease-out) ${0.1 + i * 0.08}s both`,
        }}>
          <span style={{
            width: 46, height: 46, borderRadius: 14, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'var(--brand-tint)', color: 'var(--brand)', fontSize: 15, fontWeight: 800,
          }}>{short}</span>
          <span style={{ flex: 1, textAlign: 'left', fontSize: 19, fontWeight: 800, letterSpacing: '-.3px' }}>{name}</span>
          <Icon name="chevron" size={22} stroke={2.4} style={{ color: 'var(--text-3)' }} />
        </button>
      ))}
    </div>
  );
}

/* ---------- шаг 1: приветствие ---------- */
function Welcome({ t, onNext }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 24px 24px' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', gap: 18 }}>
        <div style={{ animation: 'popIn .6s var(--spring) both' }}><BrandMark size={92} /></div>
        <div style={{ fontSize: 27, fontWeight: 800, letterSpacing: '-.7px', lineHeight: 1.15, animation: 'fadeUp .5s .12s both' }}>{t.ob_hello}</div>
        <div style={{ fontSize: 15.5, lineHeight: 1.5, color: 'var(--text-2)', fontWeight: 500, animation: 'fadeUp .5s .2s both' }}>{t.ob_helloSub}</div>
        <div style={{ display: 'flex', gap: 10, animation: 'fadeUp .5s .28s both' }}>
          {COUNTRY_ORDER.map(c => <Flag key={c} country={c} size={34} />)}
        </div>
      </div>
      <button onClick={onNext} style={{
        height: 60, borderRadius: 'var(--r-lg)', flexShrink: 0,
        background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', color: 'var(--indigo-900)',
        fontSize: 18, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        boxShadow: '0 12px 28px var(--amber-glow)', animation: 'fadeUp .5s .36s both',
      }}>
        {t.ob_go} <Icon name="arrow" size={22} stroke={2.6} />
      </button>
    </div>
  );
}

/* ---------- карточка ответа ---------- */
function AnswerCard({ opt, lang, wide, selected, onPick, delay }) {
  return (
    <button onClick={onPick} style={{
      minHeight: wide ? 64 : 104, borderRadius: 'var(--r-lg)', padding: wide ? '0 16px' : '14px 10px',
      display: 'flex', flexDirection: wide ? 'row' : 'column', alignItems: 'center', justifyContent: wide ? 'flex-start' : 'center', gap: wide ? 14 : 9,
      background: selected ? 'var(--brand-tint)' : 'var(--surface)',
      border: selected ? '2px solid var(--brand)' : '1.5px solid var(--border)',
      boxShadow: 'var(--shadow-1)', textAlign: wide ? 'left' : 'center',
      transition: 'all .18s var(--ease)', animation: `fadeUp .45s var(--ease-out) ${delay}s both`,
    }}>
      {opt.id && FLAG_SVG[opt.id]
        ? <Flag country={opt.id} size={wide ? 34 : 46} />
        : opt.icon
          ? <span style={{
              width: wide ? 40 : 46, height: wide ? 40 : 46, borderRadius: 13, flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: selected ? 'var(--surface)' : 'var(--surface-2)', color: 'var(--brand)',
            }}><Icon name={opt.icon} size={wide ? 21 : 24} stroke={2.2} /></span>
          : null}
      <span style={{ flex: wide ? 1 : 'none', fontSize: wide ? 16.5 : 15, fontWeight: 700, letterSpacing: '-.2px', lineHeight: 1.25 }}>
        {tr(opt.label, lang)}
      </span>
      {selected && <Icon name="check" size={20} stroke={3} style={{ color: 'var(--brand)', flexShrink: 0 }} />}
    </button>
  );
}

/* ---------- экран вопроса ---------- */
function QuestionStep({ step, index, total, lang, t, answer, onPick, onBack }) {
  const wide = step.cols === 1;
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      {/* progress */}
      <div style={{ flexShrink: 0, padding: '2px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
          <button onClick={onBack} style={{
            width: 40, height: 40, borderRadius: '50%', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'var(--surface)', border: '1px solid var(--border)', color: 'var(--text-2)', boxShadow: 'var(--shadow-1)',
          }}>
            <Icon name="chevron" size={20} stroke={2.4} style={{ transform: 'rotate(180deg)' }} />
          </button>
          <span style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--text-3)' }}>{t.ob_step} {index + 1} {t.ob_of} {total}</span>
        </div>
        <div style={{ display: 'flex', gap: 5 }}>
          {Array.from({ length: total }).map((_, k) => (
            <div key={k} style={{
              flex: 1, height: 5, borderRadius: 99,
              background: k <= index ? 'var(--amber)' : 'var(--surface-3)',
              transition: 'background .3s var(--ease)',
            }} />
          ))}
        </div>
      </div>

      {/* question */}
      <div key={index} className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '20px 20px 24px' }}>
        <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-.6px', lineHeight: 1.2, animation: 'fadeUp .4s both' }}>{tr(step.q, lang)}</div>
        {step.hint && <div style={{ fontSize: 14, color: 'var(--text-3)', fontWeight: 500, marginTop: 8, lineHeight: 1.4, animation: 'fadeUp .4s .06s both' }}>{tr(step.hint, lang)}</div>}

        <div style={{
          display: 'grid', gap: 11, marginTop: 20,
          gridTemplateColumns: wide ? '1fr' : '1fr 1fr',
        }}>
          {step.options.map((o, i) => (
            <AnswerCard key={o.id} opt={o} lang={lang} wide={wide} selected={answer === o.id}
              onPick={() => onPick(o.id)} delay={0.06 + i * 0.04} />
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- финальный экран ---------- */
function OnboardDone({ answers, lang, t, onFinish, onRestart }) {
  const chips = ONBOARD.map(s => {
    const o = s.options.find(x => x.id === answers[s.key]);
    return o ? { key: s.key, country: FLAG_SVG[o.id] ? o.id : null, icon: o.icon, label: tr(o.label, lang) } : null;
  }).filter(Boolean);

  const dest = answers.dest;
  const count = dest && dest !== 'any' ? JOBS.filter(j => j.country === dest).length : JOBS.length;

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 22px 24px', minHeight: 0 }}>
      <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', gap: 14, padding: '10px 0' }}>
        <div style={{
          width: 92, height: 92, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', color: 'var(--indigo-900)',
          boxShadow: '0 14px 34px var(--amber-glow)', animation: 'popIn .6s var(--spring) both',
        }}>
          <Icon name="check" size={46} stroke={3} />
        </div>
        <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-.6px', animation: 'fadeUp .5s .1s both' }}>{t.ob_doneTitle}</div>
        <div style={{ fontSize: 15.5, color: 'var(--text-2)', fontWeight: 500, lineHeight: 1.45, animation: 'fadeUp .5s .16s both' }}>{t.ob_doneSub}</div>

        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 18px', borderRadius: 99,
          background: 'color-mix(in srgb,var(--good) 14%,transparent)', color: 'var(--good)',
          fontSize: 16, fontWeight: 800, animation: 'fadeUp .5s .22s both',
        }}>
          <Icon name="briefcase" size={18} stroke={2.4} /> {nVac(count, lang)}
        </div>

        {/* answers recap */}
        <div style={{ width: '100%', marginTop: 8, animation: 'fadeUp .5s .28s both' }}>
          <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.4px', marginBottom: 9 }}>{t.ob_yourAnswers}</div>
          <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', justifyContent: 'center' }}>
            {chips.map(c => (
              <span key={c.key} style={{
                display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 13px', borderRadius: 99,
                background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)',
                fontSize: 13.5, fontWeight: 700,
              }}>
                {c.country ? <Flag country={c.country} size={17} /> : c.icon ? <Icon name={c.icon} size={15} stroke={2.2} style={{ color: 'var(--brand)' }} /> : null}
                {c.label}
              </span>
            ))}
          </div>
        </div>
      </div>

      <div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <button onClick={onFinish} style={{
          height: 60, borderRadius: 'var(--r-lg)',
          background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', color: 'var(--indigo-900)',
          fontSize: 18, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          boxShadow: '0 12px 28px var(--amber-glow)', animation: 'fadeUp .5s .34s both',
        }}>
          {t.ob_seeJobs} <Icon name="arrow" size={22} stroke={2.6} />
        </button>
        <button onClick={onRestart} style={{
          height: 46, borderRadius: 'var(--r-md)', background: 'transparent', color: 'var(--text-3)',
          fontSize: 14, fontWeight: 700, animation: 'fadeUp .5s .4s both',
        }}>{t.ob_change}</button>
      </div>
    </div>
  );
}

/* ---------- контейнер онбординга ---------- */
function OnboardingScreen({ lang, setLang, theme, setTheme, t, onFinish }) {
  // stage: -2 язык · -1 приветствие · 0..N-1 вопросы · N готово
  const [stage, setStage] = useState(-2);
  const [answers, setAnswers] = useState({});
  const total = ONBOARD.length;

  const pick = (key, id) => {
    setAnswers(a => ({ ...a, [key]: id }));
    setTimeout(() => setStage(s => s + 1), 220); // короткая пауза — видно галочку
  };
  const back = () => setStage(s => Math.max(-1, s - 1));

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      {/* верхняя строка: язык/тема, кроме экрана выбора языка */}
      {stage > -2 && (
        <div style={{ flexShrink: 0, display: 'flex', justifyContent: 'flex-end', padding: '2px 16px 6px' }}>
          <QuickToggles lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />
        </div>
      )}

      {stage === -2 && <LangPick setLang={setLang} onNext={() => setStage(-1)} />}
      {stage === -1 && <Welcome t={t} onNext={() => setStage(0)} />}
      {stage >= 0 && stage < total && (
        <QuestionStep
          step={ONBOARD[stage]} index={stage} total={total} lang={lang} t={t}
          answer={answers[ONBOARD[stage].key]}
          onPick={(id) => pick(ONBOARD[stage].key, id)}
          onBack={back}
        />
      )}
      {stage >= total && (
        <OnboardDone answers={answers} lang={lang} t={t}
          onFinish={() => onFinish(answers)} onRestart={() => { setAnswers({}); setStage(0); }} />
      )}
    </div>
  );
}

Object.assign(window, { OnboardingScreen });