// shared.jsx — tokens + atomes du design 4D Gym (staff). Données réelles injectées via app.jsx.
const T = {
  bg:'var(--bg)', surface:'var(--surface)', elev:'var(--elev)', line:'var(--line)',
  text:'var(--text)', muted:'var(--muted)', faint:'var(--faint)',
  onBg:'var(--on-bg)', onBgMuted:'var(--on-bg-muted)', // texte posé sur le FOND (coloré) vs dans les cartes
  volt:'var(--volt)', voltDim:'var(--volt-dim)', voltLine:'var(--volt-line)', ink:'var(--volt-ink)', amber:'var(--amber)', amberDim:'var(--amber-dim)',
  blue:'#7FC8FF', blueDim:'rgba(127,200,255,0.14)',
};
const fmt = (n) => `${Math.round(n||0)} €`;

const STATUS = {
  nouveau:  { label:'Nouveau',  color:T.text,  dim:'rgba(255,255,255,0.1)' },
  contacte: { label:'Contacté', color:T.amber, dim:T.amberDim },
  essai:    { label:'Essai',    color:T.blue,  dim:T.blueDim },
  inscrit:  { label:'Inscrit',  color:T.volt,  dim:T.voltDim },
};

const AVCOL = ['#C8A4FF','#7FC8FF','#CBFB45','#F6C254','#FF9A8B','#86E5C4'];
const avColor = (s) => AVCOL[((s||'?').charCodeAt(0) + (s||'?').charCodeAt((s||'?').length-1)) % AVCOL.length];

function Avatar({ name, initials, size=40, ring, photo, rank, pulse }) {
  const ini = initials || (name||'?').split(' ').map(w=>w[0]).slice(0,2).join('');
  const c = avColor(name || ini);
  const pic = photo || (typeof window!=='undefined' && window.__photos && window.__photos[name]);
  const inner = pic
    ? <img src={pic} alt={name||''} style={{ width:size, height:size, borderRadius:size, flexShrink:0, objectFit:'cover', display:'block', border: ring?`1.5px solid ${c}`:`1px solid ${c}33`, animation: pulse?'avaPulse 2.4s ease-in-out infinite':'none' }} />
    : <div style={{ width:size, height:size, borderRadius:size, flexShrink:0, background:`${c}22`, color:c, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Archivo, sans-serif', fontWeight:700, fontSize:size*0.36, letterSpacing:0.3, border: ring?`1.5px solid ${c}`:`1px solid ${c}33`, animation: pulse?'avaPulse 2.4s ease-in-out infinite':'none' }}>{ini}</div>;
  if (!rank || rank<1 || rank>3) return inner;
  const badge = rank===1 ? '👑' : rank===2 ? '🥈' : '🥉';
  const badgeSize = Math.max(16, Math.round(size*0.42));
  const offTop = rank===1 ? -Math.round(badgeSize*0.75) : -Math.round(badgeSize*0.25);
  const offRight = rank===1 ? -Math.round(badgeSize*0.30) : -Math.round(badgeSize*0.20);
  const tilt = rank===1 ? 'rotate(18deg)' : 'rotate(0)';
  return <div style={{ position:'relative', width:size, height:size, flexShrink:0, display:'inline-block' }}>
    {inner}
    <span style={{ position:'absolute', top:offTop, right:offRight, fontSize:badgeSize, lineHeight:1, filter:'drop-shadow(0 2px 4px rgba(0,0,0,.5))', transform:tilt, pointerEvents:'none' }}>{badge}</span>
  </div>;
}

function StatusChip({ status, small }) {
  const s = STATUS[status] || STATUS.nouveau;
  return <span style={{ display:'inline-flex', alignItems:'center', gap:5, padding: small?'2px 8px':'4px 10px',
    borderRadius:999, background:s.dim, color:s.color, fontFamily:'"Space Mono", monospace',
    fontSize: small?10:11, textTransform:'uppercase', letterSpacing:0.5, fontWeight:700 }}>
    <span style={{ width:5, height:5, borderRadius:5, background:s.color }} />{s.label}</span>;
}

function PlanTag({ type }) {
  const abo = type === 'abo';
  return <span style={{ fontFamily:'"Space Mono", monospace', fontSize:10, fontWeight:700, letterSpacing:0.5,
    textTransform:'uppercase', color: abo?T.volt:T.muted, padding:'2px 7px', borderRadius:5,
    border:`1px solid ${abo?'rgba(203,251,69,0.3)':T.line}` }}>{abo ? 'MRR · 5€' : 'Comptant · 10€'}</span>;
}

function ProgressRing({ value, max, size=96, stroke=9, color=T.volt, children }) {
  const r = (size-stroke)/2, c = 2*Math.PI*r, pct = Math.min(1, (value||0)/(max||1));
  return <div style={{ position:'relative', width:size, height:size }}>
    <svg width={size} height={size} style={{ transform:'rotate(-90deg)' }}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={stroke} />
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={c*(1-pct)} />
    </svg>
    <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>{children}</div>
  </div>;
}

function Sparkbars({ data, color=T.volt, height=56, highlight }) {
  const max = Math.max(1, ...data);
  return <div style={{ display:'flex', alignItems:'flex-end', gap:6, height }}>
    {data.map((v,i)=>(
      <div key={i} style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'flex-end', height:'100%' }}>
        <div style={{ height:`${(v/max)*100}%`, borderRadius:4, background:i===highlight?color:'rgba(255,255,255,0.12)', minHeight:4 }} />
      </div>
    ))}
  </div>;
}

function Icon({ name, size=22, color='currentColor', sw=1.8 }) {
  const common = { width:size, height:size, viewBox:'0 0 24 24', fill:'none', stroke:color, strokeWidth:sw, strokeLinecap:'round', strokeLinejoin:'round' };
  switch (name) {
    case 'home':   return <svg {...common}><path d="M3 11l9-7 9 7" /><path d="M5 10v9h14v-9" /></svg>;
    case 'leads':  return <svg {...common}><path d="M4 7h12M4 12h12M4 17h8" /><circle cx="20" cy="7" r="1" fill={color} stroke="none"/><circle cx="20" cy="12" r="1" fill={color} stroke="none"/></svg>;
    case 'wallet': return <svg {...common}><rect x="3" y="6" width="18" height="13" rx="3" /><path d="M3 10h18" /><circle cx="16.5" cy="14.5" r="1.3" fill={color} stroke="none"/></svg>;
    case 'rank':   return <svg {...common}><rect x="4" y="13" width="4" height="7" rx="1"/><rect x="10" y="8" width="4" height="12" rx="1"/><rect x="16" y="4" width="4" height="16" rx="1"/></svg>;
    case 'calendar': return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case 'user':   return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>;
    case 'phone':  return <svg {...common}><path d="M5 4h4l2 5-3 2a12 12 0 005 5l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg>;
    case 'whatsapp': return <svg {...common} fill={color} stroke="none"><path d="M12 2a10 10 0 00-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1012 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7s-3.7-3.2-3.8-3.4c-.1-.2-.9-1.2-.9-2.3s.6-1.6.8-1.9c.2-.2.4-.3.6-.3h.4c.2 0 .4 0 .6.5l.8 1.9c.1.2.1.3 0 .5l-.4.5c-.2.2-.3.3-.1.6s.6 1 1.3 1.6c.9.8 1.6 1 1.9 1.2.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.6-.1l1.8.9c.3.1.4.2.5.3 0 .2 0 .7-.2 1.3z"/></svg>;
    case 'check':  return <svg {...common}><path d="M5 12l5 5L20 6"/></svg>;
    case 'bolt':   return <svg {...common} fill={color} stroke="none"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>;
    case 'flame':  return <svg {...common} fill={color} stroke="none"><path d="M12 2c1 3-1 4-1 6 0 1 1 2 2 2 1-1 1-2 1-3 2 2 3 4 3 7a5.5 5.5 0 11-11 0c0-3 2-5 3-7 1 1 1 3 2 3 1-2-1-5-1-8z"/></svg>;
    case 'arrow':  return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'target': return <svg {...common}><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'logout': return <svg {...common}><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></svg>;
    case 'refresh':return <svg {...common}><path d="M21 12a9 9 0 11-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>;
    default: return null;
  }
}

function BottomNav({ active='home', onNav, admin=false }) {
  const tabs = [
    { id:'home', icon:'home', label:admin?'Pilotage':'Accueil' },
    { id:'leads', icon:'leads', label:'Leads' },
    { id:'sessions', icon:'calendar', label:'Séances' },
    { id:'gains', icon:'wallet', label:admin?'Équipe':'Primes' },
    { id:'me', icon:'user', label:'Profil' },
  ];
  return <div style={{ display:'flex', justifyContent:'space-around', alignItems:'center', padding:'12px 8px calc(12px + env(safe-area-inset-bottom))',
    background:'var(--navbg)', backdropFilter:'blur(18px)', WebkitBackdropFilter:'blur(18px)', borderTop:`1px solid ${T.line}` }}>
    {tabs.map(t=>{
      const on = t.id===active;
      return <div key={t.id} data-tour={'nav-'+t.id} onClick={()=>onNav&&onNav(t.id)} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4, flex:1, cursor:'pointer', WebkitTapHighlightColor:'transparent' }}>
        <Icon name={t.icon} size={23} color={on?T.volt:T.faint} sw={on?2.1:1.8} />
        <span style={{ fontFamily:'Hanken Grotesk, sans-serif', fontSize:11, fontWeight:on?700:500, color:on?T.text:T.muted }}>{t.label}</span>
      </div>;
    })}
  </div>;
}

Object.assign(window, { T, fmt, STATUS, Avatar, StatusChip, PlanTag, ProgressRing, Sparkbars, Icon, BottomNav });