/* ============ CALCULATOR: containers, goal, scoreboard ============ */
(function(){
  const { useState, useEffect, useRef } = React;
  const { AnimatedNumber, AvatarImg } = window;
  const KOFI_URL='https://ko-fi.com/warooms';

  const RATE_SMALL=0.30, RATE_REUSE=1.20;
  const CONTAINERS=[
    { id:'can',      nm:'פחית',                 sb:'אלומיניום',        rate:RATE_SMALL, color:'#9aa7b0', icon:'can',      emoji:'🥤', one:'פחית',          many:'פחיות' },
    { id:'plastic_s',nm:'בקבוק פלסטיק קטן',     sb:'עד 1.5 ליטר',      rate:RATE_SMALL, color:'#2fa9e6', icon:'pbottle',  emoji:'🧃', one:'בקבוק קולה',    many:'בקבוקי קולה' },
    { id:'plastic_l',nm:'בקבוק פלסטיק גדול',    sb:'1.5 עד 5 ליטר',    rate:RATE_SMALL, color:'#1fd9e6', icon:'pbottle_l',emoji:'💧', one:'בקבוק גדול',   many:'בקבוקים גדולים' },
    { id:'glass',    nm:'בקבוק זכוכית',          sb:'רגיל',             rate:RATE_SMALL, color:'#2fe07a', icon:'gbottle',  emoji:'🍾', one:'בקבוק זכוכית', many:'בקבוקי זכוכית' },
    { id:'glass_l',  nm:'בקבוק בירה או יין',       sb:'זכוכית · משקאות משכרים', rate:RATE_REUSE, color:'#ff9a3f', icon:'gbottle_l',emoji:'🍺', one:'בקבוק בירה',   many:'בקבוקי בירה' },
  ];
  const fmt=(n)=>n.toFixed(2);

  const LEVELS=[
    {min:0,nm:'בואו נתחיל!',color:'#9aa7b0'},{min:1,nm:'נבטים ירוקים',color:'#2fe07a'},
    {min:25,nm:'אספנים',color:'#1fd9e6'},{min:75,nm:'לוחמי פיקדון',color:'#ffd23f'},
    {min:150,nm:'גיבורים ירוקים',color:'#ff9a3f'},{min:300,nm:'אלופי על',color:'#ff4d9d'},
    {min:500,nm:'מצילי הפלנטה',color:'#b06bff'},
  ];
  function levelFor(count){ let lv=LEVELS[0],idx=0; LEVELS.forEach((l,i)=>{if(count>=l.min){lv=l;idx=i;}}); return {...lv,idx,next:LEVELS[idx+1]||null}; }

  function Icon({type,color}){
    const c=color;
    switch(type){
      case 'can': return (<svg width="38" height="50" viewBox="0 0 38 50"><rect x="6" y="6" width="26" height="40" rx="6" fill={c}/><ellipse cx="19" cy="7" rx="13" ry="4" fill="#fff" opacity=".55"/><rect x="10" y="3" width="18" height="5" rx="2.5" fill={c} opacity=".8"/><rect x="11" y="16" width="16" height="20" rx="3" fill="#fff" opacity=".25"/></svg>);
      case 'pbottle': return (<svg width="34" height="52" viewBox="0 0 34 52"><rect x="13" y="2" width="8" height="6" rx="2" fill={c}/><path d="M11 8 h12 c0 4 4 4 4 9 v27 a5 5 0 0 1 -5 5 h-10 a5 5 0 0 1 -5 -5 v-27 c0 -5 4 -5 4 -9 z" fill={c}/><rect x="12" y="22" width="10" height="18" rx="2" fill="#fff" opacity=".28"/></svg>);
      case 'pbottle_l': return (<svg width="36" height="54" viewBox="0 0 36 54"><rect x="14" y="2" width="9" height="6" rx="2" fill={c}/><path d="M10 8 h16 c0 4 5 4 5 10 v28 a6 6 0 0 1 -6 6 h-13 a6 6 0 0 1 -6 -6 v-28 c0 -6 5 -6 5 -10 z" fill={c}/><rect x="12" y="24" width="12" height="20" rx="2" fill="#fff" opacity=".28"/></svg>);
      case 'gbottle': return (<svg width="30" height="54" viewBox="0 0 30 54"><rect x="12" y="2" width="6" height="10" rx="2" fill={c}/><path d="M11 12 h8 v6 c0 4 5 6 5 12 v18 a4 4 0 0 1 -4 4 h-11 a4 4 0 0 1 -4 -4 v-18 c0 -6 6 -8 6 -12 z" fill={c}/><rect x="11" y="30" width="6" height="16" rx="2" fill="#fff" opacity=".3"/></svg>);
      case 'gbottle_l': return (<svg width="32" height="56" viewBox="0 0 32 56"><rect x="13" y="1" width="6" height="11" rx="2" fill={c}/><path d="M11 12 h10 v6 c0 5 6 7 6 14 v18 a5 5 0 0 1 -5 5 h-12 a5 5 0 0 1 -5 -5 v-18 c0 -7 6 -9 6 -14 z" fill={c}/><rect x="12" y="32" width="8" height="16" rx="2" fill="#fff" opacity=".32"/></svg>);
      default: return null;
    }
  }
  function Star({color='#ffd23f',size=24}){
    return (<svg width={size} height={size} viewBox="0 0 24 24" className="star"><path d="M12 2l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 20.8l1.2-6.6L2.5 9.6l6.6-.9z" fill={color} stroke="#fff" strokeWidth="1" strokeLinejoin="round" opacity=".95"/></svg>);
  }

  function Row({def, mode, myCount, groupCount, sharedCount, onInc, onDec, muted}){
    const ref=useRef(null);
    const isGroup=mode==='group';
    const display=isGroup?groupCount:myCount;
    const canDec=isGroup?sharedCount>0:myCount>0;
    const bump=()=>{ const el=ref.current; if(!el)return; el.classList.remove('bump'); void el.offsetWidth; el.classList.add('bump'); };
    const floatMoney=(txt)=>{ const el=ref.current; if(!el)return; const f=document.createElement('div'); f.className='float-money'; f.textContent=txt; f.style.insetInlineEnd='150px'; f.style.bottom='18px'; el.appendChild(f); setTimeout(()=>f.remove(),1000); };
    const inc=()=>{ onInc(); bump(); if(!muted)window.popUp(Math.min(display,8)); floatMoney('+₪'+fmt(def.rate)); if(Math.random()<0.13) window.surpriseSmall(muted); };
    const dec=()=>{ if(!canDec)return; onDec(); bump(); if(!muted)window.popDown(); };
    return (
      <div className={"row"+(isGroup?' group':'')} ref={ref}>
        <div className="row-accent" style={{background:def.color}}></div>
        <div className="ico"><Icon type={def.icon} color={def.color}/></div>
        <div className="row-info">
          <div className="nm">{def.nm}</div>
          <div className="sb">{def.sb}{isGroup
            ? (myCount>0 && <span style={{color:'#16a85a',fontWeight:800}}> · מהם שלי: {myCount}</span>)
            : (groupCount>0 && <span style={{color:'#16a85a',fontWeight:800}}> · בקבוצה: {groupCount}</span>)}</div>
          <span className="rate-chip">₪{fmt(def.rate)} ליחידה</span>
        </div>
        <div className="stepper-col">
          <div className="stepper">
            <button className="step-btn minus" onClick={dec} disabled={!canDec} aria-label="הורדה">–</button>
            <div className="count-box">{display}</div>
            <button className="step-btn plus" onClick={inc} aria-label="הוספה">+</button>
          </div>
          <div className="line-total">{isGroup ? (sharedCount>0?'משותף: '+sharedCount:'') : (myCount>0 ? 'שלי: '+myCount : '')}</div>
        </div>
      </div>
    );
  }

  function buildGoalMessages(remain, mult){
    if(remain<=0) return [];
    const msgs=[];
    CONTAINERS.forEach(d=>{ const per=d.rate*mult; const n=Math.ceil(remain/per); if(n>=1) msgs.push({emoji:d.emoji,text:`עוד ${n} ${n===1?d.one:d.many} והגעתם!`}); });
    if(remain >= CONTAINERS[0].rate*mult*5){
      const pool=[...CONTAINERS].sort(()=>Math.random()-0.5).slice(0,3);
      let left=remain; const parts=[]; let emo='';
      pool.forEach((d,i)=>{ const per=d.rate*mult; let n;
        if(i===pool.length-1){ n=Math.ceil(left/per); } else { const maxN=Math.floor(left/per); if(maxN<1) return; n=1+Math.floor(Math.random()*Math.max(1,maxN*0.5)); }
        if(n<1) return; left-=n*per; emo+=d.emoji; parts.push(`${n} ${n===1?d.one:d.many}`); });
      if(parts.length>=2){ const last=parts.pop(); msgs.push({emoji:emo,text:`עוד ${parts.join(', ')} ו־${last} אל היעד!`}); }
    }
    return msgs;
  }
  function GoalDistance({remain, mult}){
    const [msgs,setMsgs]=useState([]); const [i,setI]=useState(0); const [show,setShow]=useState(true);
    useEffect(()=>{ setMsgs(buildGoalMessages(remain,mult)); setI(0); },[Math.round(remain*100),mult]);
    useEffect(()=>{ if(msgs.length<2) return; const t=setInterval(()=>{ setShow(false); setTimeout(()=>{ setI(p=>(p+1)%msgs.length); setShow(true); },280); },3400); return ()=>clearInterval(t); },[msgs]);
    if(!msgs.length) return null;
    const m=msgs[i%msgs.length];
    return (<div className="goal-dist"><div className={"goal-dist-inner"+(show?' show':'')} key={i}><span className="gd-emoji">{m.emoji}</span><span className="gd-text">{m.text}</span></div></div>);
  }

  function MemberStrip({stats, uid, muted, verifiedSet, onSelect}){
    if(!stats.length) return null;
    const tap=(e,u)=>{
      const btn=e.currentTarget; btn.classList.remove('pop'); void btn.offsetWidth; btn.classList.add('pop');
      if(!muted && window.boing) window.boing();
      if(window.emojiBurst) window.emojiBurst(window.SPARKS, 11, e.clientX, e.clientY);
      setTimeout(()=>onSelect(u), 300);
    };
    return (
      <div className={"mstrip"+(stats.length>4?' scroll':'')}>
        {stats.map(m=>(
          <button type="button" className={"mava"+(m.uid===uid?' me':'')} key={m.uid} onClick={(e)=>tap(e,m.uid)} title={m.name}>
            <div className="mava-ring">{verifiedSet&&verifiedSet[m.uid] && <span className="mava-vbadge" title="מאומת">✓</span>}<AvatarImg value={m.avatar} size={50}/></div>
            <div className="mava-name">{m.uid===uid?'אני':m.name}</div>
            <div className="mava-money" dir="ltr">₪{fmt(m.money)}</div>
          </button>
        ))}
      </div>
    );
  }

  function MemberDetailSheet({member, isMe, verified, info, onEdit, onClose}){
    const rows=CONTAINERS.map(d=>({def:d, n:(member.mc[d.id]||0)})).filter(r=>r.n>0);
    const fmtD=(t)=>{ try{ return new Date(t).toLocaleDateString('he-IL',{day:'numeric',month:'short'}); }catch(e){ return ''; } };
    return (
      <div className="sheet-bg" onClick={onClose}>
        <div className="sheet" onClick={e=>e.stopPropagation()}>
          <div className="sheet-handle"></div>
          <div className="md-head">
            <div className="mava-ring lg">{verified && <span className="mava-vbadge" title="מאומת">✓</span>}<AvatarImg value={member.avatar} size={68}/></div>
            <div>
              <h3 style={{margin:0}}>{member.name}{verified && <span className="vbadge" title="מאומת">✓</span>}{isMe && <span className="mr-you" style={{marginInlineStart:8}}>אני</span>}{member.role==='admin' && <span style={{color:'var(--sun-dk)',fontSize:'.74rem',fontWeight:800,marginInlineStart:6}}>· מנהל</span>}</h3>
              <div className="md-totals" dir="ltr">{member.cans} מכלים · ₪{fmt(member.money)}</div>
              {info && info.active ? <div className="md-verify ok">✓ מאומת · {info.count} אימותים · בתוקף עד {fmtD(info.expiresAt)}</div> : (info ? <div className="md-verify expired">⌛ האימות פג — ממתין לקבלה עדכנית</div> : null)}
            </div>
          </div>
          {rows.length===0 ? (
            <div className="md-empty">עדיין לא אסף/ה כלום 🫙<br/><span>כשיתחיל לאסוף — זה יופיע כאן</span></div>
          ) : (
            <div className="md-rows">
              {rows.map(r=>(
                <div className="md-row" key={r.def.id}>
                  <div className="md-ico" style={{color:r.def.color}}><Icon type={r.def.icon} color={r.def.color}/></div>
                  <div className="md-info"><div className="md-nm">{r.def.nm}</div><div className="md-rate" dir="ltr">{r.n} × ₪{fmt(r.def.rate)}</div></div>
                  <div className="md-val" dir="ltr">₪{fmt(r.n*r.def.rate)}</div>
                </div>
              ))}
            </div>
          )}
          {isMe && onEdit && <button type="button" className="linkbtn" style={{display:'block',margin:'12px auto 0'}} onClick={onEdit}>✏️ עריכת הפרופיל שלי</button>}
          <button className="btn" style={{marginTop:14}} onClick={onClose}>סגירה</button>
        </div>
      </div>
    );
  }

  function VerifyCard({myInfo, myPendingReceipt, onReceipt, muted}){
    const fileRef=useRef(null);
    const onFile=(e)=>{ const f=e.target.files&&e.target.files[0]; if(f && window.fileToReceipt) window.fileToReceipt(f,(img)=>{ onReceipt(img,''); if(!muted&&window.coinSound)window.coinSound(); }); e.target.value=''; };
    const pick=()=>fileRef.current&&fileRef.current.click();
    const fmtD=(t)=>{ try{ return new Date(t).toLocaleDateString('he-IL',{day:'numeric',month:'short'}); }catch(e){ return ''; } };
    const fileInput=<input ref={fileRef} type="file" accept="image/*" capture="environment" style={{display:'none'}} onChange={onFile}/>;
    const active=myInfo&&myInfo.active;
    const daysLeft=active?Math.max(0,Math.ceil((myInfo.expiresAt-Date.now())/86400000)):0;
    if(active){
      const soon=daysLeft<=7;
      return (
        <div className="verify-card verified">
          <div className="vc-ic">✓</div>
          <div className="vc-txt">
            <b>האיסוף שלך מאומת 🏅</b>
            <div className="vc-meta">
              <span className="vc-chip">{myInfo.count} אימותים</span>
              <span className={"vc-chip"+(soon?' warn':'')}>{soon?('פג בעוד '+daysLeft+' ימים'):('בתוקף עד '+fmtD(myInfo.expiresAt))}</span>
            </div>
            {myPendingReceipt ? <span style={{display:'block',fontSize:'.74rem',color:'#4a6356',fontWeight:700,marginTop:4}}>📸 קבלה חדשה ממתינה לאימות…</span> : <button type="button" className="vc-refresh" onClick={pick}>↻ העלאת קבלה חדשה (מאריך את התוקף)</button>}
          </div>
          {fileInput}
        </div>
      );
    }
    if(myPendingReceipt){
      return (<div className="verify-card"><div className="vc-ic">⏳</div><div className="vc-txt"><b>הקבלה ממתינה לאימות…</b><span>מנהל הקבוצה יבדוק שהפרטים תואמים את הדיווח ויאשר בקרוב.</span></div>{fileInput}</div>);
    }
    const expired=myInfo&&!myInfo.active;
    return (
      <div className={"verify-card"+(expired?' expired':'')}>
        <div className="vc-ic">{expired?'⌛':'📸'}</div>
        <div className="vc-txt">
          <b>{expired?'האימות שלך פג':'אמתו את האיסוף שלכם'}</b>
          <span>{expired?'העלו קבלה עדכנית ממכונת הפיקדון כדי לחדש את התג.':'צלמו את הקבלה ממכונת הפיקדון — והמנהל יאמת שהיא תואמת את הדיווח ✓'}</span>
        </div>
        <button type="button" className="btn cyan sm" onClick={pick}>{expired?'חידוש':'📷 העלאת קבלה'}</button>
        {fileInput}
      </div>
    );
  }

  function Calculator({group, uid, muted, onCount, onGoal, verifiedSet, verifyInfo, myPendingReceipt, onReceipt, onEditProfile}){
    const myInfo=verifyInfo&&verifyInfo[uid];
    const [selMember,setSelMember]=useState(null);
    const [mode,setMode]=useState('mine');
    const counts=group.counts||{};
    const myCounts=counts[uid]||{};
    const sharedCounts=counts['_shared']||{};
    const membersMeta=group.members||{};
    const groupCounts={};
    CONTAINERS.forEach(d=>{ let s=0; Object.keys(counts).forEach(u=>{ s+=(counts[u]&&counts[u][d.id])||0; }); groupCounts[d.id]=s; });

    const memberStats=Object.keys(membersMeta).map(u=>{
      const mc=counts[u]||{};
      const cans=CONTAINERS.reduce((s,d)=>s+(mc[d.id]||0),0);
      const money=CONTAINERS.reduce((s,d)=>s+(mc[d.id]||0)*d.rate,0);
      return {uid:u, name:membersMeta[u].name||'חבר', avatar:membersMeta[u].avatar, role:membersMeta[u].role, cans, money, mc};
    }).sort((a,b)=> b.money-a.money || b.cans-a.cans);
    const selected = selMember ? memberStats.find(m=>m.uid===selMember) : null;

    const totalCans=CONTAINERS.reduce((s,d)=>s+groupCounts[d.id],0);
    const myCans=CONTAINERS.reduce((s,d)=>s+(myCounts[d.id]||0),0);
    const myMoney=CONTAINERS.reduce((s,d)=>s+(myCounts[d.id]||0)*d.rate,0);
    const bottlesSum=CONTAINERS.reduce((s,d)=>s+groupCounts[d.id]*d.rate,0);
    const mult=Math.max(1, group.boostMult||1);
    const hasBoost=mult>1 && (group.boostName||'').trim()!=='';
    const boostBonus=bottlesSum*(mult-1);
    const grandTotal=bottlesSum*mult;

    const lvl=levelFor(totalCans);
    const goalNum=parseFloat(group.goalAmount)||0;
    const pct=goalNum>0?Math.min(100,(grandTotal/goalNum)*100):0;
    const remainToGoal=Math.max(0,goalNum-grandTotal);

    const prevLevel=useRef(null), prevM5=useRef(Math.floor(grandTotal/5)), goalHit=useRef(grandTotal>=goalNum&&goalNum>0);
    const [celebrate,setCelebrate]=useState(false);

    useEffect(()=>{ if(prevLevel.current===null){prevLevel.current=lvl.idx;return;} if(lvl.idx>prevLevel.current){ window.fireConfetti(70); window.emojiBurst(window.EMOJIS,16); window.praise(lvl.nm,lvl.color); if(!muted)window.levelSound(); } prevLevel.current=lvl.idx; },[lvl.idx]);
    useEffect(()=>{ const m=Math.floor(grandTotal/5); if(m>prevM5.current && grandTotal>0){ window.surpriseBig(muted); } prevM5.current=m; },[grandTotal]);
    useEffect(()=>{ if(goalNum>0 && grandTotal>=goalNum && !goalHit.current){ goalHit.current=true; setCelebrate(true); window.goalBlast(muted); setTimeout(()=>setCelebrate(false),5600); } if(grandTotal<goalNum) goalHit.current=false; },[grandTotal,goalNum]);

    return (
      <div>
        <div className="scoreboard">
          <div className="level-strip">
            <div className="level-badge"><Star color={lvl.color}/><div><b>{lvl.nm}</b><span>{lvl.next?`עוד ${lvl.next.min-totalCans} מכלים לשלב הבא`:'הדרגה הגבוהה ביותר!'}</span></div></div>
            <div className="cans-count">אספתם יחד<b>{totalCans}</b>מכלים</div>
          </div>
          <MemberStrip stats={memberStats} uid={uid} muted={muted} verifiedSet={verifiedSet} onSelect={setSelMember}/>
          <div className="score-main">
            <div className="score-label">סך הכל לקבוצה 🎉</div>
            <AnimatedNumber value={grandTotal} className="score-total"/>
          </div>
          {hasBoost ? (
            <div className="breakdown">
              <div className="bd bottles"><div className="t">🍾 מהמכלים</div><div className="v" dir="ltr">₪{fmt(bottlesSum)}</div></div>
              <div className="bd-x">+</div>
              <div className="bd babi"><div className="t">✨ {group.boostName} ×{mult}</div><div className="v" dir="ltr">₪{fmt(boostBonus)}</div></div>
            </div>
          ) : null}
          <div className="my-tally">
            <div className="mt-ic">🙋</div>
            <div className="mt-body">
              <div className="mt-label">מה שאני אספתי</div>
              <div className="mt-stats"><b>{myCans}</b> מכלים · <b dir="ltr">₪{fmt(myMoney)}</b></div>
            </div>
          </div>
        </div>

        <div className="goal-card">
          <div className="goal-head">
            <svg className="flag" viewBox="0 0 24 24"><path d="M6 3v18" stroke="#16a85a" strokeWidth="2.4" strokeLinecap="round"/><path d="M7 4h11l-2.5 3.5L18 11H7z" fill="#ff4d9d"/></svg>
            <div className="gt">היעד של הקבוצה</div>
          </div>
          <div className="goal-inputs">
            <input className="gname" placeholder="חוסכים ל… (טרמפולינה, טיול…)" defaultValue={group.goalName||''} onChange={e=>onGoal({goalName:e.target.value})}/>
            <input className="gamt" type="number" inputMode="decimal" placeholder="₪ סכום" defaultValue={group.goalAmount||''} onChange={e=>onGoal({goalAmount:e.target.value})}/>
          </div>
          <div className="progress-track"><div className="progress-fill" style={{width:pct+'%'}}>{pct>10 && <span className="progress-coin">🪙</span>}</div></div>
          <div className="progress-label">
            <span>{goalNum>0 ? <>הגעתם ל־<b>{Math.round(pct)}%</b></> : 'הזינו יעד כדי לראות התקדמות'}</span>
            {goalNum>0 && (grandTotal>=goalNum ? <b className="goal-done">הגעתם ליעד! 🎉</b> : <span>עוד <b>₪{fmt(remainToGoal)}</b></span>)}
          </div>
          {goalNum>0 && grandTotal<goalNum && <GoalDistance remain={remainToGoal} mult={mult}/>}
        </div>

        <VerifyCard myInfo={myInfo} myPendingReceipt={myPendingReceipt} onReceipt={onReceipt} muted={muted}/>

        <div className="sec-title"><h2>כמה אספתם?</h2><div className="ln"></div></div>
        <div className="seg add-mode">
          <button type="button" className={mode==='mine'?'on':''} onClick={()=>setMode('mine')}>🙋 אזור אישי</button>
          <button type="button" className={mode==='group'?'on':''} onClick={()=>setMode('group')}>👥 אזור קבוצתי</button>
        </div>
        {mode==='group' && <p className="add-mode-note">👀 מספר מוצג הוא הסך הקבוצתי מכל סוג. הוספה כאן נרשמת לטובת כל הקבוצה (אישוף משותף) — לא לאדם מסוים.</p>}
        <div className="rows">
          {CONTAINERS.map(def=>(
            <Row key={def.id} def={def} mode={mode} myCount={myCounts[def.id]||0} groupCount={groupCounts[def.id]} sharedCount={sharedCounts[def.id]||0}
                 onInc={()=>onCount(def.id,1,mode==='group')} onDec={()=>onCount(def.id,-1,mode==='group')} muted={muted}/>
          ))}
        </div>
        <p className="muted" style={{textAlign:'center',marginTop:16,color:'#8fe6b6',lineHeight:1.6}}>
          הזינו רק מה שאתם אספתם · כולם רואים את ההזנות בזמן אמת 👀<br/>
          תעריפי הפיקדון לפי חוק · מכלים עד 5 ליטר ₪0.30 · בקבוקי בירה/יין ₪1.20
        </p>

        {celebrate && (
          <div className="goal-celebrate" onClick={()=>setCelebrate(false)}>
            <div className="gc-inner">
              <div className="gc-trophy">🏆</div>
              <div className="gc-title">הגעתם ליעד!</div>
              {group.goalName && <div className="gc-sub">{group.goalName}</div>}
              <div className="gc-amount" dir="ltr">₪{fmt(grandTotal)}</div>
              <div className="gc-tap">לחצו להמשך 🎉</div>
            </div>
          </div>
        )}
        {selected && <MemberDetailSheet member={selected} isMe={selected.uid===uid} verified={!!(verifiedSet&&verifiedSet[selected.uid])} info={verifyInfo&&verifyInfo[selected.uid]} onEdit={()=>{ setSelMember(null); onEditProfile&&onEditProfile(); }} onClose={()=>setSelMember(null)}/>}
      </div>
    );
  }

  Object.assign(window, { CONTAINERS, Calculator, calcFmt:fmt, levelFor });
})();