// ─── 屏：公司档案 (Company Profile) ───
function CompanyScreen() {
  const T = useT();
  const { back, notes, openSheet, go, aiName } = useApp();
  const co = COMPANY;
  const linked = notes.filter(n => (n.links || []).some(l => l.type === 'company'));

  const KV = ({ rows }) => (
    <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
      {rows.map(([k, v], i) => (
        <div key={i} style={{ display: 'flex', padding: '11px 15px', borderBottom: i < rows.length - 1 ? `1px solid ${T.line}` : 'none', gap: 12 }}>
          <span style={{ fontSize: 12.5, color: T.sub, width: 110, flexShrink: 0 }}>{k}</span>
          <span style={{ fontSize: 12.5, color: T.text, fontWeight: 600, flex: 1, lineHeight: 1.4 }}>{v}</span>
        </div>
      ))}
    </Card>
  );

  return (
    <div style={{ padding: '4px 16px 28px' }}>
      <ScreenHeader title="客户档案" sub={co.full} onBack={back} />

      {/* 头卡 */}
      <Card style={{ marginBottom: 14, display: 'flex', alignItems: 'center', gap: 13 }}>
        <div style={{ width: 50, height: 50, borderRadius: 14, 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={26} color={T.accent} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 17, fontWeight: 800, color: T.text }}>{co.name}</div>
          <div style={{ fontSize: 11.5, color: T.sub, marginTop: 2 }}>精密注塑装备 · 智能制造</div>
        </div>
      </Card>

      {/* Janus 定性 */}
      <div style={{ marginBottom: 16 }}>
        <AICard tag="Janus 定性" tone="warn" title={co.verdict.title} body={co.verdict.body} />
      </div>

      <SectionLabel>工商与规模</SectionLabel>
      <KV rows={[...co.reg, ...co.scale]} />

      {/* 关键事实 & 成交约束 */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>影响成交</Tag>}>关键事实 & 成交约束</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {co.facts.map((f, i, a) => {
          const c = f.tone === 'warn' ? T.warn : f.tone === 'good' ? T.good : f.tone === 'accent' ? T.accent : T.sub;
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '12px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none' }}>
              <span style={{ fontSize: 12, color: T.sub, width: 64, flexShrink: 0 }}>{f.label}</span>
              <span style={{ fontSize: 12.8, fontWeight: 600, color: T.text, flex: 1, lineHeight: 1.4 }}>{f.value}</span>
              {f.flag && <Tag tone={f.tone === 'warn' ? 'warn' : 'accent'} style={{ fontSize: 9.5 }}>{f.flag}</Tag>}
            </div>
          );
        })}
      </Card>

      {/* 与我司关系 */}
      <SectionLabel>与我司关系</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {co.relation.map((r, i, a) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none', gap: 10 }}>
            <span style={{ fontSize: 12.5, color: T.sub }}>{r.k}</span>
            <span style={{ fontSize: 12.5, fontWeight: 700, color: r.tone === 'good' ? T.good : r.tone === 'accent' ? T.accent : T.text, textAlign: 'right' }}>{r.v}</span>
          </div>
        ))}
      </Card>

      {/* 关联笔记（在 与我司关系 与 数据信源 之间） */}
      {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>
      )}

      {/* 信源 */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>可溯源</Tag>}>数据信源 · 这页画像从哪来</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {co.sources.map((s, i, a) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none' }}>
            <Icon name="link" size={15} color={T.accent} style={{ flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: T.text }}>{s.src}</div>
              <div style={{ fontSize: 11, color: T.sub, marginTop: 1 }}>{s.what}</div>
            </div>
            <span style={{ fontSize: 10.5, color: T.faint, flexShrink: 0 }}>{s.time}</span>
          </div>
        ))}
      </Card>

      {/* 底部 · 进入作战室共析 */}
      <PrimaryButton icon="message" onClick={() => go('warroom')}>{`就这个客户 · 与 ${aiName} 共析`}</PrimaryButton>
    </div>
  );
}
window.CompanyScreen = CompanyScreen;