// screens-host.jsx — Host's view: incoming join requests for runs they host

function RequestCard({ req, onApprove, onReject, decided }) {
  const u = req.user === 'me' ? { name: 'Sam K.', pace: '6:00\u20136:45', level: 'Beginner', attended: 4, hosted: 0, reliability: 100, neighborhood: 'Clifton' } : USERS[req.user];
  return (
    <div style={{
      background: PACER.card, border: `1px solid ${decided === 'approved' ? PACER.limeBorder : decided === 'rejected' ? PACER.border : PACER.border}`,
      borderRadius: 16, padding: 16,
      opacity: decided === 'rejected' ? 0.5 : 1,
      transition: 'all .2s',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 12 }}>
        <Avatar name={u.name} size={44} photo/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2 }}>
            <span style={{ fontSize: 15, fontWeight: 600, color: PACER.text }}>{u.name}</span>
            <Icon name="phone" size={11} color={PACER.lime}/>
          </div>
          <div style={{ fontFamily: PACER.mono, fontSize: 11.5, color: PACER.textDim }}>
            {u.attended} runs · {u.reliability}% reliable · {u.neighborhood}
          </div>
        </div>
        <span style={{ fontFamily: PACER.font, fontSize: 11, color: PACER.textMute }}>{req.when}</span>
      </div>

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
        <Chip size="xs"><span style={{ fontFamily: PACER.mono }}>{u.pace}/km</span></Chip>
      </div>

      <div style={{
        background: PACER.inset, border: `1px solid ${PACER.border}`,
        borderRadius: 10, padding: '10px 12px', marginBottom: 14,
        fontSize: 13.5, color: PACER.textDim, lineHeight: 1.45, fontStyle: 'italic',
      }}>
        “{req.message}”
      </div>

      {!decided && (
        <div style={{ display: 'flex', gap: 8 }}>
          <Btn variant="dark" size="sm" style={{ flex: 1 }} onClick={onReject}>
            Decline
          </Btn>
          <Btn variant="primary" size="sm" style={{ flex: 2 }} onClick={onApprove}>
            Approve
          </Btn>
        </div>
      )}
      {decided === 'approved' && (
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          padding: '8px 12px', background: PACER.limeSoft, borderRadius: 10,
          fontSize: 12.5, color: PACER.lime, fontWeight: 500,
        }}>
          <Icon name="check" size={14} color={PACER.lime}/>
          Approved · added to chat
        </div>
      )}
      {decided === 'rejected' && (
        <div style={{
          textAlign: 'center', padding: '8px 12px',
          fontSize: 12.5, color: PACER.textMute,
        }}>
          Declined
        </div>
      )}
    </div>
  );
}

function HostRequestsScreen({ nav, decisions, onDecide }) {
  const run = RUNS.find(r => r.id === 'r1');

  return (
    <div style={{ background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font }}>
      {/* Top */}
      <div style={{
        padding: '54px 16px 12px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={() => nav('home')} 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="chevL" size={20} color={PACER.text}/>
        </button>
        <div style={{ fontSize: 16, fontWeight: 600 }}>Manage</div>
        <div style={{ width: 40 }}/>
      </div>

      <div style={{ padding: '12px 20px 40px' }}>
        <div style={{
          fontFamily: PACER.font, fontSize: 26, fontWeight: 600,
          letterSpacing: -0.9, marginBottom: 4,
        }}>Your run tonight</div>
        <div style={{ fontSize: 14, color: PACER.textDim, marginBottom: 20 }}>
          {run.title} · <span style={{ fontFamily: PACER.mono }}>{run.time}</span> · {run.area}
        </div>

        {/* Mini summary card */}
        <div style={{
          background: PACER.card, border: `1px solid ${PACER.border}`,
          borderRadius: 16, padding: 14, marginBottom: 24,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6 }}>
              <span style={{ fontFamily: PACER.mono, fontSize: 22, fontWeight: 500 }}>
                {run.joined.length}<span style={{ color: PACER.textMute, fontSize: 16 }}>/{run.capacity}</span>
              </span>
              <span style={{ fontSize: 12, color: PACER.textDim }}>going</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: -6 }}>
              {run.joined.map((u, i) => (
                <div key={u} style={{ marginLeft: i === 0 ? 0 : -8, border: `2px solid ${PACER.card}`, borderRadius: '50%' }}>
                  <Avatar name={USERS[u].name} size={26}/>
                </div>
              ))}
            </div>
          </div>
          <div style={{ width: 1, height: 36, background: PACER.border }}/>
          <div style={{ flex: 1, textAlign: 'right' }}>
            <div style={{ fontFamily: PACER.mono, fontSize: 22, fontWeight: 500, color: PACER.lime, marginBottom: 4 }}>
              {REQUESTS.filter(r => !decisions[r.user]).length}
            </div>
            <div style={{ fontSize: 12, color: PACER.textDim }}>pending requests</div>
          </div>
        </div>

        {/* Requests */}
        <div style={{
          fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
          color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 10,
        }}>Requests to join</div>

        <div style={{ display: 'grid', gap: 10 }}>
          {REQUESTS.map(req => (
            <RequestCard
              key={req.user}
              req={req}
              decided={decisions[req.user]}
              onApprove={() => onDecide(req.user, 'approved')}
              onReject={() => onDecide(req.user, 'rejected')}
            />
          ))}
        </div>

        {/* Quick actions row */}
        <div style={{ marginTop: 26 }}>
          <div style={{
            fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
            color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 10,
          }}>Run controls</div>
          <div style={{ display: 'grid', gap: 8 }}>
            {[
              ['Repeat this run next week', 'cal'],
              ['Edit details', 'pace'],
              ['Cancel run', 'close'],
            ].map(([t, icon], i) => (
              <button key={t} style={{
                background: PACER.card, border: `1px solid ${PACER.border}`,
                borderRadius: 14, padding: '14px 16px',
                display: 'flex', alignItems: 'center', gap: 12,
                color: i === 2 ? '#ff7a7a' : PACER.text,
                fontFamily: PACER.font, fontSize: 14.5, fontWeight: 500,
                cursor: 'pointer', textAlign: 'left',
              }}>
                <Icon name={icon} size={18} color={i === 2 ? '#ff7a7a' : PACER.textDim}/>
                <span style={{ flex: 1 }}>{t}</span>
                <Icon name="chev" size={16} color={PACER.textSubtle}/>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HostRequestsScreen });