// pages/chat-ai.jsx — a full AI chat room screen driven by a scripted engine.
// Renders messages via the shared chat-cards (renderMsg / Typing). Used for
// pre-loaded conversation demos and AI sessions opened from the inbox.

// props: initial[], script[] (queue of AI turn arrays), quick[], title, onBack, go
function ChatScreen({ initial = [], script = [], quick = [], title = '新對話', sessionName, onBack, go = () => {} }) {
  const [msgs, setMsgs] = React.useState(initial);
  const [typing, setTyping] = React.useState(false);
  const [qi, setQi] = React.useState(0);
  const [text, setText] = React.useState('');
  const scrollRef = React.useRef(null);
  React.useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight + 999; }, [msgs, typing]);

  const send = (userMsg) => {
    const turn = script[qi];
    setMsgs(m => [...m, { from: 'me', text: userMsg }]);
    setText('');
    if (!turn) return;
    setQi(q => q + 1);
    setTyping(true);
    setTimeout(() => { setTyping(false); setMsgs(m => [...m, ...turn]); }, 950);
  };

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    // header
    A('div', { style: { display: 'flex', alignItems: 'center', gap: 10, padding: '6px 14px 10px', flexShrink: 0 } },
      A('button', { className: 'ccaTap', onClick: onBack, style: { width: 36, height: 36, borderRadius: '50%', border: 'none', background: 'var(--surface)', boxShadow: 'inset 0 0 0 1px var(--line2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' } }, A(Icon, { name: 'chevL', size: 20 })),
      A(Avatar, { size: 36, kind: 'ai' }),
      A('div', { style: { flex: 1 } },
        A('div', { style: { fontSize: 15, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 } }, '寵答',
          A('span', { style: { fontSize: 9, fontWeight: 800, color: 'var(--brandDeep)', background: 'var(--brandSoft)', padding: '2px 6px', borderRadius: 6 } }, 'AI')),
        A('div', { style: { fontSize: 11, color: 'var(--ink3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 200 } }, sessionName || title)),
      A('button', { style: { width: 36, height: 36, borderRadius: '50%', border: 'none', background: 'transparent', color: 'var(--ink3)' } }, A(Icon, { name: 'list', size: 20 }))),
    // messages
    A('div', { ref: scrollRef, style: { flex: 1, overflowY: 'auto', padding: '4px 16px 8px', display: 'flex', flexDirection: 'column', gap: 12 } },
      msgs.map((m, i) => renderMsg(m, i, go)),
      typing && A(Typing, { key: 'typing' })),
    // quick replies
    quick.length > 0 && A('div', { style: { display: 'flex', gap: 8, padding: '6px 16px 4px', overflowX: 'auto', flexShrink: 0 } },
      quick.map((q, i) => A(Chip, { key: i, onClick: () => send(q) }, q))),
    // input
    A('div', { style: { flexShrink: 0, padding: '8px 14px 6px', background: 'var(--bg)' } },
      A('div', { style: { display: 'flex', alignItems: 'center', gap: 8, background: 'var(--surface)', borderRadius: 'var(--rpill)', border: '1px solid var(--line)', padding: '6px 6px 6px 14px' } },
        A('button', { style: { border: 'none', background: 'transparent', color: 'var(--ink3)', display: 'flex', padding: 2 } }, A(Icon, { name: 'plus', size: 22 })),
        A('input', { value: text, onChange: e => setText(e.target.value), placeholder: '輸入訊息…',
          onKeyDown: e => { if (e.key === 'Enter' && text.trim()) send(text.trim()); },
          style: { flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 14, fontFamily: 'inherit', color: 'var(--ink)', minWidth: 0 } }),
        A('button', { style: { border: 'none', background: 'transparent', color: 'var(--ink3)', display: 'flex', padding: 2 } }, A(Icon, { name: 'camera', size: 21 })),
        text.trim()
          ? A('button', { className: 'ccaTap', onClick: () => send(text.trim()), style: { width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'var(--brand)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'send', size: 19, fill: false, color: '#fff', sw: 1.8 }))
          : A('button', { style: { width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'var(--brandSoft)', color: 'var(--brandDeep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'mic', size: 20 })))),
    A(HomeBar, {}));
}

Object.assign(window, { ChatScreen });