// ─── 屏 2：客户全景画像（Presence） ───
function PresenceScreen() {
  const T = useT();
  const { go, back, openSheet, bant, aiName } = useApp();
  const c = CUSTOMER;
  const bantConfirmed = Object.values(bant).filter(b => b.confirmed).length;
  return (
    <div style={{ padding: '4px 16px 24px' }}>
      <ScreenHeader title="客户全景" sub="Janus 已整合 14 个数据源" onBack={back} />

      {/* 公司头卡 → 公司档案 */}
      <Card style={{ marginBottom: 14 }} onClick={() => go('company')}>
        <div style={{ display: 'flex', gap: 13, alignItems: 'center' }}>
          <div style={{ width: 52, height: 52, borderRadius: 15, background: `linear-gradient(135deg,${hexA(T.accent, 0.22)},${hexA(T.acc2, 0.18)})`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="building" size={28} color={T.accent} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: T.text, letterSpacing: -0.3 }}>{c.full}</div>
            <div style={{ fontSize: 12, color: T.sub, marginTop: 3 }}>{c.industry}</div>
          </div>
          <Chevron size={18} />
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 13, alignItems: 'center' }}>
          <Tag tone="warn">价格敏感</Tag>
          <Tag tone="good">已立项</Tag>
          <Tag tone="accent">Q3 上线意向</Tag>
          <span style={{ marginLeft: 'auto', fontSize: 11, color: T.accent, fontWeight: 600 }}>查看档案</span>
        </div>
      </Card>

      {/* AI 速读 */}
      <div style={{ marginBottom: 16 }}>
        <AICard tag="30 秒速读" tone="accent"
          title="一句话：方向已认可，卡在「投入太大、怕担责」"
          body="决策链你有内线（周凯）、有阻力（王磊的集成顾虑未解），真正拍板的陈总还没见过。今天要做两件事——拆解价格、争取见到陈总。" />
      </div>

      {/* 进行中的项目（客户 ▸ 项目） */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>{c.full ? COMPANY.projects.length : 0} 个</Tag>}>进行中的项目</SectionLabel>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginBottom: 16 }}>
        {COMPANY.projects.map(p => {
          const col = p.winRate >= 50 ? T.good : p.winRate >= 25 ? T.accent : T.warn;
          return (
            <Card key={p.id} pad={13} glow={p.main} onClick={() => go('project', { id: p.id })} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
              <Ring value={p.winRate} size={40} stroke={3.5} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
                  <span style={{ fontSize: 13.8, fontWeight: 700, color: T.text }}>{p.name}</span>
                  {p.main && <Tag tone="accent" style={{ fontSize: 9 }}>主</Tag>}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 4 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: col, fontWeight: 600 }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: col }} />{p.stage}
                  </span>
                  <span style={{ fontSize: 11, color: T.faint }}>· {p.amount}</span>
                </div>
              </div>
              <Chevron size={16} />
            </Card>
          );
        })}
      </div>

      {/* 决策地图 → 人物档案 */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>4 人 · 点击看档案</Tag>}>决策地图</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {c.people.map((p, i, a) => (
          <div key={i} onClick={() => go('person', { name: p.name })} style={{ display: 'flex', gap: 12, padding: '13px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none', alignItems: 'center', cursor: 'pointer' }}>
            <Avatar name={p.name} tone={p.stance} size={40} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 14, fontWeight: 700, color: T.text }}>{p.name}</span>
                <span style={{ fontSize: 11.5, color: T.sub }}>{p.role}</span>
              </div>
              <div style={{ marginTop: 5, marginBottom: 5 }}>
                <Tag tone={p.stance === 'champion' ? 'good' : p.stance === 'blocker' ? 'warn' : p.stance === 'decider' ? 'accent' : 'plain'} style={{ fontSize: 10.5 }}>{p.stanceLabel}</Tag>
              </div>
              <div style={{ fontSize: 11.8, color: T.sub, lineHeight: 1.5 }}>{p.note}</div>
            </div>
            <Chevron size={16} />
          </div>
        ))}
      </Card>

      {/* BANT 可编辑 */}
      <SectionLabel right={<span style={{ fontSize: 11, color: bantConfirmed >= 4 ? T.good : T.warn, fontWeight: 600 }}>{bantConfirmed}/4 已确认</span>}>成交要件 · 点击可改</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9, marginBottom: 8 }}>
        {Object.entries(bant).map(([k, b]) => (
          <div key={k} onClick={() => openSheet('bant', { k })} style={{
            background: b.confirmed ? T.surface : T.surface2, borderRadius: 13, padding: '11px 12px',
            border: `1px solid ${b.confirmed ? hexA(T.good, 0.3) : T.line}`, cursor: 'pointer', position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
              <span style={{ width: 20, height: 20, borderRadius: 7, fontSize: 11, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', background: b.confirmed ? T.goodBg : T.line2, color: b.confirmed ? T.good : T.faint }}>{k}</span>
              <span style={{ fontSize: 11.5, color: T.sub, fontWeight: 600 }}>{b.label}</span>
              <Icon name="edit" size={13} color={T.faint} style={{ marginLeft: 'auto' }} />
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, color: b.confirmed ? T.text : T.sub, lineHeight: 1.35 }}>{b.value}</div>
            <div style={{ marginTop: 5 }}>
              {b.confirmed
                ? <span style={{ fontSize: 9.5, fontWeight: 700, color: b.by === '你' ? T.accent : T.good }}>{b.by === '你' ? '✓ 你已确认' : '✓ AI 已确认'}</span>
                : <span style={{ fontSize: 9.5, fontWeight: 700, color: T.warn }}>AI 推断 · 待你确认</span>}
            </div>
          </div>
        ))}
      </div>
      <div style={{ fontSize: 10.5, color: T.faint, margin: '0 4px 16px', lineHeight: 1.5 }}>Janus 只做推断，你的判断永远覆盖 AI。</div>

      {/* 客户动态 → 展开全文 */}
      <SectionLabel right={<Sparkle size={13} />}>客户最新动态 · AI 监测</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {c.news.map((n, i, a) => (
          <div key={i} onClick={() => openSheet('news', { date: n.date, text: n.text })} style={{ display: 'flex', gap: 12, padding: '12px 15px', borderBottom: `1px solid ${T.line}`, cursor: 'pointer', alignItems: 'center' }}>
            <span style={{ fontSize: 11, fontWeight: 700, color: T.accent, fontFamily: NUMF, width: 34, flexShrink: 0 }}>{n.date}</span>
            <span style={{ fontSize: 12.5, color: T.text, lineHeight: 1.5, flex: 1 }}>{n.text}</span>
            <Chevron size={15} />
          </div>
        ))}
        <div onClick={() => openSheet('interpret')} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '12px 15px', cursor: 'pointer' }}>
          <Icon name="plus" size={16} color={T.accent} />
          <span style={{ fontSize: 12.3, color: T.accent, fontWeight: 600 }}>贴链接/文本，让 Janus 解读</span>
        </div>
      </Card>

      {/* 跟进历史 → 跳信源 */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>点击看依据</Tag>}>跟进历史</SectionLabel>
      <div style={{ paddingLeft: 6 }}>
        {c.timeline.map((tl, i, a) => (
          <div key={i} onClick={() => openSheet('source', { date: tl.date, kind: tl.kind, text: tl.text })} style={{ display: 'flex', gap: 13, position: 'relative', cursor: 'pointer' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
              <div style={{ width: 9, height: 9, borderRadius: '50%', background: i === 0 ? T.accent : T.line2, marginTop: 5, border: i === 0 ? `2px solid ${hexA(T.accent, 0.3)}` : 'none' }} />
              {i < a.length - 1 && <div style={{ width: 1.5, flex: 1, background: T.line, marginTop: 2 }} />}
            </div>
            <div style={{ paddingBottom: 16, flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Tag tone="plain" style={{ fontSize: 10 }}>{tl.kind}</Tag>
                <span style={{ fontSize: 11, color: T.faint, fontFamily: NUMF }}>{tl.date}</span>
                <Icon name="link" size={13} color={T.faint} style={{ marginLeft: 'auto' }} />
              </div>
              <div style={{ fontSize: 12.5, color: T.text, lineHeight: 1.5, marginTop: 5 }}>{tl.text}</div>
            </div>
          </div>
        ))}
      </div>

      {/* CTA */}
      <div style={{ marginTop: 6 }}>
        <PrimaryButton icon="message" onClick={() => go('warroom')}>{`就这个客户 · 与 ${aiName} 共析`}</PrimaryButton>
      </div>
    </div>
  );
}
window.PresenceScreen = PresenceScreen;