// ─── 屏：项目详情（客户 ▸ 项目 ▸ 干系人 的中间层） ───
function ProjectScreen({ id }) {
  const T = useT();
  const { back, go, openSheet, bant, aiName, toast } = useApp();
  const proj = (COMPANY.projects || []).find(p => p.id === id) || COMPANY.projects[0];
  const people = CUSTOMER.people.filter(p => proj.people.includes(p.name));
  const stageColor = proj.winRate >= 50 ? T.good : proj.winRate >= 25 ? T.accent : T.warn;

  return (
    <div style={{ padding: '4px 16px 24px' }}>
      <ScreenHeader title="项目" sub={`${CUSTOMER.name} · ${proj.name}`} onBack={back} />

      {/* 项目头卡 */}
      <Card glow={proj.main} style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
          <Ring value={proj.winRate} size={50} stroke={4} label="胜率" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 16, fontWeight: 800, color: T.text }}>{proj.name}</span>
              {proj.main && <Tag tone="accent" style={{ fontSize: 9.5 }}>主项目</Tag>}
              {proj.lead && <Tag tone="plain" style={{ fontSize: 9.5 }}>线索期</Tag>}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: stageColor, fontWeight: 600 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: stageColor }} />{proj.stage}
              </span>
              <span style={{ fontSize: 12, fontWeight: 700, color: T.accent, fontFamily: NUMF }}>{proj.amount}</span>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${T.line}`, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
          <Icon name="arrowRight" size={15} color={T.faint} style={{ flexShrink: 0, marginTop: 1 }} />
          <span style={{ fontSize: 12.3, color: T.sub, lineHeight: 1.45 }}>{proj.next}</span>
        </div>
      </Card>

      {/* 成交要件（本项目） */}
      <SectionLabel right={proj.main ? <span style={{ fontSize: 11, color: T.accent, fontWeight: 600 }}>点击可改</span> : null}>本项目 · 成交要件</SectionLabel>
      {proj.main ? (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9, marginBottom: 18 }}>
          {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' }}>
              <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: 12.5, fontWeight: 700, color: b.confirmed ? T.text : T.sub, lineHeight: 1.35 }}>{b.value}</div>
            </div>
          ))}
        </div>
      ) : (
        <Card style={{ marginBottom: 18, textAlign: 'center', padding: '18px 16px' }}>
          <div style={{ fontSize: 12.5, color: T.sub, lineHeight: 1.5 }}>该项目尚处早期，BANT 待补全。<br />进作战室与 Janus 一起梳理。</div>
        </Card>
      )}

      {/* 该项目干系人 */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>{people.length} 人</Tag>}>本项目干系人</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 18 }}>
        {people.map((p, i, a) => (
          <div key={i} onClick={() => go('person', { name: p.name })} style={{ display: 'flex', gap: 12, padding: '12px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none', alignItems: 'center', cursor: 'pointer' }}>
            <Avatar name={p.name} tone={p.stance} size={36} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ fontSize: 13.5, fontWeight: 700, color: T.text }}>{p.name}</span>
                <span style={{ fontSize: 11, color: T.sub }}>{p.role}</span>
              </div>
              <div style={{ marginTop: 4 }}><Tag tone={p.stance === 'champion' ? 'good' : p.stance === 'blocker' ? 'warn' : p.stance === 'decider' ? 'accent' : 'plain'} style={{ fontSize: 9.5 }}>{p.stanceLabel}</Tag></div>
            </div>
            <Chevron size={15} />
          </div>
        ))}
        <button onClick={() => toast('已打开干系人添加（演示）')} style={{ width: '100%', border: 'none', borderTop: `1px solid ${T.line}`, background: 'transparent', color: T.accent, fontSize: 12.5, fontWeight: 700, fontFamily: FONT, padding: '12px 0', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          <Icon name="plus" size={15} color={T.accent} />添加项目干系人
        </button>
      </Card>

      {/* 我方作战团队（内部关系） */}
      <SectionLabel right={<Sparkle size={13} />}>我方作战团队 · 销售是团队战</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 18 }}>
        {TEAM.map((m, i, a) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none', alignItems: 'center' }}>
            <Avatar name={m.name.replace('（你）', '')} tone={m.tone === 'plain' ? 'unknown' : m.tone} size={36} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: T.text }}>{m.role}</div>
              <div style={{ fontSize: 11, color: T.sub, marginTop: 2 }}>{m.name} · {m.note}</div>
            </div>
          </div>
        ))}
        <button onClick={() => toast('已发起·拉同事进这一单（演示）')} style={{ width: '100%', border: 'none', borderTop: `1px solid ${T.line}`, background: 'transparent', color: T.accent, fontSize: 12.5, fontWeight: 700, fontFamily: FONT, padding: '12px 0', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          <Icon name="users" size={15} color={T.accent} />拉同事进这一单
        </button>
      </Card>

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