// screens-detail.jsx — Run detail screen with multiple states:
//   browse  -> default, "Request to join"
//   pending -> "Awaiting host approval"
//   approved -> meeting point unlocked, "Open group chat"

function MeetingPointBlock({ run, unlocked }) {
  return (
    <div style={{
      background: unlocked ? `linear-gradient(180deg, ${PACER.limeSoft}, rgba(212,255,58,0.02))` : PACER.inset,
      border: `1px solid ${unlocked ? PACER.limeBorder : PACER.border}`,
      borderRadius: 16, padding: 16, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div style={{
          width: 30, height: 30, borderRadius: 9,
          background: unlocked ? PACER.lime : 'rgba(255,255,255,0.05)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name={unlocked ? 'unlock' : 'lock'} size={16} color={unlocked ? PACER.limeInk : PACER.textDim}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{
            fontFamily: PACER.font, fontSize: 11, fontWeight: 600, letterSpacing: 1.4,
            color: unlocked ? PACER.lime : PACER.textMute, textTransform: 'uppercase',
          }}>Meeting point</div>
          <div style={{ fontFamily: PACER.font, fontSize: 15, color: PACER.text, marginTop: 2, fontWeight: 500 }}>
            {unlocked ? run.meetingExact : run.meetingHint}
          </div>
        </div>
      </div>
      {!unlocked && (
        <div style={{ fontFamily: PACER.font, fontSize: 12, color: PACER.textMute, lineHeight: 1.5, paddingLeft: 40 }}>
          Exact spot revealed after the host approves you. Always public, never doorsteps.
        </div>
      )}
      {unlocked && (
        <div style={{ display: 'flex', gap: 8, marginTop: 12, paddingLeft: 40 }}>
          <span style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.textDim }}>51.4612°N, 0.1390°W</span>
        </div>
      )}
    </div>
  );
}

// Real-photo mini-map of the run area (Clifton Down)
function MapPlaceholder({ unlocked }) {
  return (
    <div style={{
      height: 180, borderRadius: 16, overflow: 'hidden', position: 'relative',
      border: `1px solid ${PACER.border}`,
    }}>
      {/* Real map photo as background */}
      <img src="map.jpeg" alt="" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'center',
      }}/>
      {/* Dark tint so overlays stay readable */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,12,10,0.45)' }}/>

      {/* marker overlay */}
      {unlocked ? (
        <div style={{ position: 'absolute', left: '36%', top: '52%', transform: 'translate(-50%, -100%)' }}>
          <div style={{
            background: PACER.lime, color: PACER.limeInk, borderRadius: 8,
            padding: '4px 10px', fontFamily: PACER.font, fontSize: 11.5, fontWeight: 600,
            boxShadow: '0 4px 14px rgba(0,0,0,0.6)', whiteSpace: 'nowrap', marginBottom: 3,
          }}>Water Tower · meet here</div>
          <svg width="20" height="26" viewBox="0 0 20 26" style={{
            display: 'block', margin: '0 auto', filter: 'drop-shadow(0 3px 6px rgba(0,0,0,0.7))',
          }}>
            <path d="M10 0 C 4 0, 0 4, 0 10 C 0 17, 10 26, 10 26 C 10 26, 20 17, 20 10 C 20 4, 16 0, 10 0 Z"
                  fill={PACER.lime}/>
            <circle cx="10" cy="10" r="3.5" fill={PACER.limeInk}/>
          </svg>
        </div>
      ) : (
        <div style={{
          position: 'absolute', left: '50%', top: '54%', transform: 'translate(-50%, -50%)',
          width: 100, height: 100, borderRadius: '50%',
          background: 'rgba(212,255,58,0.07)', border: '1px dashed rgba(212,255,58,0.35)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{ fontFamily: PACER.mono, fontSize: 9.5, color: PACER.lime, letterSpacing: 0.6 }}>~ AREA ~</span>
        </div>
      )}

      {/* district label */}
      <div style={{
        position: 'absolute', bottom: 8, right: 10,
        background: 'rgba(20,22,20,0.8)', backdropFilter: 'blur(8px)',
        padding: '3px 7px', borderRadius: 5,
        fontFamily: PACER.mono, fontSize: 9.5, color: PACER.textMute, letterSpacing: 0.5,
      }}>BS8</div>
    </div>
  );
}

function StatPill({ label, value, mono = true }) {
  return (
    <div style={{
      flex: 1,
      background: PACER.inset, border: `1px solid ${PACER.border}`,
      borderRadius: 14, padding: '12px 14px',
    }}>
      <div style={{
        fontFamily: PACER.font, fontSize: 10.5, fontWeight: 600,
        color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.2,
      }}>{label}</div>
      <div style={{
        fontFamily: mono ? PACER.mono : PACER.font,
        fontSize: 17, fontWeight: 500, color: PACER.text, marginTop: 4,
        letterSpacing: -0.2,
      }}>{value}</div>
    </div>
  );
}

function AttendeeStrip({ run, state }) {
  const joined = run.joined.map(id => USERS[id]);
  const empty = run.capacity - run.joined.length - (state === 'pending' || state === 'approved' ? 1 : 0);
  const youSlot = (state === 'pending' || state === 'approved');

  return (
    <div>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12,
      }}>
        <div style={{
          fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
          color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4,
        }}>Going · <span style={{ fontFamily: PACER.mono, color: PACER.text }}>
          {run.joined.length + (state === 'approved' ? 1 : 0)}/{run.capacity}
        </span></div>
        {state === 'approved' && (
          <Chip tone="lime" size="xs">You’re in</Chip>
        )}
      </div>
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
        {joined.map((u, i) => (
          <div key={i} style={{ textAlign: 'center', minWidth: 50 }}>
            <Avatar name={u.name} size={44}/>
            <div style={{ fontFamily: PACER.font, fontSize: 11, color: PACER.textDim, marginTop: 6 }}>
              {u.name.split(' ')[0]}
            </div>
            {i === 0 && <div style={{ fontFamily: PACER.font, fontSize: 9.5, color: PACER.textMute, marginTop: 1, letterSpacing: 0.5 }}>HOST</div>}
          </div>
        ))}
        {youSlot && (
          <div style={{ textAlign: 'center', minWidth: 50 }}>
            <Avatar name="Sam" size={44} ring={state === 'approved'}/>
            <div style={{ fontFamily: PACER.font, fontSize: 11, color: PACER.text, marginTop: 6, fontWeight: 500 }}>
              You
            </div>
            <div style={{ fontFamily: PACER.font, fontSize: 9.5,
              color: state === 'approved' ? PACER.lime : PACER.amber, marginTop: 1, letterSpacing: 0.5 }}>
              {state === 'approved' ? 'CONFIRMED' : 'PENDING'}
            </div>
          </div>
        )}
        {Array.from({ length: Math.max(0, empty) }).map((_, i) => (
          <div key={'e' + i} style={{ textAlign: 'center', minWidth: 50 }}>
            <div style={{
              width: 44, height: 44, borderRadius: '50%',
              border: `1px dashed ${PACER.borderStrong}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: PACER.textSubtle,
            }}>
              <Icon name="plus" size={16} color={PACER.textSubtle}/>
            </div>
            <div style={{ fontFamily: PACER.font, fontSize: 11, color: PACER.textSubtle, marginTop: 6 }}>
              open
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function RunDetailScreen({ run, state, nav, onRequestJoin, onOpenChat }) {
  const host = USERS[run.host];
  const unlocked = state === 'approved';
  return (
    <div style={{ background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font, position: 'relative' }}>
      {/* Top bar: back + dots */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 5,
        padding: '54px 16px 12px',
        background: `linear-gradient(180deg, ${PACER.bg} 60%, rgba(10,12,10,0))`,
        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={{ display: 'flex', gap: 8 }}>
          <button 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="flag" size={18} color={PACER.textDim}/>
          </button>
          <button 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="dots" size={18} color={PACER.textDim}/>
          </button>
        </div>
      </div>

      <div style={{ padding: '0 20px 160px' }}>

        {/* Status banner (when pending/approved) */}
        {state === 'pending' && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
            background: PACER.amberSoft, border: '1px solid rgba(255,181,71,0.3)',
            borderRadius: 12, marginBottom: 18,
          }}>
            <Icon name="clock" size={16} color={PACER.amber}/>
            <span style={{ fontSize: 13, color: PACER.amber, fontWeight: 500 }}>
              Awaiting Anna’s approval · usually within an hour
            </span>
          </div>
        )}
        {state === 'approved' && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
            background: PACER.limeSoft, border: `1px solid ${PACER.limeBorder}`,
            borderRadius: 12, marginBottom: 18,
          }}>
            <Icon name="check" size={16} color={PACER.lime}/>
            <span style={{ fontSize: 13, color: PACER.lime, fontWeight: 500 }}>
              You’re confirmed. Meeting point unlocked below.
            </span>
          </div>
        )}

        {/* Title */}
        <div style={{ marginBottom: 8 }}>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
            {run.womenOnly && <Chip tone="magenta" size="sm">Women-only</Chip>}
            <Chip size="sm">Host approval</Chip>
          </div>
          <div style={{
            fontFamily: PACER.font, fontSize: 28, fontWeight: 600,
            letterSpacing: -1, lineHeight: 1.1, marginBottom: 8,
          }}>{run.title}</div>
          <div style={{ fontFamily: PACER.font, fontSize: 15, color: PACER.textDim, lineHeight: 1.5 }}>
            {run.blurb}
          </div>
        </div>

        {/* Stat row */}
        <div style={{ display: 'flex', gap: 8, marginTop: 20, marginBottom: 16 }}>
          <StatPill label="Distance" value={run.distance}/>
          <StatPill label="Pace /km" value={`${run.paceMin}–${run.paceMax}`}/>
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
          <StatPill label="When" value={run.dateLong} mono={false}/>
        </div>

        {/* Map */}
        <div style={{ marginBottom: 12 }}>
          <MapPlaceholder unlocked={unlocked}/>
        </div>

        {/* Meeting point block */}
        <div style={{ marginBottom: 20 }}>
          <MeetingPointBlock run={run} unlocked={unlocked}/>
        </div>

        {/* Host 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={48} photo/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2,
            }}>
              <span style={{ fontFamily: PACER.font, fontSize: 15, fontWeight: 600, color: PACER.text }}>
                {host.name}
              </span>
              <span style={{ fontFamily: PACER.font, fontSize: 11, color: PACER.lime,
                background: PACER.limeSoft, padding: '2px 6px', borderRadius: 4, fontWeight: 500 }}>
                ✓ Verified
              </span>
            </div>
            <div style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.textDim }}>
              {host.hosted} runs hosted · {host.reliability}% reliable
            </div>
          </div>
          <button style={{
            padding: '8px 12px', borderRadius: 10,
            background: 'transparent', border: `1px solid ${PACER.border}`,
            color: PACER.textDim, fontFamily: PACER.font, fontSize: 12, fontWeight: 500,
            cursor: 'pointer',
          }}>View</button>
        </div>

        {/* Attendees */}
        <div style={{ marginBottom: 20 }}>
          <AttendeeStrip run={run} state={state}/>
        </div>

        {/* Host notes */}
        {run.notes && (
          <div style={{
            background: PACER.inset, border: `1px solid ${PACER.border}`,
            borderRadius: 14, padding: 14, marginBottom: 20,
          }}>
            <div style={{
              fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
              color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 6,
            }}>Note from host</div>
            <div style={{ fontFamily: PACER.font, fontSize: 14, color: PACER.textDim, lineHeight: 1.5 }}>
              {run.notes}
            </div>
          </div>
        )}

        {/* Safety strip */}
        <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,
        }}>
          <Icon name="shield" size={16} color={PACER.textDim} style={{ marginTop: 1 }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: PACER.font, fontSize: 12.5, color: PACER.text, fontWeight: 500, marginBottom: 2 }}>
              Safety basics
            </div>
            <div style={{ fontFamily: PACER.font, fontSize: 11.5, color: PACER.textMute, lineHeight: 1.5 }}>
              Public meeting point · group of 2+ · host approval · phone verified · group chat per run
            </div>
          </div>
        </div>
      </div>

      {/* Bottom CTA bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 10,
        padding: '14px 20px 38px',
        background: `linear-gradient(180deg, rgba(10,12,10,0), ${PACER.bg} 30%)`,
        display: 'flex', gap: 10,
      }}>
        {state === 'browse' && (
          <Btn variant="primary" size="lg" style={{ flex: 1 }} onClick={onRequestJoin}>
            Request to join
          </Btn>
        )}
        {state === 'pending' && (
          <Btn variant="secondary" size="lg" style={{ flex: 1 }} disabled>
            Waiting for approval…
          </Btn>
        )}
        {state === 'approved' && (
          <>
            <Btn variant="secondary" size="lg" style={{ width: 64, padding: 0 }}>
              <Icon name="cal" size={20} color={PACER.text}/>
            </Btn>
            <Btn variant="primary" size="lg" style={{ flex: 1 }} onClick={onOpenChat}
                 leading={<Icon name="chat" size={18} color={PACER.limeInk}/>}>
              Open group chat
            </Btn>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { RunDetailScreen, MapPlaceholder, StatPill });