const { Card, Badge, Button, PrismRule } = window.PrismDS;

// Jobs and copy live in /content/careers/*.ts — see CONTENT.md.
// 页顶视频横幅复用 AboutScreen.jsx 的 AboutHeroVideo（showSlogan 开、showScrim 关：叠加 slogan 但不暗化画面）。

function JobCard({ job, open, onToggle }) {
  const L = PrismContent.careersSection;
  return (
    <Card padding="lg">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 28, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 620 }}>
          <h3 style={{ font: 'var(--type-h3)', color: 'var(--text-heading)', margin: 0 }}>{T(job.title)}</h3>
          {/* 标签行 2026-08-14 由「city + ' | ' + employmentType + ' | ' + category」三段硬拼
              改为数组 + filter + join。原写法把分隔符写死在字段之间，一旦某个字段缺失
              （本次删掉了 employmentType）就会渲染出「北京 |  | 量化研究」这种悬空竖线。
              现在分隔符由 join 生成，有几项就有几条竖线，增删字段不会再留空位。
              样式与间距未动，仍是同一个 <div> 和同一套 style。 */}
          <div style={{ font: 'var(--type-caption)', color: 'var(--brand-secondary)', marginTop: 10, letterSpacing: '.02em' }}>{[job.city, job.employmentType, job.category].map(T).map(s => (s || '').trim()).filter(Boolean).join(' | ')}</div>
        </div>
        <Button variant="outline" onClick={onToggle}>{open ? T(L.detailClose) : T(L.detailOpen)}</Button>
      </div>
      {open && (
        <div style={{ marginTop: 28, paddingTop: 26, borderTop: '1px solid var(--border-hairline)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
          {[[T(L.responsibilitiesLabel), job.responsibilities], [T(L.requirementsLabel), job.requirements]].map(([t, list]) => (
            <div key={t}>
              <div style={{ font: 'var(--type-label)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', color: 'var(--brand-secondary)', fontSize: 11 }}>{t}</div>
              <ul style={{ margin: '14px 0 0', padding: '0 0 0 18px', font: 'var(--type-body)', color: 'var(--text-muted)', lineHeight: 1.9 }}>
                {list.map((d, k) => <li key={k} style={{ marginBottom: 6 }}>{T(d)}</li>)}
              </ul>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}

function CareersScreen() {
  const [open, setOpen] = React.useState(null);
  const [q, setQ] = React.useState('');
  useLucide(q);
  const L = PrismContent.careersSection, apply = PrismContent.applySection;
  const proc = PrismContent.processSection, steps = PrismContent.pick(PrismContent.processSteps);
  const jobs = PrismContent.pick(PrismContent.jobs);
  const kw = q.trim().toLowerCase();
  const hay = j => (T(j.title) + ' ' + j.responsibilities.map(T).join(' ') + ' ' + T(j.category)).toLowerCase();
  const list = kw ? jobs.filter(j => hay(j).includes(kw)) : jobs;
  return (
    <div>
      <AboutHeroVideo showSlogan showScrim={false} />

      <Section tone="subtle" eyebrow={L.eyebrow} title={T(L.title)}>
        <div style={{ position: 'relative', maxWidth: 480, marginBottom: 28, marginTop: 4 }}>
          <span style={{ position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', color: 'var(--brand-secondary)', display: 'inline-flex', pointerEvents: 'none' }}><Icon name="search" size={17} /></span>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder={T(L.searchPlaceholder)} aria-label={T(L.searchLabel)}
            style={{ width: '100%', boxSizing: 'border-box', padding: '13px 16px 13px 46px', font: 'var(--type-body)', color: 'var(--text-body)', background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', outline: 'none' }}
            onFocus={e => { e.target.style.borderColor = 'var(--brand-accent)'; e.target.style.boxShadow = '0 0 0 3px rgba(126,200,227,.25)'; }}
            onBlur={e => { e.target.style.borderColor = 'var(--border-default)'; e.target.style.boxShadow = 'none'; }} />
        </div>
        <div style={{ display: 'grid', gap: 20 }}>
          {list.map(j => <JobCard key={j.id} job={j} open={open === j.id} onToggle={() => setOpen(open === j.id ? null : j.id)} />)}
        </div>
        {list.length === 0 && (
          <div style={{ textAlign: 'center', padding: '56px 20px', border: '1px dashed var(--border-accent)', borderRadius: 'var(--radius-lg)', background: 'var(--surface-accent)' }}>
            <div style={{ font: 'var(--type-h4)', color: 'var(--text-heading)' }}>{jobs.length ? T(L.emptyTitle) : T(L.noOpeningsTitle)}</div>
            <div style={{ font: 'var(--type-body)', color: 'var(--text-muted)', marginTop: 8 }}>{jobs.length ? T(L.emptyBody) : T(L.noOpeningsBody)}</div>
          </div>
        )}
      </Section>

      <Section tight>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.35fr', gap: 104, alignItems: 'flex-start' }}>
          <div>
            <div style={{ marginBottom: 34 }}>
              <PrismRule />
              <div style={{ font: 'var(--type-label)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', color: 'var(--brand-secondary)', margin: '18px 0 10px', fontSize: 11 }}>{apply.eyebrow}</div>
              <h2 style={{ font: 'var(--type-h2)', fontWeight: 600, color: 'var(--text-heading)', margin: 0 }}>{T(apply.title)}</h2>
            </div>
            <Card variant="inverse" padding="lg">
              <PrismRule width="40px" />
              <div style={{ font: 'var(--type-h4)', color: '#fff', marginTop: 16 }}>{T(apply.cardTitle)}</div>
              <div style={{ font: 'var(--type-body)', color: 'var(--text-on-dark-muted)', marginTop: 14, lineHeight: 2 }}>
                {apply.lines.map((l, i) => <div key={i}>{T(l)}</div>)}
              </div>
            </Card>
          </div>
          <div>
            <div style={{ marginBottom: 34 }}>
              <PrismRule />
              <div style={{ font: 'var(--type-label)', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', color: 'var(--brand-secondary)', margin: '18px 0 10px', fontSize: 11 }}>{proc.eyebrow}</div>
              <h2 style={{ font: 'var(--type-h2)', fontWeight: 600, color: 'var(--text-heading)', margin: 0 }}>{T(proc.title)}</h2>
            </div>
            <div style={{ display: 'grid', gap: 18 }}>
              {steps.map(s => (
                <div key={s.id} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                  <span style={{ fontFamily: 'var(--font-display-en)', fontSize: 22, color: 'var(--brand-accent)', lineHeight: 1.2, minWidth: 34 }}>{s.step}</span>
                  <div>
                    <div style={{ font: 'var(--type-h4)', color: 'var(--text-heading)' }}>{T(s.title)}</div>
                    <div style={{ font: 'var(--type-body)', color: 'var(--text-muted)', marginTop: 6 }}>{T(s.description)}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>
    </div>
  );
}
Object.assign(window, { CareersScreen, JobCard });