/* The Upper Room — Messages (conversation list + thread). */
const { useState: useMsgState, useRef: useMsgRef, useEffect: useMsgEffect, useContext: useMsgContext } = React;

function ConversationItem({ convo, active, onClick }) {
  const last = convo.messages[convo.messages.length - 1];
  const preview = (last.me ? 'You: ' : '') + last.text;
  return (
    <button className={'ur-convo' + (active ? ' active' : '') + (convo.unread ? ' unread' : '')} onClick={onClick}>
      <Avatar name={convo.name} />
      <div className="ur-convo-info">
        <div className="ur-convo-top">
          <span className="name">{convo.name}</span>
          <span className="time">{convo.time}</span>
        </div>
        <div className="ur-convo-preview">{preview}</div>
      </div>
      {convo.unread && <span className="ur-convo-dot" aria-hidden="true"></span>}
    </button>
  );
}

function Thread({ convo, onAdd }) {
  const room = useMsgContext(window.RoomContext);
  const inputRef = useMsgRef(null);
  const bodyRef = useMsgRef(null);
  useMsgEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [convo.messages.length, convo.id]);

  const send = () => {
    const t = (inputRef.current ? inputRef.current.value : '').trim();
    if (!t) return;
    onAdd(convo.id, { me: true, text: t, time: 'now' });
    if (inputRef.current) { inputRef.current.value = ''; inputRef.current.focus(); }
  };

  return (
    <div className="ur-thread">
      <div className="ur-thread-head" onClick={() => room.openProfile({ name: convo.name, from: convo.from, church: convo.church })}>
        <Avatar name={convo.name} />
        <div>
          <div className="name">{convo.name}</div>
          <div className="meta">{convo.from} · {convo.church}</div>
        </div>
        <Icon name="chevron-right" size={18} />
      </div>
      <div className="ur-thread-body" ref={bodyRef}>
        {convo.messages.map((m, i) => (
          <div key={i} className={'ur-bubble-row' + (m.me ? ' me' : '')}>
            {!m.me && <Avatar name={convo.name} style={{ width: 28, height: 28, fontSize: '0.7rem' }} />}
            <div className="ur-bubble">
              <div className="ur-bubble-text">{m.text}</div>
              <div className="ur-bubble-time">{m.time}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="ur-thread-composer">
        <input ref={inputRef} placeholder="Write a message…" onKeyDown={(e) => { if (e.key === 'Enter') send(); }} />
        <button className="ur-thread-send" onClick={send} aria-label="Send"><Icon name="send" size={18} /></button>
      </div>
    </div>
  );
}

function MessagesPage() {
  const [convos, setConvos] = useMsgState(CONVERSATIONS);
  const [activeId, setActiveId] = useMsgState(CONVERSATIONS[0].id);
  const active = convos.filter((c) => c.id === activeId)[0];

  const open = (id) => setConvos(convos.map((c) => c.id === id ? Object.assign({}, c, { unread: false }) : c));
  const addMsg = (id, msg) => setConvos(convos.map((c) => c.id === id ? Object.assign({}, c, { messages: c.messages.concat([msg]), time: 'now' }) : c));

  return (
    <div className="ur-shell ur-shell-messages">
      <div className="card ur-msg-panel">
        <div className="ur-msg-list-head">Messages</div>
        <div className="ur-msg-list">
          {convos.map((c) => (
            <ConversationItem key={c.id} convo={c} active={c.id === activeId} onClick={() => { setActiveId(c.id); open(c.id); }} />
          ))}
        </div>
        {active && <Thread convo={active} onAdd={addMsg} />}
      </div>
    </div>
  );
}

Object.assign(window, { MessagesPage });