// ─── 屏：我的人设（自身关系 · CEV 锚） ───
const { useState: useSM } = React;

function MeScreen() {
  const T = useT();
  const { back, toast } = useApp();
  const s = SELF;
  const [actId, setActId] = useSM(s.identities.find(i => i.active)?.id || 'a');
  const switchId = (id) => { setActId(id.id); toast(`已切换至「${id.org}」· 漏斗与建议按此过滤`); };

  const Pill = ({ children }) => (
    <span style={{ fontSize: 12, color: T.text, background: T.surface2, border: `1px solid ${T.line}`, padding: '6px 11px', borderRadius: 999 }}>{children}</span>
  );

  return (
    <div style={{ padding: '4px 16px 28px' }}>
      <ScreenHeader title="我的画像" sub="Janus 以「你」来生成策略" onBack={back} />

      {/* 头卡 */}
      <Card style={{ marginBottom: 14, display: 'flex', alignItems: 'center', gap: 13 }}>
        <div style={{ width: 50, height: 50, borderRadius: '50%', background: `linear-gradient(135deg,${T.accent},${T.acc2})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 17, flexShrink: 0 }}>LK</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 17, fontWeight: 800, color: T.text }}>{s.name}</div>
          <div style={{ fontSize: 12, color: T.sub, marginTop: 2 }}>{s.title}</div>
        </div>
      </Card>

      {/* CEV 说明 */}
      <div style={{ marginBottom: 16 }}>
        <AICard tag="Janus 如何用你的人设" tone="accent" title="这页就是你的「CEV 锚」" body={s.cevNote} />
      </div>

      {/* 多归属身份 */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>可切换</Tag>}>我的身份 · 多归属主体</SectionLabel>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginBottom: 18 }}>
        {s.identities.map(id => {
          const on = id.id === actId;
          return (
            <Card key={id.id} pad={14} glow={on} onClick={() => switchId(id)} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
              <div style={{ width: 40, height: 40, borderRadius: 11, background: on ? T.accSoft : T.surface2, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="building" size={20} color={on ? T.accent : T.sub} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                  <span style={{ fontSize: 14, fontWeight: 700, color: T.text }}>{id.org}</span>
                  {on && <Tag tone="accent" style={{ fontSize: 9.5 }}>当前</Tag>}
                </div>
                <div style={{ fontSize: 11.5, color: T.sub, marginTop: 2 }}>{id.role} · 主推 {id.product}</div>
              </div>
              <div style={{ width: 18, height: 18, borderRadius: '50%', border: `2px solid ${on ? T.accent : T.line2}`, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {on && <div style={{ width: 9, height: 9, borderRadius: '50%', background: T.accent }} />}
              </div>
            </Card>
          );
        })}
        <div style={{ fontSize: 10.5, color: T.faint, padding: '0 4px', lineHeight: 1.5 }}>同一个你，在不同公司有不同产品线、客户与同事。Janus 会按当前身份过滤漏斗与建议。</div>
      </div>

      {/* 人类图 */}
      <SectionLabel>个人属性 · 人类图</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {[['类型', s.humanDesign.type], ['策略', s.humanDesign.strategy], ['内在权威', s.humanDesign.authority], ['MBTI', s.persona.mbti]].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>
        ))}
        <div style={{ padding: '11px 15px', display: 'flex', gap: 8, alignItems: 'center', background: T.accSoft }}>
          <Sparkle size={13} />
          <span style={{ fontSize: 11.5, color: T.text, lineHeight: 1.45 }}>{s.humanDesign.note}</span>
        </div>
      </Card>

      {/* 销售风格 */}
      <SectionLabel>销售风格</SectionLabel>
      <Card style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
          <Pill>{s.persona.style}</Pill><Pill>{s.persona.tone}</Pill>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: T.good, marginBottom: 7 }}>强项</div>
            {s.strengths.map((x, i) => (
              <div key={i} style={{ display: 'flex', gap: 7, marginBottom: 6 }}>
                <Icon name="check" size={13} color={T.good} style={{ flexShrink: 0, marginTop: 2 }} />
                <span style={{ fontSize: 11.8, color: T.text, lineHeight: 1.4 }}>{x}</span>
              </div>
            ))}
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: T.warn, marginBottom: 7 }}>盲区 · Janus 补位</div>
            {s.blindspots.map((x, i) => (
              <div key={i} style={{ display: 'flex', gap: 7, marginBottom: 6 }}>
                <Icon name="alert" size={13} color={T.warn} style={{ flexShrink: 0, marginTop: 2 }} />
                <span style={{ fontSize: 11.8, color: T.text, lineHeight: 1.4 }}>{x}</span>
              </div>
            ))}
          </div>
        </div>
      </Card>

      {/* 历史背景 */}
      <SectionLabel>工作经历 · 历史背景</SectionLabel>
      <Card pad={14} style={{ marginBottom: 16 }}>
        {s.background.map((b, i, a) => (
          <div key={i} style={{ display: 'flex', gap: 9, alignItems: 'center', paddingBottom: i < a.length - 1 ? 9 : 0 }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: T.accent, flexShrink: 0 }} />
            <span style={{ fontSize: 12.8, color: T.text }}>{b}</span>
          </div>
        ))}
      </Card>

      {/* 资料库 · 项目通用弹药 */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>跨项目复用</Tag>}>资料库 · 通用弹药</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16 }}>
        {ASSETS.map((a, i) => (
          <div key={i} onClick={() => toast(`${a.name} · 已就绪，可插入纪要或发客户`)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '12px 15px', borderBottom: i < ASSETS.length - 1 ? `1px solid ${T.line}` : 'none', cursor: 'pointer' }}>
            <div style={{ width: 32, height: 32, borderRadius: 9, background: T.surface2, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name={a.icon} size={16} color={T.accent} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: T.text }}>{a.name}</div>
              <div style={{ fontSize: 11, color: T.sub, marginTop: 1 }}>{a.meta}</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="upload" size={15} color={T.accent} />上传新资料
        </button>
      </Card>

      <GhostButton icon="edit" onClick={() => toast('演示原型 · 资料编辑即将开放')}>补充我的信息</GhostButton>
    </div>
  );
}
window.MeScreen = MeScreen;