// Claimmee AI 智能客服 — 意图识别 + 知识库引用 + 情感升级转人工。脚本化合成，不接真实大模型。
const AS = window.ClaimmeeDesignSystem_e4fda8;
const MktAs = window.ClaimmeeMkt;

function Typing() {
  return (
    <div style={{ display: 'flex', gap: 4, padding: '4px 2px' }}>
      {[0, 1, 2].map((i) => (
        <span key={i} style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--teal-400, #5eead4)', animation: `cmDot 1s ${i * 0.15}s infinite ease-in-out` }} />
      ))}
    </div>
  );
}

function Assistant() {
  const [msgs, setMsgs] = React.useState([
    { from: 'bot', text: '你好！我是 Claimmee 智能助手（演示）。我可以帮你判断航班是否可索赔、说明费用与所需材料、或查询案件进度。', intent: { label: '问候', confidence: 0.97 } },
  ]);
  const [input, setInput] = React.useState('');
  const [typing, setTyping] = React.useState(false);
  const scroller = React.useRef(null);

  React.useEffect(() => {
    const el = scroller.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [msgs, typing]);

  const send = (text) => {
    const t = (text != null ? text : input).trim();
    if (!t) return;
    setMsgs((m) => [...m, { from: 'user', text: t }]);
    setInput('');
    setTyping(true);
    setTimeout(() => {
      const r = MktAs.botReply(t);
      setTyping(false);
      setMsgs((m) => [...m, { from: 'bot', ...r }]);
    }, 650);
  };

  const wrap = { width: 'min(760px, calc(100vw - 32px))', margin: '0 auto' };

  return (
    <div style={{ background: 'var(--bg-page)', minHeight: 'calc(100vh - 58px)', paddingBottom: 40 }}>
      <section style={{ background: 'var(--grad-hero)', paddingTop: 36, paddingBottom: 36 }}>
        <div style={{ ...wrap, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'rgba(255,255,255,0.16)', border: '1px solid rgba(255,255,255,0.3)', display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 900, fontSize: '1.4rem' }}>C</div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#fff', fontWeight: 900, fontSize: '1.3rem' }}>Claimmee 智能客服<span style={{ width: 9, height: 9, borderRadius: '50%', background: '#34d399', boxShadow: '0 0 0 4px rgba(52,211,153,0.3)' }} /></div>
            <div style={{ color: 'var(--teal-100)', marginTop: 2, fontSize: '0.88rem' }}>中文优先 · 多语言 · AI 意图识别 + 知识库</div>
          </div>
          <div style={{ display: 'flex', gap: 5 }}>
            {MktAs.BOT.langs.slice(0, 4).map((l) => (
              <span key={l} style={{ padding: '0.2rem 0.5rem', borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,0.14)', color: '#fff', fontWeight: 700, fontSize: '0.72rem' }}>{l}</span>
            ))}
          </div>
        </div>
      </section>

      <div style={{ ...wrap, marginTop: 16 }}>
        <AS.Panel style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column', height: 'min(560px, 64vh)' }}>
          {/* 消息区 */}
          <div ref={scroller} style={{ flex: 1, overflowY: 'auto', padding: 20, display: 'flex', flexDirection: 'column', gap: 14, background: 'var(--slate-50)' }}>
            {msgs.map((m, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: m.from === 'user' ? 'flex-end' : 'flex-start' }}>
                <div style={{ maxWidth: '80%' }}>
                  {m.from === 'bot' && m.intent && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
                      <span style={{ padding: '0.15rem 0.5rem', borderRadius: 'var(--radius-pill)', background: 'var(--teal-100)', color: 'var(--teal-700)', fontWeight: 800, fontSize: '0.7rem' }}>识别意图 · {m.intent.label}</span>
                      <span style={{ color: 'var(--text-muted)', fontSize: '0.7rem' }}>置信度 {Math.round(m.intent.confidence * 100)}%</span>
                    </div>
                  )}
                  <div style={{ padding: '12px 16px', borderRadius: m.from === 'user' ? 'var(--radius-xl) var(--radius-xl) 4px var(--radius-xl)' : '4px var(--radius-xl) var(--radius-xl) var(--radius-xl)', background: m.from === 'user' ? 'var(--teal-700)' : 'var(--white)', color: m.from === 'user' ? '#fff' : 'var(--slate-800)', border: m.from === 'user' ? '0' : '1px solid var(--border-subtle)', lineHeight: 1.6, whiteSpace: 'pre-wrap', boxShadow: m.from === 'bot' ? 'var(--shadow-xs)' : 'none', fontWeight: m.from === 'user' ? 600 : 500 }}>
                    {m.text}
                  </div>
                  {/* 知识库引用 */}
                  {m.knowledge && (
                    <div style={{ marginTop: 6, padding: '10px 12px', borderRadius: 'var(--radius-lg)', background: 'var(--teal-50)', border: '1px dashed var(--teal-200)' }}>
                      <div style={{ fontSize: '0.72rem', fontWeight: 800, color: 'var(--teal-700)', marginBottom: 3 }}>引用知识库 · {m.knowledge.src}</div>
                    </div>
                  )}
                  {/* 转人工工单 */}
                  {m.escalate && (
                    <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 'var(--radius-lg)', background: m.priority === 'high' ? 'var(--status-gate-bg)' : 'var(--status-review-bg)' }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: m.priority === 'high' ? 'var(--red-600)' : 'var(--amber-500)', flex: '0 0 auto' }} />
                      <span style={{ fontWeight: 800, color: m.priority === 'high' ? 'var(--status-gate-ink)' : 'var(--status-review-ink)', fontSize: '0.82rem' }}>已转人工 · 工单 {m.ticket} · 优先级 {m.priority === 'high' ? '高' : '普通'}</span>
                    </div>
                  )}
                </div>
              </div>
            ))}
            {typing && (
              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
                <div style={{ padding: '8px 14px', borderRadius: '4px var(--radius-xl) var(--radius-xl) var(--radius-xl)', background: 'var(--white)', border: '1px solid var(--border-subtle)' }}><Typing /></div>
              </div>
            )}
          </div>

          {/* 快捷问题 */}
          <div style={{ display: 'flex', gap: 8, padding: '12px 16px 0', flexWrap: 'wrap', background: 'var(--white)' }}>
            {MktAs.BOT.quickReplies.map((q) => (
              <button key={q} onClick={() => send(q)} style={{ border: '1px solid var(--teal-200)', background: 'var(--teal-50)', color: 'var(--teal-700)', borderRadius: 'var(--radius-pill)', padding: '0.4rem 0.8rem', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.82rem', cursor: 'pointer', whiteSpace: 'nowrap' }}>{q}</button>
            ))}
          </div>

          {/* 输入区 */}
          <div style={{ display: 'flex', gap: 10, padding: 16, background: 'var(--white)' }}>
            <input value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') send(); }} placeholder="输入你的问题…" style={{ flex: 1, border: '1px solid var(--border-input)', borderRadius: 'var(--radius-pill)', padding: '0.8rem 1.1rem', fontFamily: 'var(--font-sans)', fontSize: '1rem', minHeight: 'var(--tap-min)', boxSizing: 'border-box' }} />
            <AS.Button variant="primary" onClick={() => send()}>发送</AS.Button>
          </div>
        </AS.Panel>

        <p style={{ margin: '14px 0 0', textAlign: 'center', color: 'var(--text-muted)', fontSize: '0.8rem', lineHeight: 1.6 }}>本智能客服为脚本化合成演示，回答仅为一般信息、不构成法律意见；试试输入「转人工」或表达不满，看自动升级与工单生成。</p>
      </div>
    </div>
  );
}

window.Assistant = Assistant;