// screens-chat.jsx — Group chat (opens only after approval)

function ChatScreen({ run, nav }) {
  const host = USERS[run.host];
  const messages = CHAT;
  const [draft, setDraft] = React.useState('');

  return (
    <div style={{ background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font,
        display: 'flex', flexDirection: 'column' }}>

      {/* Header — single line with run summary */}
      <div style={{
        padding: '54px 14px 12px',
        borderBottom: `1px solid ${PACER.border}`,
        background: PACER.bg,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button onClick={() => nav('runDetail')} style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'transparent', border: 'none',
            color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            <Icon name="chevL" size={22} color={PACER.text}/>
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: -6, marginRight: 4 }}>
            {run.joined.slice(0, 3).map((u, i) => (
              <div key={u} style={{ marginLeft: i === 0 ? 0 : -8, border: `2px solid ${PACER.bg}`, borderRadius: '50%' }}>
                <Avatar name={USERS[u].name} size={28}/>
              </div>
            ))}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: PACER.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {run.title}
            </div>
            <div style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.textDim, marginTop: 1 }}>
              {run.dateLong} · {run.area}
            </div>
          </div>
          <button style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'transparent', border: 'none', color: PACER.textDim,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="dots" size={20} color={PACER.textDim}/>
          </button>
        </div>
      </div>

      {/* Closing-soon banner */}
      <div style={{
        margin: '12px 16px 0', padding: '8px 12px',
        background: 'rgba(255,255,255,0.025)', border: `1px solid ${PACER.border}`,
        borderRadius: 10, display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <Icon name="clock" size={13} color={PACER.textMute}/>
        <span style={{ fontSize: 11.5, color: PACER.textMute }}>
          Chat closes 12 hours after the run · Only members of this run can message here.
        </span>
      </div>

      {/* Messages */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 14px 12px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {messages.map((m, i) => {
          if (m.system) {
            return (
              <div key={m.id} style={{
                textAlign: 'center', fontSize: 11.5, color: PACER.textMute,
                padding: '6px 16px', fontFamily: PACER.font,
              }}>
                {m.text}
              </div>
            );
          }
          const isMe = m.from === 'me';
          const user = isMe ? { name: 'You', firstName: 'You' } : USERS[m.from];
          const prev = messages[i - 1];
          const showAvatar = !isMe && (!prev || prev.from !== m.from || prev.system);
          return (
            <div key={m.id} style={{
              display: 'flex', justifyContent: isMe ? 'flex-end' : 'flex-start',
              gap: 8, alignItems: 'flex-end',
            }}>
              {!isMe && (
                <div style={{ width: 28, visibility: showAvatar ? 'visible' : 'hidden' }}>
                  <Avatar name={user.name} size={28}/>
                </div>
              )}
              <div style={{ maxWidth: '75%' }}>
                {showAvatar && !isMe && (
                  <div style={{
                    fontSize: 11, color: PACER.textDim, fontWeight: 500,
                    marginBottom: 3, marginLeft: 4,
                  }}>{user.name.split(' ')[0]}</div>
                )}
                <div style={{
                  padding: '9px 13px',
                  background: isMe ? PACER.lime : PACER.card,
                  color: isMe ? PACER.limeInk : PACER.text,
                  borderRadius: 16,
                  borderBottomRightRadius: isMe ? 4 : 16,
                  borderBottomLeftRadius: isMe ? 16 : 4,
                  border: isMe ? 'none' : `1px solid ${PACER.border}`,
                  fontSize: 14.5, lineHeight: 1.4, fontWeight: isMe ? 500 : 400,
                }}>
                  {m.text}
                </div>
                <div style={{
                  fontFamily: PACER.mono, fontSize: 10, color: PACER.textSubtle,
                  marginTop: 3, textAlign: isMe ? 'right' : 'left',
                  paddingLeft: isMe ? 0 : 4, paddingRight: isMe ? 4 : 0,
                }}>{m.time}</div>
              </div>
            </div>
          );
        })}

        {/* System reminder */}
        <div style={{
          alignSelf: 'center', margin: '8px 0',
          padding: '8px 14px',
          background: PACER.limeSoft, border: `1px solid ${PACER.limeBorder}`,
          borderRadius: 99,
          fontSize: 11.5, color: PACER.lime, fontWeight: 500,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <Icon name="bolt" size={11} color={PACER.lime}/>
          Run starts in 4 hours · meet at the Water Tower
        </div>
      </div>

      {/* Composer */}
      <div style={{
        padding: '10px 14px 30px',
        borderTop: `1px solid ${PACER.border}`,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <input
          value={draft}
          onChange={e => setDraft(e.target.value)}
          placeholder="Message the group…"
          style={{
            flex: 1, height: 42, padding: '0 16px',
            background: PACER.inset, border: `1px solid ${PACER.border}`,
            borderRadius: 99, color: PACER.text, fontFamily: PACER.font, fontSize: 14,
            outline: 'none',
          }}
        />
        <button onClick={() => setDraft('')} style={{
          width: 42, height: 42, borderRadius: '50%',
          background: draft.trim() ? PACER.lime : 'rgba(255,255,255,0.05)',
          border: 'none', color: draft.trim() ? PACER.limeInk : PACER.textSubtle,
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all .15s',
        }}>
          <Icon name="send" size={18} color={draft.trim() ? PACER.limeInk : PACER.textSubtle}/>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { ChatScreen });