/* ============================================================
   resume_interview.jsx — интервью на родном языке.
   Человек отвечает тапами и своими словами; из ответов
   собирается профиль, из профиля — резюме. Никакой клавиатуры
   не требуется: расчёт на людей, которым тяжело печатать.
   ============================================================ */

/* ---------- шапка: насколько резюме заполнено ---------- */
function ResumeProgress({ profile, pct, rt, lang }) {
  const chips = [];
  if (profile.name) chips.push({ icon: 'users', text: profile.name });
  if (profile.age) chips.push({ icon: 'calendar', text: `${profile.age}` });
  if (profile.city) chips.push({ icon: 'pin', text: tr(profile.city, lang) });
  if (profile.prof) chips.push({ icon: 'tool', text: tr((PROF_CV[profile.prof] || PROF_CV.other).title, lang) });
  if (profile.exp != null) chips.push({ icon: 'briefcase', text: expWords(profile.exp, lang) });
  if (profile.certUploaded) chips.push({ icon: 'doc', text: rt.cv_certs });
  if (profile.photo) chips.push({ icon: 'camera', text: rt.photoDone });

  if (!chips.length) return null;
  return (
    <div style={{
      flexShrink: 0, padding: '10px 14px', borderBottom: '1px solid var(--border)',
      background: 'color-mix(in srgb, var(--surface) 70%, transparent)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      animation: 'fadeUp .4s var(--ease-out) both',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <Ring value={pct} size={46} stroke={5} run={true} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.4px' }}>{rt.nav}</div>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{rt.building}…</div>
        </div>
      </div>
      <div className="noscroll" style={{ display: 'flex', gap: 8, overflowX: 'auto', marginTop: 10, paddingBottom: 2 }}>
        {chips.map((c, i) => (
          <div key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 7, padding: '7px 12px 7px 9px',
            borderRadius: 'var(--r-full)', background: 'var(--surface)', border: '1px solid var(--border)',
            boxShadow: 'var(--shadow-1)', whiteSpace: 'nowrap', flexShrink: 0,
            animation: `chipFly .5s var(--spring) ${i * 0.04}s both`,
          }}>
            <span style={{ width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--brand-tint)', color: 'var(--amber-deep)' }}>
              <Icon name={c.icon} size={14} stroke={2.2} />
            </span>
            <span style={{ fontSize: 12.5, fontWeight: 700 }}>{c.text}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- «вы сказали» → «в резюме это будет так» ---------- */
function SampleCard({ duty, lang, rt }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, animation: 'popIn .45s var(--spring) both' }}>
      <AdvisorDot />
      <div style={{
        maxWidth: '86%', background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: '4px 18px 18px 18px', padding: '13px 15px', boxShadow: 'var(--shadow-1)',
      }}>
        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '.5px', textTransform: 'uppercase', color: 'var(--text-3)' }}>{rt.howItSounds}</div>
        <div style={{ fontSize: 14, color: 'var(--text-2)', marginTop: 3 }}>«{tr(duty, lang)}»</div>
        <div style={{ height: 1, background: 'var(--border)', margin: '11px 0' }} />
        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '.5px', textTransform: 'uppercase', color: 'var(--amber-deep)' }}>{rt.howItSoundsEn}</div>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)', marginTop: 3, lineHeight: 1.4 }}>{duty.en}</div>
      </div>
    </div>
  );
}

/* ---------- множественный выбор: что делали на работе ---------- */
function MultiPick({ duties, lang, rt, onDone }) {
  const [sel, setSel] = useState([]);
  const toggle = (i) => setSel(p => p.includes(i) ? p.filter(x => x !== i) : [...p, i]);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 9, animation: 'fadeUp .35s var(--ease-out) both' }}>
      <div style={{ fontSize: 12, color: 'var(--text-3)', fontWeight: 600, padding: '0 2px' }}>{rt.multiHint}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
        {duties.map((d, i) => {
          const on = sel.includes(i);
          return (
            <button key={i} onClick={() => toggle(i)} style={{
              display: 'flex', alignItems: 'center', gap: 10, textAlign: 'left',
              padding: '11px 13px', borderRadius: 'var(--r-md)', fontSize: 13.5, fontWeight: 600,
              background: on ? 'var(--brand-tint)' : 'var(--surface)',
              border: on ? '1.5px solid var(--amber)' : '1.5px solid var(--border)',
              color: 'var(--text)', boxShadow: 'var(--shadow-1)',
              animation: `fadeUp .3s var(--ease-out) ${i * 0.04}s both`,
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 7, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: on ? 'var(--amber)' : 'transparent', border: on ? 'none' : '1.5px solid var(--border-2)',
                color: 'var(--indigo-900)',
              }}>{on && <Icon name="check" size={14} stroke={3} />}</span>
              {tr(d, lang)}
            </button>
          );
        })}
      </div>
      <button disabled={!sel.length} onClick={() => onDone(sel)} style={{
        height: 50, borderRadius: 'var(--r-lg)', marginTop: 2, fontSize: 15.5, fontWeight: 800,
        background: sel.length ? 'linear-gradient(150deg,var(--amber-soft),var(--amber))' : 'var(--surface-2)',
        color: sel.length ? 'var(--indigo-900)' : 'var(--text-3)',
        boxShadow: sel.length ? '0 10px 24px var(--amber-glow)' : 'none',
      }}>{rt.multiDone}{sel.length ? ` · ${sel.length}` : ''}</button>
    </div>
  );
}

/* ---------- сборка резюме ---------- */
function BuildOverlay({ rt }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 30, display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', gap: 22,
      background: 'color-mix(in srgb, var(--bg) 80%, transparent)', backdropFilter: 'blur(8px)',
      animation: 'fadeIn .3s ease both',
    }}>
      <div style={{ position: 'relative', width: 120, height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {[0, 1, 2].map(i => (
          <span key={i} style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '2px solid var(--amber)', animation: `pulseRing 2s ${i * 0.5}s infinite ease-out` }} />
        ))}
        <div style={{ width: 76, height: 76, borderRadius: '50%', background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--indigo-900)', boxShadow: '0 10px 30px var(--amber-glow)', animation: 'floaty 2.4s ease-in-out infinite' }}>
          <Icon name="n_resume" size={34} stroke={2.2} />
        </div>
      </div>
      <div style={{ textAlign: 'center', padding: '0 30px' }}>
        <div style={{ fontSize: 18, fontWeight: 800 }}>{rt.building}…</div>
        <div style={{ fontSize: 13.5, color: 'var(--text-2)', marginTop: 4 }}>{rt.buildingSub}</div>
      </div>
    </div>
  );
}

Object.assign(window, { ResumeProgress, SampleCard, MultiPick, BuildOverlay });