// screens-host-index.jsx — List of runs the user is hosting

function HostedRunCard({ run, onClick }) {
  const spotsLeft = run.capacity - run.joined;
  const isToday = run.status === 'today';
  return (
    <div onClick={onClick} style={{
      background: isToday
        ? `linear-gradient(180deg, ${PACER.limeSoft}, transparent 70%), ${PACER.card}`
        : PACER.card,
      border: `1px solid ${isToday ? PACER.limeBorder : PACER.border}`,
      borderRadius: 18, padding: 16, cursor: 'pointer',
      transition: 'border-color .15s',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 12 }}>
        <div>
          {isToday && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
              <span style={{
                width: 6, height: 6, borderRadius: 99, background: PACER.lime,
                boxShadow: `0 0 0 4px ${PACER.limeSoft}`,
              }}/>
              <span style={{
                fontFamily: PACER.font, fontSize: 10.5, color: PACER.lime,
                letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600,
              }}>Today</span>
            </div>
          )}
          <div style={{ fontFamily: PACER.font, fontSize: 16, fontWeight: 600, color: PACER.text, letterSpacing: -0.3, marginBottom: 4 }}>
            {run.title}
          </div>
          <div style={{ fontFamily: PACER.mono, fontSize: 12, color: PACER.textDim }}>
            {run.dateLong} · {run.area}
          </div>
        </div>
        {run.pending > 0 && (
          <div style={{
            background: PACER.lime, color: PACER.limeInk,
            padding: '4px 10px', borderRadius: 99,
            fontFamily: PACER.font, fontSize: 11, fontWeight: 700,
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            <span style={{ fontFamily: PACER.mono }}>{run.pending}</span>
            <span>new</span>
          </div>
        )}
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 14, paddingTop: 12,
        borderTop: `1px solid ${PACER.border}`,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
          <span style={{ fontFamily: PACER.mono, fontSize: 18, fontWeight: 500 }}>{run.joined}</span>
          <span style={{ fontFamily: PACER.mono, fontSize: 12, color: PACER.textMute }}>/{run.capacity}</span>
          <span style={{ fontFamily: PACER.font, fontSize: 11, color: PACER.textDim, marginLeft: 4 }}>going</span>
        </div>
        <div style={{ width: 1, height: 18, background: PACER.border }}/>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
          <span style={{
            fontFamily: PACER.mono, fontSize: 18, fontWeight: 500,
            color: run.pending > 0 ? PACER.lime : PACER.textMute,
          }}>{run.pending}</span>
          <span style={{ fontFamily: PACER.font, fontSize: 11, color: PACER.textDim }}>pending</span>
        </div>
        <span style={{ flex: 1 }}/>
        <Icon name="chev" size={16} color={PACER.textSubtle}/>
      </div>
    </div>
  );
}

function HostIndexScreen({ nav, onSelectHostedRun }) {
  return (
    <div style={{ background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font }}>
      {/* Header */}
      <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 }}>Hosting</div>
        <div style={{ width: 40 }}/>
      </div>

      <div style={{ padding: '12px 20px 30px' }}>
        <div style={{
          fontFamily: PACER.font, fontSize: 28, fontWeight: 600,
          letterSpacing: -1, lineHeight: 1.05, marginBottom: 4,
        }}>Your runs</div>
        <div style={{ fontSize: 13.5, color: PACER.textDim, marginBottom: 22 }}>
          <span style={{ fontFamily: PACER.mono, color: PACER.text }}>{MY_HOSTED.length}</span> upcoming
          <span style={{ color: PACER.textSubtle, margin: '0 6px' }}>·</span>
          <span style={{ fontFamily: PACER.mono, color: PACER.lime }}>{MY_HOSTED.reduce((n, r) => n + r.pending, 0)}</span> pending request{MY_HOSTED.reduce((n, r) => n + r.pending, 0) === 1 ? '' : 's'}
        </div>

        {/* Hosted runs list */}
        <div style={{ display: 'grid', gap: 10 }}>
          {MY_HOSTED.map(r => (
            <HostedRunCard key={r.id} run={r} onClick={() => onSelectHostedRun(r.id)}/>
          ))}
        </div>

        {/* Create another */}
        <button onClick={() => nav('create')} style={{
          marginTop: 18, width: '100%',
          background: 'transparent', border: `1px dashed ${PACER.borderStrong}`,
          borderRadius: 16, padding: '16px 18px', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 12,
          color: PACER.text, fontFamily: PACER.font, fontSize: 14.5, fontWeight: 500,
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: PACER.lime, color: PACER.limeInk,
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <Icon name="plus" size={16} color={PACER.limeInk}/>
          </div>
          <span style={{ flex: 1, textAlign: 'left' }}>Host another run</span>
          <Icon name="chev" size={16} color={PACER.textSubtle}/>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { HostIndexScreen, HostedRunCard });