/* Console interne — coquille (barre latérale du design dev-admin2.jsx), routage par le hash, session. */
const AdmCtx = React.createContext(null);
const useAdm = () => React.useContext(AdmCtx);
const ADM2_NAV = [
  ['Pilotage', [['home','Vue d\'ensemble','gauge'],['super','Supervision','pulse','supervision'],['aops','Opérations','list-checks']]],
  ['Partenaires', [['partners','Partenaires','buildings'],['queue','Dossiers de production','folder-simple-user','dossiers'],['deps','Dépôts','bank','depots']]],
  ['Catalogue', [['catalog','Services et tarifs','sliders-horizontal'],['incidents','Incidents et statut','warning-diamond','incidents']]],
  ['Support', [['tickets','Tickets','lifebuoy','tickets']]],
  ['Administration', [['staff','Équipe interne','identification-badge'],['audit','Journal d\'audit','clock-counter-clockwise'],['asettings','Paramètres','gear-six']]],
];
const A2_PARENT = {dossier:'queue', partner:'partners', newp:'partners', ticket:'tickets'};
const ROLES_STAFF = {super_admin:'Super admin', conformite:'Conformité', finance:'Finance', support:'Support'};

function A2Sidebar({page, moi, onQuitter, ouvert, fermer}){
  const cur = A2_PARENT[page]||page; const m = useMob();
  const nom = `${moi.staff.prenom} ${moi.staff.nom}`;
  const aside = <aside style={{width:248, flex:'none', height:'100%', background:'#113025', display:'flex', flexDirection:'column', ...(m ? {position:'fixed', left:0, top:0, bottom:0, zIndex:70, boxShadow:'0 0 40px rgba(0,0,0,.3)'} : {})}}>
    <div style={{height:64, flex:'none', display:'flex', alignItems:'center', padding:'0 18px', borderBottom:'1px solid rgba(255,255,255,.08)'}}><Brand sub="Admin" light/></div>
    <nav aria-label="Console" style={{flex:1, overflowY:'auto', padding:'12px 10px', display:'flex', flexDirection:'column', gap:14}}>{ADM2_NAV.map(([t, items])=><div key={t} style={{display:'flex', flexDirection:'column', gap:1}}>
      <span style={{fontWeight:700, fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(255,255,255,.42)', padding:'0 12px 6px'}}>{t}</span>
      {items.map(n=>{ const on = cur===n[0]; const nb = n[3] ? moi.compteurs?.[n[3]] : 0; return <button key={n[0]} className="lb" onClick={()=>{ aller(n[0]); fermer && fermer(); }} aria-current={on?'page':undefined} style={{display:'flex', alignItems:'center', gap:11, height:38, padding:'0 12px', border:0, borderRadius:12, cursor:'pointer', textAlign:'left', background:on?'rgba(159,224,198,.12)':'transparent', color:on?'#fff':'rgba(255,255,255,.66)', fontFamily:V.body, fontWeight:700, fontSize:13}}>
        <I n={n[2]} s={18} fill={on} c={on?'#9FE0C6':undefined}/><span style={{flex:1}}>{n[1]}</span>{nb > 0 && <span style={{fontSize:11, fontWeight:800, padding:'1px 7px', borderRadius:99, background:'rgba(255,255,255,.1)'}}>{nb}</span>}</button>; })}</div>)}</nav>
    <div style={{padding:14, display:'flex', alignItems:'center', gap:10, borderTop:'1px solid rgba(255,255,255,.08)'}}><Av n={nom} s={32}/><span style={{flex:1, minWidth:0, lineHeight:1.2}}><span style={{display:'block', fontWeight:700, fontSize:13, color:'#fff', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{nom}</span><span style={{display:'block', fontSize:11.5, color:'rgba(255,255,255,.5)'}}>{ROLES_STAFF[moi.staff.role]}</span></span>
      <button className="lb" aria-label="Se déconnecter" title="Se déconnecter" onClick={onQuitter} style={{border:0, background:'none', cursor:'pointer', display:'grid', placeItems:'center', width:32, height:32, borderRadius:10}}><I n="sign-out" s={18} c="rgba(255,255,255,.5)"/></button></div>
  </aside>;
  if(!m) return aside;
  return ouvert ? <><div onClick={fermer} style={{position:'fixed', inset:0, zIndex:65, background:'rgba(8,20,16,.45)'}}></div>{aside}</> : null;
}

function EnvAdmin(){ const {mode, setMode} = useAdm();
  const opt = (k, l) => { const on = mode===k; return <button key={k} role="radio" aria-checked={on} className="lb" onClick={()=>setMode(k)} style={{height:30, padding:'0 12px', borderRadius:10, border:0, cursor:'pointer', display:'flex', alignItems:'center', gap:7, whiteSpace:'nowrap', fontFamily:V.body, fontWeight:700, fontSize:12.5, background:on?(k==='test'?V.warnBg:V.mint):'transparent', color:on?(k==='test'?V.warn:V.accD):V.ink3}}>
    <span style={{width:8, height:8, borderRadius:99, background:k==='test'?'var(--warnDot)':'#2F8F6E'}}></span>{l}</button>; };
  return <div role="radiogroup" aria-label="Données affichées" title="Données affichées dans les écrans d'activité" style={{display:'flex', gap:3, padding:3, borderRadius:13, background:V.sub, border:`1px solid ${V.line}`}}>{opt('live','Production')}{opt('test','Sandbox')}</div>; }

function Recherche(){ const [q, setQ] = React.useState('');
  return <form onSubmit={e=>{ e.preventDefault(); if(!q.trim()) return; const v = q.trim(); if(/^DEP-/i.test(v)) aller('deps'); else if(/^tk_/.test(v)) aller('ticket', v); else { sessionStorage.setItem('lms_admin_q', v); aller(/^(ctr_|[A-Z]{2}\d)/i.test(v) ? 'aops' : 'partners'); window.dispatchEvent(new Event('lms-recherche')); } setQ(''); }} style={{width:340, maxWidth:'100%'}}>
    <Inp value={q} onChange={e=>setQ(e.target.value)} placeholder="Partenaire, dépôt, référence, ticket…" lead={<I n="magnifying-glass" s={16}/>} style={{height:40, background:V.sub}}/></form>; }

function AdminApp(){
  const [jeton, setJeton] = React.useState(lireJeton());
  const [moi, setMoi] = React.useState(null);
  const [mode, setModeState] = React.useState(() => { try { return sessionStorage.getItem('lms_admin_mode') || 'live'; } catch(e){ return 'live'; } });
  const setMode = (m) => { setModeState(m); try { sessionStorage.setItem('lms_admin_mode', m); } catch(e){} };
  const [dark, setDark] = useTheme(); const mob = useEstMobile(); const [nav, setNav] = React.useState(false);
  const route = useRoute('home');
  const [acces, setAcces] = React.useState(() => new URLSearchParams(location.search).get('jeton') ? 'definir' : 'connexion');
  const rechargerMoi = React.useCallback(() => api('GET', 'moi').then(setMoi).catch(() => {}), []);
  React.useEffect(() => { const f = () => { setJeton(null); setMoi(null); }; addEventListener('lms-deconnexion', f); return () => removeEventListener('lms-deconnexion', f); }, []);
  React.useEffect(() => { if(jeton) rechargerMoi(); }, [jeton]);
  React.useEffect(() => { if(!jeton) return; const t = setInterval(rechargerMoi, 60000); return () => clearInterval(t); }, [jeton]);
  const quitter = async () => { try { await api('POST', 'auth/deconnexion'); } catch(e){} ecrireJeton(null); setJeton(null); setMoi(null); };

  let corps;
  if(!jeton) corps = acces === 'definir' ? <Definir jeton={new URLSearchParams(location.search).get('jeton')} go={setAcces}/> : acces === 'oubli' ? <Oubli go={setAcces}/> : <Connexion onConnecte={()=>{ setJeton(lireJeton()); if(!location.hash) aller('home'); }} go={setAcces}/>;
  else if(!moi) corps = <div style={{height:'100%', display:'grid', placeItems:'center'}}><span className="kspin" style={{width:34, height:34, borderRadius:99, border:`3px solid ${V.line}`, borderTopColor:V.acc}}></span></div>;
  else {
    const P = {home:A2Home, super:AdmSuper, aops:A2Ops, partners:A2Partners, newp:A2NewPartner, partner:A2Partner, queue:AdmQueue, dossier:AdmDossier, deps:AdmDeps, catalog:A2Catalog, incidents:A2Incidents, tickets:A2Tickets, ticket:A2Tickets, staff:A2Staff, audit:A2Audit, asettings:A2Settings}[route.page] || A2Home;
    corps = <div style={{display:'flex', height:'100%', background:V.bg}}><A2Sidebar page={route.page} moi={moi} onQuitter={quitter} ouvert={nav} fermer={()=>setNav(false)}/>
      <main style={{flex:1, minWidth:0, display:'flex', flexDirection:'column'}}><header style={{height:64, flex:'none', display:'flex', alignItems:'center', gap:12, padding:mob?'0 12px':'0 24px', background:V.card, borderBottom:`1px solid ${V.line}`}}>
        {mob && <Btn kind="ghost" sm icon="list" label="Menu" onClick={()=>setNav(true)}/>}
        {!mob && <Badge tone="deep" icon="shield-check">Espace interne LeMultiservice</Badge>}<EnvAdmin/><span style={{flex:1}}></span>
        {!mob && <Recherche/>}
        <Btn kind="ghost" sm icon={dark?'sun':'moon'} label={dark?'Mode clair':'Mode sombre'} onClick={()=>setDark(!dark)}/>
        <Btn kind="ghost" icon="bell" label="Notifications" onClick={()=>aller('super')}/></header>
        {mode === 'test' && <div role="status" style={{flex:'none', display:'flex', alignItems:'center', justifyContent:'center', gap:8, height:32, background:V.warnBg, color:V.warn, fontWeight:700, fontSize:12.5, borderBottom:`1px solid ${V.line}`}}><I n="flask" s={15} fill/>Données sandbox : opérations de test des partenaires</div>}
        <div key={route.page + (route.param||'') + mode} style={{flex:1, minHeight:0, display:'flex'}}><P param={route.param}/></div></main></div>;
  }
  return <MobCtx.Provider value={mob}><AdmCtx.Provider value={{moi, rechargerMoi, mode, setMode, peut:(d)=>moi?.droits?.includes('*')||moi?.droits?.includes(d)}}><Toasts>
    <div style={{width:'100%', height:'100%', position:'relative', fontFamily:V.body, color:V.ink, background:V.bg, overflow:'hidden'}}>{corps}</div>
  </Toasts></AdmCtx.Provider></MobCtx.Provider>;
}
Object.assign(window, {AdmCtx, useAdm, ROLES_STAFF});
ReactDOM.createRoot(document.getElementById('app')).render(<AdminApp/>);