// ─── 屏 1：简报（多日 · 下一场可右滑） ───
const { useState: useSH, useRef: useRH, useEffect: useEH } = React;

const DAYS = [
  { label: '今日 · 周二 6/13', rich: true },
  { label: '明天 · 周三 6/14', headline: '把苏州科锐捞回来', body: '苏州已 14 天无互动；明早第一件事，用新版白皮书重新触达。', items: [{ text: '苏州科锐 · 重新触达（白皮书）', cust: '苏州科锐', due: '上午', tone: 'warn' }, { text: '南京远拓 · 需求访谈', cust: '南京远拓', due: '14:00', tone: 'accent' }] },
  { label: '后天 · 周四 6/15', headline: '为陈总的汇报备料', body: '一页纸 ROI 摘要今天定稿，周五前发给周凯转交。', items: [{ text: '恒升 · ROI 摘要定稿', cust: '恒升智造', due: '定稿', tone: 'good' }, { text: '上海凌动 · 条款回复', cust: '上海凌动', due: '截止', tone: 'bad' }] },
];

function HomeScreen() {
  const T = useT();
  const { go, openSheet } = useApp();
  const c = CUSTOMER;
  const [days, setDays] = useSH(1);
  const sentinelRef = useRH(null);
  useEH(() => {
    if (days >= DAYS.length) return;
    const sc = document.querySelector('.jn-scroll');
    const el = sentinelRef.current;
    if (!sc || !el) return;
    const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) setDays(n => Math.min(n + 1, DAYS.length)); }, { root: sc, threshold: 0.6 });
    io.observe(el);
    return () => io.disconnect();
  }, [days]);

  // 下一场 · 右滑卡组
  const NextUp = () => (
    <div>
      <SectionLabel right={<span style={{ fontSize: 10.5, color: T.faint }}>右滑看更多 ›</span>}>下一场 · 21 分钟后</SectionLabel>
      <div style={{ display: 'flex', gap: 12, overflowX: 'auto', scrollSnapType: 'x mandatory', marginBottom: 18, paddingBottom: 4, WebkitOverflowScrolling: 'touch' }} className="jn-hscroll">
        {/* 主会议卡 */}
        <Card pad={0} glow style={{ overflow: 'hidden', flex: '0 0 100%', scrollSnapAlign: 'center', scrollSnapStop: 'always' }} onClick={() => go('presence')}>
          <div style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 13 }}>
            <div style={{ width: 50, height: 50, borderRadius: 14, background: T.accSoft, 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: 16.5, fontWeight: 800, color: T.text, letterSpacing: -0.3 }}>{c.name}</div>
              <div style={{ fontSize: 12.5, color: T.sub, marginTop: 2 }}>{c.meeting.title} · {c.meeting.via}</div>
            </div>
            <Ring value={c.deal.winRate} size={48} label="胜率" />
          </div>
          <div style={{ display: 'flex', borderTop: `1px solid ${T.line}` }}>
            {[['金额', c.deal.amount], ['阶段', c.deal.stage], ['已跟进', c.deal.days + ' 天']].map(([k, v], i) => (
              <div key={i} style={{ flex: 1, padding: '11px 0', textAlign: 'center', borderRight: i < 2 ? `1px solid ${T.line}` : 'none' }}>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: T.text }}>{v}</div>
                <div style={{ fontSize: 10.5, color: T.faint, marginTop: 2 }}>{k}</div>
              </div>
            ))}
          </div>
          <div style={{ padding: '13px 16px 15px' }}>
            <PrimaryButton icon="eye" onClick={(e) => { e.stopPropagation(); go('presence'); }}>1 秒看懂这位客户</PrimaryButton>
          </div>
        </Card>

        {/* 没了 */}
        <Card style={{ flex: '0 0 100%', scrollSnapAlign: 'center', scrollSnapStop: 'always', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', minHeight: 150 }}>
          <Icon name="checkCircle" size={30} color={T.faint} />
          <div style={{ fontSize: 13.5, fontWeight: 700, color: T.text, marginTop: 10 }}>今日没有更多会议了</div>
          <div style={{ fontSize: 11.5, color: T.sub, marginTop: 4, lineHeight: 1.5, padding: '0 10px' }}>专注打好这一场。下面是信号过滤为你挑出的、该主动碰一下的客户。</div>
        </Card>

        {/* 信号过滤推荐的客户卡（结构与恒升一致） */}
        <Card pad={0} style={{ overflow: 'hidden', flex: '0 0 100%', scrollSnapAlign: 'center', scrollSnapStop: 'always', border: `1px solid ${hexA(T.warn, 0.3)}` }} onClick={() => go('presence')}>
          <div style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 13 }}>
            <div style={{ width: 50, height: 50, borderRadius: 14, background: T.warnBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="building" size={26} color={T.warn} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ fontSize: 16.5, fontWeight: 800, color: T.text, letterSpacing: -0.3 }}>苏州科锐</span>
                <Tag tone="warn" style={{ fontSize: 9.5 }}>信号过滤</Tag>
              </div>
              <div style={{ fontSize: 12.5, color: T.warn, marginTop: 2, fontWeight: 600 }}>已 14 天无互动 · 再不碰就凉</div>
            </div>
            <Ring value={38} size={48} label="胜率" />
          </div>
          <div style={{ display: 'flex', borderTop: `1px solid ${T.line}` }}>
            {[['金额', '¥54 万'], ['阶段', '需求发现'], ['已跟进', '51 天']].map(([k, v], i) => (
              <div key={i} style={{ flex: 1, padding: '11px 0', textAlign: 'center', borderRight: i < 2 ? `1px solid ${T.line}` : 'none' }}>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: T.text }}>{v}</div>
                <div style={{ fontSize: 10.5, color: T.faint, marginTop: 2 }}>{k}</div>
              </div>
            ))}
          </div>
          <div style={{ padding: '13px 16px 15px' }}>
            <PrimaryButton icon="eye" onClick={(e) => { e.stopPropagation(); go('presence'); }}>1 秒看懂这位客户</PrimaryButton>
          </div>
        </Card>
      </div>
    </div>
  );

  // 轻量未来日块（显式当日 GTD）
  const FutureDay = ({ d }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '4px 2px 12px' }}>
        <div style={{ height: 1, flex: 1, background: T.line }} />
        <span style={{ fontSize: 11.5, fontWeight: 700, color: T.sub }}>{d.label}</span>
        <div style={{ height: 1, flex: 1, background: T.line }} />
      </div>
      <div style={{ marginBottom: 12 }}>
        <AICard tag="Janus · 提前规划" tone="accent" title={d.headline} body={d.body} />
      </div>
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>{d.items.length} 项</Tag>}>当日待办</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden' }}>
        {d.items.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 11, padding: '12px 15px', borderBottom: i < d.items.length - 1 ? `1px solid ${T.line}` : 'none' }}>
            <div style={{ width: 20, height: 20, borderRadius: 6, border: `1.8px solid ${T.line2}`, flexShrink: 0, marginTop: 1 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.8, color: T.text, lineHeight: 1.4 }}>{it.text}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 4 }}>
                <Tag tone={it.tone} style={{ fontSize: 9 }}>{it.cust}</Tag>
                <span style={{ fontSize: 10.5, color: T.faint }}>· {it.due}</span>
              </div>
            </div>
          </div>
        ))}
      </Card>
    </div>
  );

  return (
    <div style={{ padding: '4px 16px 24px' }}>
      {/* 问候 */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', margin: '6px 2px 18px' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 13, color: T.sub, fontWeight: 500 }}>周二 · 6 月 13 日</span>
            <button onClick={() => go('me')} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, border: `1px solid ${T.line}`, background: T.surface2, color: T.sub, fontSize: 10.5, fontWeight: 600, padding: '3px 8px', borderRadius: 999, cursor: 'pointer', fontFamily: FONT }}>
              {SELF.identities.find(i => i.active).org} · 全职 <Chevron size={12} dir="down" />
            </button>
          </div>
          <div style={{ fontSize: 25, fontWeight: 800, color: T.text, letterSpacing: -0.6, marginTop: 5 }}>
            Leo，今天有 <span style={{ color: T.accent }}>1 场硬仗</span>
          </div>
        </div>
        <div onClick={() => go('me')} style={{ width: 42, height: 42, borderRadius: '50%', background: `linear-gradient(135deg,${T.accent},${T.acc2})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 15, cursor: 'pointer', flexShrink: 0 }}>LK</div>
      </div>

      {/* 信号过滤降噪带 */}
      <div style={{ marginBottom: 16, background: T.surface, border: `0.5px solid ${T.line}`, borderRadius: 16, padding: '13px 15px', boxShadow: T.shadowSm }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 10 }}>
          <Icon name="shield" size={15} color={T.accent} />
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.4, color: T.sub }}>信号过滤 · 替你挡掉噪音</span>
          <span style={{ marginLeft: 'auto', fontSize: 11, color: T.faint }}>{NOISE.sources} 个数据源</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 9 }}>
          <span style={{ fontFamily: NUMF, fontSize: 14, color: T.faint, textDecoration: 'line-through' }}>{NOISE.scanned} 条更新</span>
          <Icon name="arrowRight" size={14} color={T.faint} />
          <span style={{ fontFamily: NUMF, fontSize: 22, fontWeight: 800, color: T.accent, lineHeight: 1 }}>{NOISE.kept}</span>
          <span style={{ fontSize: 12.5, color: T.text, fontWeight: 600 }}>件要事</span>
          <span style={{ marginLeft: 'auto', fontSize: 11, color: T.good, fontWeight: 600, whiteSpace: 'nowrap' }}>挡掉 {NOISE.filtered} 条噪音</span>
        </div>
        <div style={{ display: 'flex', height: 5, borderRadius: 3, overflow: 'hidden', gap: 2, marginBottom: 11 }}>
          <div style={{ flex: NOISE.filtered, background: T.line2, borderRadius: 3 }} />
          <div style={{ flex: NOISE.kept * 4, background: `linear-gradient(90deg,${T.accent},${T.acc2})`, borderRadius: 3 }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
          {NOISE.keptItems.map((it, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Tag tone={it.tone} style={{ fontSize: 9.5, padding: '2px 7px', minWidth: 30, justifyContent: 'center' }}>{it.tag}</Tag>
              <span style={{ fontSize: 12.3, color: T.text, lineHeight: 1.4 }}>{it.text}</span>
            </div>
          ))}
        </div>
      </div>

      {/* AI 晨间结论 */}
      <div style={{ marginBottom: 18 }}>
        <AICard tag="Janus · 今日判断" tone="accent"
          title="9:30 的恒升复谈，胜负手是价格异议"
          body="昨晚沈蓉牵头启动了「降本增效」专项。把话术从「增长」切到「降本」，并主动抛出分期方案——这是今天唯一需要你赢下的瞬间。" />
      </div>

      <NextUp />

      {/* 会前待办 */}
      <SectionLabel right={<span style={{ fontSize: 11.5, color: T.accent, fontWeight: 600 }}>已备好 3 项</span>}>会前 · AI 已替你准备</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 18 }}>
        {[
          { icon: 'doc', t: '《金蝶 ERP 对接案例 · 宁波拓维》', s: '应对王磊的集成异议 · 已就绪', tone: T.good },
          { icon: 'chart', t: 'ROI 测算：对标 120 万/年人力投入', s: '可一键投屏 · 已就绪', tone: T.good },
          { icon: 'bolt', t: '分期报价话术卡', s: '应对沈蓉价格异议 · 已就绪', tone: T.accent },
        ].map((r, i, a) => (
          <div key={i} onClick={() => openSheet('prep', { name: r.t })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none', cursor: 'pointer' }}>
            <div style={{ width: 34, height: 34, borderRadius: 10, background: hexA(r.tone, 0.13), display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name={r.icon} size={18} color={r.tone} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.2, fontWeight: 600, color: T.text, lineHeight: 1.35 }}>{r.t}</div>
              <div style={{ fontSize: 11, color: T.sub, marginTop: 2 }}>{r.s}</div>
            </div>
            <Icon name="checkCircle" size={20} color={r.tone} />
            <Chevron size={15} />
          </div>
        ))}
      </Card>

      {/* 未来日（多日简报） */}
      {DAYS.slice(1, days).map((d, i) => <FutureDay key={i} d={d} />)}

      {/* 上滑自动加载下一天 */}
      {days < DAYS.length ? (
        <div ref={sentinelRef} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, padding: '18px 0', color: T.faint }}>
          <Icon name="arrowUp" size={15} color={T.faint} />
          <span style={{ fontSize: 12, fontWeight: 600 }}>上滑加载{days === 1 ? '明天' : '后天'}的简报…</span>
        </div>
      ) : (
        <div style={{ textAlign: 'center', fontSize: 11, color: T.faint, padding: '14px 0' }}>老 A 默认只规划未来 3 天 · 到此为止</div>
      )}
    </div>
  );
}
window.HomeScreen = HomeScreen;