// ─── 屏 3：作战室 · Janus 共析（Clarity） ───
const { useState: useSW, useRef: useRW, useEffect: useEW } = React;

function WarRoomScreen() {
  const T = useT();
  const { go, back, openSheet, aiName } = useApp();
  const [mats, setMats] = useSW(WARROOM.materials);
  const [msgs, setMsgs] = useSW(WARROOM.chat);
  const [draft, setDraft] = useSW('');
  const [thinking, setThinking] = useSW(false);
  const scrollRef = useRW(null);

  useEW(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [msgs, thinking]);

  const send = (text) => {
    if (!text.trim()) return;
    setMsgs(m => [...m, { who: 'me', text }]);
    setDraft('');
    setThinking(true);
    setTimeout(() => {
      setThinking(false);
      setMsgs(m => [...m, { who: 'janus', text: WARROOM.cannedReply }]);
    }, 1400);
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* 顶部：客户 + 素材 */}
      <div style={{ padding: '8px 16px 12px', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 11 }}>
          <button onClick={back} style={{ width: 34, height: 34, borderRadius: 11, border: `1px solid ${T.line}`, background: T.surface, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="back" size={18} color={T.text} />
          </button>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 15.5, fontWeight: 800, color: T.text, display: 'flex', alignItems: 'center', gap: 6 }}>
              作战室 <span style={{ fontSize: 11, fontWeight: 600, color: T.sub }}>· {CUSTOMER.name}</span>
            </div>
            <div style={{ fontSize: 11, color: T.sub, display: 'flex', alignItems: 'center', gap: 5, marginTop: 1 }}>
              <Sparkle size={11} />与 {aiName} 一起分析与推演
            </div>
          </div>
        </div>
        {/* 素材条 */}
        <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
          {mats.map((m, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 7, background: T.surface, border: `1px solid ${T.line}`, borderRadius: 10, padding: '7px 10px' }}>
              <Icon name={m.icon} size={15} color={T.accent} />
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 11.5, fontWeight: 600, color: T.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 130 }}>{m.name}</div>
                <div style={{ fontSize: 9.5, color: T.faint }}>{m.meta}</div>
              </div>
            </div>
          ))}
          <button onClick={() => setMats(x => [...x, { type: 'audio', name: '现场录音.m4a', meta: '18 分钟', icon: 'mic' }])}
            style={{ display: 'flex', alignItems: 'center', gap: 5, background: 'transparent', border: `1px dashed ${T.line2}`, borderRadius: 10, padding: '7px 11px', cursor: 'pointer', color: T.sub, fontSize: 11.5, fontWeight: 600, fontFamily: FONT }}>
            <Icon name="upload" size={14} color={T.sub} />上传转录 / 录音 / PDF
          </button>
        </div>
      </div>

      {/* 对话 */}
      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '4px 16px 8px' }}>
        {/* 解析结果系统卡 */}
        <div style={{ marginBottom: 14 }}>
          <AICard tag="素材已解析" tone="accent" compact
            title="从 0613 转录中，提炼到 3 个关键信号"
            body="预算 ≤ 90 万/年、Q3 上线、金蝶对接顾虑——其中 2 个已写入客户档案，1 个标记为风险待跟进。" />
        </div>
        {msgs.map((m, i) => (
          <div key={i} style={{ marginBottom: 12, display: 'flex', justifyContent: m.who === 'me' ? 'flex-end' : 'flex-start', animation: 'rise .3s ease both' }}>
            <div style={{ maxWidth: '85%' }}>
              {m.who === 'janus' && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 5, margin: '0 0 4px 4px' }}>
                  <Sparkle size={12} /><span style={{ fontSize: 10.5, fontWeight: 700, color: T.accent }}>{aiName}</span>
                </div>
              )}
              <div style={{
                fontSize: 13.3, lineHeight: 1.6, padding: '10px 13px', borderRadius: 15,
                color: m.who === 'me' ? '#fff' : T.text,
                background: m.who === 'me' ? `linear-gradient(135deg,${T.accent},${hexA(T.acc2, 0.9)})` : T.surface,
                border: m.who === 'me' ? 'none' : `1px solid ${T.line}`,
                borderBottomRightRadius: m.who === 'me' ? 5 : 15, borderBottomLeftRadius: m.who === 'me' ? 15 : 5,
              }}>{m.text}</div>
            </div>
          </div>
        ))}
        {thinking && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 12px', color: T.faint }}>
            <span className="typing-dot" /><span className="typing-dot" style={{ animationDelay: '.2s' }} /><span className="typing-dot" style={{ animationDelay: '.4s' }} />
            <span style={{ fontSize: 11, marginLeft: 4 }}>{aiName} 正在推演…</span>
          </div>
        )}
      </div>

      {/* 快捷追问 + 输入 */}
      <div style={{ flexShrink: 0, borderTop: `1px solid ${T.line}`, background: T.surface }}>
        <div style={{ display: 'flex', gap: 7, overflowX: 'auto', padding: '10px 16px 6px' }}>
          {WARROOM.quickAsks.map((q, i) => (
            <button key={i} onClick={() => send(q)} style={{ flexShrink: 0, whiteSpace: 'nowrap', fontSize: 11.5, fontWeight: 600, color: T.accent, background: T.accSoft, border: `1px solid ${T.accLine}`, borderRadius: 999, padding: '7px 12px', cursor: 'pointer', fontFamily: FONT }}>{q}</button>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 16px 10px' }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, background: T.surface2, border: `1px solid ${T.line}`, borderRadius: 13, padding: '0 6px 0 13px' }}>
            <input value={draft} onChange={e => setDraft(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') send(draft); }}
              placeholder={`问 ${aiName}，或一起推演下一步…`}
              style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', color: T.text, fontSize: 13, fontFamily: FONT, padding: '12px 0' }} />
            <button onClick={() => send(draft)} style={{ width: 34, height: 34, borderRadius: 10, border: 'none', cursor: 'pointer', background: draft.trim() ? `linear-gradient(135deg,${T.accent},${T.acc2})` : T.line2, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="send" size={17} color={draft.trim() ? '#fff' : T.faint} />
            </button>
          </div>
        </div>
        <div style={{ padding: '0 16px calc(14px + env(safe-area-inset-bottom))' }}>
          <PrimaryButton icon="doc" onClick={() => go('velocity', { mode: '共析' })}>生成共析纪要</PrimaryButton>
        </div>
      </div>
    </div>
  );
}
window.WarRoomScreen = WarRoomScreen;