/* ============================================================
   screen_profile.jsx — Profile + intent status switcher
   ============================================================ */

function StatusSwitch({ status, setStatus, t, lang }) {
  const opts = [
    { key: 'active', label: t.st_active, short: { ru: 'Ищу', uz: 'Qidiraman' }, desc: t.st_active_d, color: 'var(--good)', icon: 'eye' },
    { key: 'open', label: t.st_open, short: { ru: 'Открыт', uz: 'Ochiq' }, desc: t.st_open_d, color: 'var(--amber)', icon: 'spark' },
    { key: 'closed', label: t.st_closed, short: { ru: 'Не ищу', uz: 'Yo‘q' }, desc: t.st_closed_d, color: 'var(--text-3)', icon: 'lock' },
  ];
  const cur = opts.find(o => o.key === status) || opts[0];
  return (
    <div style={{ padding: '18px 18px 16px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
        <span style={{ fontSize: 15, fontWeight: 800 }}>{t.statusTitle}</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 700, color: cur.color }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: cur.color, boxShadow: `0 0 0 3px color-mix(in srgb, ${cur.color} 22%, transparent)` }} />
          {cur.label}
        </span>
      </div>
      <div style={{ fontSize: 12.5, color: 'var(--text-3)', marginBottom: 14 }}>{t.statusSub}</div>

      {/* segmented */}
      <div style={{ display: 'flex', gap: 6, padding: 5, borderRadius: 'var(--r-full)', background: 'var(--surface-2)', position: 'relative' }}>
        {opts.map(o => {
          const on = o.key === status;
          return (
            <button key={o.key} onClick={() => setStatus(o.key)} style={{
              flex: 1, height: 42, borderRadius: 'var(--r-full)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              background: on ? 'var(--surface)' : 'transparent', boxShadow: on ? 'var(--shadow-1)' : 'none',
              color: on ? 'var(--text)' : 'var(--text-3)', fontWeight: 700, fontSize: 12.5, transition: 'all .25s var(--ease)',
            }}>
              <Icon name={o.icon} size={15} stroke={2.2} style={{ color: on ? o.color : 'var(--text-3)' }} />
              {tr(o.short, lang)}
            </button>
          );
        })}
      </div>
      <div key={status} style={{ display: 'flex', gap: 9, marginTop: 14, padding: '12px 14px', borderRadius: 'var(--r-md)', background: 'var(--brand-tint)', animation: 'fadeUp .35s var(--ease-out) both' }}>
        <Icon name={cur.icon} size={17} stroke={2} style={{ color: cur.color, flexShrink: 0, marginTop: 1 }} />
        <span style={{ fontSize: 13, lineHeight: 1.4, color: 'var(--text-2)', fontWeight: 500 }}>{cur.desc}</span>
      </div>
    </div>
  );
}

function ProfileScreen({ lang, theme, setLang, setTheme, t, status, setStatus, go }) {
  const val = useCountUp(PERSONA.value, 1100, true);
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      <Header title={t.nav_profile} right={<QuickToggles lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />} t={t} />

      <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* identity */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, animation: 'fadeUp .4s both' }}>
          <Avatar size={64} lang={lang} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 21, fontWeight: 800, letterSpacing: '-.4px' }}>{tr(PERSONA.name, lang)}</div>
            <div style={{ fontSize: 14, color: 'var(--text-2)', fontWeight: 600 }}>{tr(PERSONA.goal, lang)}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12.5, color: 'var(--text-3)', marginTop: 3 }}>
              <Icon name="pin" size={13} stroke={2} /> {tr(PERSONA.location, lang)} · {tr(PERSONA.edu, lang)}
            </div>
          </div>
        </div>

        <StatusSwitch status={status} setStatus={setStatus} t={t} lang={lang} />

        {/* value */}
        <div style={{ padding: '18px', borderRadius: 'var(--r-xl)', background: 'radial-gradient(120% 100% at 100% 0%, #2a3a6e, #1a2348 75%)', color: '#fff', boxShadow: 'var(--shadow-2)', position: 'relative', overflow: 'hidden', flexShrink: 0, animation: 'fadeUp .5s .05s both' }}>
          <div style={{ position: 'absolute', top: -30, right: -20, width: 120, height: 120, borderRadius: '50%', background: 'radial-gradient(circle,var(--amber-glow),transparent 70%)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: 'rgba(255,255,255,.65)', textTransform: 'uppercase', letterSpacing: '.4px' }}>{t.estValue}</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginTop: 6 }}>
              <span style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-1.2px', lineHeight: 1 }}>{fmtSum(val)}</span>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,.55)', marginBottom: 3, whiteSpace: 'nowrap' }}>{t.perMonth}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
              <div style={{ flex: 1, height: 6, borderRadius: 99, background: 'rgba(255,255,255,.15)', position: 'relative' }}>
                <div style={{ position: 'absolute', left: '20%', right: '18%', top: 0, bottom: 0, borderRadius: 99, background: 'linear-gradient(90deg,var(--amber-soft),var(--amber))' }} />
                <div style={{ position: 'absolute', left: '52%', top: -3, width: 12, height: 12, borderRadius: '50%', background: '#fff', boxShadow: '0 2px 6px rgba(0,0,0,.3)' }} />
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'rgba(255,255,255,.5)', marginTop: 6 }}>
              <span>{fmtSum(PERSONA.valueLow)}</span><span>{fmtSum(PERSONA.valueHigh)}</span>
            </div>
          </div>
        </div>

        {/* skills */}
        <div style={{ padding: '18px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', animation: 'fadeUp .5s .1s both' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <span style={{ fontSize: 15, fontWeight: 800 }}>{t.canonicalSkills}</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-3)' }}>{lang === 'ru' ? 'каноничные' : 'kanonik'}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {SKILLS.map((s, i) => <SkillBar key={i} skill={s} lang={lang} delay={i * 0.08} />)}
          </div>
        </div>

        {/* languages */}
        <div style={{ padding: '18px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', animation: 'fadeUp .5s .12s both' }}>
          <div style={{ fontSize: 15, fontWeight: 800, marginBottom: 14 }}>{t.languages}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {LANGS.map((l, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 13.5, fontWeight: 700, width: 96, flexShrink: 0 }}>{tr(l, lang)}</span>
                <div style={{ flex: 1, height: 7, borderRadius: 99, background: 'var(--surface-3)', overflow: 'hidden' }}>
                  <div style={{ height: '100%', borderRadius: 99, width: l.pct + '%', transformOrigin: 'left', background: 'linear-gradient(90deg,var(--indigo-500),var(--amber))', animation: `barGrow .8s var(--ease-out) ${i*0.08}s both` }} />
                </div>
                <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-3)', width: 58, textAlign: 'right', flexShrink: 0 }}>{tr(l.lvl, lang)}</span>
              </div>
            ))}
          </div>
        </div>

        {/* experience */}
        <div style={{ padding: '18px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', animation: 'fadeUp .5s .14s both' }}>
          <div style={{ fontSize: 15, fontWeight: 800, marginBottom: 14 }}>{t.expTitle}</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {EXPERIENCE.map((e, i) => (
              <div key={i} style={{ display: 'flex', gap: 12 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                  <span style={{ width: 11, height: 11, borderRadius: '50%', background: i === 0 ? 'var(--amber)' : 'var(--surface-3)', border: i === 0 ? 'none' : '2px solid var(--border-2)', marginTop: 4 }} />
                  {i < EXPERIENCE.length - 1 && <span style={{ flex: 1, width: 2, background: 'var(--border)', margin: '4px 0' }} />}
                </div>
                <div style={{ paddingBottom: i < EXPERIENCE.length - 1 ? 16 : 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 800 }}>{tr(e.role, lang)}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-2)', fontWeight: 600 }}>{tr(e.org, lang)}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 2 }}>{tr(e.period, lang)} · {tr(e.dur, lang)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* completeness */}
        <button onClick={() => go('advisor')} style={{ textAlign: 'left', display: 'flex', alignItems: 'center', gap: 14, padding: '16px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', animation: 'fadeUp .5s .15s both' }}>
          <Ring value={PERSONA.completeness} size={54} stroke={6} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 800 }}>{t.completeness} {PERSONA.completeness}%</div>
            <div style={{ fontSize: 12.5, color: 'var(--amber-deep)', fontWeight: 700, marginTop: 2, display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name="spark" size={14} stroke={2.2} /> {t.improve}
            </div>
          </div>
          <Icon name="chevron" size={18} stroke={2.2} style={{ color: 'var(--text-3)' }} />
        </button>

        {/* privacy */}
        <div style={{ display: 'flex', gap: 12, padding: '16px', borderRadius: 'var(--r-xl)', background: 'var(--brand-tint)', border: '1px solid var(--border)', animation: 'fadeUp .5s .2s both' }}>
          <span style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--surface)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="lock" size={19} stroke={2} /></span>
          <div>
            <div style={{ fontSize: 14, fontWeight: 800 }}>{t.privacy}</div>
            <div style={{ fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.4, marginTop: 3 }}>{t.privacyNote}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProfileScreen, StatusSwitch });