// Avatar — now backed by a MUTABLE url list so real uploaded profile photos
// flow into every component that renders an avatar (timeline pies, streak
// badges, chat bubbles) without changing those components. Consumers still
// reference AVATAR_URLS[variant] / <Avatar variant=…/>; we just repopulate
// AVATAR_URLS from the live profiles and force a re-render.

let AVATAR_URLS = [
  'avatars/you.png',    // fallbacks if a member hasn't set a photo yet
  'avatars/mo.png',
  'avatars/lena.png',
  'avatars/priya.png',
];
const AVATAR_FALLBACK = ['avatars/you.png','avatars/mo.png','avatars/lena.png','avatars/priya.png'];
// Called with the group's photo URLs in roster order (null → keep fallback).
function setAvatarUrls(urls) {
  AVATAR_URLS = urls.map((u, i) => u || AVATAR_FALLBACK[i % 4]);
}

// `pulse` = draw the green "did-it" ring with a pulsing halo (unseen story cue,
// Stories Phase 2). It only makes sense together with a green ring; the halo is
// a box-shadow animation on the same bordered element.
function Avatar({ variant = 0, size = 40, ring = null, dim = false, pulse = false }) {
  const url = AVATAR_URLS[variant % AVATAR_URLS.length];
  const ringStroke = ring === 'gold' ? '#d4a536' : ring === 'green' ? '#2f6b52' : null;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      position: 'relative', flexShrink: 0,
      boxSizing: 'border-box',
      border: ringStroke ? `2px solid ${ringStroke}` : 'none',
      padding: ringStroke ? 1.5 : 0,
      background: '#fff',
      animation: (pulse && ringStroke) ? 'pulse-ring 1.6s ease-out infinite' : 'none',
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: '50%', overflow: 'hidden',
        position: 'relative',
      }}>
        <img src={url} alt="" style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          filter: dim ? 'saturate(0.2) brightness(1.05)' : 'none',
          opacity: dim ? 0.6 : 1,
        }} />
        {dim && (
          <div style={{
            position: 'absolute', inset: 0, background: 'rgba(230,225,214,0.5)',
            borderRadius: '50%',
          }} />
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Avatar, setAvatarUrls, get AVATAR_URLS() { return AVATAR_URLS; } });