// ─── 屏 6：博弈复盘（Reflection） ───
function ReviewScreen() {
  const T = useT();
  const { go, openSheet, aiName, notes } = useApp();
  const r = REVIEW;
  const reflections = notes.filter(n => (n.links || []).some(l => l.type === 'review'));
  return (
    <div style={{ padding: '4px 16px 24px' }}>
      <div style={{ padding: '6px 2px 12px' }}>
        <div style={{ fontSize: 23, fontWeight: 800, color: T.text, letterSpacing: -0.5 }}>复盘</div>
        <div style={{ fontSize: 12.5, color: T.sub, marginTop: 3 }}>把每一单的得失，变成下一单的本能</div>
      </div>

      {/* 记复盘笔记 · 突出卡片入口 */}
      <div style={{ position: 'relative', borderRadius: 18, padding: 1.2, background: `linear-gradient(135deg, ${hexA(T.accent, 0.55)}, ${hexA(T.acc2, 0.3)})`, marginBottom: 16, boxShadow: `0 6px 20px ${hexA(T.accent, 0.22)}` }}>
        <div style={{ background: T.dark ? 'linear-gradient(180deg,#141A26,#11161F)' : 'linear-gradient(180deg,#FFFFFF,#FBFCFE)', borderRadius: 17, padding: '16px 16px 15px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 8 }}>
            <Sparkle size={14} />
            <span style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: 0.6, color: T.accent, textTransform: 'uppercase' }}>复盘是顶级销售的本能</span>
          </div>
          <div style={{ fontSize: 16, fontWeight: 800, color: T.text, letterSpacing: -0.3, lineHeight: 1.35 }}>刚打完一场？趁记忆还热，记一条</div>
          <div style={{ fontSize: 12.8, color: T.sub, lineHeight: 1.6, margin: '6px 0 13px' }}>这一刻的得失、对手的动作、自己的判断——写下来，老 A 会把它沉淀进你的打单手册，下次同类局面自动提醒。</div>
          <PrimaryButton icon="edit" onClick={() => openSheet('note', { preLink: { type: 'review', name: '广州迈合复盘' } })}>记一条复盘笔记</PrimaryButton>
        </div>
      </div>

      {/* 输单卡 */}
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 16, border: `1px solid ${hexA(T.bad, 0.25)}` }}>
        <div style={{ padding: '15px 16px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${T.line}` }}>
          <div style={{ width: 44, height: 44, borderRadius: 13, background: T.badBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="flag" size={22} color={T.bad} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 15.5, fontWeight: 800, color: T.text }}>{r.lost.name}</span>
              <Tag tone="bad" style={{ fontSize: 10 }}>输单</Tag>
            </div>
            <div style={{ fontSize: 11.5, color: T.sub, marginTop: 3 }}>{r.lost.amount} · 止步{r.lost.stageReached} · {r.lost.closed}</div>
          </div>
        </div>
        <div style={{ padding: '14px 16px' }}>
          <AICard tag="复盘结论" tone="bad"
            title={r.lost.verdict}
            body="Janus 回放了全程 9 次接触，定位到 3 个决定性瞬间——它们当时看着都不起眼。" />
        </div>
      </Card>

      {/* 关键瞬间 */}
      <SectionLabel right={<span style={{ fontSize: 11, color: T.bad, fontWeight: 600 }}>3 个被忽略的瞬间</span>}>博弈回放</SectionLabel>
      <div style={{ paddingLeft: 4, marginBottom: 18 }}>
        {r.lost.moments.map((m, i, a) => (
          <div key={i} style={{ display: 'flex', gap: 13 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
              <div style={{ width: 26, height: 26, borderRadius: '50%', background: T.badBg, color: T.bad, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800, fontFamily: NUMF }}>{i + 1}</div>
              {i < a.length - 1 && <div style={{ width: 1.5, flex: 1, background: T.line, marginTop: 3 }} />}
            </div>
            <div style={{ paddingBottom: 18, flex: 1 }}>
              <div style={{ fontSize: 10.5, color: T.faint, fontWeight: 600, marginBottom: 4 }}>{m.when}</div>
              <Card pad={13} onClick={() => openSheet('moment', { idx: i })}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: T.text, lineHeight: 1.4, flex: 1 }}>{m.title}</div>
                  <Chevron size={15} />
                </div>
                <div style={{ fontSize: 12.3, color: T.sub, lineHeight: 1.6, marginBottom: 10 }}>{m.body}</div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', background: T.accSoft, borderRadius: 10, padding: '9px 11px' }}>
                  <Sparkle size={13} />
                  <span style={{ fontSize: 12, color: T.text, fontWeight: 600, lineHeight: 1.4 }}>{m.lesson}</span>
                </div>
              </Card>
            </div>
          </div>
        ))}
      </div>

      {/* 你的复盘笔记（博弈回放与赢单基因之间） */}
      {reflections.length > 0 && (
        <div style={{ marginBottom: 18 }}>
          <SectionLabel right={<Tag tone="accent" style={{ fontSize: 10 }}>{reflections.length} 条</Tag>}>你的复盘笔记</SectionLabel>
          {reflections.map(n => <NoteCard key={n.id} note={n} onClick={() => openSheet('note', { note: n })} />)}
        </div>
      )}

      {/* 赢单对照 */}
      <SectionLabel>对照 · 赢单基因</SectionLabel>
      <Card style={{ marginBottom: 16, border: `1px solid ${hexA(T.good, 0.25)}` }} onClick={() => openSheet('wonReview')}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 11, background: T.goodBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="handshake" size={20} color={T.good} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: T.text }}>{r.won.name}</div>
            <div style={{ fontSize: 11.5, color: T.good, fontWeight: 600 }}>{r.won.amount} · {r.won.closed}</div>
          </div>
          <Chevron size={16} />
        </div>
        <div style={{ fontSize: 12.8, color: T.sub, lineHeight: 1.65 }}>{r.won.takeaway}</div>
      </Card>

      {/* 沉淀 */}
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', background: T.surface2, borderRadius: 14, padding: '14px 15px', border: `1px solid ${T.line}`, marginBottom: 16 }}>
        <Sparkle size={18} />
        <span style={{ fontSize: 12.5, color: T.text, lineHeight: 1.5, fontWeight: 500 }}>{r.sop}</span>
      </div>

      <PrimaryButton icon="message" onClick={() => go('warroom')}>{`就这个项目 · 与 ${aiName} 复盘`}</PrimaryButton>
    </div>
  );
}
window.ReviewScreen = ReviewScreen;
