// 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 = 240;
  const suggestions = [
    'First social run for me — promise to keep up 😅',
    'New to the area and looking for running company.',
    'I usually run this distance solo, would love some company.',
  ];

  return (
    <div style={{
      background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font,
      display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      {/* Header */}
      <div style={{
        padding: '54px 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={{ padding: '24px 20px 16px', flex: 1 }}>
        {/* 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>

        {/* Suggestion chips */}
        <div style={{
          fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
          color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 10,
        }}>Quick intros</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 18 }}>
          {suggestions.map((s, i) => (
            <button key={i} onClick={() => setMessage(s)} style={{
              padding: '9px 12px', borderRadius: 12,
              background: 'transparent', border: `1px solid ${PACER.border}`,
              color: PACER.textDim, fontFamily: PACER.font, fontSize: 12.5,
              cursor: 'pointer', textAlign: 'left', flex: '0 0 auto',
              transition: 'all .12s',
            }}>{s}</button>
          ))}
        </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.slice(0, MAX))}
            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 ${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: PACER.textSubtle,
          }}>
            {message.length}/{MAX}
          </div>
        </div>

        {/* Safety / privacy note */}
        <div style={{
          display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 14px',
          background: 'rgba(255,255,255,0.02)', border: `1px solid ${PACER.border}`,
          borderRadius: 12, marginTop: 14,
        }}>
          <Icon name="shield" size={14} color={PACER.textDim} style={{ marginTop: 1, flexShrink: 0 }}/>
          <div style={{ fontFamily: PACER.font, fontSize: 11.5, color: PACER.textMute, lineHeight: 1.5 }}>
            Your first name, age range, pace and a phone-verified badge are shared with the host. Full profile is shared only after approval.
          </div>
        </div>
      </div>

      {/* CTA */}
      <div style={{
        padding: '14px 20px 38px',
        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()}
          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 });