// ─── 屏：人物档案 (Person Profile) ───
function PersonScreen({ name }) {
  const T = useT();
  const { back, go, openSheet, notes, aiName } = useApp();
  const p = PEOPLE[name];
  if (!p) return <div style={{ padding: 24, color: T.sub }}>未找到该人物</div>;
  const toneOf = p.stance === 'champion' ? 'good' : p.stance === 'blocker' ? 'warn' : p.stance === 'decider' ? 'accent' : 'plain';
  const linked = notes.filter(n => (n.links || []).some(l => l.type === 'person' && l.name === name));

  return (
    <div style={{ padding: '4px 16px 28px' }}>
      <ScreenHeader title="人物档案" sub={`${CUSTOMER.name} · 决策链`} onBack={back} />

      {/* 头卡 */}
      <Card style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', gap: 13, alignItems: 'center' }}>
          <Avatar name={name} tone={p.stance} size={52} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: T.text }}>{name}</div>
            <div style={{ fontSize: 12, color: T.sub, marginTop: 2 }}>{p.role}</div>
            <div style={{ marginTop: 7 }}><Tag tone={toneOf} style={{ fontSize: 10.5 }}>{p.stanceLabel}</Tag></div>
          </div>
        </div>
        {/* 影响力 */}
        <div style={{ marginTop: 14, paddingTop: 13, borderTop: `1px solid ${T.line}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <span style={{ fontSize: 11.5, color: T.sub, fontWeight: 600 }}>决策影响力</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: T.text, fontFamily: NUMF }}>{p.influence}/100</span>
          </div>
          <div style={{ height: 6, borderRadius: 3, background: T.surface2, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${p.influence}%`, background: `linear-gradient(90deg,${T.accent},${T.acc2})`, borderRadius: 3 }} />
          </div>
        </div>
      </Card>

      {/* Janus 相处策略 */}
      <div style={{ marginBottom: 16 }}>
        <AICard tag="Janus 相处策略" tone={toneOf === 'plain' ? 'accent' : toneOf} title={p.style} body={p.strategy} />
      </div>

      {/* 引荐路径（外部关系 · 仅未触达决策人） */}
      {REFER[name] && (
        <div style={{ marginBottom: 16 }}>
          <SectionLabel right={<Tag tone="accent" style={{ fontSize: 10 }}>外部关系</Tag>}>引荐路径 · 别冷启动，走关系</SectionLabel>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            {REFER[name].map((r, i) => (
              <Card key={i} pad={13}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 9 }}>
                  <Icon name="users" size={15} color={T.accent} />
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: T.text }}>经 {r.via}</span>
                  <Tag tone={r.strength === '强' ? 'good' : 'warn'} style={{ fontSize: 9.5, marginLeft: 'auto' }}>{r.strength}关系 · {r.warm}℃</Tag>
                </div>
                {/* 关系链 */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 8, flexWrap: 'wrap' }}>
                  {r.chain.map((c, j, a) => (
                    <React.Fragment key={j}>
                      <span style={{ fontSize: 11.5, fontWeight: 600, color: j === 0 ? T.accent : j === a.length - 1 ? T.text : T.sub, background: j === a.length - 1 ? T.surface2 : 'transparent', padding: j === a.length - 1 ? '3px 8px' : 0, borderRadius: 8 }}>{c}</span>
                      {j < a.length - 1 && <Icon name="arrowRight" size={13} color={T.faint} />}
                    </React.Fragment>
                  ))}
                </div>
                <div style={{ fontSize: 11.8, color: T.sub, lineHeight: 1.5 }}>{r.note}</div>
              </Card>
            ))}
          </div>
        </div>
      )}

      {/* 沟通风格 */}
      <SectionLabel>沟通风格</SectionLabel>
      <Card style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 13.5, fontWeight: 700, color: T.text, marginBottom: 5 }}>{p.style}</div>
        <div style={{ fontSize: 12.5, color: T.sub, lineHeight: 1.6 }}>{p.styleNote}</div>
      </Card>

      {/* 关注点 / 异议 */}
      <SectionLabel>他在意什么</SectionLabel>
      <Card pad={14} style={{ marginBottom: p.objection ? 10 : 16 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          {p.cares.map((c, i) => (
            <div key={i} style={{ display: 'flex', gap: 9, alignItems: 'flex-start' }}>
              <span style={{ width: 5, height: 5, borderRadius: '50%', background: T.accent, marginTop: 7, flexShrink: 0 }} />
              <span style={{ fontSize: 12.8, color: T.text, lineHeight: 1.5 }}>{c}</span>
            </div>
          ))}
        </div>
      </Card>
      {p.objection && (
        <div style={{ display: 'flex', gap: 9, alignItems: 'center', background: T.warnBg, borderRadius: 12, padding: '11px 13px', marginBottom: 16, border: `1px solid ${hexA(T.warn, 0.25)}` }}>
          <Icon name="alert" size={16} color={T.warn} style={{ flexShrink: 0 }} />
          <span style={{ fontSize: 12.3, color: T.text, lineHeight: 1.45 }}><b style={{ color: T.warn }}>未解异议：</b>{p.objection}</span>
        </div>
      )}

      {/* 联系方式 */}
      <SectionLabel>联系方式</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {p.contact.map(([k, v], i, a) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '11px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none' }}>
            <span style={{ fontSize: 12.5, color: T.sub }}>{k}</span>
            <span style={{ fontSize: 12.5, color: T.text, fontWeight: 600 }}>{v}</span>
          </div>
        ))}
      </Card>

      {/* 互动史 */}
      <SectionLabel>与你的互动</SectionLabel>
      <div style={{ paddingLeft: 6, marginBottom: 18 }}>
        {p.history.map((h, i, a) => (
          <div key={i} style={{ display: 'flex', gap: 13 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: i === 0 ? T.accent : T.line2, marginTop: 5 }} />
              {i < a.length - 1 && <div style={{ width: 1.5, flex: 1, background: T.line, marginTop: 2 }} />}
            </div>
            <div style={{ paddingBottom: 14, flex: 1 }}>
              <span style={{ fontSize: 11, color: T.faint, fontFamily: NUMF }}>{h.d}</span>
              <div style={{ fontSize: 12.5, color: T.text, lineHeight: 1.5, marginTop: 3 }}>{h.t}</div>
            </div>
          </div>
        ))}
      </div>

      {/* 关联笔记（放在互动史之后） */}
      {linked.length > 0 && (
        <div style={{ marginBottom: 16 }}>
          <SectionLabel right={<Tag tone="accent" style={{ fontSize: 10 }}>你的笔记</Tag>}>你记下的</SectionLabel>
          {linked.map(n => <NoteCard key={n.id} note={n} onClick={() => openSheet('note', { note: n })} />)}
        </div>
      )}

      <PrimaryButton icon="message" onClick={() => go('warroom')}>{`就这个人物 · 与 ${aiName} 共析`}</PrimaryButton>
    </div>
  );
}
window.PersonScreen = PersonScreen;