// pages/chat-human.jsx — 人對人聊天室: owner ↔ sitter conversation during a service.
const { useState } = React;

function PersonChat({ onBack = () => {} }) {
  const [msgs, setMsgs] = useState([
    { from: 'them', text: '哈囉～我準時到囉，貓咪躲在沙發下 😆' },
    { type: 'image', from: 'them', icon: 'image', label: '照片.jpg' },
    { from: 'them', text: '飼料已經加好，貓砂也清乾淨了' },
    { from: 'me', text: '太感謝了！晚上比較親人，可以多陪玩一下嗎～' },
    { from: 'them', text: '沒問題！我等等用逗貓棒陪玩 🐾' },
  ]);
  const [text, setText] = useState('');
  const ref = React.useRef(null);
  React.useEffect(() => { if (ref.current) ref.current.scrollTop = 99999; }, [msgs]);
  const send = () => { if (!text.trim()) return; setMsgs(m => [...m, { from: 'me', text: text.trim() }]); setText(''); };
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A('div', { style: { display: 'flex', alignItems: 'center', gap: 10, padding: '6px 14px 10px', flexShrink: 0, borderBottom: '1px solid var(--line2)' } },
      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: 'person', style: { borderRadius: 12 } }),
      A('div', { style: { flex: 1 } },
        A('div', { style: { fontSize: 15, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 } }, '林依婷', A(Tag, { color: 'ok' }, '服務中')),
        A('div', { style: { fontSize: 11, color: 'var(--ink3)' } }, '到府保姆 · 6/4 服務')),
      A('button', { style: { width: 36, height: 36, borderRadius: '50%', border: 'none', background: 'transparent', color: 'var(--accent)' } }, A(Icon, { name: 'phone', size: 20 }))),
    A('div', { ref, style: { flex: 1, overflowY: 'auto', padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 } },
      msgs.map((m, i) => m.type === 'image'
        ? A('div', { key: i, style: { display: 'flex', justifyContent: m.from === 'me' ? 'flex-end' : 'flex-start' } }, A(Ph, { w: 170, h: 130, r: 16, icon: m.icon, label: m.label }))
        : A('div', { key: i, className: 'ccaRise', style: { display: 'flex', justifyContent: m.from === 'me' ? 'flex-end' : 'flex-start' } }, A(Bubble, { from: m.from === 'me' ? 'me' : 'ai' }, m.text)))),
    A('div', { style: { flexShrink: 0, padding: '8px 14px 6px' } },
      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), onKeyDown: e => e.key === 'Enter' && send(), placeholder: '傳訊息給林依婷…', style: { flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 14, fontFamily: 'inherit', minWidth: 0, color: 'var(--ink)' } }),
        A('button', { style: { border: 'none', background: 'transparent', color: 'var(--ink3)', display: 'flex', padding: 2 } }, A(Icon, { name: 'camera', size: 21 })),
        A('button', { className: 'ccaTap', onClick: send, 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, sw: 1.8 })))),
    A(HomeBar, {}));
}

Object.assign(window, { PersonChat });