// ─── Root.jsx — Componente raíz y punto de entrada de la app ───

function Root(){
  const[updateReady,setUpdateReady]=useState(false);
  useEffect(()=>{
    const handler=()=>setUpdateReady(true);
    window.addEventListener('nexus-update',handler);
    return()=>window.removeEventListener('nexus-update',handler);
  },[]);
  const[tema,setTema]=useState(()=>getTheme());
  const TEMAS_CLAROS=["facebook_light"];
  const dm=!TEMAS_CLAROS.includes(tema.id);
  const toggleDm=()=>{setTemaById(dm?"facebook_light":"facebook");};
  const setTemaById=(id)=>{const t=THEMES[id]||THEMES.facebook;setTema(t);saveTheme(id);};
  const saved=loadSession();
  const[session,setSession]=useState(saved);
  const[vista,setVista]=useState(()=>{
    if(!saved||!saved.rol)return"login";
    if(saved.rol==="admin_nexus")return"admin_nexus";
    return VISTAS_POR_ROL[saved.rol]||"cliente";
  });
  const handleLogin=(s)=>{
    const sesion={...s, rol:s.rol||"propietario"};
    setSession(sesion);
    saveSession(sesion);
    const v=sesion.rol==="admin_nexus"?"admin_nexus":VISTAS_POR_ROL[sesion.rol]||"cliente";
    setVista(v);
  };
  const handleSalir=()=>{clearSession();setSession(null);setVista("login");};
  return(
    <>
      {updateReady&&<div style={{position:"fixed",bottom:16,left:"50%",transform:"translateX(-50%)",zIndex:9999,background:"#1e3a5f",color:"#fff",padding:"10px 20px",borderRadius:10,fontSize:13,fontWeight:700,boxShadow:"0 4px 20px rgba(0,0,0,.5)",display:"flex",alignItems:"center",gap:10,whiteSpace:"nowrap"}}>
        🆕 Nueva versión disponible
        <button onClick={()=>window.location.reload()} style={{background:"#f59e0b",color:"#000",border:"none",borderRadius:6,padding:"4px 12px",fontWeight:800,cursor:"pointer",fontSize:12}}>Actualizar</button>
        <button onClick={()=>setUpdateReady(false)} style={{background:"none",border:"none",color:"#8ab4d8",cursor:"pointer",fontSize:16,lineHeight:1}}>✕</button>
      </div>}
      {vista==="login"&&<Login dm={dm} tema={tema} onLogin={handleLogin} onAdmin={()=>{saveSession({rol:"admin_nexus"});setVista("admin_nexus");}}/>}
      {vista==="admin_nexus"&&<AdminNexus dm={dm} tema={tema} setTema={setTemaById} toggleDm={toggleDm} onSalir={()=>{clearSession();setVista("login");setSession(null);}}/>}
      {vista==="cliente"&&session&&<ClienteApp dm={dm} tema={tema} setTema={setTemaById} toggleDm={toggleDm} session={session} onSalir={handleSalir}/>}
      {(vista==="mesera"||vista==="mesas")&&session&&<MeseraApp dm={dm} tema={tema} setTema={setTemaById} toggleDm={toggleDm} session={session} onSalir={handleSalir}/>}
      {vista==="cajero"&&session&&<CajeroApp dm={dm} tema={tema} setTema={setTemaById} toggleDm={toggleDm} session={session} onSalir={handleSalir}/>}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root/>);