// 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, neighborhood: 'Clapham' } : 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.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, onViewRun, onOpenChat, onEditRun }) {
  const run = RUNS.find(r => r.id === 'r1');
  const [showCancelModal, setShowCancelModal] = React.useState(false);
  const [cancelled, setCancelled] = React.useState(false);

  return (
    <div style={{ background: PACER.bg, height: '100%', overflowY: 'auto', color: PACER.text, fontFamily: PACER.font }}>
      {/* Top */}
      <div style={{
        padding: `${SCREEN_TOP}px 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 ${12 + SCREEN_BOTTOM}px` }}>
        <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 — tap to view run detail */}
        <div onClick={onViewRun} style={{
          background: PACER.card, border: `1px solid ${PACER.border}`,
          borderRadius: 16, padding: 14, marginBottom: 16,
          display: 'flex', alignItems: 'center', gap: 14,
          cursor: 'pointer',
        }}>
          <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>
          <Icon name="chev" size={16} color={PACER.textSubtle}/>
        </div>

        {/* Open group chat */}
        <Btn variant="secondary" size="md" style={{ width: '100%', marginBottom: 24 }}
          onClick={onOpenChat}
          leading={<Icon name="chat" size={16} color={PACER.text}/>}>
          Open group chat
        </Btn>

        {/* 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>

        {/* Edit + Cancel */}
        <div style={{ marginTop: 32, paddingTop: 20, borderTop: `1px solid ${PACER.border}`, display: 'flex', gap: 10 }}>
          <Btn variant="dark" size="md" style={{ flex: 1 }} onClick={onEditRun}
            leading={<Icon name="edit" size={15} color={PACER.text}/>}>
            Edit run
          </Btn>
          <Btn variant="dark" size="md" style={{ flex: 1, color: 'rgba(255,80,80,0.85)', borderColor: 'rgba(255,80,80,0.2)' }}
            onClick={() => setShowCancelModal(true)}>
            Cancel run
          </Btn>
        </div>

      </div>

      {/* Cancel confirmation modal */}
      {showCancelModal && !cancelled && (
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(10,12,10,0.75)',
          backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'flex-end',
          zIndex: 50,
        }} onClick={() => setShowCancelModal(false)}>
          <div onClick={e => e.stopPropagation()} style={{
            width: '100%', background: PACER.card, borderRadius: '22px 22px 0 0',
            padding: `24px 20px ${24 + SCREEN_BOTTOM}px`,
            border: `1px solid ${PACER.border}`, borderBottom: 'none',
          }}>
            <div style={{ fontSize: 19, fontWeight: 600, marginBottom: 8 }}>Cancel this run?</div>
            <div style={{ fontSize: 14, color: PACER.textDim, lineHeight: 1.5, marginBottom: 24 }}>
              Everyone who has been approved will be notified. This cannot be undone.
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <button onClick={() => { setCancelled(true); setShowCancelModal(false); }} style={{
                width: '100%', height: 50, borderRadius: 14, border: 'none',
                background: 'rgba(255,60,60,0.15)', color: 'rgba(255,80,80,0.9)',
                fontFamily: PACER.font, fontSize: 15, fontWeight: 600, cursor: 'pointer',
              }}>
                Yes, cancel run
              </button>
              <Btn variant="dark" size="lg" style={{ width: '100%' }} onClick={() => setShowCancelModal(false)}>
                Keep run
              </Btn>
            </div>
          </div>
        </div>
      )}

      {/* Cancelled state */}
      {cancelled && (
        <div style={{
          position: 'absolute', inset: 0, background: PACER.bg,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          padding: '0 32px', zIndex: 50,
        }}>
          <div style={{
            width: 64, height: 64, borderRadius: '50%',
            background: 'rgba(255,60,60,0.12)', border: '1px solid rgba(255,80,80,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20,
          }}>
            <Icon name="close" size={28} color="rgba(255,80,80,0.8)"/>
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, marginBottom: 8, textAlign: 'center' }}>Run cancelled</div>
          <div style={{ fontSize: 14, color: PACER.textDim, textAlign: 'center', marginBottom: 32, lineHeight: 1.5 }}>
            Participants have been notified.
          </div>
          <Btn variant="primary" size="lg" style={{ width: '100%', maxWidth: 280 }} onClick={() => nav('home')}>
            Back to runs
          </Btn>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { HostRequestsScreen });