// screens-join-request.jsx — "Say hi to {host}" flow before requesting a run

function JoinRequestScreen({ run, nav, onSend }) {
  const host = USERS[run.host];
  const [message, setMessage] = React.useState('');
  const MAX_WORDS = 40;
  const wordCount = message.trim() === '' ? 0 : message.trim().split(/\s+/).length;
  const wordOver = wordCount > MAX_WORDS;
  return (
    <div style={{
      background: PACER.bg, height: '100%', color: PACER.text, fontFamily: PACER.font,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{
        padding: `${SCREEN_TOP}px 16px 12px`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        borderBottom: `1px solid ${PACER.border}`,
      }}>
        <button onClick={() => nav('runDetail')} style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(255,255,255,0.04)', border: `1px solid ${PACER.border}`,
          color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="close" size={20} color={PACER.text}/>
        </button>
        <div style={{ fontSize: 16, fontWeight: 600 }}>Request to join</div>
        <div style={{ width: 40 }}/>
      </div>

      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '24px 20px 16px' }}>
        {/* Title */}
        <div style={{
          fontFamily: PACER.font, fontSize: 26, fontWeight: 600,
          letterSpacing: -0.9, lineHeight: 1.1, marginBottom: 8,
        }}>Say hi to {host.name.split(' ')[0]}</div>
        <div style={{ fontSize: 14, color: PACER.textDim, lineHeight: 1.5, marginBottom: 22 }}>
          A short note helps the host confirm you. One line is fine — what you'd say if you bumped into them.
        </div>

        {/* Host + run summary card */}
        <div style={{
          background: PACER.card, border: `1px solid ${PACER.border}`,
          borderRadius: 16, padding: 14, marginBottom: 20,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <Avatar name={host.name} size={44} photo/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 2 }}>
              <span style={{ fontFamily: PACER.font, fontSize: 14.5, fontWeight: 600, color: PACER.text }}>
                {host.name}
              </span>
              <span style={{ fontFamily: PACER.font, fontSize: 10, color: PACER.lime,
                background: PACER.limeSoft, padding: '2px 5px', borderRadius: 4, fontWeight: 600 }}>
                VERIFIED
              </span>
            </div>
            <div style={{ fontFamily: PACER.font, fontSize: 12, color: PACER.textDim }}>
              hosting <span style={{ color: PACER.text, fontWeight: 500 }}>{run.title}</span>
            </div>
            <div style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.textMute, marginTop: 2 }}>
              {run.dateLong} · {run.area}
            </div>
          </div>
        </div>

        {/* Textarea */}
        <div style={{
          fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
          color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 10,
        }}>Your message</div>
        <div style={{ position: 'relative', marginBottom: 10 }}>
          <textarea
            value={message}
            onChange={e => setMessage(e.target.value)}
            placeholder={`Hey ${host.name.split(' ')[0]}, I'd love to join…`}
            style={{
              width: '100%', boxSizing: 'border-box', minHeight: 120,
              background: PACER.inset, border: `1px solid ${wordOver ? 'rgba(255,100,100,0.5)' : PACER.border}`,
              borderRadius: 14, padding: '14px 16px',
              color: PACER.text, fontFamily: PACER.font, fontSize: 15, lineHeight: 1.5,
              outline: 'none', resize: 'none',
            }}
          />
          <div style={{
            position: 'absolute', bottom: 10, right: 14,
            fontFamily: PACER.mono, fontSize: 10.5,
            color: wordOver ? 'rgba(255,100,100,0.9)' : PACER.textSubtle,
          }}>
            {wordCount}/{MAX_WORDS} words
          </div>
        </div>

      </div>

      {/* CTA */}
      <div style={{
        flexShrink: 0, padding: `14px 20px ${14 + SCREEN_BOTTOM}px`,
        background: `linear-gradient(180deg, rgba(10,12,10,0), ${PACER.bg} 30%)`,
      }}>
        <Btn variant="primary" size="lg" style={{ width: '100%' }}
          onClick={onSend}
          disabled={!message.trim() || wordOver}
          trailing={<Icon name="send" size={16} color={PACER.limeInk}/>}>
          Send request
        </Btn>
        {!message.trim() && (
          <div style={{ textAlign: 'center', fontSize: 11, color: PACER.textSubtle, marginTop: 8 }}>
            A note is required to request this run
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { JoinRequestScreen });