/* screens-chat.jsx — 对话界面：结果以文字 / 卡片在对话流中呈现 */
/* global React, Screen, Raccoon, Ic */

function UserMsg({ children }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '0 16px 14px' }}>
      <div style={{ maxWidth: '78%', background: 'var(--purple)', color: '#fff', fontSize: 14.5, lineHeight: 1.55, padding: '11px 14px', borderRadius: '16px 16px 4px 16px' }}>
        {children}
      </div>
    </div>
  );
}

function AiMsg({ children }) {
  return (
    <div style={{ display: 'flex', gap: 10, margin: '0 16px 14px' }}>
      <Raccoon size="sm" />
      <div style={{ flex: 1, minWidth: 0 }}>{children}</div>
    </div>
  );
}

function AiText({ children }) {
  return <p style={{ fontSize: 14.5, lineHeight: 1.62, color: 'var(--t2)', margin: '4px 0 0' }}>{children}</p>;
}

/* 数据分析结果卡片 */
function ResultCard() {
  const rows = [
    { name: '搜索广告', roi: 4.2, w: '100%' },
    { name: '信息流', roi: 3.1, w: '74%' },
    { name: '社媒 KOL', roi: 2.4, w: '57%' },
    { name: '应用商店', roi: 1.3, w: '31%' },
  ];
  return (
    <div className="card" style={{ marginTop: 10, padding: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 12 }}>
        <Ic.chart size={16} color="var(--purple-dark)" />
        <span style={{ fontSize: 13.5, fontWeight: 600 }}>Q2 渠道 ROI 概览</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
        {rows.map((r, i) => (
          <div key={r.name}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 5 }}>
              <span style={{ color: 'var(--t2)' }}>{r.name}</span>
              <span style={{ fontWeight: 600, color: i === 0 ? 'var(--purple-dark)' : 'var(--t3)' }}>ROI {r.roi}</span>
            </div>
            <div style={{ height: 7, borderRadius: 4, background: 'var(--bg-muted)', overflow: 'hidden' }}>
              <div style={{ width: r.w, height: '100%', borderRadius: 4, background: i === 0 ? 'var(--purple)' : 'var(--purple-light)' }} />
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 13, paddingTop: 12, borderTop: '1px solid var(--border)', fontSize: 12.5, color: 'var(--t3)', lineHeight: 1.6 }}>
        搜索广告 ROI 最高（4.2），建议把信息流约 20% 预算迁移至此。
      </div>
    </div>
  );
}

function ChatActions() {
  return (
    <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
      {['导出为周报', '生成 PPT', '只看 Top3 明细'].map((a, i) => (
        <span key={a} style={{ fontSize: 12.5, fontWeight: 500, color: i === 0 ? 'var(--purple-dark)' : 'var(--t3)', background: i === 0 ? 'var(--purple-bg)' : 'var(--bg-subtle)', border: `1px solid ${i === 0 ? 'var(--purple-border)' : 'var(--border)'}`, padding: '7px 13px', borderRadius: 18 }}>{a}</span>
      ))}
    </div>
  );
}

function ChatScreen() {
  return (
    <Screen tinted>
      <div className="appbar" style={{ background: 'var(--bg-subtle)' }}>
        <button className="iconbtn"><Ic.back size={22} /></button>
        <div style={{ flex: 1 }}>
          <div className="appbar-title" style={{ fontSize: 15.5 }}>数据分析</div>
          <div className="appbar-sub" style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span className="dot on" /> 云端对话
          </div>
        </div>
        <button className="iconbtn"><Ic.plus size={20} /></button>
      </div>

      <div className="body">
        <div className="scroll" style={{ paddingTop: 10 }}>
          <UserMsg>帮我分析 Q2 各渠道投放数据，找出 ROI 最高的渠道</UserMsg>

          <AiMsg>
            <AiText>已读取你上传的《Q2投放明细.xlsx》，按渠道汇总了投入产出比：</AiText>
            <ResultCard />
            <ChatActions />
          </AiMsg>

          <UserMsg>那就把结论整理成一段周报文字</UserMsg>

          <AiMsg>
            <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 14, padding: '12px 14px', marginTop: 6, fontSize: 13.5, lineHeight: 1.7, color: 'var(--t2)' }}>
              「Q2 投放整体 ROI 2.8。<b style={{ color: 'var(--t1)' }}>搜索广告表现最佳（4.2）</b>，建议下季度将信息流约 20% 预算前移，应用商店投放收缩。」
            </div>
          </AiMsg>
        </div>

        <div className="dock-wrap" style={{ paddingTop: 10 }}>
          <div className="dock" style={{ background: '#fff' }}>
            <span className="ph">继续追问，或长按说话</span>
            <span className="mic"><Ic.mic size={19} /></span>
          </div>
        </div>
      </div>
    </Screen>
  );
}

Object.assign(window, { ChatScreen });
