// SocialDetailScreen — photo hero, host + status, description, stat tiles, an
// RSVP segmented control, who's coming rail, and a group-chat preview.
function SocialDetailScreen({ id, onBack, going, setGoing }) {
  const { Badge, ActivityDots, StatTile, Avatar, Input, CATEGORIES } = window.PraigoDesignSystem_290071;
  const { SOCIALS } = window.PRAIGO_DATA;
  const s = SOCIALS.find(x => x.id === id) || SOCIALS[0];
  const meta = CATEGORIES[s.category] || { label: s.category, color: 'var(--coral)', icon: 'interests' };
  const rsvp = going[s.id] ? 'going' : (going[s.id] === false ? 'no' : 'unconfirmed');
  const setRsvp = (v) => setGoing(g => ({ ...g, [s.id]: v === 'going' ? true : (v === 'no' ? false : undefined) }));

  const seats = s.capacity ? `${s.goingCount}/${s.capacity}` : `${s.goingCount}`;
  const RSVP_OPTS = [
    { value: 'going', label: 'Going', icon: 'check_circle' },
    { value: 'unconfirmed', label: 'Maybe', icon: 'schedule' },
    { value: 'no', label: 'Not for me', icon: 'close' },
  ];

  return (
    <div>
      {/* hero */}
      <div style={{
        position: 'relative', height: 240,
        background: s.image ? `center/cover url(${s.image})` : 'var(--grad-sunrise)',
      }}>
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, rgba(0,0,0,0.28), transparent 40%, rgba(0,0,0,0.55))` }} />
        <button onClick={onBack} aria-label="Back" style={{
          position: 'absolute', top: 14, left: 14, width: 40, height: 40, borderRadius: '50%',
          border: 'none', background: 'rgba(0,0,0,0.4)', color: '#fff', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)',
        }}>
          <span className="material-symbols-rounded">arrow_back</span>
        </button>
        <div style={{ position: 'absolute', left: 16, right: 16, bottom: 14 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 999, background: meta.color, color: '#fff', fontSize: 11, fontWeight: 800 }}>
            <span className="material-symbols-rounded" style={{ fontSize: 14 }}>{meta.icon}</span>{meta.label}
          </span>
          <div style={{ color: '#fff', fontSize: 24, fontWeight: 800, marginTop: 8, letterSpacing: '-.02em', textShadow: '0 1px 8px rgba(0,0,0,0.4)' }}>{s.title}</div>
        </div>
      </div>

      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* host + status */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Avatar name={s.hostName} size="sm" />
            <div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Hosted by {s.hostName}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                <ActivityDots tier={s.hostTier} size={8} />
                <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Tier {s.hostTier}</span>
              </div>
            </div>
          </div>
          {s.isActive
            ? <Badge tone="primary" solid dot>Active now</Badge>
            : <Badge tone="neutral" dot>Upcoming</Badge>}
        </div>

        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.5, color: 'var(--text-primary)' }}>{s.description}</p>

        {/* stat tiles */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
          <StatTile value={s.whenLabel} label="When" icon="schedule" />
          <StatTile value={s.distanceLabel} label="Distance" icon="near_me" />
          <StatTile value={seats} label="Going" icon="group" accent="var(--primary)" />
          <StatTile value={meta.label} label="Category" icon={meta.icon} accent={meta.color} />
        </div>

        {/* RSVP */}
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-secondary)', marginBottom: 8 }}>Are you in?</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {RSVP_OPTS.map(o => {
              const on = rsvp === o.value;
              const isGoing = o.value === 'going';
              return (
                <button key={o.value} onClick={() => setRsvp(o.value)} style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '12px 6px',
                  borderRadius: 12, cursor: 'pointer',
                  border: `1.5px solid ${on ? (isGoing ? 'var(--primary)' : 'var(--border-emphasis)') : 'var(--border)'}`,
                  background: on ? (isGoing ? 'color-mix(in srgb, var(--green-core) 14%, var(--surface))' : 'var(--surface-raised)') : 'var(--surface)',
                  color: on && isGoing ? 'var(--green-deep)' : 'var(--text-primary)',
                  fontWeight: 700, fontSize: 12, fontFamily: 'var(--font-sans)',
                }}>
                  <span className="material-symbols-rounded" style={{ fontSize: 22 }}>{o.icon}</span>
                  {o.label}
                </button>
              );
            })}
          </div>
        </div>

        {/* who's coming */}
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-secondary)', marginBottom: 8 }}>Who's coming</div>
          <div style={{ display: 'flex', gap: 14, overflowX: 'auto', paddingBottom: 4 }}>
            {s.avatars.map((a, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flex: '0 0 auto' }}>
                <Avatar src={a} size="md" />
                <ActivityDots tier={(i % 4) + 1} size={5} />
              </div>
            ))}
          </div>
        </div>

        {/* group chat preview */}
        <div style={{ background: 'var(--surface-raised)', border: '1px solid var(--border)', borderRadius: 'var(--radius-card)', padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <span className="material-symbols-rounded" style={{ fontSize: 18, color: 'var(--text-secondary)' }}>forum</span>
            <span style={{ fontSize: 13, fontWeight: 700 }}>Group chat</span>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginBottom: 12 }}>
            <Avatar name={s.hostName} size="xs" />
            <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 12, padding: '8px 12px', fontSize: 13 }}>
              {s.hostName}: door's open at 6:50, come hungry! 🍲
            </div>
          </div>
          <Input placeholder="Message the group…" leadingIcon="chat_bubble" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SocialDetailScreen });