// 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 }) {
  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]);
  if (pic) return <img src={pic} alt={name||''} style={{ width:size, height:size, borderRadius:size, flexShrink:0, objectFit:'cover',
    border: ring?`1.5px solid ${c}`:`1px solid ${c}33` }} />;
  return <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` }}>{ini}</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 '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 }) {
  const tabs = [
    { id:'home', icon:'home', label:'Accueil' },
    { id:'leads', icon:'leads', label:'Leads' },
    { id:'sessions', icon:'calendar', label:'Séances' },
    { id:'gains', icon:'wallet', label:'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:10, fontWeight:on?700:500, color:on?T.text:T.faint }}>{t.label}</span>
      </div>;
    })}
  </div>;
}

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