// components/chat-cards.jsx — shared AI-chat message renderers (bubbles, CTA / insight cards, typing).
// Used by the home page, the chat-screen page, and other screens that show chat content.

function AIWrap({ children, first }) {
  return A('div', { className: 'ccaRise', style: { display: 'flex', gap: 8, alignItems: 'flex-end', maxWidth: '88%' } },
    A('div', { style: { width: 30, flexShrink: 0 } }, first && A(Avatar, { size: 30, kind: 'ai' })),
    children);
}

function Bubble({ from, children }) {
  const me = from === 'me';
  return A('div', { style: {
    background: me ? 'var(--brandSoft)' : 'var(--surface)', color: 'var(--ink)',
    border: me ? 'none' : '1px solid var(--line2)', padding: '11px 14px', fontSize: 14, lineHeight: 1.55,
    borderRadius: 18, borderBottomRightRadius: me ? 5 : 18, borderBottomLeftRadius: me ? 18 : 5,
    maxWidth: '100%', wordBreak: 'break-word' } }, children);
}

function CTACard({ icon = 'calendar', title, desc, action = '前往', onClick }) {
  return A('div', { className: 'ccaTap ccaPop', onClick, style: {
    display: 'flex', alignItems: 'stretch', background: 'var(--surface)', borderRadius: 16,
    border: '1px solid var(--line2)', overflow: 'hidden', maxWidth: '100%' } },
    A('div', { style: { width: 5, background: 'var(--brand)', flexShrink: 0 } }),
    A('div', { style: { padding: '12px 12px 12px 13px', display: 'flex', gap: 11, alignItems: 'center', flex: 1 } },
      A('div', { style: { width: 38, height: 38, borderRadius: 11, background: 'var(--brandSoft)', flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brandDeep)' } },
        A(Icon, { name: icon, size: 21, sw: 1.9 })),
      A('div', { style: { flex: 1, minWidth: 0 } },
        A('div', { style: { fontSize: 14, fontWeight: 700 } }, title),
        desc && A('div', { style: { fontSize: 12, color: 'var(--ink3)', marginTop: 2 } }, desc),
        A('div', { style: { fontSize: 12.5, fontWeight: 700, color: 'var(--brandDeep)', marginTop: 7, display: 'flex', alignItems: 'center', gap: 3 } },
          action, A(Icon, { name: 'arrowR', size: 14, sw: 2.2 }))),
      A(Icon, { name: 'chevR', size: 18, color: 'var(--ink3)' })));
}

function InsightCard({ cat = '妙妙', item = '血檢結果', thumb = true, note, onClick }) {
  return A('div', { className: 'ccaTap ccaPop', onClick, style: {
    display: 'flex', alignItems: 'stretch', background: 'var(--surface)', borderRadius: 16,
    border: '1px solid var(--sageSoft)', overflow: 'hidden', maxWidth: '100%' } },
    A('div', { style: { width: 5, background: 'var(--sage)', flexShrink: 0 } }),
    A('div', { style: { padding: '12px', display: 'flex', gap: 11, alignItems: 'center', flex: 1 } },
      thumb && A(Ph, { w: 42, h: 42, r: 11, icon: 'drop' }),
      A('div', { style: { flex: 1, minWidth: 0 } },
        A('div', { style: { fontSize: 11, fontWeight: 800, color: 'var(--sage)', display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 } },
          A(Icon, { name: 'check', size: 13, sw: 2.6 }), 'AI 已更新活檔案'),
        A('div', { style: { fontSize: 14, fontWeight: 700 } }, `已更新 ${item}`),
        note && A('div', { style: { fontSize: 12, color: 'var(--ink3)', marginTop: 2 } }, note),
        A('div', { style: { fontSize: 12.5, fontWeight: 700, color: '#4E6B4B', marginTop: 7, display: 'flex', alignItems: 'center', gap: 3 } },
          '查看活檔案', A(Icon, { name: 'arrowR', size: 14, sw: 2.2 }))) ));
}

function RichBubble({ title, bullets }) {
  return A('div', { style: {
    background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 18, borderBottomLeftRadius: 5,
    padding: '13px 15px', fontSize: 14, maxWidth: '100%' } },
    title && A('div', { style: { fontWeight: 700, marginBottom: 8 } }, title),
    A('div', { style: { display: 'flex', flexDirection: 'column', gap: 7 } },
      bullets.map((b, i) => A('div', { key: i, style: { display: 'flex', gap: 8, lineHeight: 1.5 } },
        A('div', { style: { width: 6, height: 6, borderRadius: 3, background: 'var(--brand)', marginTop: 7, flexShrink: 0 } }),
        A('div', null, b)))));
}

function Typing() {
  return A(AIWrap, { first: true },
    A('div', { style: { background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 18, borderBottomLeftRadius: 5, padding: '13px 16px', display: 'flex', gap: 4 } },
      [0, 1, 2].map(i => A('div', { key: i, style: { width: 7, height: 7, borderRadius: 4, background: 'var(--ink3)', animation: `ccaDots 1.2s ${i * 0.18}s infinite` } }))));
}

// render one message object → a bubble / card / image, keyed by index
function renderMsg(m, i, go) {
  if (m.type === 'cta') return A(AIWrap, { key: i, first: true }, A(CTACard, { ...m, onClick: () => go && go(m.target) }));
  if (m.type === 'insight') return A(AIWrap, { key: i, first: true }, A(InsightCard, { ...m, onClick: () => go && go('cat') }));
  if (m.type === 'rich') return A(AIWrap, { key: i, first: true }, A(RichBubble, m));
  if (m.type === 'image') return A('div', { key: i, style: { display: 'flex', justifyContent: m.from === 'me' ? 'flex-end' : 'flex-start' } },
    A(Ph, { w: 168, h: 126, r: 16, icon: m.icon || 'image', label: m.label }));
  if (m.from === 'me') return A('div', { key: i, className: 'ccaRise', style: { display: 'flex', justifyContent: 'flex-end' } }, A(Bubble, { from: 'me' }, m.text));
  return A(AIWrap, { key: i, first: m.first !== false }, A(Bubble, { from: 'ai' }, m.text));
}

Object.assign(window, { AIWrap, Bubble, CTACard, InsightCard, RichBubble, Typing, renderMsg });