/* ============================================================
   screen_jobs.jsx — Matched roles (with reasoning) + internships
   ============================================================ */

function MatchPill({ value }) {
  const color = value >= 90 ? 'var(--good)' : value >= 80 ? 'var(--amber)' : 'var(--indigo-500)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
      <Ring value={value} size={52} stroke={5} color={color}>
        <span style={{ fontSize: 14, fontWeight: 800 }}>{value}</span>
      </Ring>
    </div>
  );
}

function JobCard({ job, lang, t, delay }) {
  const [open, setOpen] = useState(false);
  const [applied, setApplied] = useState(false);
  return (
    <div style={{ borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', overflow: 'hidden', flexShrink: 0, animation: `fadeUp .5s var(--ease-out) ${delay}s both` }}>
      <div style={{ padding: '16px 16px 14px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <Logo brand={job.brand} size={48} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-.3px', lineHeight: 1.2 }}>{tr(job.title, lang)}</div>
            <div style={{ fontSize: 13.5, color: 'var(--text-2)', fontWeight: 600, marginTop: 2 }}>{brandName(job.brand)} · {tr(job.salary, lang)}</div>
          </div>
          <MatchPill value={job.match} />
        </div>

        {/* tags */}
        <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginTop: 12 }}>
          {job.hot && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '5px 10px', borderRadius: 99, background: 'color-mix(in srgb,var(--hot) 14%,transparent)', color: 'var(--hot)', fontSize: 12, fontWeight: 800 }}><Icon name="fire" size={12} stroke={2.4} />{t.hot}</span>}
          {job.tags.map((tg, i) => (
            <span key={i} style={{ padding: '5px 11px', borderRadius: 99, background: 'var(--surface-2)', fontSize: 12, fontWeight: 600, color: 'var(--text-2)' }}>{tr(tg, lang)}</span>
          ))}
        </div>

        {/* why toggle */}
        <button onClick={() => setOpen(o => !o)} style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 14, color: 'var(--amber-deep)', fontWeight: 800, fontSize: 13 }}>
          <Icon name="spark" size={15} stroke={2.4} /> {t.why}
          <Icon name="chevDown" size={16} stroke={2.4} style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .25s var(--ease)' }} />
        </button>
      </div>

      {open && (
        <div style={{ padding: '0 16px 4px', animation: 'fadeUp .3s var(--ease-out) both' }}>
          {job.why.map((w, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, padding: '9px 0', borderTop: '1px solid var(--border)' }}>
              <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'color-mix(in srgb,var(--good) 16%,transparent)', color: 'var(--good)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}><Icon name="check" size={13} stroke={3} /></span>
              <span style={{ fontSize: 13.5, lineHeight: 1.4, color: 'var(--text-2)', fontWeight: 500 }}>{tr(w, lang)}</span>
            </div>
          ))}
        </div>
      )}

      {/* actions */}
      <div style={{ display: 'flex', gap: 10, padding: '12px 16px 16px' }}>
        <button onClick={() => setApplied(true)} disabled={applied} style={{
          flex: 1, height: 46, borderRadius: 'var(--r-md)', fontWeight: 800, fontSize: 14.5, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          background: applied ? 'color-mix(in srgb,var(--good) 16%,transparent)' : 'linear-gradient(150deg,var(--amber-soft),var(--amber))',
          color: applied ? 'var(--good)' : 'var(--indigo-900)', transition: 'all .3s var(--ease)',
        }}>
          {applied ? <><Icon name="check" size={17} stroke={3} />{t.applied}</> : t.apply}
        </button>
        <button style={{ width: 46, height: 46, borderRadius: 'var(--r-md)', background: 'var(--surface-2)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-2)' }}>
          <Icon name="spark" size={19} stroke={2} />
        </button>
      </div>
    </div>
  );
}

function InternCard({ job, lang, t, delay }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '15px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', animation: `fadeUp .5s var(--ease-out) ${delay}s both` }}>
      <Logo brand={job.brand} size={48} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15.5, fontWeight: 800, letterSpacing: '-.2px' }}>{tr(job.title, lang)}</div>
        <div style={{ fontSize: 13, color: 'var(--text-2)', fontWeight: 600 }}>{brandName(job.brand)} · {job.months} {t.months}</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
          {job.pay && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 9px', borderRadius: 99, background: 'color-mix(in srgb,var(--good) 15%,transparent)', color: 'var(--good)', fontSize: 11, fontWeight: 800 }}><Icon name="check" size={11} stroke={3} />{t.internPay}</span>}
          {job.gov && <span style={{ padding: '3px 9px', borderRadius: 99, background: 'var(--brand-tint)', color: 'var(--brand)', fontSize: 11, fontWeight: 800 }}>{t.govProg}</span>}
        </div>
      </div>
      <button style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--brand-tint)', color: 'var(--amber-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="arrow" size={18} stroke={2.4} /></button>
    </div>
  );
}

function JobsScreen({ lang, theme, setLang, setTheme, t }) {
  const [tab, setTab] = useState('jobs');
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      <Header sub={t.jobsSub} title={t.jobsTitle} right={<QuickToggles lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />} t={t} />

      {/* segmented tabs */}
      <div style={{ padding: '0 16px 6px' }}>
        <div style={{ display: 'flex', gap: 6, padding: 5, borderRadius: 'var(--r-full)', background: 'var(--surface-2)', border: '1px solid var(--border)' }}>
          {[['jobs', t.tab_jobs], ['intern', t.tab_intern]].map(([k, label]) => {
            const on = tab === k;
            return (
              <button key={k} onClick={() => setTab(k)} style={{ flex: 1, height: 40, borderRadius: 'var(--r-full)', fontWeight: 700, fontSize: 13.5,
                background: on ? 'var(--brand)' : 'transparent', color: on ? '#fff' : 'var(--text-3)', boxShadow: on ? 'var(--shadow-1)' : 'none', transition: 'all .25s var(--ease)' }}>{label}</button>
            );
          })}
        </div>
      </div>

      <div key={tab} className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '12px 16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {tab === 'jobs'
          ? JOBS.map((j, i) => <JobCard key={i} job={j} lang={lang} t={t} delay={i * 0.07} />)
          : <>
              <div style={{ display: 'flex', gap: 10, padding: '13px 15px', borderRadius: 'var(--r-lg)', background: 'var(--brand-tint)', animation: 'fadeUp .4s both' }}>
                <Icon name="cap" size={20} stroke={2} style={{ color: 'var(--brand)', flexShrink: 0 }} />
                <span style={{ fontSize: 13, color: 'var(--text-2)', fontWeight: 500, lineHeight: 1.4 }}>{lang === 'ru' ? 'Стажировки и практика для студентов и выпускников. Часть — по госпрограммам.' : 'Talaba va bitiruvchilar uchun amaliyot. Bir qismi — davlat dasturlari bo‘yicha.'}</span>
              </div>
              {INTERNS.map((j, i) => <InternCard key={i} job={j} lang={lang} t={t} delay={i * 0.07} />)}
            </>}
      </div>
    </div>
  );
}

Object.assign(window, { JobsScreen });