// ─── 屏 4：通话后自动跟进（Velocity） ───
function VelocityScreen({ mode }) {
  const T = useT();
  const { go, back } = useApp();
  const s = SUMMARY;
  const pre = mode === '共析';
  return (
    <div style={{ padding: '4px 16px 24px' }}>
      <ScreenHeader title={pre ? '共析纪要' : '通话纪要'} sub={pre ? '恒升智造 · 基于你与 Janus 的共析' : `恒升智造 · 时长 ${s.duration} · 自动生成`} onBack={back} />

      {/* 胜率跃升 */}
      <Card glow style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 15 }}>
        <Ring value={s.winRate.to} size={62} stroke={5} label="胜率" />
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{ fontSize: 15, fontWeight: 800, color: T.text }}>这通电话很值</span>
            <Tag tone="good" style={{ fontSize: 11 }}><Icon name="arrowUp" size={11} color={T.good} />+{s.winRate.to - s.winRate.from}%</Tag>
          </div>
          <div style={{ fontSize: 12.5, color: T.sub, marginTop: 4, lineHeight: 1.5 }}>
            预算与时间表双双落定，胜率从 {s.winRate.from}% 升至 {s.winRate.to}%。恒升已推进到「谈判」前夜。
          </div>
        </div>
      </Card>

      {/* AI 摘要 */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ position: 'relative', borderRadius: 16, padding: 1.2, background: `linear-gradient(135deg,${hexA(T.accent, 0.5)},${hexA(T.acc2, 0.28)})` }}>
          <div style={{ background: T.dark ? 'linear-gradient(180deg,#141A26,#11161F)' : '#fff', borderRadius: 15, padding: '15px 16px' }}>
            <AIeyebrow label="三句话纪要" />
            <ul style={{ margin: '11px 0 0', padding: 0, listStyle: 'none' }}>
              {s.digest.map((d, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, marginBottom: i < s.digest.length - 1 ? 10 : 0 }}>
                  <span style={{ fontFamily: NUMF, fontSize: 12, fontWeight: 800, color: T.accent, flexShrink: 0 }}>0{i + 1}</span>
                  <span style={{ fontSize: 13, color: T.text, lineHeight: 1.55 }}>{d}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      {/* DIKIWI 升维链 · 提炼轨迹 */}
      <SectionLabel right={<Tag tone="accent" style={{ fontSize: 10 }}><Sparkle size={10} />自动提炼</Tag>}>从一通电话，到一个筹码</SectionLabel>
      <Card style={{ marginBottom: 16 }}>
        <div style={{ paddingLeft: 2 }}>
          {LADDER.map((s, i, a) => {
            const isYou = s.who === '你';
            const isBoth = s.who === '共同';
            const dot = s.star ? T.accent : isYou ? T.good : isBoth ? T.good : T.accent;
            return (
              <React.Fragment key={i}>
                {isYou && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, margin: '2px 0 10px', paddingLeft: 2 }}>
                    <div style={{ flex: 1, height: 1, background: `repeating-linear-gradient(90deg,${T.line2} 0 5px,transparent 5px 10px)` }} />
                    <span style={{ fontSize: 10, color: T.faint, fontWeight: 600, whiteSpace: 'nowrap' }}>AI 到此为止 · 你接手博弈</span>
                    <div style={{ flex: 1, height: 1, background: `repeating-linear-gradient(90deg,${T.line2} 0 5px,transparent 5px 10px)` }} />
                  </div>
                )}
                <div style={{ display: 'flex', gap: 12 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                    <div style={{
                      width: 26, height: 26, borderRadius: 8, flexShrink: 0,
                      background: s.star ? `linear-gradient(135deg,${T.accent},${T.acc2})` : hexA(dot, 0.14),
                      color: s.star ? '#fff' : dot, display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 12, fontWeight: 800, fontFamily: NUMF,
                      boxShadow: s.star ? `0 3px 10px ${hexA(T.accent, 0.4)}` : 'none',
                    }}>{s.k}</div>
                    {i < a.length - 1 && <div style={{ width: 1.5, flex: 1, minHeight: 14, background: T.line, marginTop: 2 }} />}
                  </div>
                  <div style={{ paddingBottom: i < a.length - 1 ? 13 : 0, flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                      <span style={{ fontSize: 11, color: T.faint, fontWeight: 600 }}>{s.layer}</span>
                      <span style={{ fontSize: 9.5, fontWeight: 700, color: isYou ? T.good : isBoth ? T.good : T.accent, background: hexA(isYou || isBoth ? T.good : T.accent, 0.13), padding: '1px 7px', borderRadius: 999 }}>{s.who}</span>
                    </div>
                    <div style={{ fontSize: 13.5, fontWeight: 700, color: s.star ? T.accent : T.text, marginTop: 3, lineHeight: 1.35 }}>{s.label}</div>
                    <div style={{ fontSize: 11.5, color: T.sub, marginTop: 2, lineHeight: 1.45 }}>{s.sub}</div>
                  </div>
                </div>
              </React.Fragment>
            );
          })}
        </div>
      </Card>

      {/* 档案自动更新 */}
      <SectionLabel right={<Tag tone="good" style={{ fontSize: 10 }}>已写入客户档案</Tag>}>BANT 自动更新</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9, marginBottom: 16 }}>
        {s.bantNew.map((b, i) => <BantChip key={i} {...b} done isNew />)}
      </div>

      {/* 行动项 */}
      <SectionLabel right={<span style={{ fontSize: 11, color: T.accent, fontWeight: 600 }}>AI 已起草</span>}>下一步 · 自动派生 3 项</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {s.actions.map((a, i, arr) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '13px 15px', borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none', alignItems: 'flex-start' }}>
            <div style={{ width: 22, height: 22, borderRadius: 7, border: `1.6px solid ${T.accLine}`, flexShrink: 0, marginTop: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ fontSize: 11, fontWeight: 800, color: T.accent }}>{i + 1}</span>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.3, fontWeight: 600, color: T.text, lineHeight: 1.4 }}>{a.text}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 5 }}>
                <Tag tone="plain" style={{ fontSize: 10 }}><Icon name="clock" size={11} color={T.sub} />{a.due}</Tag>
                <span style={{ fontSize: 10.5, color: T.good, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3 }}><Sparkle size={10} color={T.good} />{a.auto}</span>
              </div>
            </div>
          </div>
        ))}
      </Card>

      {/* 邮件草稿 */}
      <SectionLabel right={<Tag tone="accent" style={{ fontSize: 10 }}>待你确认 2 处</Tag>}>跟进邮件 · 初稿已生成</SectionLabel>
      <Card style={{ marginBottom: 8 }}>
        <div style={{ paddingBottom: 11, borderBottom: `1px solid ${T.line}`, marginBottom: 11 }}>
          <Field label="收件人" value={EMAIL.to} T={T} />
          <Field label="主题" value={EMAIL.subject} T={T} bold />
        </div>
        <div style={{ fontSize: 13, color: T.text, lineHeight: 1.7 }}>
          {EMAIL.parts.map((p, i) => p.t === 'slot'
            ? <span key={i} style={{ background: T.accSoft, color: T.accent, borderRadius: 6, padding: '1px 6px', fontWeight: 600, borderBottom: `1.5px dashed ${T.accLine}`, whiteSpace: 'nowrap' }} title={p.hint}>{p.text}</span>
            : <span key={i} style={{ whiteSpace: 'pre-wrap' }}>{p.text}</span>
          )}
        </div>
      </Card>

      {/* CTA */}
      <div style={{ marginTop: 6, display: 'flex', gap: 10 }}>
        <GhostButton icon="doc" style={{ flexShrink: 0 }} onClick={() => go('pipeline')}>存草稿</GhostButton>
        <PrimaryButton icon="mail" onClick={() => go('pipeline')} style={{ flex: 1 }}>确认并发送</PrimaryButton>
      </div>
    </div>
  );
}

function Field({ label, value, bold, T }) {
  return (
    <div style={{ display: 'flex', gap: 8, marginBottom: 5 }}>
      <span style={{ fontSize: 12, color: T.faint, width: 44, flexShrink: 0 }}>{label}</span>
      <span style={{ fontSize: 12.5, color: T.text, fontWeight: bold ? 700 : 500, lineHeight: 1.4 }}>{value}</span>
    </div>
  );
}
window.VelocityScreen = VelocityScreen;