/* Desktop navigation around independently vendored mobile-main controllers.
   Transactions, approvals and chat retain one shared session ledger. */
const {useState,useEffect,useRef}=React;

const webIcon=(name,size=20)=><img src={`../assets/icons/black/${name}.svg`} width={size} height={size} alt=""/>;
function DesktopNavigation(){
 const [route,setRoute]=useState(location.pathname.split('/').pop().replace(/\.html$/,''));
 const [expanded,setExpanded]=useState(false),[profile,setProfile]=useState(false),[count,setCount]=useState(0),[chat,setChat]=useState(false);
 const timer=useRef(),menu=useRef();
 const [person,setPerson]=useState({first:'Rivka',last:'Lipson'});
 useEffect(()=>{
  const refresh=()=>{window.desktopMainState.then(m=>setCount(m.unreadBriefCount()));try{setPerson(JSON.parse(sessionStorage.getItem('lucid-personal'))||{first:'Rivka',last:'Lipson'});}catch{}};
  refresh();setChat(!!document.querySelector('.ld-chat-layer'));window.addEventListener('brief-read-change',refresh);window.addEventListener('storage',refresh);
  const update=()=>{setProfile(false);setRoute(location.pathname.split('/').pop().replace(/\.html$/,''));setChat(!!document.querySelector('.ld-chat-layer'));refresh();};document.addEventListener('web-route-change',update);
  const observer=new MutationObserver(()=>setChat(!!document.querySelector('.ld-chat-layer')));
  observer.observe(document.body,{childList:true});
  const outside=e=>{if(!menu.current?.contains(e.target))setProfile(false);};document.addEventListener('pointerdown',outside);
  return()=>{document.removeEventListener('web-route-change',update);observer.disconnect();clearTimeout(timer.current);window.removeEventListener('brief-read-change',refresh);window.removeEventListener('storage',refresh);document.removeEventListener('pointerdown',outside);};
 },[]);
 const hover=value=>{clearTimeout(timer.current);timer.current=setTimeout(()=>setExpanded(value),value?180:160);};
 const current=route==='home'?'home':['invest-review','security-review','trade-review'].includes(route)?'invest':route==='transfer-review'?'transfer':route==='activity'?'activity':null;
 const item=(key,label,icon,href)=><a href={href} className="web-nav-item" aria-label={label} aria-current={current===key?'page':undefined} title={!expanded?label:undefined}>{webIcon(icon)}<span>{label}</span></a>;

 return <>
  <a className="web-skip" href="#web-content" onClick={e=>{e.preventDefault();document.querySelector('.web-page-host:not([hidden])>.web-side-page,.web-page-host:not([hidden])>main')?.focus();}}>Skip to content</a>
  <aside className="web-sidebar" data-expanded={expanded} onMouseEnter={()=>hover(true)} onMouseLeave={()=>hover(false)} onFocus={e=>{if(e.target.matches(':focus-visible')){clearTimeout(timer.current);setExpanded(true);}}} onBlur={e=>{if(!e.currentTarget.contains(e.relatedTarget))hover(false);}} aria-label="Desktop navigation">
   <a className="web-brand" href="home.html" aria-label="Yoshi home"><img src="../assets/lucid-yoshi-mark.svg" width="32" height="32" alt=""/></a>
   <nav aria-label="Main navigation">{item('home','Home','home','home.html')}{item('invest','Invest','trade','invest-review.html')}{item('transfer','Transfer','transfer','transfer-review.html')}{item('activity','Activity','list','activity.html')}</nav>
   <div className="web-profile" ref={menu} onKeyDown={e=>{if(e.key==='Escape'){setProfile(false);menu.current.querySelector('button')?.focus();}}}>
    <button className="web-profile-trigger" aria-label={`${person.first} ${person.last}, profile and settings`} aria-haspopup="true" aria-expanded={profile} onClick={()=>setProfile(!profile)}><span className="web-avatar">{person.first?.[0]}{person.last?.[0]}</span><span className="web-profile-name">{person.first} {person.last}<small>Individual account</small></span></button>
    {profile&&<nav className="web-profile-menu" aria-label="Profile options"><div className="web-profile-identity"><strong>{person.first} {person.last}</strong><small>Individual account</small></div><a href="menu.html">Profile &amp; settings</a><a href="menu.html#security">Security &amp; login</a><a href="menu.html#notifications">Notifications</a><a href="menu.html#documents">Statements &amp; documents</a><a href="menu.html#help">Help &amp; support</a><a href="menu.html#privacy">Privacy &amp; legal</a><a href="menu.html#signed-out">Log out</a></nav>}
   </div>
  </aside>
  <header className="web-topbar"><a href="invest-review.html">{webIcon('trade')}Trade</a><a href="transfer-review.html">{webIcon('transfer')}Transfer</a><a className="web-bell" href="briefs.html" aria-label={count?`Briefs, ${count} unread`:'Briefs'}>{webIcon('bell')}{count>0&&<span className="web-unread-dot"/>}</a></header>
  <div className="web-mobile-fallback"><img src="../assets/lucid-yoshi-mark.svg" width="40" alt="Yoshi"/><h1>Continue on a larger screen</h1><p>Widen your browser window, or use the mobile app to continue.</p></div>
 </>;
}
const main=document.querySelector('main');if(main)main.tabIndex=-1;
ReactDOM.createRoot(document.querySelector('#web-navigation')).render(<DesktopNavigation/>);