// Vault — Avatar system
// Procedural sigil/talisman avatars. Each is an SVG component that takes a `seed`
// and `tone` (rank palette). Rendered into a circular frame whose ring/border
// upgrades with rank (Addicted → Clairvoyant).

const RANK_PALETTES = {
  addicted:    { name:'Addicted',    hi:'#ff465a', mid:'#2a1520', glow:'rgba(255,60,90,0.55)',  ring:'rgba(255,90,120,0.5)' },
  scroller:    { name:'Scroller',    hi:'#8ca0d2', mid:'#1a2030', glow:'rgba(150,180,230,0.45)', ring:'rgba(150,180,230,0.5)' },
  seeker:      { name:'Seeker',      hi:'#ffbe64', mid:'#2a1e0f', glow:'rgba(255,170,70,0.55)',  ring:'rgba(255,180,90,0.5)' },
  lucid:       { name:'Lucid',       hi:'#5ae6c8', mid:'#0f2a27', glow:'rgba(80,230,200,0.55)',  ring:'rgba(90,230,200,0.5)' },
  clairvoyant: { name:'Clairvoyant', hi:'#aa82ff', mid:'#1d1535', glow:'rgba(170,130,255,0.6)',  ring:'rgba(180,140,255,0.55)' },
};
function rankFromElo(e){
  if (e>=2000) return 'clairvoyant';
  if (e>=1700) return 'lucid';
  if (e>=1400) return 'seeker';
  if (e>=1200) return 'scroller';
  return 'addicted';
}

// =============== AVATAR GLYPHS (16 sigils across 4 families) ===============

// helper: deterministic hash → 0..1
function hash(s){ let h=2166136261>>>0; for(const c of s) h=(h^c.charCodeAt(0))*16777619>>>0; return (h%10000)/10000; }
function rng(seed){ let s=hash(seed); return ()=>{ s=(s*9301+49297)%233280/233280; return s; }; }

// Glyph delegate — if avatar.glyph is a rank glyph (RANK_AVATARS), use GA from
// vault-rank-avatars.jsx. Otherwise fall back to procedural family glyphs below.
function _GA(props){ return (typeof window!=='undefined' && window.GA) ? window.GA(props) : null; }

// Family A — concentric geometric
function GlyphRings({ seed, hi }){
  const r = rng(seed+'rings');
  const rings = 3 + Math.floor(r()*3);
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <defs><radialGradient id={`rg-${seed}`} cx="50%" cy="40%"><stop offset="0%" stopColor={hi} stopOpacity="0.9"/><stop offset="100%" stopColor={hi} stopOpacity="0.15"/></radialGradient></defs>
      <circle cx="50" cy="50" r="48" fill={`url(#rg-${seed})`}/>
      {Array.from({length:rings}).map((_,i)=>{
        const rad = 12 + i*(34/rings);
        return <circle key={i} cx="50" cy="50" r={rad} fill="none" stroke={hi} strokeOpacity={0.35+i*0.15} strokeWidth={i===rings-1?1.5:0.8}/>;
      })}
      <circle cx="50" cy="50" r={3+r()*4} fill={hi}/>
    </svg>
  );
}

// Family B — radiating polygon
function GlyphSigil({ seed, hi }){
  const r = rng(seed+'sigil');
  const sides = 6 + Math.floor(r()*4);
  const points = Array.from({length:sides}).map((_,i)=>{
    const a = (i/sides)*Math.PI*2 - Math.PI/2;
    const rad = 28 + r()*8;
    return `${50+Math.cos(a)*rad},${50+Math.sin(a)*rad}`;
  }).join(' ');
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <defs><radialGradient id={`sg-${seed}`}><stop offset="0%" stopColor={hi} stopOpacity="0.6"/><stop offset="100%" stopColor={hi} stopOpacity="0.05"/></radialGradient></defs>
      <circle cx="50" cy="50" r="48" fill={`url(#sg-${seed})`}/>
      <polygon points={points} fill="none" stroke={hi} strokeOpacity="0.7" strokeWidth="1.4" strokeLinejoin="round"/>
      {Array.from({length:sides}).map((_,i)=>{
        const a = (i/sides)*Math.PI*2 - Math.PI/2;
        return <line key={i} x1="50" y1="50" x2={50+Math.cos(a)*36} y2={50+Math.sin(a)*36} stroke={hi} strokeOpacity="0.25" strokeWidth="0.8"/>;
      })}
      <circle cx="50" cy="50" r="4" fill={hi}/>
    </svg>
  );
}

// Family C — aurora orb
function GlyphOrb({ seed, hi, mid }){
  const r = rng(seed+'orb');
  const cx1 = 30+r()*40, cy1 = 25+r()*30;
  const cx2 = 30+r()*40, cy2 = 50+r()*30;
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <defs>
        <radialGradient id={`o1-${seed}`} cx={`${cx1}%`} cy={`${cy1}%`}><stop offset="0%" stopColor={hi} stopOpacity="0.9"/><stop offset="100%" stopColor={hi} stopOpacity="0"/></radialGradient>
        <radialGradient id={`o2-${seed}`} cx={`${cx2}%`} cy={`${cy2}%`}><stop offset="0%" stopColor="#fff" stopOpacity="0.5"/><stop offset="100%" stopColor={hi} stopOpacity="0"/></radialGradient>
      </defs>
      <circle cx="50" cy="50" r="48" fill={mid}/>
      <circle cx="50" cy="50" r="48" fill={`url(#o1-${seed})`}/>
      <circle cx="50" cy="50" r="48" fill={`url(#o2-${seed})`}/>
    </svg>
  );
}

// Family D — initials
function GlyphInitials({ seed, hi, mid, label }){
  const init = (label||seed).slice(0,2).toUpperCase();
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <defs><linearGradient id={`gi-${seed}`} x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor={hi} stopOpacity="0.6"/><stop offset="100%" stopColor={mid}/></linearGradient></defs>
      <rect width="100" height="100" rx="50" fill={`url(#gi-${seed})`}/>
      <text x="50" y="50" textAnchor="middle" dominantBaseline="central" fontFamily="-apple-system,'SF Pro Display',system-ui,sans-serif" fontWeight="700" fontSize="36" letterSpacing="-1" fill="#fff" fillOpacity="0.92">{init}</text>
    </svg>
  );
}

// the 16-pack of avatar presets (4 per family, varied seeds)
const AVATAR_PRESETS = [
  ...['ringA','ringB','ringC','ringD'].map(s=>({id:s, family:'rings'})),
  ...['sigA','sigB','sigC','sigD'].map(s=>({id:s, family:'sigil'})),
  ...['orbA','orbB','orbC','orbD'].map(s=>({id:s, family:'orb'})),
  // initials only available when it's "your" avatar (uses your handle)
];

function AvatarGlyph({ avatar, label, tone='clairvoyant' }){
  const p = RANK_PALETTES[tone];
  // rank-themed glyph (preferred — see vault-rank-avatars.jsx)
  if (avatar && avatar.glyph && window.GA) return <_GA glyph={avatar.glyph} hi={p.hi} mid={p.mid}/>;
  // legacy procedural families (kept for back-compat; map old ids → rank glyphs by handle)
  if (avatar.family==='rings')  return <GlyphRings seed={avatar.id} hi={p.hi}/>;
  if (avatar.family==='sigil')  return <GlyphSigil seed={avatar.id} hi={p.hi}/>;
  if (avatar.family==='orb')    return <GlyphOrb seed={avatar.id} hi={p.hi} mid={p.mid}/>;
  if (avatar.family==='initials') return <GlyphInitials seed={avatar.id||label} hi={p.hi} mid={p.mid} label={label}/>;
  return <GlyphRings seed="default" hi={p.hi}/>;
}

// =============== FRAME (rank-tier ring around the avatar) ===============
// size = px; tier upgrades visual complexity of the ring
function Avatar({ avatar, label, tone, size=44, frame=true, online=false, status }){
  const p = RANK_PALETTES[tone];
  return (
    <div style={{position:'relative', width:size, height:size, flexShrink:0}}>
      {/* halo */}
      {frame && <div style={{position:'absolute', inset:-3, borderRadius:'50%',
        background:`radial-gradient(circle, ${p.glow} 0%, transparent 70%)`,
        filter:'blur(8px)', opacity:0.7, pointerEvents:'none'}}/>}
      {/* outer ring */}
      <div style={{position:'absolute', inset:0, borderRadius:'50%',
        padding: frame? Math.max(2, size*0.06) : 0,
        background: frame
          ? `conic-gradient(from 220deg, ${p.hi} 0deg, ${p.ring} 120deg, rgba(255,255,255,0.06) 240deg, ${p.hi} 360deg)`
          : 'transparent'}}>
        <div style={{width:'100%', height:'100%', borderRadius:'50%', overflow:'hidden',
          boxShadow:'inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -2px 6px rgba(0,0,0,0.4)'}}>
          <AvatarGlyph avatar={avatar} label={label} tone={tone}/>
        </div>
      </div>
      {online && <div style={{position:'absolute', right:0, bottom:0,
        width:Math.max(10, size*0.24), height:Math.max(10, size*0.24), borderRadius:'50%',
        background:'#6cf0b8', border:`${Math.max(2,size*0.05)}px solid #05020f`,
        boxShadow:'0 0 6px rgba(108,240,184,0.8)'}}/>}
      {status==='live' && <div style={{position:'absolute', right:-2, bottom:-2,
        padding:'1px 5px', borderRadius:6, background:'#ffb257', color:'#1a0f00',
        fontSize:8.5, fontWeight:800, letterSpacing:'0.06em',
        border:'2px solid #05020f', textTransform:'uppercase'}}>LIVE</div>}
    </div>
  );
}

// rank chip — tiny pill showing rank name + tone
function RankChip({ tone, size='sm' }){
  const p = RANK_PALETTES[tone];
  const small = size==='sm';
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:5,
      padding: small?'2px 7px':'4px 10px',
      borderRadius: small?6:8,
      background:`linear-gradient(135deg, ${p.hi}33, ${p.hi}10)`,
      border:`1px solid ${p.ring}`,
      fontSize: small?9:10.5, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase',
      color:'#fff'}}>
      <span style={{width: small?5:6, height:small?5:6, borderRadius:'50%', background:p.hi, boxShadow:`0 0 6px ${p.hi}`}}/>
      {p.name}
    </span>
  );
}

window.RANK_PALETTES = RANK_PALETTES;
window.rankFromElo = rankFromElo;
window.AVATAR_PRESETS = AVATAR_PRESETS;
window.Avatar = Avatar;
window.AvatarGlyph = AvatarGlyph;
window.RankChip = RankChip;